/* Behaviour-only update. Approved existing logo, colours and brandbook retained. */
.board.revealing .tile:not(.spotlight){opacity:1;filter:grayscale(1);box-shadow:inset 0 1px 0 #fff9,0 2px 0 #777}
.board.revealing .tile{transition:filter 140ms ease-out}
.board.revealing .tile.spotlight{z-index:2;box-shadow:inset 0 1px 0 #fff9e9,0 2px 0 #9f6b35,0 0 12px #ffd23f88}
.intro-card{max-width:520px;margin:15px auto 20px;text-align:left!important;padding:0 12px}
.intro-kicker{font:700 12px Inter;letter-spacing:.13em;color:var(--gold);text-align:center;margin-bottom:12px}
.host-intro{position:relative;margin:0 0 20px;overflow:hidden;border-radius:14px;border:1px solid #8c4d99;background:#100a19;box-shadow:0 2px 0 #bb3886,0 4px 0 #e99426,0 0 18px #efba4324}
.host-intro video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
.host-intro[data-format="4x3"] video{aspect-ratio:4/3}
.host-video-toggle{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;background:#100a19d9;border:1px solid #d9bfe8;border-radius:8px;font-size:20px}
.intro-card h1{font:750 clamp(30px,6vw,42px)/1.12 Outfit;text-align:center;margin:0 0 23px}
.intro-steps{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:18px}
.intro-steps li{display:flex;gap:13px;align-items:flex-start}
.intro-number{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:7px;border:1px solid #bb8edf;background:linear-gradient(145deg,#643380,#341646);font:750 22px Outfit;box-shadow:0 2px 0 #7a3484}
.intro-steps b{font-size:16px}.intro-steps p{font-size:14px;color:var(--muted);line-height:1.5;margin:4px 0 0}
.intro-card .primary{display:block;margin:0 auto;min-width:220px;min-height:48px}
.intro-footnote{text-align:center;font-size:12px;color:var(--muted);margin:13px 0 0}
.intro-mode header{min-height:100px}.intro-mode .brand-image{width:164px}
.final-card{max-width:560px;margin-inline:auto;padding:18px 12px 12px;border-top:1px solid #79568a}
.final-top{display:flex;align-items:center;justify-content:space-between;gap:15px;text-align:left;margin-bottom:16px}
.final-top h2{font-size:30px;margin-bottom:6px}.final-top p{margin:0}
.final-clock{--remaining:100%;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--gold) var(--remaining),#4d295c 0);isolation:isolate;box-shadow:0 0 16px #ffd23f2b}
.final-clock::before{content:'';position:absolute;inset:4px;background:var(--night);border-radius:50%;z-index:-1}
.final-clock span{font:750 36px/1 Outfit;font-variant-numeric:tabular-nums;color:var(--gold)}
.final-clock small{font:700 11px Inter;color:var(--muted);margin-top:3px}
.final-clock.urgent{box-shadow:0 0 18px #ffd23f55}
#bonus{font:700 16px/1.4 Inter;min-height:2.8em;margin:15px 0 0}
.final-card .word-tile{box-shadow:inset 0 1px 0 #fff,0 2px 0 #a87535,0 0 6px #ffd23f33}
.final-card .word-tile.space-tile{box-shadow:inset 0 1px 0 #817989,0 2px 0 #39343f}
.bank-enter span{animation-delay:var(--stagger,0ms)}
@media(prefers-reduced-motion:no-preference){
  .intro-mode .brand-button{animation:kto-intro 1500ms cubic-bezier(.2,.8,.2,1) both}
  .intro-steps li{animation:kto-panel 350ms ease-out both}
  .intro-steps li:nth-child(2){animation-delay:100ms}.intro-steps li:nth-child(3){animation-delay:200ms}
  .board-enter{animation:kto-panel 350ms ease-out both}
  .board.revealing .tile.spotlight{animation:kto-word 1000ms ease-out both}
  .panel-enter{animation:kto-panel 220ms ease-out both}
  .bank-enter span{animation:kto-bank 400ms ease-out both;animation-delay:var(--stagger,0ms)}
}
@keyframes kto-intro{0%{opacity:.25;transform:translateY(-8px) scale(.93)}55%{opacity:1;transform:scale(1.035);filter:brightness(1.18)}100%{opacity:1;transform:none;filter:none}}
@keyframes kto-word{0%{transform:translateY(0);filter:brightness(1.05)}20%{transform:translateY(-2px);filter:brightness(1.18)}80%{transform:translateY(-2px);filter:brightness(1.08)}100%{transform:none;filter:none}}
@keyframes kto-panel{from{opacity:.7;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes kto-bank{from{opacity:.5;transform:translateY(-5px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:375px){.intro-card{padding-inline:0}.intro-steps{gap:14px}.intro-mode .brand-image{width:138px}.intro-mode header{min-height:88px}.final-card{padding-inline:0}}