:root { color-scheme: dark; --ink:#f6f7ff; --muted:#b8c1e1; --deep:#111a3f; --panel:#1c2759; --panel-2:#263574; --blue:#4dc9ff; --coral:#ff7d91; --lime:#b7f46b; --danger:#ff596f; --line:rgba(255,255,255,.14); --app-height:100dvh; --viewport-offset-top:0px; font-family:Inter,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
* { box-sizing:border-box; }
html { width:100%; height:100%; overflow:hidden; background:#171d46; }
body { position:fixed; top:var(--viewport-offset-top); right:0; bottom:auto; left:0; margin:0; width:100%; height:var(--app-height); overflow:hidden; overscroll-behavior:none; background:radial-gradient(80rem 44rem at -10% -25%,#3850af 0%,transparent 58%),radial-gradient(50rem 40rem at 110% 0,#7d2b70 0%,transparent 60%),linear-gradient(155deg,#0d1534,#171d46 55%,#101839); color:var(--ink); touch-action:pan-y; }
button,input,select,textarea { font:inherit; touch-action:manipulation; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.5; }
/* Only round controls own gestures. Card text, scores, rosters and forms retain native selection/editing. */
.game-card .panel-actions,.game-card .role-actions,.game-card .covered-card{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.game-card .panel-actions img,.game-card .role-actions img,.game-card .covered-card img{-webkit-user-drag:none;user-drag:none}
#app { width:100%; max-width:100%; height:var(--app-height); min-height:0; overflow:hidden; display:grid; place-items:center; padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 6px) calc(env(safe-area-inset-left,0px) + 10px); }
.shell { width:min(100%,820px); height:100%; min-height:0; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto; } .screen-slot{min-width:0;min-height:0;overflow:hidden;display:grid}.screen-slot>*{min-width:0;min-height:0}.top { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 2px 10px; min-height:36px; }.top-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px}.profile-link{color:var(--muted);font-size:.78rem;font-weight:800;text-decoration:none}.profile-link:hover,.profile-link:focus-visible{color:var(--lime);text-decoration:underline}.audio-toggle{min-height:34px;padding:5px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(17,26,63,.65);color:var(--muted);font-size:.76rem;font-weight:750}.audio-toggle:hover{color:var(--ink);border-color:rgba(183,244,107,.6)}
.brand { font-weight:900; letter-spacing:.02em; display:flex; gap:9px; align-items:center; text-decoration:none; color:var(--ink); } .brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#7777ff);font-size:.78rem;color:#07102c}.brand em{color:var(--lime);font-style:normal}.small {font-size:.84rem;color:var(--muted)}
.card,.hero,.game-card { border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(35,48,108,.92),rgba(20,29,68,.86)); box-shadow:0 22px 60px rgba(0,0,0,.28); }
.hero { padding:clamp(26px,7vw,64px); overflow:hidden; position:relative; }.hero:after{content:"";position:absolute;inset:auto -25% -55% 24%;height:260px;background:repeating-linear-gradient(110deg,transparent 0 24px,rgba(77,201,255,.11) 25px 27px);transform:rotate(-8deg);pointer-events:none}
.hero-heading{display:grid;grid-template-columns:minmax(0,1fr) clamp(105px,23vw,190px);align-items:center;gap:clamp(10px,3vw,28px);position:relative;z-index:1}.hero-title{min-width:0}.hero-art{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:24%;box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12);transform:rotate(2deg)}.hero-heading h1{margin-bottom:0}
.home-hero .hero-heading{display:flex;flex-direction:column;align-items:stretch;gap:clamp(13px,2.8vh,24px)}.home-hero .hero-art{width:100%;height:clamp(132px,25vh,250px);aspect-ratio:auto;object-fit:cover;object-position:center 48%;border-radius:clamp(18px,3vw,28px);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12);transform:none}.home-hero .hero-title{width:100%}
h1,h2,h3,p{margin-top:0} h1{font-size:clamp(2.8rem,12vw,5.7rem);line-height:.9;letter-spacing:-.07em;margin-bottom:18px;max-width:610px}.headline-animated{position:relative;z-index:1}.headline-word,.headline-letter,.headline-space{display:inline-block}.headline-word{white-space:nowrap}.headline-letter{animation:headline-dance 3.8s cubic-bezier(.37,.01,.35,1) infinite;animation-delay:calc(var(--letter-index) * -115ms);transform-origin:center 78%;will-change:transform}.headline-space{width:.22em}@keyframes headline-dance{0%,57%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}7%{transform:translate3d(0,-.08em,0) rotate(-2deg) scale(1.055)}15%{transform:translate3d(.025em,.025em,0) rotate(1.5deg) scale(.975)}23%{transform:translate3d(-.018em,-.035em,0) rotate(-.8deg) scale(1.025)}31%{transform:translate3d(0,0,0) rotate(0) scale(1)}}@media (prefers-reduced-motion:reduce){.headline-letter{animation:none;will-change:auto}}.claim{max-width:540px;color:var(--muted);font-size:clamp(1.02rem,3vw,1.22rem);line-height:1.5;position:relative;z-index:1}.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;position:relative;z-index:1;margin-top:30px}
.button { min-height:52px;border-radius:15px;border:1px solid transparent;padding:11px 15px;background:var(--panel-2);color:var(--ink);font-weight:750;transition:transform .12s,filter .15s,background .15s; }.button:hover{transform:translateY(-2px);filter:brightness(1.12)}.button.primary{background:linear-gradient(135deg,var(--blue),#7276ff);color:#07102c}.button.coral{background:linear-gradient(135deg,var(--coral),#fe9b64);color:#3a0d26}.button.warn{background:linear-gradient(135deg,var(--danger),#ff906d);color:#30091a}.button.ghost{background:transparent;border-color:var(--line)}.button.slim{min-height:38px;padding:6px 10px;font-size:.85rem}
.form-card{padding:clamp(20px,5vw,36px)} .form-card h2{font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:-.04em}.fields{display:grid;gap:14px}.field{display:grid;gap:7px;text-align:left;color:var(--muted);font-size:.88rem}.field input,.field select,.field textarea{width:100%;min-height:50px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:#111a3d;color:var(--ink)}.field textarea{min-height:86px;resize:vertical;line-height:1.4}.fieldset{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hint,.error{font-size:.9rem;color:var(--muted);line-height:1.45}.error{color:#ffc0c8}.footer{color:var(--muted);font-size:.82rem;text-align:center;margin:24px 0 2px}.footer a{color:var(--lime)}
.setup-details{border:1px solid var(--line);border-radius:16px;background:rgba(8,15,47,.34);overflow:hidden}.setup-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;cursor:pointer;font-weight:850;list-style:none}.setup-details>summary::-webkit-details-marker{display:none}.setup-details>summary:after{content:"＋";color:var(--lime);font-size:1.15rem}.setup-details[open]>summary:after{content:"−"}.setup-details>summary small{margin-left:auto;color:var(--muted);font-weight:650}.setup-details-body{padding:0 14px 14px;border-top:1px solid var(--line);padding-top:14px}.create-actions{margin-top:6px}
.room-header{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:14px}.room-code{font-size:1.3rem;font-weight:900;letter-spacing:.14em}.scores{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}.team{border:1px solid var(--line);padding:14px;border-radius:18px;background:rgba(9,17,52,.42)}.team.blue{border-color:rgba(77,201,255,.55)}.team.coral{border-color:rgba(255,125,145,.55)}.team strong{display:block;font-size:1.65rem}.team span{color:var(--muted);font-size:.85rem}.status-panel{padding:16px;margin-bottom:14px}.status-panel h2{margin-bottom:6px;font-size:1.25rem}.timer{font-variant-numeric:tabular-nums;font-weight:900;font-size:clamp(2.2rem,10vw,4.3rem);letter-spacing:-.06em;justify-self:end;transition:font-size .18s ease,transform .18s ease,color .18s ease,background .18s ease}.timer.timer-final{justify-self:center;margin:.05rem auto .2rem;padding:.13em .25em;border:1px solid rgba(255,211,112,.72);border-radius:.36em;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.32),rgba(255,151,82,.28) 42%,rgba(220,56,92,.32));box-shadow:0 0 0 5px rgba(255,127,100,.1),0 16px 38px rgba(255,62,86,.28);color:#fff4ca;font-size:clamp(4rem,20vw,8.2rem);line-height:.8;letter-spacing:-.09em;text-shadow:0 2px 0 rgba(101,19,45,.45),0 0 24px rgba(255,235,157,.72);animation:timer-final-pulse .82s cubic-bezier(.3,.05,.25,1) infinite}.timer.timer-critical{border-color:rgba(255,101,118,.95);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(255,92,90,.4) 46%,rgba(167,23,72,.5));color:#fff0f0;animation:timer-critical-pulse .58s cubic-bezier(.3,.05,.25,1) infinite}.round-badge{color:var(--lime);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.game-card{padding:clamp(20px,6vw,42px);min-height:0;display:grid;align-content:center;gap:19px;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(77,201,255,.16),transparent 40%,rgba(255,125,145,.15));pointer-events:none}.game-card>*{position:relative}.category{text-transform:uppercase;letter-spacing:.12em;color:var(--lime);font-weight:850;font-size:.78rem}.term{font-size:clamp(2.25rem,13vw,5.7rem);line-height:.93;letter-spacing:-.075em;overflow-wrap:anywhere}.forbidden{display:grid;gap:7px}.forbidden strong{font-size:.86rem;color:var(--muted)}.words{display:flex;flex-wrap:wrap;gap:7px}.word{border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-weight:700}.role-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.watcher-action{grid-column:1/-1}.players{display:grid;gap:8px;margin:14px 0}.player{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:13px;background:rgba(10,17,47,.4);border:1px solid transparent}.player.me{border-color:var(--lime)}.player .dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}.player .dot.blue{background:var(--blue)}.player .dot.coral{background:var(--coral)}.player .who{flex:1}.player small{color:var(--muted)}.lobby-grid{display:grid;gap:14px}.invite{padding:14px;word-break:break-all;background:rgba(4,9,30,.4);border-radius:14px;color:var(--muted);font-size:.86rem}.room-invite{display:grid;gap:13px;text-align:center;padding:18px;margin-top:10px;border:1px solid rgba(77,201,255,.3);border-radius:18px;background:rgba(4,9,30,.25)}.invite-label{color:var(--muted);font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.room-code-large{font-size:clamp(2rem,10vw,3.6rem);line-height:1;letter-spacing:.16em;color:var(--lime);font-variant-numeric:tabular-nums}.invite-qr{display:grid;justify-items:center;gap:8px}.invite-qr>a{display:block;line-height:0;border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.26)}.invite-link-row{display:flex;align-items:center;gap:8px}.invite-link-input{flex:1;min-width:0;height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#111a3d;color:var(--muted);font:inherit;font-size:.78rem}.invite-link-input:focus{outline:2px solid rgba(77,201,255,.68);outline-offset:1px}.invite-actions{margin-top:0}.invite-status{min-height:1.25em;margin:0;color:var(--lime);font-size:.84rem}.manage{display:grid;gap:7px}.manage-row{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}.public-note{padding:11px 13px;border-radius:13px;background:rgba(183,244,107,.1);color:#dcffad;font-size:.9rem}.screen-status{text-align:center;padding:28px}.full{width:100%}.hidden{display:none!important}
.qr{display:block;width:min(220px,70vw);height:auto;aspect-ratio:1;border-radius:14px;background:#fff;padding:10px;image-rendering:auto}
.room-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.device-pill{display:inline-flex;align-items:center;min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:.78rem;font-weight:800}.device-pill.host{color:var(--lime);border-color:rgba(183,244,107,.45)}
.room-screen{display:grid;gap:0}.room-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 14px;padding:5px;border:1px solid var(--line);border-radius:16px;background:rgba(7,13,43,.52)}.room-nav .button{min-height:42px;padding:8px 6px;border-radius:11px;color:var(--muted);font-size:.82rem}.room-nav .button.active{border-color:rgba(77,201,255,.52);background:linear-gradient(135deg,rgba(77,201,255,.2),rgba(114,118,255,.22));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.room-view{min-width:0}.lobby-panel{display:grid;gap:14px}.role-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(7,13,43,.38)}.role-hero h2,.role-hero p{margin-bottom:0}.role-hero.host{border-color:rgba(183,244,107,.42)}.role-hero.team-1{border-color:rgba(77,201,255,.48)}.role-hero.team-2{border-color:rgba(255,125,145,.48)}.role-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.09);font-size:1.2rem;font-weight:950}.waiting-strip{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:13px;background:rgba(183,244,107,.08);color:#dcffad;font-size:.88rem}.waiting-strip>span:nth-child(2){flex:1}.waiting-strip.pending{color:var(--muted);background:rgba(255,255,255,.045)}.compact-actions{margin-top:0}.invite-panel>.room-invite{margin-top:0}.ai-room-details{margin-top:0}
.overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:18px;background:rgba(5,8,29,.82);backdrop-filter:blur(10px)}.overlay-card{width:min(100%,520px);max-height:92vh;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:24px;background:#192452;box-shadow:0 30px 90px rgba(0,0,0,.55)}.overlay-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.overlay-head h2{margin:0}
.music-indicator{position:fixed;z-index:70;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;align-items:center;gap:9px;width:min(92vw,360px);min-height:46px;padding:7px 10px;border:1px solid rgba(77,201,255,.45);border-radius:16px;background:rgba(11,18,49,.94);box-shadow:0 14px 38px rgba(0,0,0,.42);color:var(--ink);transform:translateX(-50%);backdrop-filter:blur(12px);transition:opacity .16s ease,transform .16s ease}.music-indicator:hover{border-color:var(--lime)}.music-indicator.fading{opacity:0;transform:translateX(-50%) translateY(8px)}.music-indicator-copy{display:grid;min-width:0;flex:1;text-align:left}.music-indicator-copy strong{font-size:.82rem}.music-indicator-copy small{color:var(--muted);font-size:.7rem}.music-stop{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.08);font-size:1.1rem}.music-bars{display:flex;align-items:flex-end;gap:2px;width:22px;height:23px}.music-bars i{display:block;width:5px;border-radius:4px;background:linear-gradient(var(--lime),var(--blue));animation:music-bar .72s ease-in-out infinite alternate}.music-bars i:nth-child(1){height:42%}.music-bars i:nth-child(2){height:92%;animation-delay:-.28s}.music-bars i:nth-child(3){height:65%;animation-delay:-.48s}.music-indicator.retry .music-bars i{animation:none;height:55%}@keyframes music-bar{to{height:24%}}
.covered-card{display:grid;place-items:center;gap:10px;min-height:180px;border:2px dashed rgba(77,201,255,.45);border-radius:22px;background:repeating-linear-gradient(135deg,rgba(77,201,255,.08) 0 12px,transparent 12px 24px);text-align:center}.covered-card span{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem}.covered-card strong{font-size:clamp(1.1rem,5vw,1.6rem)}.countdown{font-size:clamp(3rem,18vw,7rem);font-weight:950;letter-spacing:-.08em;text-align:center;animation:countdown-pulse .75s ease-in-out infinite alternate}.violation-box{padding:17px;border:1px solid rgba(255,89,111,.65);border-radius:18px;background:rgba(255,32,68,.16)}.violation-box h2{color:#ffd3d9}.phase-violation_review,.phase-violation_decided{box-shadow:0 0 0 2px rgba(255,89,111,.4),0 22px 60px rgba(0,0,0,.28)}
.team-roster{display:grid;gap:7px;margin:12px 0;padding:0;border:1px solid var(--line);border-radius:16px;background:rgba(7,13,43,.35);overflow:hidden}.team-roster.blue{border-color:rgba(77,201,255,.4)}.team-roster.coral{border-color:rgba(255,125,145,.4)}.team-title,.member-row,.device-row{display:flex;align-items:center;gap:8px}.team-title{justify-content:space-between;padding:13px;cursor:pointer;list-style:none}.team-title::-webkit-details-marker{display:none}.team-title:after{content:"＋";color:var(--muted);font-weight:900}.team-roster[open]>.team-title{border-bottom:1px solid var(--line)}.team-roster[open]>.team-title:after{content:"−"}.team-roster>.member-row,.team-roster>.roster-edit{margin-left:12px;margin-right:12px}.team-roster>.member-row:first-of-type{margin-top:6px}.team-roster>.roster-edit:last-child,.team-roster>.member-row:last-child{margin-bottom:12px}.member-row .who,.device-row span:nth-child(2){flex:1}.roster-edit{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:9px;border-top:1px solid var(--line)}.roster-field{display:grid;gap:4px;min-width:0;color:var(--muted);font-size:.72rem}.roster-new-member{grid-column:1/-1}.roster-edit input,.roster-edit select,.ai-panel select,.actions select{width:100%;min-width:0;min-height:42px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#111a3d;color:var(--ink)}.roster-actions{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.devices{margin-top:14px}.devices summary{cursor:pointer;color:var(--muted);font-size:.84rem}.device-row{padding:8px 0;border-top:1px solid var(--line)}.online-dot{width:9px;height:9px;border-radius:50%;background:#68708c}.online-dot.online{background:var(--lime);box-shadow:0 0 10px rgba(183,244,107,.7)}
.deck-card-list{display:grid;gap:8px}.deck-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(8,16,46,.42)}.deck-card-copy{display:grid;gap:4px;min-width:0}.deck-card-copy strong{overflow-wrap:anywhere}.deck-card-copy .small{overflow-wrap:anywhere}.deck-card-actions{display:flex;gap:7px;flex:none}@media(max-width:480px){.deck-card{align-items:flex-start;flex-direction:column}.deck-card-actions{width:100%}.deck-card-actions .button{flex:1}}
.ai-panel{display:grid;gap:11px;padding:16px;border:1px solid rgba(183,244,107,.3);border-radius:18px;background:rgba(183,244,107,.06)}.ai-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.ai-toggle{display:flex;align-items:center;gap:9px;font-weight:850}.ai-toggle input{accent-color:var(--lime);width:20px;height:20px}.ai-controls{display:grid;gap:13px;padding-top:12px;border-top:1px solid var(--line)}.ai-status{margin:0}.ai-field-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}.ai-field-row .field{margin:0}.ai-field-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.drafts{display:grid;gap:8px}.draft-card{display:grid;gap:6px;padding:11px;border:1px solid var(--line);border-radius:12px;background:rgba(6,12,40,.4)}
@keyframes countdown-pulse{from{transform:scale(.94);opacity:.68}to{transform:scale(1.04);opacity:1}}@keyframes timer-final-pulse{0%,100%{transform:scale(.96) rotate(-1deg)}48%{transform:scale(1.035) rotate(.8deg)}}@keyframes timer-critical-pulse{0%,100%{transform:scale(.94) rotate(-1.5deg);filter:saturate(1)}50%{transform:scale(1.07) rotate(1deg);filter:saturate(1.4) brightness(1.1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media (min-width:680px){.room-view{max-width:680px;margin-inline:auto}.room-header{grid-template-columns:1fr auto}.manage{max-height:290px;overflow:auto}} @media (max-width:560px){#app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));place-items:start center}.top{margin-bottom:12px}.brand{font-size:.87rem}.brand-mark{width:30px;height:30px}.profile-link{font-size:.72rem}.room-header{grid-template-columns:minmax(0,1fr) auto;margin-bottom:9px}.room-tools{gap:5px}.room-tools .device-pill{max-width:142px;min-height:32px;padding:4px 7px}.room-tools .button{min-height:34px;padding:5px 8px}.scores{margin-bottom:9px}.team{padding:9px 11px;border-radius:14px}.team strong{font-size:1.35rem}.room-nav{margin-bottom:9px}.status-panel{padding:13px}.room-invite{padding:13px}.qr{width:min(184px,58vw);padding:8px}.room-code-large{font-size:2.25rem}.invite-link-input{display:none}.term-assist{grid-template-columns:1fr}.ai-field-actions{justify-content:stretch}.ai-field-actions .button{flex:1 1 150px}.roster-edit{grid-template-columns:1fr}.roster-edit select{width:100%}.create-actions{grid-template-columns:1fr 1fr}.create-actions .button{min-width:0}} @media (max-width:420px){.fieldset{grid-template-columns:1fr}.top .small{display:none}.top-tools{gap:6px}.scores{gap:7px}.role-actions{grid-template-columns:1fr}.watcher-action{grid-column:auto}.audio-toggle{font-size:0}.audio-toggle::first-letter{font-size:1rem}.room-code{font-size:1.05rem}.device-pill{font-size:.7rem}.room-nav .button{font-size:.76rem}.role-hero{grid-template-columns:38px minmax(0,1fr);padding:12px}.role-icon{width:38px;height:38px;border-radius:12px}.create-actions{grid-template-columns:1fr}}

/* App shell: the document never scrolls. Only dense editing panels may scroll internally. */
.shell.is-room{grid-template-rows:auto minmax(0,1fr)}
.shell.is-room>.footer{display:none}
.footer{min-height:18px;margin:7px 0 0;line-height:1.2}.build-version{display:inline-block;margin-left:3px;color:rgba(184,193,225,.76);font-variant-numeric:tabular-nums;font-size:.72rem}
.screen-slot>.hero{height:100%;min-height:0}
.screen-slot>.form-card{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
.screen-slot>.form-card::-webkit-scrollbar,.room-view>.status-panel::-webkit-scrollbar,.overlay-card::-webkit-scrollbar{display:none}
.hero{display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,5.5vmin,56px)}
.hero h1{font-size:clamp(2.3rem,min(11vw,9.5vh),5.7rem);margin-bottom:clamp(10px,2.2vh,18px)}
.hero .claim{font-size:clamp(.91rem,min(3vw,2.3vh),1.22rem);line-height:1.42}
.hero .actions{margin-top:clamp(14px,3.4vh,30px)}

.room-screen{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.room-header,.scores,.room-nav{flex:none}
.room-view{width:100%;max-width:680px;min-width:0;min-height:0;flex:1;display:grid;margin-inline:auto;overflow:hidden}
.room-view>.status-panel,.room-view>.game-card{height:100%;min-height:0;margin:0}
.room-view>.status-panel:not(.panel-shell){overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
.panel-shell{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:0!important;gap:0}
.panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;-webkit-overflow-scrolling:touch;scroll-padding-bottom:18px;display:grid;align-content:start;gap:inherit;padding:clamp(11px,2.5vmin,16px)}
.panel-scroll::-webkit-scrollbar,.room-view>.status-panel::-webkit-scrollbar,.overlay-card::-webkit-scrollbar{display:none}
.panel-actions{flex:none;display:grid;gap:8px;padding:10px clamp(11px,2.5vmin,16px) 12px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(20,29,68,.72),rgba(17,24,58,.96));box-shadow:0 -10px 28px rgba(0,0,0,.18)}
.panel-actions .actions{margin-top:0}
.game-card.panel-shell{align-content:stretch}
.game-card .panel-scroll{padding:clamp(12px,3.5vmin,34px);gap:clamp(7px,1.7vh,19px);align-content:center}
.game-card .panel-actions{padding-top:8px}
.game-card .hint{margin-bottom:0}
.term{font-size:clamp(1.85rem,min(13vw,8.5vh),5.7rem)}
.words{gap:clamp(4px,1vh,7px)}
.word{padding:clamp(4px,.75vh,7px) clamp(7px,1.4vw,10px);font-size:clamp(.78rem,min(3.6vw,1.9vh),1rem)}
.covered-card{min-height:min(180px,28vh,28dvh)}
.timer.timer-final{font-size:clamp(3.3rem,min(20vw,12vh),8.2rem)}
.lobby-panel .panel-scroll{align-content:start;gap:clamp(8px,1.8vh,14px)}
.award-block{padding:12px 13px;border:1px solid rgba(183,244,107,.28);border-radius:16px;background:rgba(183,244,107,.08)}
.award-block h2{margin-bottom:6px;font-size:1.15rem}
.award-block p{margin:0;color:var(--muted)}
.status-panel{padding:clamp(11px,2.5vmin,16px)}
body.music-dock{--music-dock-space:62px}
body.music-dock #app{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--music-dock-space))}
.overlay{padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 10px) calc(env(safe-area-inset-left,0px) + 10px);overscroll-behavior:none}
.overlay-card{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
.field input,.field select,.field textarea,.roster-edit input,.roster-edit select,.ai-panel select,.actions select{font-size:max(16px,1rem)}

@media (hover:none){.button:hover{transform:none;filter:none}}

@media (max-width:560px){
  #app{padding-top:calc(env(safe-area-inset-top,0px) + 5px);padding-right:calc(env(safe-area-inset-right,0px) + 7px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 5px);padding-left:calc(env(safe-area-inset-left,0px) + 7px)}
  .shell{width:100%}
  .top{min-height:31px;margin:0 1px 6px;gap:7px}
  .brand{gap:6px;font-size:.8rem;white-space:nowrap}
  .brand-mark{width:28px;height:28px;border-radius:8px;font-size:.68rem}
  .top-tools{gap:5px}
  .profile-link{font-size:.68rem}
  .audio-toggle{min-height:30px;padding:4px 7px}
  .footer{font-size:.7rem;margin-top:5px}
  .hero{border-radius:20px;padding:clamp(16px,4.5vmin,25px)}
  .hero-heading{grid-template-columns:minmax(0,1fr) clamp(76px,24vw,104px);gap:9px}.hero-art{border-radius:22%;box-shadow:0 10px 24px rgba(0,0,0,.34)}.home-hero .hero-heading{gap:12px}.home-hero .hero-art{height:clamp(120px,23vh,190px);border-radius:18px}
  .hero .actions{grid-template-columns:1fr 1fr;gap:8px}
  .home-hero .actions>.button:last-child:nth-child(odd){grid-column:1/-1}
  .welcome .actions{grid-template-columns:1fr}
  .button{min-height:46px;padding:9px 10px;border-radius:13px}
  .form-card{padding:16px;border-radius:20px}
  .form-card h2{margin-bottom:8px}
  .fields{gap:11px}
  .field{gap:5px}
  .field input,.field select{min-height:46px}
  .field textarea{min-height:74px;resize:none}
  .room-header{min-height:35px;margin-bottom:6px}
  .room-code{font-size:1rem}
  .round-badge{font-size:.68rem}
  .room-tools .device-pill{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scores{gap:7px;margin-bottom:6px}
  .team{padding:7px 10px;border-radius:12px}
  .team strong{font-size:1.15rem;line-height:1.05}
  .team span{font-size:.72rem}
  .room-nav{gap:5px;margin-bottom:6px;padding:4px;border-radius:13px}
  .room-nav .button{min-height:38px;padding:6px 4px;font-size:.75rem}
  .status-panel{padding:11px;border-radius:18px}
  .lobby-panel{gap:9px}
  .role-hero{gap:9px;padding:10px;border-radius:14px}
  .role-hero h2{font-size:1.05rem}
  .role-hero .hint{font-size:.78rem;line-height:1.3}
  .role-icon{width:36px;height:36px;border-radius:11px}
  .waiting-strip{padding:8px 9px;font-size:.78rem}
  .compact-actions{gap:7px}
  .game-card{border-radius:20px;padding:0}
  .game-card .panel-scroll{padding:clamp(10px,3.2vmin,18px)}
  .game-card .panel-scroll>.category{font-size:.68rem}
  .timer{font-size:clamp(1.9rem,min(10vw,6vh),3.2rem)}
  .forbidden strong{font-size:.75rem}
  .role-actions{gap:7px}
  .panel-actions{gap:7px;padding:8px 11px 10px}
  .lobby-panel .panel-scroll{gap:9px;padding:11px}
  .room-invite{gap:8px;padding:10px;margin-top:0;border-radius:15px}
  .room-code-large{font-size:clamp(1.65rem,8vw,2.25rem)}
  .qr{width:min(174px,52vw,24vh,24dvh);padding:7px}
  .invite-qr{gap:5px}
  .invite-qr .small{font-size:.72rem}
  .invite-status{font-size:.76rem}
  .roster-edit{grid-template-columns:1fr}.roster-new-member{grid-column:auto}
  body.keyboard-open #app{padding-top:4px;padding-bottom:4px}
  body.keyboard-open .shell.is-room{grid-template-rows:minmax(0,1fr)}
  body.keyboard-open .shell.is-room>.top,body.keyboard-open .room-header,body.keyboard-open .scores,body.keyboard-open .room-nav{display:none}
  body.keyboard-open .room-view>.status-panel:not(.panel-shell){padding:7px;border-radius:14px;scroll-padding-block:12px}
  body.keyboard-open .panel-shell .panel-scroll{padding:7px;border-radius:14px;scroll-padding-block:12px}
  body.keyboard-open .panel-actions{padding:6px 8px}
  body.keyboard-open .status-panel>h2,body.keyboard-open .status-panel>.devices,body.keyboard-open .status-panel>.button,
  body.keyboard-open .panel-scroll>h2,body.keyboard-open .panel-scroll>.devices{display:none}
  body.keyboard-open .team-roster:not(:focus-within){display:none}
  body.keyboard-open .team-roster:focus-within{margin:0;overflow:visible}
  body.keyboard-open .team-roster:focus-within>.team-title{padding:9px 11px}
  body.keyboard-open .team-roster:focus-within>.member-row{padding-block:2px}
  body.keyboard-open .team-roster:focus-within>.roster-edit{margin-bottom:10px;padding-bottom:8px}
}

@media (max-height:700px){
  #app{padding-top:calc(env(safe-area-inset-top,0px) + 3px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 3px)}
  .top{min-height:27px;margin-bottom:4px}
  .brand-mark{width:25px;height:25px}
  .audio-toggle{min-height:27px}
  .footer{display:none}
  .shell{grid-template-rows:auto minmax(0,1fr)}
  .hero{padding:13px 16px}
  .hero h1{font-size:clamp(2rem,min(10vw,8.5vh),4.4rem);margin-bottom:7px}
  .hero .claim{font-size:clamp(.78rem,min(2.8vw,2vh),1rem);line-height:1.3}
  .hero .actions{margin-top:10px;gap:7px}
  .button{min-height:42px;padding:7px 9px}
  .room-header{margin-bottom:4px}
  .scores{margin-bottom:4px}
  .room-nav{margin-bottom:4px}
  .game-card{gap:5px;padding:0}
  .game-card .panel-scroll{padding:9px 12px;gap:5px}
  .panel-actions{gap:6px;padding:7px 10px 9px}
  .covered-card{min-height:min(130px,22vh)}
  .status-panel{padding:9px}
  .lobby-panel .panel-scroll{gap:7px;padding:9px}
  .lobby-panel{gap:7px}
  .role-hero{padding:8px}
  .room-invite{gap:5px;padding:8px}
  .qr{width:min(142px,46vw,21vh)}
}

@media (max-height:620px){
  .scores{display:none}
  .room-nav .button{min-height:34px;font-size:.7rem}
  .role-hero .hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

@media (orientation:landscape) and (max-height:520px){
  .top .brand>span:last-child,.top .profile-link,.top .small{display:none}
  .top{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 3px);left:calc(env(safe-area-inset-left,0px) + 7px);right:calc(env(safe-area-inset-right,0px) + 7px);pointer-events:none}
  .top a,.top button{pointer-events:auto}
  .shell{display:block}
  .screen-slot{height:100%}
  .hero{padding-left:56px;padding-right:56px}
  .room-screen{padding-top:31px}
  .room-header{position:absolute;top:2px;left:54px;right:54px;z-index:4}
  .scores{position:absolute;top:2px;left:35%;right:35%;z-index:3;margin:0}
  .room-nav{position:absolute;left:calc(env(safe-area-inset-left,0px) + 7px);top:45px;bottom:2px;width:94px;grid-template-columns:1fr;align-content:start;margin:0}
  .room-view{padding-left:102px}
  .game-card .panel-scroll{align-content:center}
}

@keyframes headline-dance-gentle{0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}45%{transform:translate3d(0,-.035em,0) rotate(-.55deg) scale(1.018)}70%{transform:translate3d(.012em,.012em,0) rotate(.35deg) scale(.992)}}
@keyframes headline-dance-mobile{0%,54%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}8%{transform:translate3d(0,-.095em,0) rotate(-2.1deg) scale(1.065)}17%{transform:translate3d(.025em,.026em,0) rotate(1.55deg) scale(.97)}27%{transform:translate3d(-.022em,-.043em,0) rotate(-1.1deg) scale(1.035)}37%{transform:translate3d(0,0,0) rotate(0) scale(1)}}
/* iOS can report a reduced-motion preference for installed PWAs. The playful
   title is an intentional game element, so mobile gets its own visible wave. */
@media (hover:none), (max-width:560px){.home-hero .headline-letter{animation-name:headline-dance-mobile!important;animation-duration:3.8s!important;animation-iteration-count:infinite!important;animation-timing-function:cubic-bezier(.37,.01,.35,1)!important;will-change:transform}}
@media(prefers-reduced-motion:reduce){.headline-letter{animation-name:headline-dance-gentle!important;animation-duration:5.8s!important;animation-iteration-count:infinite!important;animation-timing-function:ease-in-out!important;will-change:transform}.home-hero .headline-letter{animation-name:headline-dance-mobile!important;animation-duration:4.8s!important}.music-bars i{animation:none!important}}