:root{--gold:#ffd84d;--cyan:#38d9ff;--ink:#07102f;--panel:#0b1038;--white:#fff}*{box-sizing:border-box}html{background:#050923}body{min-height:100vh;margin:0;color:#fff;background:radial-gradient(circle at 50% -15%,#5b168b,#25145d 28%,#101a4d 60%,#050923);font-family:Poppins,system-ui,sans-serif}button,input{font:inherit}.hide{display:none!important}.skip{position:fixed;top:-5rem;left:1rem;z-index:9999;background:#fff;color:#111;padding:.7rem 1rem}.skip:focus{top:1rem}.shell{max-width:1440px;margin:auto;padding:1rem 1.25rem 2rem}.kicker,.round{margin:.2rem 0;color:var(--gold);font-size:.77rem;font-weight:950;letter-spacing:.18em}.setup{max-width:760px;margin:2rem auto;padding:2rem;border:2px solid #dc54ff;border-radius:28px;background:linear-gradient(145deg,#14103bf5,#10082ff5);text-align:center;box-shadow:0 0 70px #d946ef44,inset 0 0 35px #7c3aed22}.setup h1{margin:.3rem 0;font:900 clamp(2rem,6vw,3.7rem)/1.1 'Playfair Display',serif;text-shadow:0 0 24px #d946ef}.lead{max-width:590px;margin:.6rem auto 1.5rem;color:#e8eaff}.setup fieldset{border:0;padding:0;margin:0 0 1rem}.setup legend{width:100%;margin-bottom:.5rem;font-weight:900}.segments{display:flex;justify-content:center;gap:.5rem}.segments button{min-width:62px;padding:.6rem 1rem;border:2px solid #6b58b8;border-radius:12px;background:#211852;color:#fff;font-weight:900}.segments .on{background:#8b3ef1;border-color:#ecd0ff;box-shadow:0 0 16px #b76cff}.team-inputs{display:grid;gap:.6rem;max-width:540px;margin:1rem auto}.team-input{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:.7rem}.team-input i{width:18px;height:18px;border-radius:50%;background:var(--team);box-shadow:0 0 12px var(--team)}.team-input label{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}.team-input input{width:100%;padding:.65rem .8rem;border:2px solid #6452aa;border-radius:9px;background:#0a0d31;color:#fff;font-weight:800}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.setup-grid fieldset{padding:.9rem;border:1px solid #5c4d9c;border-radius:15px;background:#080c2f;text-align:left}.setup-grid label{display:flex;gap:.5rem;margin:.5rem;color:#eef1ff}.setup-grid input,.buzz input{width:22px;height:22px;accent-color:#20cf95}.buzz{display:flex;justify-content:center;align-items:center;gap:.7rem;margin:1.2rem}.buzz span{text-align:left}.buzz small{display:block;color:#bac8ed}.start{border:0;border-radius:15px;padding:.9rem 2rem;background:#20cf95;color:#052a21;font-size:1.18rem;font-weight:950;box-shadow:0 10px 28px #10b98155}.setup-links{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.setup-links button{min-height:44px;padding:0 .5rem;border:0;background:none;color:#dbe7ff;text-decoration:underline}.game-head{display:flex;justify-content:space-between;align-items:end;max-width:1180px;margin:auto}.game-head h1{margin:.1rem 0;font:900 2.2rem 'Playfair Display',serif}.progress{display:flex;gap:.4rem}.progress i{width:14px;height:14px;border:2px solid #8fa1dc;border-radius:50%;background:#25346b}.progress i.done{background:#20cf95}.progress i.current{background:var(--gold);box-shadow:0 0 12px var(--gold)}.scores{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin:.5rem auto 1rem}.team-card{position:relative;min-width:150px;padding:.6rem .9rem;border:3px solid transparent;border-radius:16px;background:var(--team);text-align:center;box-shadow:0 7px 18px #0006;transition:.2s}.team-card.current{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 0 0 3px #151030,0 0 22px var(--gold)}.team-card.current:before{content:"CURRENT TURN";position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:.14rem .5rem;border-radius:99px;background:var(--gold);color:#2c1b00;font-size:.6rem;font-weight:950;white-space:nowrap}.team-name{font-weight:900}.team-total{font-size:1.55rem;font-weight:950;line-height:1}.team-round{font-size:.7rem;color:#fff9c7}.board{max-width:1180px;margin:auto;text-align:center}.category{margin-bottom:.35rem;color:var(--gold);font-weight:950;letter-spacing:.12em;text-transform:uppercase}.puzzle{display:flex;min-height:100px;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap;padding:1rem;border:3px solid #a958ff;border-radius:22px;background:#061238e8;box-shadow:0 0 30px #9c4dff55,inset 0 0 24px #0a6ee733}.word{display:flex;gap:.22rem}.tile{display:grid;width:clamp(29px,3.4vw,45px);height:clamp(42px,4.6vw,60px);place-items:center;border:2px solid #4875df;border-radius:7px;background:#123574;color:#0b1b4c;font:950 clamp(1.25rem,2.5vw,2rem) 'Playfair Display',serif}.tile.shown{border-color:#fff;background:linear-gradient(#fff,#ddf8ff);animation:flip .4s ease}.announce{max-width:900px;min-height:44px;margin:.7rem auto;padding:.55rem 1rem;border:1px solid #5068a8;border-radius:12px;background:#080e31;text-align:center;font-weight:850}.sr-alert{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}.play{display:grid;grid-template-columns:360px minmax(0,1fr);gap:1.2rem;align-items:center;max-width:1180px;margin:auto}.wheel-side{text-align:center}.wheel-wrap{position:relative;width:320px;height:320px;margin:.4rem auto}.wheel{width:100%;height:100%;border:9px solid #fff;border-radius:50%;box-shadow:0 0 38px #ec489966,0 14px 35px #0008,inset 0 0 0 4px #111944;transition:transform 4.2s cubic-bezier(.12,.64,.18,1)}.wheel-label{position:absolute;left:50%;top:50%;width:68px;margin:-10px 0 0 -34px;color:#fff;font-size:.68rem;font-weight:950;text-shadow:0 2px 3px #000}.pointer{position:absolute;z-index:5;top:-10px;left:50%;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:42px solid #ff315c;filter:drop-shadow(0 3px 2px #0008)}.wheel-cap{position:absolute;z-index:4;inset:37%;border:5px solid #d8e3ff;border-radius:50%;background:#fff;color:#101a4d;font-weight:950;box-shadow:0 4px 12px #0008}.spin-result{min-height:40px;color:var(--gold);font-size:1.3rem;font-weight:950}.turn{text-align:center;font-size:1.25rem;font-weight:950}.timer-row{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:.5rem}.timer-box{text-align:center}.timer-box span{display:block;color:#cae7ff;font-size:.65rem;font-weight:900}.timer-box strong{display:block;min-width:105px;padding:.25rem .8rem;border:4px solid var(--cyan);border-radius:99px;background:#05071f;font-size:1.6rem}.timer-box strong.warn{border-color:var(--gold)}.timer-box strong.done{border-color:#ff4f66;background:#521124}.circle,.add-time{border:1px solid #6c78aa;background:#19174a;color:#fff;font-weight:900}.circle{width:44px;height:44px;border-radius:50%}.add-time{padding:.55rem .75rem;border-radius:99px}.choice{text-align:center;font-weight:800}.letter-label{margin-top:.5rem;color:#cad8f7;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.letter-label span{color:var(--gold)}.letters{display:grid;gap:6px}.consonants{grid-template-columns:repeat(7,1fr)}.vowels{grid-template-columns:repeat(5,minmax(44px,1fr));max-width:400px}.letter{min-height:44px;border:2px solid #4d76df;border-radius:9px;background:#0b2d6e;color:#fff;font-size:1.08rem;font-weight:950}.letter.vowel{border-color:#b678eb;background:#4d2675}.letter:disabled{opacity:.3}.letter.used{text-decoration:line-through}.actions{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin-top:1rem}.actions button{padding:.72rem 1rem;border:0;border-radius:12px;color:var(--ink);font-weight:950}.actions button:disabled{opacity:.4;filter:grayscale(.7)}.actions .spin{background:var(--cyan)}.actions .solve{background:#2fe2a2}.actions .pass{background:#eef2ff}.host{max-width:1180px;margin:1rem auto;color:#cad4ed}.host summary{width:max-content;margin-left:auto;font-weight:800}.host div{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.host button{padding:.45rem .65rem;border:1px solid #6675aa;border-radius:8px;background:#11163d;color:#fff}.modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:1rem;background:#03051dea}.modal-card{width:min(520px,100%);padding:2rem;border:3px solid #af55ff;border-radius:24px;background:#fff;color:#111a45;text-align:center;box-shadow:0 0 60px #a950ff88}.modal-icon{font-size:3.2rem}.modal-card h2{margin:.2rem;font:900 2rem 'Playfair Display',serif}.modal-card label{display:block;margin:.7rem 0 .3rem;text-align:left;font-weight:900}.modal-card>input{width:100%;padding:.75rem;border:3px solid #6651b9;border-radius:10px;text-transform:uppercase}.modal-actions{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}.modal button{padding:.7rem 1.1rem;border:0;border-radius:10px;font-weight:950}.yes,.overlay-action{background:#20cf95;color:#052a21}.no{background:#e7eaf5;color:#17204c}.dark{color:#722da5}.overlay-message{margin:1rem 0;font-size:1.06rem}.tie-buttons{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.tie-buttons button{background:#38d9ff}.bonus{position:relative;max-width:1050px;margin:1rem auto;padding:1.5rem;border:3px solid var(--gold);border-radius:26px;background:linear-gradient(145deg,#281064,#091038);text-align:center;box-shadow:0 0 55px #ffd84d44}.bonus h2{margin:.2rem;color:#fff;font:900 clamp(2.3rem,5vw,4rem) 'Playfair Display',serif;text-shadow:0 0 22px #ffbf00}.envelope{width:215px;margin:1rem auto;padding:1rem;border:3px solid #fff1a8;border-radius:12px;background:linear-gradient(145deg,#f6bd27,#fff1aa);color:#3a2500;box-shadow:0 0 30px #ffd84d99;transform:rotate(-2deg)}.envelope span,.envelope b,.envelope small{display:block}.envelope span{font-size:2rem}.envelope.open{animation:pop .7s}.bonus-instruction,.bonus-picks{font-weight:900}.bonus-picks{min-height:28px;color:var(--gold)}.bonus-letters{display:grid;grid-template-columns:repeat(13,1fr);gap:5px;max-width:720px;margin:1rem auto}.bonus-solve{max-width:650px;margin:1rem auto}.bonus-solve label{font-weight:900}.bonus-solve>div{display:flex;gap:.5rem;margin-top:.5rem}.bonus-solve input{flex:1;min-width:0;padding:.75rem;border:3px solid var(--cyan);border-radius:10px;text-transform:uppercase}.bonus-solve button{border:0;border-radius:10px;background:#2fe2a2;color:#052a21;font-weight:950}
@keyframes flip{from{transform:rotateX(90deg)}to{transform:none}}@keyframes pop{50%{transform:scale(1.15) rotate(2deg)}to{transform:scale(1)}}
@media(max-width:850px){.play{grid-template-columns:1fr}.wheel-wrap{width:230px;height:230px}.wheel-label{font-size:.56rem}.game-head h1{display:none}.announce{position:sticky;top:4px;z-index:20}.actions{position:sticky;bottom:5px;z-index:25;padding:.5rem;border:1px solid #52669f;border-radius:14px;background:#080d2aee;backdrop-filter:blur(8px)}}
@media(max-width:600px){.shell{padding:.65rem}.setup{margin:.5rem auto;padding:1.2rem .9rem}.setup-grid{grid-template-columns:1fr}.team-card{min-width:calc(50% - .4rem)}.puzzle{min-height:70px;padding:.65rem .3rem;gap:.35rem}.word{gap:.1rem}.tile{width:clamp(20px,7vw,34px);height:clamp(31px,9.5vw,47px)}.wheel-wrap{width:185px;height:185px}.wheel{border-width:6px}.spin-result{min-height:30px;font-size:1.05rem}.letter{min-height:42px}.actions{gap:.35rem}.actions button{padding:.65rem .7rem;font-size:.86rem}.host{padding-bottom:4.5rem}.bonus-letters{grid-template-columns:repeat(7,1fr)}.bonus-solve>div{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}.wheel{transition-duration:.01ms!important}}

/* Wheel labels stay upright and scale with the responsive wheel. */
.wheel-label{transform:rotate(var(--angle)) translateY(-125px) rotate(calc(0deg - var(--angle)))}
@media(max-width:850px){.wheel-label{transform:rotate(var(--angle)) translateY(-88px) rotate(calc(0deg - var(--angle)))}}
@media(max-width:600px){.wheel-label{transform:rotate(var(--angle)) translateY(-69px) rotate(calc(0deg - var(--angle)))}}
.bonus-clock-row{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:1rem auto}.bonus-clock-row strong{min-width:110px;padding:.35rem .8rem;border:4px solid var(--cyan);border-radius:99px;background:#05071f;font-size:1.7rem}.bonus-clock-row strong.warn{border-color:var(--gold)}.bonus-clock-row strong.done{border-color:#ff4f66;background:#521124}.bonus-clock-row button{padding:.6rem .8rem;border:1px solid #8ca2d8;border-radius:99px;background:#19174a;color:#fff;font-weight:900}
