/* Visual direction: a bright, premium television-game-show stage. */ :root{--stage:#050818;--stage-2:#0b1234;--panel-2:#101a43;--electric:#20d7ff;--violet:#9c55ff;--show-gold:#ffd33d;--show-green:#32e2a0;--soft-white:#f7f8ff} html{background:var(--stage)} body{position:relative;background: radial-gradient(ellipse 45% 32% at 14% 0,#7732c766,transparent 70%), radial-gradient(ellipse 45% 32% at 86% 0,#087edc55,transparent 70%), linear-gradient(180deg,#12163d 0,#080d25 48%,#03050f 100%);background-attachment:fixed;overflow-x:hidden} body:before,body:after{content:"";position:fixed;z-index:-1;top:-18vh;width:34vw;height:115vh;pointer-events:none;filter:blur(18px);opacity:.16} body:before{left:2vw;background:linear-gradient(110deg,transparent 20%,#a855f7 50%,transparent 72%);transform:rotate(-12deg)} body:after{right:2vw;background:linear-gradient(250deg,transparent 20%,#00c8ff 50%,transparent 72%);transform:rotate(12deg)} /* Integrate the shared navigation into the stage instead of a white webpage header. */ .arc-top{max-width:none;margin:0;padding:.68rem clamp(.75rem,3vw,2rem);background:#070b20e8;border:0;border-bottom:1px solid #ffffff20;box-shadow:0 10px 36px #0007;backdrop-filter:blur(16px)} .arc-top .title{color:#fff;font-size:1rem;letter-spacing:.04em}.arc-top .back{color:#eef4ff;background:#151c42;border:1px solid #ffffff26;box-shadow:inset 0 1px #ffffff16}.arc-top .back:hover{color:#fff;border-color:var(--electric)} .arc-mute,.arc-gear{color:#fff;background:#151c42;border-color:#ffffff26}.arc-mute.off{color:#fff;background:#3c1b39;border-color:#f67ca3} .shell{max-width:1360px;padding:clamp(.65rem,1.5vw,1.25rem) clamp(.75rem,2vw,1.5rem) 2.5rem} .kicker,.round{color:var(--show-gold);letter-spacing:.22em} /* Setup lobby */ .setup{position:relative;isolation:isolate;max-width:820px;margin:clamp(1rem,3vh,2.4rem) auto;padding:clamp(1.35rem,3vw,2.4rem);border:1px solid #c985ff66;border-radius:32px;background:linear-gradient(145deg,#17183ef2,#0b0f2df5);box-shadow:0 35px 100px #000a,0 0 0 1px #ffffff0b,inset 0 1px #ffffff1f;overflow:hidden} .setup:before{content:"";position:absolute;z-index:-1;inset:-40% 5% auto;height:300px;background:radial-gradient(circle,#bc5fff42,transparent 68%);pointer-events:none} .setup h1{font-size:clamp(2.4rem,6vw,4.5rem);letter-spacing:-.035em;text-shadow:0 4px 0 #48187a,0 0 35px #c158ff66}.lead{font-size:1.02rem;line-height:1.65;color:#dce5ff} .segments button{min-width:70px;border-color:#ffffff24;background:#151a43;box-shadow:inset 0 1px #ffffff12;transition:.18s ease}.segments button:hover{border-color:#a984ff;transform:translateY(-2px)}.segments .on{background:linear-gradient(145deg,#a155ff,#6630d7);border-color:#e9d5ff;box-shadow:0 0 0 3px #a855f729,0 10px 24px #7639da55} .team-inputs{max-width:590px;gap:.75rem}.team-input{grid-template-columns:26px 1fr}.team-input i{width:20px;height:20px;border:3px solid #ffffffcc}.team-input input{padding:.8rem 1rem;border:1px solid #ffffff25;border-radius:13px;background:#070b22cc;box-shadow:inset 0 2px 10px #0007;font-size:1rem}.team-input input:focus{border-color:var(--electric);outline:3px solid #20d7ff2b} .setup-grid{gap:.8rem}.setup-grid fieldset{padding:1rem 1.1rem;border-color:#ffffff18;border-radius:18px;background:#080d27b8;box-shadow:inset 0 1px #ffffff0b}.setup-grid legend{text-align:left;color:#fff}.setup-grid label{align-items:center;min-height:44px;padding:.25rem .35rem;margin:.3rem 0;border-radius:8px}.setup-grid label:has(input:checked){color:#fff;background:#20d7ff13}.setup-grid input,.buzz input{accent-color:var(--show-green)} .buzz{width:max-content;max-width:100%;padding:.8rem 1rem;border:1px solid #ffffff16;border-radius:16px;background:#080d26}.start{min-width:240px;padding:1rem 1.5rem;border-radius:999px;background:linear-gradient(180deg,#49efb6,#18be82);box-shadow:0 7px 0 #087a55,0 18px 34px #0ac78a42;text-transform:uppercase;letter-spacing:.035em;transition:.15s}.start:hover{transform:translateY(-2px);filter:brightness(1.06)}.start:active{transform:translateY(5px);box-shadow:0 2px 0 #087a55}.setup-links button{color:#bfcdf3;text-underline-offset:4px} /* Game chrome */ .game{max-width:1280px;margin:auto}.game-head{max-width:none;align-items:center;padding:.25rem .4rem .55rem;border-bottom:1px solid #ffffff17}.game-head h1{font-size:1.75rem;letter-spacing:-.02em}.progress i{width:12px;height:12px;border-color:#6473a6;background:#1b2552}.progress i.current{background:var(--show-gold);border-color:#fff1a1}.progress i.done{background:var(--show-green);border-color:#9bffdc} .scores{position:relative;z-index:2;margin:.65rem auto .85rem;gap:.6rem}.team-card{flex:0 1 205px;min-width:175px;padding:.7rem 1rem;border:1px solid #ffffff52;border-radius:14px;background:linear-gradient(150deg,color-mix(in srgb,var(--team) 92%,white),color-mix(in srgb,var(--team) 78%,black));box-shadow:0 10px 22px #0006,inset 0 1px #ffffff3d}.team-card.current{border-color:#fff2a2;transform:translateY(0) scale(1.035);box-shadow:0 0 0 3px var(--show-gold),0 0 25px #ffd33d66,0 12px 24px #0008}.team-card.current:before{top:-11px;background:linear-gradient(#fff08b,#ffc928);box-shadow:0 3px 8px #0005}.team-name{font-size:.95rem}.team-total{margin:.12rem 0;font-size:1.75rem;text-shadow:0 2px 3px #0004}.team-round{display:inline-block;padding:.15rem .55rem;border-radius:999px;background:#0003;color:#fff;font-size:.66rem} /* Puzzle becomes the hero element. */ .board{max-width:none}.category{width:max-content;margin:0 auto -.58rem;padding:.32rem 1.25rem;position:relative;z-index:3;border:1px solid #ffe681;border-radius:999px;background:linear-gradient(#ffdd52,#f0ad12);color:#321d00;box-shadow:0 5px 16px #0006;font-size:.8rem;letter-spacing:.14em}.puzzle{min-height:128px;padding:1.35rem 1rem 1rem;border:1px solid #63b3ff80;border-radius:20px;background:linear-gradient(180deg,#102a5c,#07183c);box-shadow:0 18px 45px #0007,0 0 0 5px #0d1435,inset 0 0 45px #1673d433;gap:.8rem}.word{gap:.3rem}.tile{width:clamp(34px,3.8vw,52px);height:clamp(49px,5vw,68px);border:1px solid #ffffff30;border-radius:6px;background:linear-gradient(145deg,#0d5aab,#08376f);box-shadow:inset 0 0 0 2px #2c7acb,inset 0 -8px 14px #001d4d99,0 4px 6px #0005}.tile.shown{border-color:#fff;background:linear-gradient(145deg,#fff,#dff5ff);box-shadow:0 0 16px #8ee6ff77;color:#09153c} .announce{max-width:100%;min-height:48px;margin:.75rem 0;border:1px solid #ffffff1e;border-radius:14px;background:linear-gradient(90deg,#11183a,#17174a,#11183a);box-shadow:inset 0 1px #ffffff12;color:#f8fbff;font-size:1.02rem} /* Compact stage: wheel and choices read as one designed console. */ .play{grid-template-columns:minmax(300px,390px) minmax(0,1fr);max-width:none;gap:1rem;align-items:stretch}.wheel-side,.controls{border:1px solid #ffffff18;border-radius:22px;background:linear-gradient(155deg,#11173bed,#080d27ed);box-shadow:0 16px 38px #0006,inset 0 1px #ffffff13}.wheel-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.7rem}.controls{padding:.8rem 1rem 1rem}.wheel-wrap{width:clamp(270px,27vw,340px);height:clamp(270px,27vw,340px);margin:.2rem auto}.wheel{border:8px solid #f7f4ff;box-shadow:0 0 0 5px #171c42,0 0 36px #a94eff66,0 16px 30px #0009}.pointer{top:-8px;border-left-width:16px;border-right-width:16px;border-top:39px solid #ff315c;filter:drop-shadow(0 0 6px #ff315c)}.wheel-cap{inset:35.5%;border:5px solid #fff;background:radial-gradient(circle at 40% 35%,#fff,#d9e3ff);font-size:1.06rem;box-shadow:0 0 0 5px #10183f,0 6px 16px #0009}.spin-result{display:grid;place-items:center;min-height:40px;margin-top:.2rem;color:var(--show-gold);font-size:1.25rem} .turn{font-size:1.25rem;color:#fff}.timer-row{margin:.4rem}.timer-box strong{border:2px solid var(--electric);background:#030716;box-shadow:0 0 18px #20d7ff35}.circle,.add-time{background:#171d45;border-color:#ffffff25}.choice{margin:.35rem 0 .55rem;color:#dce7ff}.letter-label{margin-top:.4rem;color:#93a6d9}.letter-label span{padding:.1rem .4rem;border-radius:999px;background:#6d3d1e;color:#ffd57f}.letters{gap:7px}.letter{min-height:46px;border:1px solid #3f70c6;border-bottom:4px solid #183d85;border-radius:10px;background:linear-gradient(#164b91,#0b326f);box-shadow:inset 0 1px #ffffff24;color:#fff;transition:.1s}.letter:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.15)}.letter:not(:disabled):active{transform:translateY(2px);border-bottom-width:1px}.letter.vowel{border-color:#ad6fdf;border-bottom-color:#5f258e;background:linear-gradient(#7342a6,#4b236e)}.letter:disabled{opacity:.26;filter:saturate(.25)} .actions{margin-top:.85rem}.actions button{min-width:145px;padding:.82rem 1rem;border-radius:12px;box-shadow:0 5px 0 #0006;text-transform:uppercase;letter-spacing:.025em;transition:.12s}.actions button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.08)}.actions button:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #0006}.actions .spin{background:linear-gradient(#52e6ff,#18b9df)}.actions .solve{background:linear-gradient(#55efb8,#23c989)}.actions .pass{background:linear-gradient(#f7f8ff,#cbd3e8)} .host{max-width:none;margin-top:.75rem}.host summary{padding:.4rem .6rem;color:#8fa0cc;font-size:.8rem}.host button{background:#101633;border-color:#ffffff1c;color:#cbd5f0} /* Money Round gets a distinct gold stage. */ .bonus{max-width:none;padding:clamp(1.1rem,3vw,2rem);border:1px solid #ffe478;border-radius:24px;background:radial-gradient(circle at 50% 15%,#6c441f55,transparent 38%),linear-gradient(145deg,#24164c,#091331 70%);box-shadow:0 25px 70px #0009,0 0 35px #ffd33d35,inset 0 1px #fff0a14a}.bonus h2{letter-spacing:-.035em}.envelope{border-radius:16px;background:linear-gradient(145deg,#ffe37a,#e9a60f);box-shadow:0 0 0 5px #6c471d,0 0 38px #ffd33d88}.bonus-letters{gap:7px}.bonus-clock-row strong{border-width:2px;box-shadow:0 0 20px #20d7ff33}.bonus-solve input{background:#fff;color:#0a1237}.bonus-solve button{padding:.8rem 1rem} .modal{background:#020414eF;backdrop-filter:blur(8px)}.modal-card{border:1px solid #ffffff66;border-radius:28px;background:linear-gradient(155deg,#fff,#eaf0ff);box-shadow:0 40px 100px #000c,0 0 45px #9c55ff55}.modal-card h2{font-size:2.35rem}.overlay-action,.modal-actions .yes{box-shadow:0 4px 0 #07845a} @media(max-width:900px){.play{grid-template-columns:1fr}.wheel-side{padding:.4rem}.wheel-wrap{width:250px;height:250px}.wheel-label{transform:rotate(var(--angle)) translateY(-98px) rotate(calc(0deg - var(--angle)))}.controls{padding:.75rem}.actions{position:static;background:transparent;border:0;padding:0;backdrop-filter:none}.announce{position:static}.game-head h1{display:block}.team-card{flex:1 1 145px}} @media(max-width:600px){.arc-top{padding:.45rem .55rem}.shell{padding:.55rem}.setup{border-radius:22px}.setup h1{font-size:2.45rem}.setup-grid{gap:.6rem}.game-head{padding:.15rem .2rem .5rem}.game-head h1{display:none}.scores{gap:.4rem}.team-card{min-width:calc(50% - .3rem);padding:.62rem .55rem}.team-total{font-size:1.45rem}.puzzle{min-height:86px;padding:1.1rem .4rem .65rem;gap:.45rem}.word{gap:.12rem}.tile{width:clamp(21px,7vw,34px);height:clamp(32px,9.5vw,48px)}.announce{margin:.55rem 0;font-size:.9rem}.play{gap:.65rem}.wheel-side,.controls{border-radius:18px}.wheel-wrap{width:210px;height:210px}.wheel-label{font-size:.52rem;transform:rotate(var(--angle)) translateY(-79px) rotate(calc(0deg - var(--angle)))}.spin-result{font-size:1.05rem}.timer-row{gap:.35rem}.timer-box strong{min-width:92px;font-size:1.35rem}.circle{width:42px;height:42px}.add-time{font-size:.8rem}.consonants{grid-template-columns:repeat(7,1fr)}.letter{min-height:43px}.actions{gap:.4rem}.actions button{flex:1 1 95px;min-width:0;padding:.7rem .45rem;font-size:.78rem}.host{padding-bottom:0}.bonus{border-radius:18px}.bonus-letters{grid-template-columns:repeat(7,1fr)}} @media(prefers-reduced-motion:reduce){.start,.segments button,.letter,.actions button{transition:none}} /* Keep shared arcade card styles from stretching puzzle characters. */ .puzzle .tile{display:grid;flex:0 0 auto;min-height:0;padding:0;justify-content:center;align-items:center} .announce.tie-active{padding:.8rem 1rem;background:linear-gradient(90deg,#281b55,#142658);border-color:#ffd33d66}.announce.tie-active strong{color:var(--show-gold)} /* Values follow each wedge instead of competing for horizontal space. */ .wheel-label{font-size:.62rem;line-height:1;white-space:nowrap;transform:rotate(var(--angle)) translateY(-118px) rotate(var(--flip))} @media(max-width:900px){.wheel-label{font-size:.56rem;transform:rotate(var(--angle)) translateY(-91px) rotate(var(--flip))}} @media(max-width:600px){.wheel-label{font-size:.5rem;transform:rotate(var(--angle)) translateY(-74px) rotate(var(--flip))}} /* ⭐ 2 October 2026, on Jen's word: "start with the worst few" tap targets, shown to her before going wider. These seven were the browser's default 22x22 radios and checkbox, the smallest controls in the Game Room. ⛔ Deliberately placed in THIS file and not arcade.css, which 73 games load: scoping it here changes the Big Wheel and nothing else. Each control already sits inside its own