/* 12.1 / Actual layout redesign. No game engine, data model, Firebase or element IDs changed. */
:root{--v121-bg:#f8f7f2;--v121-ink:#202521;--v121-line:#deded7;--v121-lime:#d6fb72;--v121-dark:#131a19;--v121-red:#f0aaa1;--v121-muted:#767974;--v121-radius:17px;background:var(--v121-bg)}
html,body{background:var(--v121-bg)}
body{color:var(--v121-ink)}
main.wrap{max-width:1050px;padding:0 24px 90px}
.top{border-bottom:1px solid var(--v121-line);margin-bottom:38px;padding:23px 0 18px}
.top .brand{gap:10px!important}
.brand-icon, header .brand-logo{background:var(--v121-dark)!important;color:#f7f7ef!important;border-radius:8px!important;transform:rotate(-5deg)}
.brand-dot{color:var(--v121-lime)!important}
.brand-type strong{font-size:18px;letter-spacing:-.045em}
.brand-type small{color:#737770}
.nav-pill{background:transparent!important;border:0!important;text-decoration:underline;text-underline-offset:5px;font-size:13px!important;padding:8px!important}
.v121-hero-label{color:#647064;letter-spacing:.14em;font-size:11px;font-weight:850;margin:9px 0 7px}
.setup-compact-title{font-size:clamp(48px,7vw,83px)!important;letter-spacing:-.075em!important;line-height:.96!important;font-weight:820!important;margin:0 0 29px!important}
.setup-compact-title span{color:#6c756d;font-style:italic;font-weight:550}
#setup{max-width:940px;margin:auto}
#setup .wizard-nav{border:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 27px!important;overflow:visible}
#setup .wizard-tab{border:1px solid #dbddd6!important;border-radius:12px!important;background:#fff!important;min-height:63px;padding:11px 10px!important;font-weight:740!important;color:#7a7e78!important;gap:7px;flex-direction:row}
#setup .wizard-tab.selected{border-color:var(--v121-dark)!important;background:var(--v121-dark)!important;color:#fff!important}
#setup .wizard-index{font-size:11px!important;color:inherit!important;opacity:.6}
#setup .wizard-tab.selected .wizard-index{color:var(--v121-lime)!important;opacity:1}
#setup .wizard-heading{margin:0 0 15px!important}
#setup .wizard-heading .step-kicker{display:none}
#setup .wizard-heading h2{font-size:27px!important;margin:0!important;letter-spacing:-.045em}
#setup .wizard-heading p{font-size:13px!important;margin:4px 0 0;color:#858984!important}
#setup .card{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important}
#setup .sectionHead{margin-bottom:14px!important;align-items:center}
#setup .sectionHead h2{font-size:18px!important;letter-spacing:-.035em!important;margin:0!important}
#setup .sectionHead .subtext{margin:4px 0 0!important;font-size:12px!important}
#setup .tag{background:var(--v121-lime)!important;color:#334026!important;border:0!important;border-radius:7px!important;padding:8px 9px!important;font-weight:760}
#setup .chips{gap:7px;flex-wrap:wrap;margin:0 0 22px!important}
#setup .chips .btn{min-height:42px!important;border:1px solid var(--v121-line)!important;border-radius:8px!important;background:#fff!important;color:#3a403a!important;font-size:12px;padding:10px 12px!important;font-weight:700}
#setup .chips .btn:active{background:var(--v121-lime)!important}
#setup .eyebrow{font-size:11px!important;color:#5d685d!important;letter-spacing:.1em!important}
#setup .categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:22px}
#setup .category{min-height:79px!important;padding:13px 14px!important;border:1px solid var(--v121-line)!important;border-radius:12px!important;background:#fff!important;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}
#setup .category:has(input:checked){border-color:var(--v121-dark)!important;background:#f1f7e3!important;box-shadow:inset 0 0 0 1px var(--v121-dark)!important}
#setup .category input{width:19px;height:19px;accent-color:#1b2b22}
#setup .category .catname{color:#232923;font-size:14px;font-weight:750;letter-spacing:-.02em}
#setup .category .catdesc{font-size:11px!important;line-height:1.25;color:#8a8f89!important;margin-top:4px}
#setup .category .catcount{font-size:10px!important;color:#6f766e!important;letter-spacing:0}
#setup .wizard-actions{border-top:1px solid var(--v121-line);margin-top:12px;padding-top:18px}
#setup .wizard-actions .btn.primary,#setup .launch-button{border-radius:11px!important;background:var(--v121-dark)!important;color:#fff!important;border-color:var(--v121-dark)!important;min-height:52px;font-size:14px!important}
#setup .wizard-footnote{font-size:12px;color:#8c9288!important}
#setup .difficulty-options{gap:8px}
#setup .difficulty-option{background:#fff!important;border:1px solid var(--v121-line)!important;border-radius:12px!important;min-height:87px;padding:13px!important}
#setup .difficulty-option:has(input:checked){background:#eef6df!important;border-color:#314936!important}
#setup .difficulty-option input{accent-color:#283d30}
#setup .difficulty-option small{font-size:11px!important}
#setup .ratio-panel{background:#fff!important;border:1px solid var(--v121-line)!important;padding:21px!important;border-radius:12px!important;margin:17px 0!important}
#setup .custom-grid{gap:12px}
#setup .field{border-color:#d9dbd4!important}
#setup .section-label{font-size:16px}
#setup .teams{gap:12px}
#setup .toggle{background:#f1f0eb!important;border:0!important}
/* Minimal session flow and result screens. */
#between,#turnEnd,#overtime,#paused,#finish{max-width:720px;margin:42px auto 20px}
#between .hero,#turnEnd .hero,#paused .hero,#finish .hero{letter-spacing:-.07em;font-size:clamp(47px,7vw,75px)}
#between .card,#turnEnd .card,#finish .card{background:#fff!important;border:1px solid var(--v121-line)!important;border-radius:15px!important;padding:22px!important}
#between .btn.primary,#turnEnd .btn.primary,#paused .btn.primary,#finish .btn.primary{background:var(--v121-dark)!important;color:#fff!important;border:0!important;min-height:64px!important;border-radius:13px!important;font-size:17px!important}
#turnEnd .num{color:#18221d;font-size:76px}
/* Distinct casual-game stage – not another website card. */
body.alias11-playing,body.alias11-focus{background:var(--v121-dark)!important;color:#fafcf2!important}
body.alias11-playing main.wrap{max-width:none!important;padding:0 max(15px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left))!important}
#play,body.alias11-playing #play{
  background:var(--v121-dark)!important;color:#fafcf2!important;border:0!important;box-shadow:none!important;
  max-width:900px!important;margin:0 auto!important;padding:12px 0 8px!important;border-radius:0!important;
  display:flex!important;flex-direction:column;gap:clamp(9px,1.2dvh,15px)!important;
  min-height:calc(100dvh - env(safe-area-inset-bottom) - 8px)!important;
}
#play.hidden{display:none!important}
#play .v11-game-top{border:0!important;padding:0!important;min-height:49px!important;flex-shrink:0;color:#b2bab3!important;font-size:11px!important;letter-spacing:.12em!important}
#play .v11-game-top strong{display:inline-flex;align-items:center;gap:9px;font-weight:750}
.v121-live-dot{display:inline-block;background:var(--v121-lime);width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px #d6fb7214}
#play .v11-fullscreen{background:#ffffff0d!important;border:1px solid #ffffff28!important;color:#eee!important;border-radius:10px!important;font-size:12px!important;min-width:0!important;min-height:46px!important;padding:11px 15px!important;letter-spacing:0!important;white-space:nowrap}
#play .stats{border:0!important;padding:2px 0 0!important;background:transparent!important;align-items:flex-start!important;gap:8px!important;min-height:43px!important;flex-shrink:0}
#play #playingTeam{color:#fff!important;font-size:clamp(21px,3vw,28px)!important;font-weight:730!important;letter-spacing:-.035em!important;line-height:1.18!important;text-transform:none!important}
#play #turnStats{color:#98a59b!important;font-size:12px!important;font-weight:500!important;margin-top:5px!important}
#play #deckRemaining{background:#ffffff13!important;color:#bdc8bf!important;border:1px solid #ffffff15!important;border-radius:7px!important;padding:8px 11px!important;font-size:11px!important;white-space:nowrap}
#play .fair-notice:not(.on){display:none!important}
#play #timer,body.alias11-playing #play #timer{color:var(--v121-lime)!important;font-weight:720!important;font-size:clamp(55px,10dvh,92px)!important;letter-spacing:-.09em!important;line-height:.94!important;margin:4px 0 0!important;text-align:left!important;font-variant-numeric:tabular-nums!important;text-shadow:none!important}
#play #timer.low{color:var(--v121-red)!important;animation:none!important}
#play #timerMeter{background:#353d36!important;border:0!important;border-radius:80px!important;min-height:5px!important;height:5px!important;flex-shrink:0!important;overflow:hidden!important;margin:0!important}
#play #timerBar{background:var(--v121-lime)!important;border-radius:80px!important}
#play #timerMeter.low #timerBar{background:var(--v121-red)!important}
#play .wordcard,body.alias11-playing #play .wordcard{
  border:1px solid #ffffff20!important;border-radius:20px!important;background:#202923!important;box-shadow:none!important;
  margin:1px 0 0!important;min-height:clamp(200px,30dvh,360px)!important;flex:1 1 auto!important;
  padding:clamp(18px,4vw,48px)!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;
}
#play .wordcard::before{display:none!important}
#play .wordcard .eyebrow{color:#9daea2!important;font-size:11px!important;letter-spacing:.19em!important;font-weight:750!important}
#play .wordcard h2,body.alias11-playing #play .wordcard h2{color:#f6fbf0!important;font-weight:710!important;font-size:clamp(39px,7vw,79px)!important;line-height:1.08!important;letter-spacing:-.068em!important;margin:19px 0 10px!important;overflow-wrap:anywhere}
#play .actions{display:grid!important;grid-template-columns:1fr 1.12fr!important;gap:10px!important;flex:0 0 auto!important;margin:0!important}
#play .actions .btn,body.alias11-playing #play .actions .btn{min-height:clamp(80px,12dvh,113px)!important;border-radius:15px!important;font-weight:800!important;display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:5px!important;font-size:clamp(14px,2vw,19px)!important;padding:12px!important;box-shadow:none!important}
#play #correct{background:var(--v121-lime)!important;color:#1d2b1c!important;border:1px solid var(--v121-lime)!important}
#play #skip{background:#303934!important;color:#f0b8ae!important;border:1px solid #4e6151!important}
#play .v121-action-icon{font-size:24px;line-height:1;font-weight:600}
#play #correct small{font-size:.8em;color:#3d5734!important;font-weight:850}
#play .alias10-tools{display:none!important}
#play .scoregrid,#play .progressrow{display:none!important}
#play .undo-row{flex-shrink:0!important;margin:0!important;justify-content:flex-start!important;display:flex}
#play .undo-button{background:transparent!important;color:#9aa89e!important;border:0!important;min-height:37px!important;padding:5px 0!important;font-size:12px!important;font-weight:550!important}
#play .center.spaced{margin:0!important;flex-shrink:0!important;line-height:1}
#play .center.spaced .btnlink{color:#cad1c9!important;text-decoration:underline!important;text-underline-offset:4px!important;min-height:35px!important;padding:5px!important;font-size:12px!important}
#play.alias10-correct .wordcard{animation:v121hit .22s ease-out!important}
#play.alias10-skip .wordcard{animation:v121skip .22s ease-out!important}
@keyframes v121hit{50%{background:#30482b!important;border-color:#d6fb72!important}}
@keyframes v121skip{50%{background:#51342e!important;border-color:#f0aaa1!important}}
/* Native fullscreen iPhone fallback remains attached to old id and class. */
body.alias11-focus #play{background:var(--v121-dark)!important;max-width:none!important;padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))!important;min-height:0!important;height:100dvh!important}
body.alias11-focus #play .wordcard{background:#202923!important}
/* Admin – quieter, professional data screen, independent of casual playing surface */
body:has(#adminContent){background:#f7f7f4!important}
body:has(#adminContent) main.wrap{max-width:1150px!important;padding:18px 28px 80px!important}
body:has(#adminContent) main.wrap>header{border-bottom:1px solid #dfe1d9;margin:0 0 35px!important;padding:12px 0 20px!important}
body:has(#adminContent) h1{font-size:clamp(45px,5.5vw,72px)!important;letter-spacing:-.07em!important;margin:0 0 8px!important}
body:has(#adminContent) section>p.muted{max-width:570px!important;font-size:14px!important;line-height:1.5!important}
body:has(#adminContent) .card{border:1px solid #e3e5de!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important}
body:has(#adminContent) .admin-tabs{gap:9px!important;border-bottom:0!important;padding:0!important;margin:22px 0!important}
body:has(#adminContent) .admin-tabs .btn{background:#fff!important;border:1px solid #e1e3dc!important;border-radius:8px!important;padding:11px 17px!important;min-height:46px;color:#676f66!important}
body:has(#adminContent) .admin-tabs .btn[aria-selected=true]{background:#202922!important;color:#fff!important;border-color:#202922!important}
body:has(#adminContent) .metric strong,body:has(#adminContent) .stat-metric strong{color:#1d2921!important}
body:has(#adminContent) .stat-bar{background:#5b765d!important}
body:has(#adminContent) .stat-chart{border-color:#e1e3dc!important}
@media(min-width:1000px){
 #setup .wizard-page:not(.hidden){max-width:840px}
 #setup .category{min-height:93px!important}
}
@media(max-width:700px){
 main.wrap{padding:0 16px 78px!important}
 .top{padding:13px 0 18px!important;margin-bottom:25px!important}
 .brand-icon{width:39px!important;height:39px!important;min-width:39px!important}
 .brand-type strong{font-size:16px!important}
 .brand-type small{font-size:10px!important}
 .nav-pill{font-size:12px!important;min-height:44px!important}
 .v121-hero-label{font-size:10px!important;margin:0 0 8px!important}
 .setup-compact-title{font-size:clamp(42px,10.7vw,58px)!important;margin:0 0 22px!important}
 #setup .wizard-nav{gap:5px!important;margin-bottom:22px!important}
 #setup .wizard-tab{flex-direction:column!important;min-height:61px!important;gap:4px!important;font-size:12px!important;line-height:1.2;padding:9px 5px!important}
 #setup .wizard-index{font-size:10px!important}
 #setup .wizard-heading{margin:0 0 18px!important}
 #setup .wizard-heading h2{font-size:23px!important}
 #setup .wizard-heading p{font-size:12px!important}
 #setup .sectionHead{gap:10px!important;align-items:flex-start!important}
 #setup .sectionHead h2{font-size:17px!important}
 #setup .sectionHead .subtext{display:none}
 #setup .categories{gap:7px!important}
 #setup .category{min-height:83px!important;padding:10px!important;display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:7px!important;row-gap:0!important;align-content:center}
 #setup .category input{grid-column:1!important;grid-row:1!important;width:17px;height:17px}
 #setup .category>div{grid-column:2!important;grid-row:1!important}
 #setup .category .catname{font-size:12px!important;line-height:1.17!important}
 #setup .category .catdesc{display:none!important}
 #setup .category .catcount{grid-column:2!important;grid-row:2!important;margin:5px 0 0!important;font-size:10px!important}
 #setup .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:19px!important;padding:1px 0 4px}
 #setup .chips .btn{font-size:11px!important;white-space:nowrap;flex:0 0 auto;padding:9px 12px!important}
 #setup .wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;bottom:0;z-index:8;background:linear-gradient(180deg,#f8f7f200 0%,#f8f7f2 16%,#f8f7f2 100%);padding:16px 0 12px!important;margin-top:8px!important;border:0!important}
 #setup .wizard-actions .btn.primary{min-width:165px;flex:1 1 auto}
 #setup .wizard-footnote{display:none}
 #setup .difficulty-options{grid-template-columns:1fr}
 #setup .difficulty-option{min-height:64px!important}
 #setup .custom-grid{grid-template-columns:1fr 1fr}
 body.alias11-playing main.wrap{padding:0 15px max(5px,env(safe-area-inset-bottom))!important}
 #play,body.alias11-playing #play{padding:8px 0 8px!important;gap:clamp(8px,1dvh,13px)!important;min-height:calc(100dvh - env(safe-area-inset-bottom) - 8px)!important}
 #play .v11-game-top{min-height:46px!important}
 #play .v11-game-top strong{font-size:10px!important;letter-spacing:.08em!important}
 #play .v11-fullscreen{min-height:44px!important;font-size:12px!important;padding:8px 10px!important;min-width:0!important}
 #play .stats{min-height:42px!important}
 #play #playingTeam{font-size:20px!important}
 #play #turnStats{font-size:11px!important}
 #play #deckRemaining{padding:7px 9px!important;font-size:10px!important}
 #play #timer,body.alias11-playing #play #timer{font-size:clamp(52px,8.5dvh,76px)!important;margin:1px 0 0!important}
 #play .wordcard,body.alias11-playing #play .wordcard{min-height:clamp(220px,31dvh,340px)!important;padding:18px!important;border-radius:17px!important;margin:0!important}
 #play .wordcard h2,body.alias11-playing #play .wordcard h2{font-size:clamp(35px,10vw,54px)!important;letter-spacing:-.062em!important}
 #play .wordcard .eyebrow{font-size:10px!important}
 #play .actions .btn,body.alias11-playing #play .actions .btn{min-height:clamp(84px,12dvh,108px)!important;font-size:16px!important;border-radius:13px!important;padding:9px!important}
 #play .v121-action-icon{font-size:23px!important}
 #play .undo-button{font-size:12px!important;min-height:37px!important}
 #play .center.spaced .btnlink{min-height:35px!important}
 body:has(#adminContent) main.wrap{padding:12px 16px 60px!important}
 body:has(#adminContent) main.wrap>header{margin-bottom:24px!important}
 body:has(#adminContent) h1{font-size:47px!important}
 body:has(#adminContent) .admin-tabs{gap:7px!important}
 body:has(#adminContent) .admin-tabs .btn{min-height:44px!important;padding:10px!important;font-size:12px!important}
}
@media(max-height:720px){
 #play,body.alias11-playing #play{gap:5px!important}
 #play .wordcard,body.alias11-playing #play .wordcard{min-height:140px!important}
 #play .actions .btn,body.alias11-playing #play .actions .btn{min-height:70px!important}
 #play #timer,body.alias11-playing #play #timer{font-size:51px!important}
}
@media(prefers-reduced-motion:reduce){#play.alias10-correct .wordcard,#play.alias10-skip .wordcard{animation:none!important}}
/* Higher-specificity fix for legacy v11/v12 !important colors. */
body.alias11-playing #play #playingTeam,
body.alias11-focus #play #playingTeam{color:#f8fff4!important}
body.alias11-playing #play #turnStats,
body.alias11-focus #play #turnStats{color:#abbab0!important}
body.alias11-playing #play #deckRemaining,
body.alias11-focus #play #deckRemaining{color:#ccd7cc!important;background:#ffffff12!important;border:1px solid #ffffff1f!important;border-radius:7px!important}
body.alias11-playing #play .v11-fullscreen,
body.alias11-focus #play .v11-fullscreen{min-width:128px!important;min-height:48px!important}