.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:1000;}
		#chatModal.modal-overlay{z-index:6000;}
		.chat-match-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:8px 44px 8px 12px;background:linear-gradient(90deg,color-mix(in srgb,var(--away,#e2e8f0) 18%,#fff),#fff 42%,#fff 58%,color-mix(in srgb,var(--home,#e2e8f0) 18%,#fff));}
		.chat-match-side{display:flex;align-items:center;gap:6px;min-width:0;}
		.chat-match-side-home{justify-content:flex-end;}
		.chat-match-logo{width:32px;height:32px;min-width:32px;min-height:32px;object-fit:contain;object-position:center;flex:0 0 32px;background:#fff;border-radius:8px;}
		.watch-tab-logo{width:16px;height:16px;min-width:16px;min-height:16px;object-fit:contain;object-position:center;flex:0 0 16px;}
		.watch-tab-logo.is-round{border-radius:9999px;}
		.chat-match-abbr{font-weight:800;font-size:15px;letter-spacing:.02em;white-space:nowrap;color:#0f172a;}
		.chat-match-mid{text-align:center;min-width:0;}
		.chat-match-league{font-size:10px;font-weight:800;letter-spacing:.08em;color:#64748b;}
		.chat-match-score{font-size:18px;font-weight:800;line-height:1.1;color:#0f172a;font-variant-numeric:tabular-nums;}
		.chat-match-score span{margin:0 4px;color:#94a3b8;font-weight:700;}
		.chat-match-clock{font-size:12px;color:#64748b;white-space:nowrap;}
		#chatForm{gap:8px;}
		#chatInput{min-width:0;}
		#chatForm button{flex:0 0 auto;font-weight:700;border-radius:10px;}
		/* Other modals still center with the shared transform. Watch must not:
		   iOS Safari drops an iframe whose ancestor has a transform, or whose
		   own top/width/height are written from script, when the phone rotates.
		   The iframe stays width/height 100%. A wrapper shifts the page. */
		.modal-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:95vw;height:80vh;max-width:900px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);}
		.watch-modal-box{display:flex;flex-direction:column;}
		#fsModal .watch-modal-box{
			top:0;
			right:0;
			bottom:0;
			left:0;
			transform:none;
			margin:auto;
			width:min(960px, calc(100% - 16px));
			height:calc(100% - 16px);
			max-width:960px;
			max-height:calc(100% - 16px);
			background:#000;
			container-type:inline-size;
		}
		#watchTabsBar{
			display:none;
			align-items:center;
			position:relative;
			flex:0 0 auto;
			width:100%;
			box-sizing:border-box;
			padding-right:calc(48px + env(safe-area-inset-right));
			background:#fff;
			border-bottom:1px solid #e5e7eb;
			z-index:2;
		}
		.watch-tabs-arrow{
			flex:0 0 auto;
			align-self:center;
			width:36px;
			height:36px;
			margin:4px;
			padding:0;
			border:1px solid #d1d5db;
			border-radius:8px;
			background:#fff;
			color:#111827;
			font-size:22px;
			line-height:1;
			cursor:pointer;
		}
		.watch-tabs-arrow:focus-visible,
		#watchTabsWrap [data-watch-tab]:focus-visible{
			outline:3px solid #2563eb;
			outline-offset:2px;
		}
		#watchTabsWrap{
			display:flex;
			flex:1 1 auto;
			flex-wrap:nowrap;
			align-items:center;
			gap:8px;
			min-width:0;
			box-sizing:border-box;
			margin:0;
			padding:8px 4px;
			overflow-x:auto;
			overflow-y:hidden;
			overscroll-behavior-x:contain;
			-webkit-overflow-scrolling:touch;
			scrollbar-width:thin;
			background:#fff;
		}
		#watchTabsWrap [data-watch-tab]{
			flex:0 0 auto;
			display:inline-flex;
			flex-direction:column;
			align-items:flex-start;
			justify-content:flex-start;
			gap:2px;
			padding:6px 10px;
			border:1px solid #d1d5db;
			border-radius:12px;
			background:#fff;
			color:#111827;
			font-size:12px;
			line-height:1.2;
			cursor:pointer;
			text-align:left;
			white-space:nowrap;
		}
		#watchTabsWrap [data-watch-tab].is-on{
			background:#111827;
			color:#fff;
			border-color:#111827;
		}
		#watchTabsWrap [data-watch-main]{
			display:inline-flex;
			align-items:center;
			gap:6px;
			white-space:nowrap;
		}
		#watchTabsWrap [data-watch-team]{
			font-weight:600;
			white-space:nowrap;
		}
		#watchTabsWrap [data-watch-score]{
			white-space:nowrap;
			flex:0 0 auto;
			font-weight:800;
		}
		#watchTabsWrap [data-watch-clock]{
			font-size:10px;
			color:#6b7280;
			white-space:nowrap;
			line-height:1.2;
		}
		#watchTabsWrap [data-watch-tab].is-on [data-watch-clock]{color:#e5e7eb;}
		#watchTabsWrap [data-watch-final="1"]{opacity:0.86;}
		#watchFrameWrap{
			position:relative;
			flex:1 1 auto;
			min-height:0;
			width:100%;
			background:#000;
			overflow:hidden;
		}
		/* Strikeout draws a 16:9 player under a header that grows when the
		   title wraps, then "Game Tags" under the player. The visible window
		   is a band that stays inside the player for both a short title and a
		   long one. zoom enlarges that band to fill the modal. It is not a
		   transform, and the iframe element stays width/height 100%, so a
		   rotation only reflows CSS. The shift is tall so the framed page
		   does not grow a scrollbar and shove the player down. */
		#watchFrameShift{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
		#fsModal.watch-open:not(.map-mode) #watchFrameWrap{
			flex:1 1 auto;
			min-height:0;
			height:auto;
			max-height:none;
			container-type:size;
		}
		#fsModal.watch-open:not(.map-mode) #watchFrameShift{
			--watch-vtop:284px;
			--watch-cut:96px;
			--watch-vw:calc(100cqw - 3rem);
			--watch-vh:calc(0.5625 * var(--watch-vw));
			--watch-band:calc(var(--watch-vh) - var(--watch-cut));
			--watch-zoom:max(100cqh / var(--watch-band), 100cqw / var(--watch-vw));
			width:100cqw;
			height:2400px;
			zoom:var(--watch-zoom);
			top:calc(-1 * var(--watch-vtop));
			left:calc(-1.5rem - (var(--watch-vw) - 100cqw / var(--watch-zoom)) / 2);
		}
		@container (max-width:359px){
			#fsModal.watch-open:not(.map-mode) #watchFrameShift{--watch-vtop:340px;--watch-cut:96px;}
		}
		@container (min-width:360px) and (max-width:386px){
			#fsModal.watch-open:not(.map-mode) #watchFrameShift{--watch-vtop:304px;--watch-cut:80px;}
		}
		@container (min-width:749px){
			#fsModal.watch-open:not(.map-mode) #watchFrameShift{--watch-vtop:248px;--watch-cut:56px;}
		}
		#fsModalFrame{
			position:absolute;
			inset:0;
			width:100%;
			height:100%;
			border:0;
			background:#000;
		}
		#watchLoading{
			display:none;
			position:absolute;
			inset:0;
			z-index:3;
			align-items:center;
			justify-content:center;
			color:#e5e7eb;
			font:600 15px/1.3 system-ui,sans-serif;
			background:rgba(0,0,0,.55);
			pointer-events:none;
		}
		#watchFrameWrap.is-loading #watchLoading{display:flex;}
		.modal-close{position:absolute;right:8px;top:6px;font-size:20px;line-height:20px;padding:4px 8px;cursor:pointer;z-index:2000;background:#fff;border-radius:4px;border:1px solid #e5e7eb;box-shadow:0 2px 6px rgba(0,0,0,.15);}
		#fsModal .modal-close{
			top:max(6px, env(safe-area-inset-top));
			right:max(8px, env(safe-area-inset-right));
		}
		@media(min-width:768px){.modal-box{width:85vw;height:85vh;}}
		@media(max-width:640px){
			.modal-box{width:94vw;height:88vh;}
			#chatModal .modal-box{width:100%;height:100%;height:100dvh;max-width:none;border-radius:0;top:0;left:0;transform:none;}
			#chatForm{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
		}
		/* Venue maps share the watch modal. Phone portrait should be the map,
		   not a short strip with a margin around it. */
		#fsModal.map-mode #watchFrameWrap{
			flex:1 1 auto;
			min-height:0;
			width:100%;
		}
		#fsModal.map-mode .modal-close{
			top:max(8px, env(safe-area-inset-top));
			right:max(8px, env(safe-area-inset-right));
		}
		@media(max-width:640px){
			#fsModal.map-mode .watch-modal-box{
				width:100%;
				height:100%;
				max-width:none;
				max-height:none;
				border-radius:0;
				top:0;
				right:0;
				bottom:0;
				left:0;
				transform:none;
				margin:0;
				background:#111;
			}
		}
		@media(min-width:641px){
			#fsModal.map-mode .watch-modal-box{
				height:min(85vh, calc(100% - 16px));
				max-height:calc(100% - 16px);
			}
		}