/* Approved presentation around the existing production controls. */
/* Ticket purchase stays compact and uses the account palette. */
html.astra-dialog-ui body #kt-store-modal{padding:16px;align-items:center}
html.astra-dialog-ui body #kt-store-modal .kt-modal__card{box-sizing:border-box;width:560px!important;max-width:100%!important;max-height:calc(100dvh - 32px);overflow:auto;padding:28px!important;background:#19171d!important;border-color:#645765!important;color:#f3edf5!important}
html.astra-dialog-ui body #kt-store-modal .kt-modal__title{color:#f3edf5!important}
html.astra-dialog-ui body #kt-store-modal .kt-modal__sub{color:#d0c5d4!important;font-weight:400}
html body #kt-store-modal .kt-qty-head{font:600 13px/1.5 Archivo,Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:left;color:#d0c5d4;opacity:1;margin:2px 0 7px}
html body #kt-store-modal .kt-qty-row{gap:7px;margin:10px 0 12px}
html body #kt-store-modal .kt-qty{min-width:0;min-height:110px;padding:14px 3px 9px;gap:4px;border:1px solid #77667b;border-radius:7px;background:#242029;color:#f3edf5;box-shadow:none}
html body #kt-store-modal .kt-qty:hover{border-color:#edce8c;background:#302935}
html body #kt-store-modal .kt-qty.on{background:#e4c277;border-color:#e4c277;color:#241b21;box-shadow:none}
html body #kt-store-modal .kt-qty__n{font:700 25px/1.1 Archivo,Arial,sans-serif;color:inherit}
html body #kt-store-modal .kt-qty__n+span{font:500 10px/1.4 Archivo,Arial,sans-serif!important;color:inherit;opacity:1!important;letter-spacing:0!important}
html body #kt-store-modal .kt-qty__tot{font:600 13px/1.4 Archivo,Arial,sans-serif;color:inherit;margin-top:1px}
html body #kt-store-modal .kt-qty__save{font:600 11px/1.3 Archivo,Arial,sans-serif;color:#8ce2b9;letter-spacing:0}
html body #kt-store-modal .kt-qty.on .kt-qty__save{color:#225339}
html body #kt-store-modal .kt-qty>span:first-child:not(.kt-qty__n){font:700 9px/1.5 Archivo,Arial,sans-serif!important;top:-9px!important;letter-spacing:0!important;background:#e4c277!important;color:#241b21!important}
html.astra-dialog-ui body #kt-store-modal .kt-store-cta{min-height:46px;padding:12px 14px;border:1px solid #e4c277;border-radius:6px;background:#e4c277;color:#241b21;font:600 14px/1.5 Archivo,Arial,sans-serif;box-shadow:none}
html body #kt-store-modal .kt-store-note{font:400 12px/1.7 Archivo,Arial,sans-serif;color:#c9bdce;opacity:1}
html body #kt-store-modal .kt-store-note a{color:#edce8c}
html.astra-dialog-ui body #kt-store-modal #ktStoreClose{display:block;margin:18px auto 0;min-width:130px}
@media(max-width:480px){html.astra-dialog-ui body #kt-store-modal{padding:12px}html.astra-dialog-ui body #kt-store-modal .kt-modal__card{padding:20px!important;max-height:calc(100dvh - 24px)}html body #kt-store-modal .kt-qty-row{gap:5px}html body #kt-store-modal .kt-qty__tot{font-size:11px}html body #kt-store-modal .kt-qty__n{font-size:22px}}
/* Account entry has its own neutral palette, independent of the chosen show. */
@media(max-width:480px) and (max-height:650px){html.astra-dialog-ui body #kt-store-modal .kt-modal__card{padding:18px!important}html.astra-dialog-ui body #kt-store-modal .kt-modal__sub{font:400 14px/1.5 Archivo,Arial,sans-serif!important;margin-bottom:16px}html body #kt-store-modal .kt-qty{min-height:100px}html body #kt-store-modal .kt-store-note{font:400 12px/1.5 Archivo,Arial,sans-serif!important;margin-top:8px!important}html.astra-dialog-ui body #kt-store-modal #ktStoreClose{margin-top:12px}}
@media(prefers-reduced-motion:reduce){html body #kt-store-modal .kt-qty{transition:none}}
html.astra-dialog-ui body #kt-acct.kt-auth-entry{padding:16px;align-items:center}
html.astra-dialog-ui body #kt-acct.kt-auth-entry .kt-modal__card{width:460px;max-width:100%!important;max-height:calc(100dvh - 32px);padding:28px!important;background:#19171d!important;border:1px solid #645765!important;border-radius:12px!important;color:#f3edf5!important;overflow:auto}
.kt-auth-masthead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.kt-auth-brand{display:flex;gap:9px;align-items:center;font:600 11px Archivo,sans-serif;letter-spacing:.1em;color:#d8c8a4}
.kt-auth-brand img{width:25px;height:25px}
html body #kt-acct .kt-auth-close{width:32px;height:32px;min-height:32px;border:1px solid #645765;background:transparent;color:#d8cfdc;border-radius:5px;padding:0;font:400 22px/1 Arial,sans-serif}
html.astra-dialog-ui body #kt-acct.kt-auth-entry .kt-modal__title{font:800 29px/1.15 Anybody,Arial,sans-serif!important;letter-spacing:-.025em!important;margin:0 0 10px;color:#f3edf5!important}
html.astra-dialog-ui body #kt-acct.kt-auth-entry .kt-modal__sub{font:400 14px/1.5 Archivo,sans-serif;color:#c9becd!important;margin:0 0 22px}
html body #kt-acct .kt-auth-tabs{background:transparent;border-bottom:1px solid #4e4453;border-radius:0;padding:0;gap:24px;margin:0 0 20px}
html body #kt-acct .kt-auth-tab{flex:none;min-height:40px;padding:10px 0;background:transparent;color:#bfb2c5;border:0;border-bottom:2px solid transparent;border-radius:0;font:600 14px Archivo,sans-serif;letter-spacing:0}
html body #kt-acct .kt-auth-tab.on{color:#edce8c;background:transparent;border-bottom-color:#edce8c}
html body #kt-acct .kt-acct-field{margin:0 0 14px}
html body #kt-acct .kt-acct-form{gap:0;margin:0}
#kt-acct[data-auth-mode="signup"] #acctSwitch{display:none}
html body #kt-acct .kt-acct-field label{display:block;font:500 13px Archivo,sans-serif;text-transform:none;letter-spacing:0;color:#dfd5e3;opacity:1;margin-bottom:7px}
html body #kt-acct .kt-acct-field input{box-sizing:border-box;min-height:44px;width:100%;margin:0;padding:11px 12px;border:1px solid #77667b;border-radius:6px;background:#242029;color:#f6f0f8;font:400 16px/1.3 Archivo,sans-serif;box-shadow:none}
html body #kt-acct input::placeholder{color:#b3a6bd;opacity:1}
html body #kt-acct input:focus-visible{outline:2px solid #edce8c!important;outline-offset:2px!important}
.kt-auth-password{position:relative}
html body #kt-acct .kt-auth-password input{padding-right:65px}
html body #kt-acct .kt-auth-password button{position:absolute;right:4px;top:2px;min-height:40px;padding:0 10px;border:0;background:transparent;color:#edce8c;font:600 12px Archivo,sans-serif}
html body #kt-acct .kt-acct-hint{color:#bfb2c8;opacity:1;font:400 12px/1.5 Archivo,sans-serif;margin:6px 0 0}
.kt-auth-referral{margin:0 0 16px}
.kt-auth-referral summary{font:500 13px/1.4 Archivo,sans-serif;color:#d6c8dd;cursor:pointer;padding:8px 0;min-height:36px}
html body #kt-acct .kt-acct-field--opt{border:0;padding:7px 0 0;margin:0;background:transparent}
html body #kt-acct #acctRefMsg:empty{display:none}
html body #kt-acct #acctErr{color:#ffb7bd;min-height:0;font:500 13px/1.5 Archivo,sans-serif;margin:0}
html body #kt-acct #acctErr:not(:empty){padding:10px 0 14px}
html body #kt-acct #acctPerk{color:#d9c59c;font:400 12px/1.5 Archivo,sans-serif;text-align:left!important;margin:0 0 12px!important}
html body #kt-acct #acctPrimary{min-height:46px;border:1px solid #e4c277;border-radius:6px;background:#e4c277;color:#241b21;font:600 14px Archivo,sans-serif;box-shadow:none;text-shadow:none;margin-top:0!important}
html body #kt-acct .kt-auth-switch{color:#c5b7ce;opacity:1;font:400 13px/1.6 Archivo,sans-serif;margin-top:16px}
html body #kt-acct .kt-auth-switch button{color:#edce8c;font:600 13px Archivo,sans-serif}
html.astra-dialog-ui body #kt-acct.kt-auth-entry #acctAlt{border:0!important;width:100%;min-height:36px;padding:8px!important;margin:14px 0 0;color:#c5b7ce!important;font:400 13px Archivo,sans-serif!important}
#kt-acct.kt-auth-entry .kt-store-row{display:none}
@media(max-width:480px),(max-height:650px){
 html.astra-dialog-ui body #kt-acct.kt-auth-entry{padding:10px}
 html.astra-dialog-ui body #kt-acct.kt-auth-entry .kt-modal__card{max-height:calc(100dvh - 20px);padding:22px!important}
 .kt-auth-masthead{margin-bottom:18px}
}
:root{--astra-review-height:0px!important}
.astra-review-bar,.astra-replay-entrance{display:none!important}
html body :is(#profile,#tournament){background:#121215;color:#f0ece5;font-family:Archivo,Arial,sans-serif}
html body #profile>.stage-bg{background:#121215;padding:56px 24px;min-height:100dvh}
html body #profile .kt-profile{max-width:1080px;width:100%;margin:0 auto;padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
html body #profile .kt-profile__title{font:800 clamp(32px,5vw,56px)/1.1 Anybody,Arial,sans-serif;text-align:left;margin-bottom:32px;color:#f0ece5}
html body #profile .kt-prof-tabs{justify-content:flex-start;border-bottom:1px solid #494447;background:transparent;border-radius:0;gap:24px;padding:0;margin:0 0 28px;max-width:none}
html body #profile .kt-prof-tab{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#c8bfc6;min-height:48px;padding:12px 0;font:600 14px Archivo,sans-serif}
html body #profile .kt-prof-tab.on{color:#edcc80;border-bottom-color:#edcc80}
html body #profile .kt-prof-grid{grid-template-columns:minmax(0,1fr) 300px;gap:56px}
html body #profile .kt-prof-side{background:#201c23;border:1px solid #61513a;border-radius:12px;padding:28px 22px}
html body #profile .kt-prof-side::before{content:'BACKSTAGE / KNOWTORIOUS';display:block;color:#e4c277;font:600 11px Archivo,sans-serif;letter-spacing:.12em;margin-bottom:28px}
html body #profile .kt-prof-field label{color:#d2cbd1;text-transform:none;letter-spacing:0;font:600 13px Archivo,sans-serif}
html body #profile .kt-prof-field input{background:#1d1b20;border:1px solid #665d67;border-radius:6px;color:#f4f0e9;min-height:46px;font:400 16px Archivo,sans-serif;padding:12px}
html body #profile .kt-prof-field input:disabled{color:#bcb5bf;opacity:1;background:#18171b}
html body #profile .kt-prof-save{border-radius:6px;background:#e4c277;color:#1d151b;min-height:46px;font:600 14px Archivo,sans-serif;border:1px solid #e4c277;padding:12px 22px;box-shadow:none;width:auto}
html body #profile .kt-prof-avatar{background:#2d2633;border-color:#b69a61;box-shadow:none}
html body #profile .kt-prof-name{font:600 20px Archivo,sans-serif}
html body #profile :is(.kt-prof-past,.kt-prof-logout){border-radius:6px;min-height:44px}
html body #profile .kt-prof-cam{background:#e4c277;border-color:#201c23}
html body #profile :is(.kt-prof-msg,.kt-prof-email){color:#cbc3cb}
.kt-profile-discard{margin-left:14px;border:1px solid #665d67;background:transparent;color:#f0ece5;border-radius:6px;min-height:46px;padding:10px 18px;font:600 14px Archivo,sans-serif}
html body #tournament .trn-root{max-width:1280px;padding:50px 28px;min-height:100dvh}
html body #tournament .trn-title{font:800 clamp(30px,4vw,48px)/1.1 Anybody,Arial,sans-serif;color:#f2eee5}
html body #tournament .trn-sub{color:#c3bcc7;opacity:1;margin-top:10px;line-height:1.6}
html body #tournament .trn-card{border-radius:8px;background:#1c1a20;border-color:#514b57;padding:22px}
html body #tournament .trn-input{border-radius:6px;background:#161519;border-color:#665d67;min-height:46px}
html body #tournament .trn-opts button{opacity:1;border-radius:6px;color:#ddd5df;background:#222026;min-height:44px}
html body #tournament .trn-opts button.on{background:#e4c277;color:#1a141b;border-color:#e4c277}
html body #tournament .trn-round{min-width:250px;flex:1;gap:24px}
html body #tournament .trn-round__name{color:#cfc5d3;opacity:1;font:600 12px Archivo,sans-serif;letter-spacing:.08em}
html body #tournament .trn-match{border-color:#605768;background:#211e26;border-radius:8px}
html body #tournament .trn-slot{padding:15px;color:#f1eaf2}
html body #tournament .trn-slot.won{background:#2a342e;color:#c9efd5}
html body #tournament .trn-play{background:#e4c277;color:#211719;min-height:44px;font:600 13px Archivo,sans-serif}
html body #tournament .trn-champ{border-radius:8px;background:#292319;color:#f0dfb8;border-color:#b39556}
.kt-round-nav{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.kt-round-nav button{background:#211e26;border:1px solid #675b6a;color:#e6dde9;border-radius:6px;min-height:40px;padding:8px 14px;font:600 12px Archivo,sans-serif}
@media(max-width:700px){
 html body #profile>.stage-bg{padding:68px 18px 28px}
 html body #profile .kt-prof-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 html body #profile .kt-prof-side{grid-row:auto;padding:18px}
 html body #profile .kt-prof-side::before{margin-bottom:18px}
 html body #profile .kt-prof-row2{grid-template-columns:minmax(0,1fr)}
 html body #tournament .trn-root{padding:30px 16px}
 html body #tournament .trn-bracket{scroll-snap-type:x proximity}
 html body #tournament .trn-round{min-width:85%;scroll-snap-align:start}
}

/* ── iOS safe area (2026-09-12) ─────────────────────────────────────────────
   The redesign's !important paddings replaced the env(safe-area-inset-top)
   padding play.html gives every top container. In the app (viewport-fit=cover,
   contentInset "never") that put the setup header, category-picker stepper and
   results header under the status bar / Dynamic Island, where taps do not land.
   On the web the inset is 0, so these lines are no-ops there. Board, question
   and lobby nav are handled in refinements.css / menu-bar.css. */
html.astra-refined body #setup[data-world] .stage-bg{padding-top:max(16px,calc(env(safe-area-inset-top,0px) + 10px))!important}
html.astra-refined body #categorySelect .cs-shell{padding-top:env(safe-area-inset-top,0px)!important}
html.astra-refined body #categorySelect .cs-groups{top:calc(68px + env(safe-area-inset-top,0px))}
html body #gameover.result-stage .stage-bg{padding-top:max(24px,calc(env(safe-area-inset-top,0px) + 12px))!important}
@media(max-width:500px){
  html body #gameover.result-stage .stage-bg{padding-top:max(16px,calc(env(safe-area-inset-top,0px) + 12px))!important}
}

/* ── Landscape phones: fit question / answer / end-match with NO scroll (2026-09-12) ──
   Redesign sized these for portrait/desktop (qa-card min-height:535px, big
   fonts; results art 430px + recap + invite). On a landscape phone (~390-440px
   tall) they overflowed. Compress essentials, vertically centre the Q/A card,
   drop the secondary recap. iPad landscape (height>520) is left alone. */
@media (orientation:landscape) and (max-height:520px){
  /* Question & Answer — centred card, no scroll */
  html.astra-refined body #question .stage-bg,
  html.astra-refined body #answer .stage-bg{padding:max(8px,calc(env(safe-area-inset-top,0px) + 4px)) max(3%,calc(env(safe-area-inset-right,0px) + 6px)) max(8px,env(safe-area-inset-bottom,0px)) max(3%,calc(env(safe-area-inset-left,0px) + 6px))!important;min-height:0!important;height:calc(100svh - var(--astra-review-height,0px))!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  html.astra-refined body #question .qa-stage,
  html.astra-refined body #answer .qa-stage{width:100%!important}
  html.astra-refined body #question .qa-card,
  html.astra-refined body #answer .qa-card{min-height:0!important;padding:12px 18px!important}
  html.astra-refined body .qa-content{min-height:0!important;padding:6px!important;gap:6px!important;justify-content:center!important}
  html.astra-refined body .question-text{font-size:clamp(16px,3.8vh,24px)!important;line-height:1.24!important}
  html.astra-refined body .answer-text{font-size:clamp(20px,5vh,32px)!important;line-height:1.12!important}
  html.astra-refined body .category-tag,
  html.astra-refined body .answer-tagline{font-size:10px!important}
  html.astra-refined body .qa-topbar{padding-bottom:7px!important;gap:8px!important}
  html.astra-refined body #timer{font-size:24px!important;min-width:68px!important;padding:0 8px!important}
  html.astra-refined body .points-tag{font-size:14px!important;gap:6px}
  html.astra-refined body .difficulty-pill{font-size:9px!important;padding:4px 6px!important}
  html.astra-refined body .qa-topbar .btn{font-size:10px!important;padding:7px 9px!important;min-height:38px}
  html.astra-refined body .qa-perks{grid-template-columns:1fr 1fr!important;padding:7px 0!important;gap:8px!important}
  html.astra-refined body .qa-perk-panel{padding:6px 10px!important;gap:8px!important}
  html.astra-refined body .qa-perk-name{min-width:0!important;font-size:9px!important}
  html.astra-refined body .qa-perk-row{gap:6px!important}
  html.astra-refined body .qa-actions{padding-top:7px!important;gap:8px!important}
  html.astra-refined body .qa-actions .btn--primary{min-height:40px!important;min-width:140px!important;font-size:13px!important}
  html.astra-refined body .astra-clock-hint{max-width:140px;font-size:10px}
  html.astra-refined body .award-buttons{padding-top:7px!important;gap:6px!important}
  html.astra-refined body .award-buttons .btn{min-height:40px!important;font-size:11px!important}
  html.astra-refined body .visual-image{max-height:20vh!important}
  /* End-match (gameover / results) — essentials only, no scroll */
  html body #gameover.result-stage .stage-bg{padding:8px 18px!important;min-height:0!important;height:calc(100svh - var(--astra-review-height,0px))!important;display:flex!important;flex-direction:column!important;justify-content:center!important;overflow:hidden!important}
  html body #gameover .result-masthead{padding-bottom:5px!important;margin-bottom:6px!important;font-size:9px!important}
  html body #gameover .result-masthead>span:first-child{font-size:15px!important}
  html body #gameover .result-main{display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;gap:18px!important;align-items:center!important}
  html body #gameover .result-art{min-height:0!important;height:100%!important;max-height:30vh!important;border-radius:12px!important}
  html body #gameover .result-act{font-size:16px!important;bottom:9px!important}
  html body #gameover .result-seal{top:9px!important;font-size:7px!important}
  html body #gameover .result-outcome h1{font-size:clamp(20px,5vh,32px)!important}
  html body #gameover .result-status{font-size:9px!important;margin-bottom:5px!important}
  html body #gameover .result-verdict{font-size:13px!important;margin:2px 0 6px!important}
  html body #gameover .result-scores{gap:14px!important;padding:7px 0!important;margin-bottom:0!important}
  html body #gameover .result-team>strong{font-size:23px!important}
  html body #gameover .result-team h2{font-size:12px!important;margin:3px 0 4px!important}
  html body #gameover .result-team-role{font-size:8px!important}
  html body #gameover .result-recap{display:none!important}
  html body #gameover .result-invite{margin-top:8px!important;padding:8px 12px!important;gap:6px 16px!important}
  html body #gameover .result-invite .ft__qr{width:60px!important;height:60px!important;flex-basis:60px!important}
  html body #gameover .result-invite h2{font-size:15px!important}
  html body #gameover .result-invite-kicker{margin-bottom:4px!important}
  html body #gameover.result-stage .finale__btns{margin-top:8px!important;gap:7px!important}
  html body #gameover.result-stage .finale__btns>.btn{min-height:38px!important;padding:8px 12px!important}
}

/* Finale confetti perf (2026-09-12): the glow on ~200 animated nodes is what
   janks phones. Drop the box-shadow, promote to the compositor, and skip the
   whole effect under reduced-motion. Paired with the lighter fireConfetti in
   production.js. */
.confetti-piece,.fx-spark{box-shadow:none!important;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.confetti-host{display:none!important}}

/* KNOWTORIOUS sign stays alive under Reduce Motion (2026-09-12, corrected):
   IMPORTANT — the lobby is rendered in the NON-refined state (board-fit.js
   removes .astra-refined whenever #launcher is active), so lobby overrides must
   be gated on .kt-live-ui + #launcher, never .astra-refined. The redesign HIDES
   the old gradient bulb strips (.launcher__marquee::before/::after/.bulbs-side
   => display:none) — the live bulbs are the JS-injected .kt-mq-bulb dots, and
   the "know / notorious" reveal is .mq-l.ember. Both the refinements.css blanket
   rule AND marquee-b's own reduce rule freeze them, so the sign looked static.
   Re-arm the real elements. The .mq-l letters themselves are (re)built by the
   reduce-motion-proof injector in production.js when play.html skipped them. */
@media (prefers-reduced-motion:reduce){
  html.kt-live-ui #launcher .launcher__marquee .kt-mq-bulb{animation:ktMqChase 2.6s linear infinite!important}
  html.kt-live-ui #launcher .launcher__marquee .kt-mq-bulb.dying{animation:ktMqDying 6.5s steps(1) infinite!important}
  html.kt-live-ui #launcher .launcher__brand-mark .mq-l.ember{animation:ktMqEmberSoft 2.1s ease forwards!important}
}

/* Mode covers stacked one-per-row on phones (2026-09-12): match عارِفها's
   portrait lobby — a single centred column instead of the cramped 2-up flex.
   Full-width banners read far better on a phone than tiny tiles, and "under each
   other" is exactly what the picker should feel like. Overrides original-lobby.css
   :max-width:600 (2-up flex); loads later + higher specificity => wins. */
@media (max-width:600px){
  html.kt-live-ui body #launcher .playbills{
    gap:18px!important;
    max-width:400px!important;
    margin:0 auto!important;
  }
  html.kt-live-ui body #launcher .playbills .playbill-wrap{
    flex:0 0 100%!important;
    max-width:400px!important;
    width:100%!important;
  }
  /* Full poster cards, not squat banners: the mode art is portrait 3:4, so let
     each stacked card take that shape (like عارِفها's 5/7 posters) instead of
     forcing a short fixed height that cropped the art into a "weird square". */
  html.kt-live-ui body #launcher .playbills .playbill{height:auto!important;aspect-ratio:3/4!important}
}

/* Nudge the KNOWTORIOUS marquee down a touch so it sits lower under the top
   safe-area / account pill instead of crowding the notch (2026-09-12). */
html.kt-live-ui body #launcher .launcher__brand{margin-top:20px!important}

/* ── Refined pre-match brief (2026-09-12) ────────────────────────────────────
   The old .kt-intro "Start the show" modal (built in play.html) never got the
   redesign. Restyle it to match the new playbook: charcoal card, thin border,
   refined type, per-mode gold/colour accent, SVG icons. Flow is unchanged. */
html.kt-live-ui .kt-intro{background:rgba(8,9,11,.74)!important;backdrop-filter:blur(6px)}
html.kt-live-ui .kt-intro__card,
html.kt-live-ui body.mode-classic .kt-intro__card,
html.kt-live-ui body.mode-heist .kt-intro__card,
html.kt-live-ui body.mode-vegas .kt-intro__card,
html.kt-live-ui body.mode-carnival .kt-intro__card,
html:root.kt-live-ui body.mode-hex .kt-intro__card{
  background:#1c1e22!important;border:1px solid #5b5e66!important;border-radius:14px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.55)!important;padding:26px 30px 14px!important;max-width:640px!important;
  --ki-accent:#e4c277;
}
html.kt-live-ui body.mode-heist .kt-intro__card{--ki-accent:#9bcfff}
html.kt-live-ui body.mode-vegas .kt-intro__card{--ki-accent:#ff91ce}
html.kt-live-ui body.mode-carnival .kt-intro__card{--ki-accent:#c4ff67}
html:root.kt-live-ui body.mode-hex .kt-intro__card{--ki-accent:#ffb76c}
html.kt-live-ui .kt-intro__title,
html.kt-live-ui body[class*="mode-"] .kt-intro__title{font:800 clamp(26px,4.6vw,40px)/1.05 'Anybody',Archivo,Arial,sans-serif!important;letter-spacing:-.02em!important;color:var(--ki-accent,#e4c277)!important;text-shadow:none!important;text-transform:none!important;margin-bottom:6px!important}
html.kt-live-ui .kt-intro__sub,
html.kt-live-ui body[class*="mode-"] .kt-intro__sub{color:#c9cbd0!important;font-style:normal!important;font:400 14px/1.5 Archivo,Arial,sans-serif!important;margin-bottom:18px!important}
html.kt-live-ui .ki-rule{font:400 14px/1.5 Inter,Archivo,Arial,sans-serif!important;color:#e8e9ec!important}
html.kt-live-ui .ki-rule b{color:#fff!important}
html.kt-live-ui .ki-rule__icon{color:var(--ki-accent,#e4c277)!important}
html.kt-live-ui .ki-rule__icon .kti{width:19px!important;height:19px!important}
html.kt-live-ui .kt-intro__contract{color:#9a9ca2!important;border:0!important}
html.kt-live-ui .kt-intro__perkhead,
html.kt-live-ui body[class*="mode-"] .kt-intro__perkhead{color:var(--ki-accent,#e4c277)!important;border-top:1px solid #3a3d44!important;padding-top:14px!important}
html.kt-live-ui .ki-perk__icon{color:var(--ki-accent,#e4c277)!important}
html.kt-live-ui .ki-perk__icon .kti{width:17px!important;height:17px!important}
html.kt-live-ui .ki-perk__txt b{color:#f2f2f3!important}
html.kt-live-ui .ki-perk__txt small{color:#a9abb1!important}
html.kt-live-ui .kt-intro__btn,
html.kt-live-ui body[class*="mode-"] .kt-intro__btn{background:var(--ki-accent,#e4c277)!important;color:#17140c!important;border:0!important;border-radius:8px!important;font:800 15px Archivo,Arial,sans-serif!important;letter-spacing:.01em!important;box-shadow:0 -12px 18px 14px rgba(28,30,34,.92)!important}

/* ── Q/A: question is the hero; perks compact; no clock hint (2026-09-12) ─────
   Owner: question text too small, perks too big, and drop "Clock running…".
   Appended after the earlier landscape block so these win. */
html.kt-live-ui .astra-clock-hint{display:none!important}
@media (orientation:landscape) and (max-height:520px){
  html.astra-refined body .question-text{font-size:clamp(22px,6.4vh,34px)!important;line-height:1.22!important;max-width:26ch!important}
  html.astra-refined body .answer-text{font-size:clamp(26px,8vh,44px)!important;line-height:1.1!important}
  html.astra-refined body .qa-content{padding:4px 6px!important;gap:6px!important}
  html.astra-refined body .qa-perks{padding:5px 0!important;gap:6px!important}
  html.astra-refined body .perk-pip{min-width:32px!important;width:auto!important;height:28px!important;min-height:28px!important;padding:4px 6px!important}
  html.astra-refined body .perk-pip .kti{width:13px!important;height:13px!important}
  html.astra-refined body .qa-perk-name{font-size:8px!important;letter-spacing:.04em!important}
}

/* Q/A landscape: recover the last ~20px so the longest question still fits */
@media (orientation:landscape) and (max-height:520px){
  html.astra-refined body .question-text{line-height:1.14!important}
  html.astra-refined body #question .qa-card,
  html.astra-refined body #answer .qa-card{padding-top:8px!important;padding-bottom:8px!important}
  html.astra-refined body .qa-topbar{padding-bottom:6px!important}
  html.astra-refined body .qa-actions{padding-top:6px!important}
  html.astra-refined body .astra-question-context{margin-bottom:6px!important;font-size:11px!important}
}

/* Sticky category search (2026-09-12): the redesigned category screen (.cs-shell)
   puts #catSearch inside .cs-tools, which scrolled away — on a phone you had to
   scroll all the way back up to search. Pin it to the top of the document scroll
   so the search bar travels with the reader. Frosted so pool cards read under it;
   works across all mode themes (which each paint a different #categorySelect bg).
   .cs-groups (group nav) is already sticky at top:68; there is no fixed top chrome
   to clear, so the search sits at top:0. */
#categorySelect .cs-tools{
  position:sticky!important;top:calc(env(safe-area-inset-top,0px) + 2px)!important;z-index:45!important;
  background:rgba(20,13,22,.94)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  padding-top:10px!important;padding-bottom:10px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}

/* Gentler KNOWTORIOUS reveal (2026-09-12): the play.html ember dimmed letters to
   ~0.13 opacity, so a still frame looked like letters were MISSING ("the sign is
   weird"). Soften it to a subtle brightness pulse — dimmed letters stay clearly
   present (~0.5) so KNOW / NOTORIOUS gently emphasise instead of vanishing. */
@keyframes ktMqEmberSoft{0%{opacity:1}14%{opacity:.55}32%,78%{opacity:.5}100%{opacity:1}}
html.kt-live-ui #launcher .launcher__brand-mark .mq-l.ember{
  animation-name:ktMqEmberSoft!important;animation-duration:2.1s!important;animation-timing-function:ease!important;
}

/* Clear the notch (2026-09-12): the lobby content used a flat top padding while
   the fixed nav grows by env(safe-area-inset-top) on notched phones, so the nav
   overlapped and clipped "Tonight, ladies & gentlemen…". Add the inset to the
   launcher content's top so it always starts below the nav. */
html.kt-live-ui body #launcher .launcher__inner{padding-top:calc(76px + env(safe-area-inset-top,0px))!important}
@media (max-width:600px){
  html.kt-live-ui body #launcher .launcher__inner{padding-top:calc(72px + env(safe-area-inset-top,0px))!important}
}

/* Tap-to-explode finale QR (2026-09-12): the "host the next one" QR was a tiny
   104px panel. Make it pressable → a full-screen enlargement anyone at the table
   can scan; tap anywhere outside the code to close. */
#finaleQR{cursor:zoom-in}
.kt-qr-explode{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:rgba(4,2,8,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .2s ease;cursor:zoom-out;padding:24px;box-sizing:border-box}
.kt-qr-explode.in{opacity:1}
.kt-qr-explode__box{width:min(80vw,80vh,460px);aspect-ratio:1;background:#fff;border-radius:20px;padding:20px;box-sizing:border-box;
  box-shadow:0 30px 90px rgba(0,0,0,.6);transform:scale(.86);transition:transform .25s cubic-bezier(.2,.9,.2,1);cursor:default}
.kt-qr-explode.in .kt-qr-explode__box{transform:scale(1)}
.kt-qr-explode__box img,.kt-qr-explode__box canvas{width:100%!important;height:100%!important;display:block;image-rendering:pixelated}
.kt-qr-explode__cap{color:#f2e3bd;font:600 15px/1.45 Archivo,system-ui,sans-serif;text-align:center;max-width:340px;opacity:.92}
.kt-qr-explode__hint{color:#c3ae8d;font:500 12px/1.4 Archivo,system-ui,sans-serif;opacity:.7;letter-spacing:.04em}

/* Top 10 list-quiz fits landscape with no scroll (2026-09-12): the board injects
   as the question "visual" and stacked too tall — the question got cut off at the
   top and the whole format scrolled. In short landscape, lay the 10-slot board and
   the answer panel SIDE-BY-SIDE and compress everything to one screen. (Root cause
   of the narrow board: .qa-content is align-items:center, which shrank #qVisual to
   content width — force it to stretch.) */
@media (orientation:landscape) and (max-height:600px){
  html body #question:has(.t10-wrap) .qa-actions,
  html body #question:has(.t10-wrap) .qa-perks{display:none!important}
  html body #question:has(.t10-wrap) .qa-card{padding-top:6px!important;padding-bottom:6px!important;min-height:0!important}
  html body #question:has(.t10-wrap) .qa-content{min-height:0!important;gap:2px!important;padding:4px 0!important}
  html body #question:has(.t10-wrap) #qVisual{width:100%!important;max-width:none!important;align-self:stretch!important}
  html body #question:has(.t10-wrap) .question-text{font-size:clamp(15px,3.6vh,20px)!important;line-height:1.14!important;margin-bottom:2px!important;max-width:none!important}
  html body #question:has(.t10-wrap) .category-tag{margin-bottom:6px!important;font-size:10px!important}
  html body #question .t10-wrap{flex-wrap:nowrap!important;align-items:flex-start!important;width:100%!important;max-width:none!important;gap:14px!important}
  html body #question .t10-board{flex:1 1 auto!important}
  html body #question .t10-side{flex:0 0 260px!important;max-width:260px!important;gap:6px!important}
  html body #question .t10-slots{gap:5px!important}
  html body #question .t10-slot{min-height:0!important;padding:3px 9px!important;gap:6px!important}
  html body #question .t10-slot .t10-rank{font-size:.78rem!important;min-width:1.3em!important}
  html body #question .t10-slot .t10-name{font-size:.8rem!important}
  html body #question .t10-meta{font-size:.85rem!important}
  html body #question .t10-input{padding:7px 10px!important;font-size:.92rem!important}
  html body #question .t10-give{padding:6px 10px!important;font-size:.8rem!important;min-height:0!important}
  html body #question .t10-rule{margin-top:2px!important;font-size:.68rem!important}
}


/* Scoreboard edges follow the THEME, not team red/blue (2026-09-12): the team
   panels carried --team-a (#d6453f red) / --team-b (#4d7ce0 blue) on their start
   edge + active glow, which clashed with each mode's palette. Recolour the edges
   and glow to a per-mode accent so the scoreboard reads as one themed board. The
   award BUTTONS keep their team colours (players need to tell the two apart when
   awarding points). */
body.mode-classic{--kt-accent:#c8a24a}
body.mode-heist{--kt-accent:#c9a85e}
body.mode-vegas{--kt-accent:#ffd166}
body.mode-carnival{--kt-accent:#aaff00}
body.mode-hex{--kt-accent:#ffb76c}
body:not([class*="mode-"]){--kt-accent:#c8a24a}
body .team-panel.team-a,
body .team-panel.team-b{border-inline-start-color:var(--kt-accent,#c8a24a)!important}
body .team-panel.team-a .team-name-tag,
body .team-panel.team-b .team-name-tag{color:var(--kt-accent,#c8a24a)!important}
body .team-panel.team-a.active,
body .team-panel.team-b.active{box-shadow:0 0 0 2px var(--kt-accent,#c8a24a),0 0 26px color-mix(in srgb,var(--kt-accent,#c8a24a) 40%,transparent)!important}

/* Smooth countdown bar (2026-09-12): the mm:ss timer ticks once per second, which
   reads as jumpy. A thin bar across the top of the Q/A card depletes at 60fps
   (driven by production.js off state._timerEnd), giving a smooth sense of time. */
.kt-timerbar{position:absolute;left:0;top:0;height:3px;width:100%;transform-origin:left center;
  background:linear-gradient(90deg,var(--kt-accent,#c8a24a),color-mix(in srgb,var(--kt-accent,#c8a24a) 55%,#fff));
  border-radius:0 3px 3px 0;pointer-events:none;z-index:6;opacity:.9;transition:background .3s}
.kt-timerbar.urgent{background:linear-gradient(90deg,#ff3d6e,#ff8aa5)}
#question .qa-card,#answer .qa-card{position:relative}
@media (prefers-reduced-motion:reduce){.kt-timerbar{transition:none}}

/* Team-select (setup) landscape safe zones (2026-09-13): the setup stage had no
   horizontal safe-area, so content ran under the Dynamic Island / side notch in
   landscape. Add env(safe-area-inset-*) to the stage padding. */
html.kt-live-ui body #setup .stage-bg{
  padding-left:max(18px,env(safe-area-inset-left))!important;
  padding-right:max(18px,env(safe-area-inset-right))!important;
}

/* Hex/Siege board fills more of the (height-bound) landscape space (2026-09-16):
   the board is capped by height (6x6 grid), so reclaim vertical chrome — compact
   the header, legend and scoreboard — and the hex sizer (production.js) grows the
   hexes into the freed space. Hex COUNTS stay visible (solo-stats + compact legend). */
@media (orientation:landscape) and (max-height:600px){
  /* trim everything ABOVE the board (this was pushing the board down ~57px) */
  body.mode-hex #board>.stage-bg{padding-top:6px!important}
  body.mode-hex #board .stage-header{padding-top:0!important;padding-bottom:0!important;margin-bottom:2px!important;min-height:0!important}
  body.mode-hex #board .stage-header h2{font-size:15px!important;line-height:1.1!important}
  body.mode-hex #board .stage-header .btn,
  body.mode-hex #board .stage-header button{padding:5px 9px!important;min-height:0!important;font-size:12px!important}
  body.mode-hex #board .stage-header .kti{width:16px!important;height:16px!important}
  body.mode-hex #board .astra-board-caption,
  body.mode-hex #board .astra-board-foot{display:none!important}
  /* the colour-key legend below the board — hide it; hex counts still show in the
     team panels (solo-stats). Frees the board to grow toward the scoreboard. */
  body.mode-hex #board .hex-legend{display:none!important}
  /* compact the scoreboard (biggest vertical cost) — keep perks + score + counts */
  body.mode-hex #scoreboard{margin-top:4px!important}
  body.mode-hex #scoreboard .team-panel{padding:4px 10px!important}
  body.mode-hex #scoreboard .team-perks{gap:4px!important}
  body.mode-hex #scoreboard .perk-pip{min-height:24px!important;height:24px!important;min-width:30px!important;padding:2px 6px!important}
  body.mode-hex #scoreboard .score-btn{width:30px!important;min-width:30px!important;height:30px!important}
  body.mode-hex #scoreboard .score-value{font-size:19px!important}
  body.mode-hex #scoreboard .team-score{gap:6px!important}
  body.mode-hex #scoreboard .solo-stats{font-size:10px!important}
  /* tighter honeycomb rows so the same height fits bigger hexes (matches fit denom) */
  body.mode-hex .hex-row + .hex-row{margin-top:calc(var(--hexw) * -0.26)!important}
}
@media (orientation:landscape) and (max-height:600px){ body.mode-hex .hex-board{padding-top:2px!important} }

/* Siege landscape: team panels FLANK the board (2026-09-18). The 6x6 honeycomb is
   near-square while a landscape phone is 2:1, so stacking the scoreboard under the
   board left the hexes tiny with dead space either side. Now the stage is a 3-column
   grid — Team A | board | (header / Team B) — the board gets the full screen
   height, the panels use the space that was empty. The sizer (production.js)
   detects this layout via #scoreboard{display:contents}. Grid logic untouched. */
@media (orientation:landscape) and (max-height:600px){
  html:root.kt-live-ui body.mode-hex #board>.stage-bg{
    display:grid!important;
    grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);
    grid-template-rows:auto minmax(0,1fr);
    column-gap:10px;row-gap:6px;align-items:stretch;
    height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;
    box-sizing:border-box;
    padding:4px max(10px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))!important;
  }
  /* the header dissolves too: its status block goes top-LEFT (above Team A), its
     action buttons top-RIGHT (above Team B); the board column keeps the full height */
  html:root.kt-live-ui body.mode-hex #board>.stage-bg>.stage-header{display:contents!important}
  html:root.kt-live-ui body.mode-hex #board>.stage-bg>.stage-header h2{display:none!important}
  html:root.kt-live-ui body.mode-hex #board .stage-header>.kt-match-status{grid-column:1;grid-row:1;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;min-width:0;padding:8px 2px 0!important;margin:0!important}
  html:root.kt-live-ui body.mode-hex #board .stage-header .astra-board-caption{display:flex!important;font-size:13px!important;line-height:1.3!important;max-width:100%!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0!important}
  html:root.kt-live-ui body.mode-hex #board .stage-header .astra-progress{font-size:11px!important;line-height:1.3!important;margin:0!important}
  html:root.kt-live-ui body.mode-hex #board .stage-header>.stage-header__actions{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin:0!important}
  html:root.kt-live-ui body.mode-hex #board #alarmMeter,
  html:root.kt-live-ui body.mode-hex #board .astra-board-foot,
  html:root.kt-live-ui body.mode-hex #board .hex-legend{display:none!important}
  html:root.kt-live-ui body.mode-hex #board #boardGrid{
    grid-column:2;grid-row:1/3;align-self:stretch;justify-self:center;
    display:flex!important;flex-direction:column;justify-content:center;align-items:center;
    margin:0!important;padding:0!important;width:auto!important;max-width:none!important;min-height:0;
  }
  /* Size authority: siege-identity.css pins --hexw to its own --sg-hexw (measured off
     the board box, which here is content-sized → feedback → 20px). In this layout the
     sizer in production.js measures the STAGE and writes --kt-hexw; that wins here.
     Padding-right = the odd rows' half-hex shift so the auto column measures true width. */
  html:root.kt-live-ui body.mode-hex #boardGrid .hex-board{--hexw:var(--kt-hexw,var(--sg-hexw,50px))!important;padding:0 calc(var(--hexw)/2 + 3px) 0 0!important;margin:0!important}
  /* the scoreboard box dissolves; its two panels become grid children */
  html:root.kt-live-ui body.mode-hex #board #scoreboard{display:contents!important}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel.team-a{grid-column:1;grid-row:1/3}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel.team-b{grid-column:3;grid-row:2}
  /* a tall narrow strip, not a square: name / perks stacked with their names / score / count */
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel{
    align-self:center;justify-self:center;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:8px!important;padding:12px!important;min-height:0!important;width:100%!important;max-width:176px!important;margin:0!important;box-sizing:border-box;
  }
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel>div:first-child{display:flex!important;flex-direction:column;gap:8px;width:100%;min-width:0}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .team-name-tag{font-size:13px!important;line-height:1.2;overflow-wrap:anywhere}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .team-perks{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;width:100%!important;align-self:stretch!important;margin:0!important}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .perk-pip{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;padding:0 10px!important;box-sizing:border-box}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .perk-pip .kti{flex:none;width:18px!important;height:18px!important}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .perk-pip .astra-perk-name{display:inline!important;font:600 12px/1.1 Archivo,Arial,sans-serif!important;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .perk-pip .perk-count{margin-left:auto}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .team-score{display:flex!important;align-items:center;justify-content:space-between;gap:6px!important;width:100%;grid-template-columns:none!important;grid-template-rows:none!important}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .score-btn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;font-size:1rem!important}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .score-value{flex:1;text-align:center;font-size:26px!important;line-height:1;min-width:0!important}
  html:root.kt-live-ui body.mode-hex #board #scoreboard .team-panel .solo-stats{justify-content:center;margin:0!important;font-size:12px!important}
}

/* Picture questions in landscape (2026-09-19): the Q/A landscape block caps
   .visual-image at 20vh, which on a phone is a 60x79 thumbnail — a Starting XI
   lineup at that size reads as "no picture". Put the visual BESIDE the text
   instead (visual left, question + category right) so it can take the card's
   height. Only when there is an actual <img> in #qVisual (not Top-10/charades). */
@media (orientation:landscape) and (max-height:600px){
  html:root.kt-live-ui body #question .qa-content:has(> #qVisual > img.visual-image){
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    align-items:center!important;justify-items:start!important;align-content:center!important;
    column-gap:18px!important;row-gap:6px!important;text-align:left!important;min-height:0!important;
  }
  html:root.kt-live-ui body #question .qa-content:has(> #qVisual > img.visual-image) #qVisual{grid-column:1;grid-row:1/3;display:block!important;margin:0!important;width:auto!important}
  html:root.kt-live-ui body #question .qa-content:has(> #qVisual > img.visual-image) .visual-image{height:min(50vh,210px)!important;max-height:none!important;width:auto!important;max-width:38vw!important;object-fit:contain;margin:0!important}  /* definite HEIGHT: a viewBox-only SVG has no intrinsic size, so width:auto alone collapses to 0 */
  html:root.kt-live-ui body #question .qa-content:has(> #qVisual > img.visual-image) .question-text{grid-column:2;grid-row:1;align-self:end;text-align:left!important;margin:0!important;max-width:none!important;justify-self:start}
  html:root.kt-live-ui body #question .qa-content:has(> #qVisual > img.visual-image) .category-tag{grid-column:2;grid-row:2;align-self:start;justify-self:start;margin:0!important}
}

/* Landscape scoreboard, every mode except Hex/Siege (2026-09-21, owner): one layout for
   BOTH panels — team name top-left, the −/score/+ group centred beneath it, perks on the
   right. Replaces the mirrored A/B arrangement (play.html landscape grid + board-fit.css
   astra-original-phone) where team B had its perks on the left and score on the right. */
@media (orientation:landscape) and (max-height:600px){
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;grid-template-areas:none!important;
    align-items:center!important;column-gap:14px!important;row-gap:3px!important;direction:ltr!important;padding:8px 14px!important;min-height:0!important;
  }
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel>div:first-child{display:contents!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .team-name-tag{grid-column:1!important;grid-row:1!important;justify-self:start!important;text-align:left!important;margin:0!important;min-width:0}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .team-roster{display:none!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .team-score,
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .heist-score-grid{grid-column:1!important;grid-row:2!important;justify-self:center!important;display:flex!important;align-items:center!important;gap:6px!important;grid-template-columns:none!important;grid-template-rows:none!important;width:auto!important;min-width:0!important;margin:0!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .team-score .score-btn{grid-area:auto!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;font-size:1rem!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .score-value{grid-area:auto!important;font-size:26px!important;line-height:1!important;min-width:0!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .team-perks{grid-column:2!important;grid-row:1/3!important;align-self:center!important;justify-self:end!important;display:flex!important;flex-wrap:nowrap!important;gap:7px!important;width:auto!important;margin:0!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .team-perks .perk-pip{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;justify-content:center!important}
  html:root.kt-live-ui body:not(.mode-hex) #board #scoreboard .team-panel .scout-btn{grid-column:1!important;grid-row:3!important;justify-self:center!important}
}

/* Team-select (#setup) height (2026-09-22): the redesign sizes the setup stage as
   calc(100svh - 48px) — 48px being the WEBSITE's review bar, which is 0 in the app — so a
   48px strip of bare body colour showed under the stage. Same root cause as the question
   overlay fix on 2026-09-12. Size it with the live variable instead, and let the stage
   backdrop reach the bottom edge including the home-indicator inset. */
html:root.kt-live-ui body #setup,
html:root.kt-live-ui body #setup>.stage-bg{min-height:calc(100svh - var(--astra-review-height,0px))!important;height:auto!important;max-height:none!important}
html:root.kt-live-ui body #setup>.stage-bg{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important;box-sizing:border-box}