/* Tablet gameplay: keep touch gestures inside the minigame surface instead of moving Safari/the page. */
body.minigame-focus{overscroll-behavior:none}
body.minigame-focus #center,body.minigame-focus #game-content,body.minigame-focus .challenge,body.minigame-focus .challenge *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
body.minigame-focus #game-content,body.minigame-focus #game-content *{touch-action:none!important}

/* Timer warning is a soft field of light behind the play surface, not a flashing rectangular stroke. */
.time-yellow,.time-red{position:relative;isolation:isolate;animation:none!important;box-shadow:none!important;outline:0!important}
.time-yellow::before,.time-red::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-4%;right:-4%;top:7%;bottom:7%;border-radius:40%;filter:blur(22px);opacity:0;animation:tt-time-glow .82s ease-out both}
.board-stage.time-yellow::before,.board-stage.time-red::before{left:1%;right:1%;top:8%;bottom:14%;filter:blur(28px)}
.time-yellow::before{background:radial-gradient(ellipse at center,#f4d46b55 0%,#f4d46b28 40%,#f4d46b00 72%)}
.time-red::before{background:radial-gradient(ellipse at center,#ff5f5f66 0%,#ff5f5f2f 40%,#ff5f5f00 72%)}
@keyframes tt-time-glow{0%{opacity:0;transform:scale(.96)}35%{opacity:1;transform:scale(1)}100%{opacity:.08;transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.time-yellow::before,.time-red::before{animation:none;opacity:.55}.time-yellow,.time-red{outline:0!important}}

/* Match perspective follows the viewer; lobby teams keep their fixed positions. */
.teams-panel{display:flex;flex-direction:column}
.teams-panel>.balance-note{order:-5}
body.in-match[data-playing-team="X"] .teams-panel>.team-card.x,body.in-match[data-playing-team="O"] .teams-panel>.team-card.o{order:0}
body.in-match[data-playing-team="X"] .teams-panel>.team-card.o,body.in-match[data-playing-team="O"] .teams-panel>.team-card.x{order:1}
.teams-panel>.spectator-card{order:2}.teams-panel>#start{order:3}.teams-panel>.lobby-status{order:4}.teams-panel>.rule-note{order:5}
body[data-playing-team="X"] .team-card.x .team-heading h3::before,body[data-playing-team="O"] .team-card.o .team-heading h3::before{content:"YOUR TEAM";display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:21px;line-height:1;color:var(--roster-color,var(--lime));letter-spacing:.08em;margin-bottom:5px}
.momentum-labels span{display:flex;flex-direction:column;gap:2px;min-width:42%;font-size:12px}
body[data-playing-team="X"] #meter-x::before,body[data-playing-team="O"] #meter-o::before{content:"YOUR TEAM";font-family:'Barlow Condensed',Impact,sans-serif;font-size:20px;line-height:1;color:var(--lime);letter-spacing:.06em}
body[data-playing-team="X"] #meter-o::before,body[data-playing-team="O"] #meter-x::before{content:"OPPOSITION";font-size:9px;color:var(--muted);letter-spacing:.12em}
body[data-playing-team="O"] .momentum-labels #meter-o{order:-1;text-align:left;align-items:flex-start}body[data-playing-team="O"] .momentum-labels #meter-x{text-align:right;align-items:flex-end}
body[data-playing-team="X"] .momentum-labels #meter-x{text-align:left;align-items:flex-start}body[data-playing-team="X"] .momentum-labels #meter-o{text-align:right;align-items:flex-end}
body[data-playing-team="O"] .momentum-track{transform:scaleX(-1)}
.matchup-side.x{order:0}.matchup .versus{order:1}.matchup-side.o{order:2}body[data-playing-team="O"] .matchup-side.o{order:0}body[data-playing-team="O"] .matchup-side.x{order:2}
body[data-playing-team="O"] .champion-reel.o{order:-1}

/* In-app dropdowns: same visual/control model for avatar options and host controls; no OS picker sheet. */
.tt-hidden-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}
.tt-host-controls{display:grid;gap:10px}.tt-select,.tt-choice-row{position:relative}.tt-select-button,.tt-select-trigger{width:100%;min-height:42px;border:1px solid var(--line);border-radius:6px;background:#17232d;color:var(--ink);font:inherit;font-size:11px;font-weight:700;text-align:left;padding:11px 13px;cursor:pointer}
.tt-select-button:hover:not(:disabled),.tt-select-trigger:hover{border-color:#678173;background:#1b2a34}.tt-select-button.danger{border-color:#ff857655;color:#ffaaa0}.tt-select-button.danger:hover:not(:disabled){border-color:var(--coral);background:#ff857610}
.tt-select-menu{display:none;position:absolute;z-index:120;left:0;right:0;top:calc(100% + 5px);max-height:240px;overflow:auto;padding:5px;background:#101a22;border:1px solid #3a4b56;border-radius:8px;box-shadow:0 18px 45px #000c}.tt-select-menu.open{display:grid}.tt-select-menu button{background:transparent;padding:10px 11px;text-align:left;border-radius:5px;font-size:11px;color:var(--ink)}.tt-select-menu button:hover,.tt-select-menu button:focus-visible{background:#66f4db15;color:var(--cyan)}.tt-select-menu.danger button:hover,.tt-select-menu.danger button:focus-visible{background:#ff857615;color:#ffaaa0}
.avatar-choice .tt-choice-row{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;align-items:center;gap:6px}.avatar-choice .tt-select-trigger{display:flex;align-items:center;justify-content:space-between;text-align:left}.avatar-choice .tt-select-trigger::after{content:"▾";color:var(--muted);margin-left:8px}.avatar-choice .tt-select-menu{left:48px;right:48px;top:100%}.tt-kick-label{margin:8px 0 0!important}
@media(max-width:800px){.teams-panel{display:grid}.tt-select-menu{max-height:min(240px,42dvh)}}


/* Keep avatar labels readable inside narrow character cards. */
.avatar-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:start}
.avatar-choice{align-content:start}
.avatar-choice .tt-choice-row{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:6px;min-width:0}
.avatar-choice .tt-choice-row>button{width:36px;min-width:36px;min-height:44px;padding:0}
.avatar-choice .tt-select-trigger{display:block;position:relative;min-width:0;min-height:44px;padding:12px 28px 12px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal;line-height:1.4;font-size:12px;text-align:left}
.avatar-choice .tt-select-trigger::after{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0}
.avatar-choice .tt-select-menu{left:0;right:0;top:calc(100% + 5px)}
.avatar-choice .tt-select-menu button{min-width:0;min-height:40px;font-size:12px;line-height:1.4;white-space:normal;overflow-wrap:normal;word-break:normal}
.avatar-editor{container-type:inline-size}
@container(max-width:260px){
 .avatar-choice .tt-choice-row{grid-template-columns:minmax(0,1fr)!important}
 .avatar-choice .tt-choice-row>button[data-avatar-step]{display:none}
}

/* Frame the entire board with the warning glow. */
.board.time-yellow::before,.board.time-red::before,.shared-tiles.time-yellow::before,.shared-tiles.time-red::before{inset:-16px;border-radius:30px;filter:blur(14px);background:transparent;border:10px solid;}
.board.time-yellow::before,.shared-tiles.time-yellow::before{border-color:#f4d46b80;box-shadow:0 0 38px 12px #f4d46b55,inset 0 0 28px #f4d46b30}
.board.time-red::before,.shared-tiles.time-red::before{border-color:#ff5f5f90;box-shadow:0 0 38px 12px #ff5f5f66,inset 0 0 28px #ff5f5f40}
.watch-choice{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:5px;align-items:center;margin-top:8px;min-width:0}
.watch-choice>button{min-width:0;min-height:42px;border:1px solid var(--line);border-radius:6px;background:#17232d;padding:5px;color:var(--ink)}
.watch-choice>button[data-watch-step]{font-size:24px}.watch-choice>.tt-select-trigger{font-size:10px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;text-align:center;padding:8px 4px}.watch-choice>.tt-select-menu{left:0;right:0;top:100%}

/* Keep team identity visible in rosters, names and team controls. */
.team-card.x{--roster-color:var(--cyan);border-color:#66f4db66;background:linear-gradient(145deg,#66f4db12,#111921 80%)}
.team-card.o{--roster-color:var(--coral);border-color:#ff857666;background:linear-gradient(145deg,#ff857612,#111921 80%)}
.team-card.x .team-heading,.team-card.o .team-heading{border-color:color-mix(in srgb,var(--roster-color) 30%,transparent)}
.team-card.x .team-heading h3,.team-card.o .team-heading h3,.team-card.x .roster .player>span[title],.team-card.o .roster .player>span[title]{color:var(--roster-color)}
.team-card.x [data-team],.team-card.o [data-team]{color:var(--roster-color);border-color:var(--roster-color)}
.team-card.o .primary{background:var(--coral);color:#2c130d}.team-card.o .primary:hover{background:#ffb3a9}
.matchup-side.x .matchup-person strong,.champion-reel.x b{color:var(--cyan)}.matchup-side.o .matchup-person strong,.champion-reel.o b{color:var(--coral)}
.player-name.x,.tt-select-menu .team-option.x,.watch-choice>.tt-select-trigger.x{color:var(--cyan)}
.player-name.o,.tt-select-menu .team-option.o,.watch-choice>.tt-select-trigger.o{color:var(--coral)}
/* The viewer's side is also first in the series score strip. */
.series-team.x{order:0}.series-caption{order:1}.series-team.o{order:2}
body[data-playing-team="O"] .series-team.o{order:0;flex-direction:row-reverse}
body[data-playing-team="O"] .series-team.x{order:2;flex-direction:row-reverse}