:root{font-family:"Trebuchet MS",Verdana,sans-serif;color:#173c36;background:#d7e8d9;--ink:#173c36;--teal:#184d47;--paper:#fff9e9;--coral:#b43e2c;--line:#6a8175;font-size:16px;color-scheme:light}
nav button{color:var(--ink)}
.board{max-width:900px;width:100%;margin-inline:auto}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{min-height:44px;border:1px solid #5d7468;border-radius:6px;background:var(--paper);padding:.55rem .85rem;cursor:pointer;font-weight:700;touch-action:manipulation}button:hover:not(:disabled){background:#ede9cf}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default;opacity:.55}button.primary{background:var(--teal);color:#fff9e9;border-color:var(--teal)}button.primary:hover:not(:disabled){background:#27665d}button.accent{background:var(--coral);color:#fff9e9;border-color:var(--coral)}button.quiet{background:transparent}input,select{min-height:46px;border:1px solid #5d7468;border-radius:5px;background:#fffdf5;padding:.65rem;width:100%}label{display:block;font-weight:700}a{color:var(--teal)}:focus-visible{outline:3px solid #af3826;outline-offset:4px}button:focus-visible{position:relative;z-index:5}h1,h2,h3,p{margin:0}h1,h2,h3,.wordmark{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-weight:900}h1{font-size:clamp(2.5rem,5vw,4.9rem);letter-spacing:-.06em;line-height:1}h2{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.12}small,.small{font-size:.85rem}p{line-height:1.5}header{background:var(--teal);color:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem clamp(.7rem,2vw,2rem);min-height:64px}nav{display:flex;align-items:center;gap:.45rem}nav button{font-size:.85rem;background:#f1edd6}.wordmark{text-decoration:none;color:var(--paper);font-size:clamp(1.15rem,2.3vw,2rem);white-space:nowrap;letter-spacing:-.06em}.wordmark span{color:#fed69a}.flag{padding:5px;min-width:44px;display:grid;place-items:center}.flag svg{width:30px;height:20px}.flag[aria-pressed=true]{outline:2px solid #fff9e9;outline-offset:2px}#app{max-width:1450px;margin:auto;padding:1rem clamp(.7rem,2vw,2rem) 0}#connection{background:#fff2cc;text-align:center;padding:.65rem;font-weight:700;border-bottom:2px solid #79581c}#toast{position:fixed;z-index:30;bottom:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:1rem 1.5rem;background:var(--paper);border:2px solid var(--coral);border-radius:8px;box-shadow:0 4px 12px #173c3630}#toast[hidden],#connection[hidden]{display:none}.welcome{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(1rem,4vw,4rem);align-items:center;min-height:calc(100dvh - 100px);padding-bottom:1rem}.entry{display:flex;flex-direction:column;gap:1.15rem}.entry .intro{font-size:1.15rem;max-width:27ch}.subname{font-size:.9rem;display:block;margin-top:.65rem;color:#3f6257}.entry-form{display:grid;gap:.75rem}.joinrow{display:grid;grid-template-columns:1fr auto;gap:.6rem}.joinrow input{text-transform:uppercase;min-width:0}.divider{display:flex;align-items:center;gap:12px;font-size:.8rem;color:#456356}.divider:before,.divider:after{content:"";height:1px;background:#879e8d;flex:1}.table-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,2vw,1.5rem);align-items:center;max-width:780px}.preview-card{padding:0;background:none;border:0;display:block;min-width:0;box-shadow:3px 5px 0 #184d471c;transform:rotate(var(--tilt));border-radius:8px}.preview-card:nth-child(2n){--tilt:2deg}.preview-card:nth-child(2n+1){--tilt:-2deg}.preview-card img{width:100%;display:block;border-radius:8px;aspect-ratio:753/972}.preview-caption{grid-column:1/-1;text-align:center;font-size:.9rem}.table-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.65rem;flex-wrap:wrap}.players{display:flex;flex-wrap:wrap;gap:.5rem;flex:1}.player{display:flex;align-items:center;gap:.5rem;border-bottom:3px solid transparent;padding:.2rem .5rem .3rem;min-width:0;font-size:.88rem}.player.me{border-color:var(--teal);background:#f6f4e2}.avatar{width:29px;height:29px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:.75rem;background:#fff9e9;flex-shrink:0}.player .name{max-width:120px;overflow-wrap:anywhere}.seat-status{font-size:.75rem;color:#456356;display:block}.ballot{display:grid;place-items:center;width:30px;height:34px;border:2px solid var(--teal);border-radius:5px;background:var(--paper);font-weight:900;font-size:1rem}.ballot.sealed{background:var(--teal);color:var(--paper)}.ballot.revealed{animation:ballot .45s ease both}.room-tools{display:flex;gap:.4rem;align-items:center}.room-code{font-size:.85rem;letter-spacing:.06em}.room-tools button{font-size:.8rem}.room-lobby{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:2rem;align-items:center;min-height:calc(100dvh - 155px)}.lobby-controls{display:flex;flex-direction:column;gap:1rem}.count{font-size:clamp(2.5rem,6vw,4rem);line-height:1;font-weight:900}.lobby-controls .row{display:flex;gap:.6rem;align-items:center}.lobby-controls select{flex:1}.room-note{background:var(--paper);border-left:4px solid var(--teal);padding:.8rem;line-height:1.5}.nominee-line{display:flex;align-items:center;gap:.7rem;min-height:75px;border-top:1px solid #8fa593;border-bottom:1px solid #8fa593;padding:.4rem 0;margin-bottom:.8rem}.nominee-label{width:100px;font-size:.85rem;flex-shrink:0}.nominees{display:flex;gap:8px;flex:1;justify-content:flex-start}.nominee-slot{width:44px;height:57px;border:1px dashed #6a8175;border-radius:5px;display:grid;place-items:center;font-size:1.2rem;color:#4b685c;background:#d0dfcb}.nominee-slot img{width:100%;height:100%;object-fit:contain;border-radius:4px}.nominee-slot.filled{padding:0;border:1px solid #6a8175;animation:nominate .6s ease both;background:none}.connections{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;max-width:210px}.connection-pips{display:flex;gap:4px}.pip{width:17px;height:17px;border:2px solid var(--teal);border-radius:50%;background:var(--teal)}.pip.empty{background:transparent;border-color:#71877b}.connections strong{font-size:1.1rem}.playfield{display:grid;grid-template-columns:clamp(200px,22vw,300px) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:start}.question-area{display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center;padding-top:.4rem}.question-stage{font-size:.8rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.question-picture{padding:0;border:0;background:none;border-radius:8px;display:block;max-width:230px;width:100%;box-shadow:2px 4px 0 #184d4720}.question-picture img{width:100%;display:block;border-radius:8px;aspect-ratio:678/862}.question-area h2{font-size:clamp(1.25rem,2vw,1.8rem);max-width:22ch}.reader{font-size:.8rem}.question-hint{font-size:.87rem;max-width:28ch}.reference{display:flex;gap:.6rem;align-items:center;text-align:left;background:var(--paper);padding:.4rem;width:100%;border-radius:6px}.reference img{height:90px;border-radius:4px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem 1rem;align-items:start;justify-items:center}.creature{width:min(100%,calc((100dvh - 259px)*.387));min-width:0;position:relative;display:flex;flex-direction:column;align-items:center}.creature-choice{position:relative;display:block;padding:0;min-width:0;width:100%;border:3px solid #817d5e;border-radius:9px;background:#e9d39b;box-shadow:2px 4px 0 #173c3624;transition:border-color .15s,box-shadow .15s;cursor:pointer}.creature-choice:hover:not(:disabled){background:#e9d39b;border-color:var(--teal)}.creature-choice img{display:block;width:100%;aspect-ratio:753/972;border-radius:5px;user-select:none;-webkit-user-drag:none}.creature.selected .creature-choice{border-color:var(--coral);box-shadow:0 0 0 3px #fff9e9,0 0 0 6px var(--coral)}.creature.winner .creature-choice{border-color:var(--teal);box-shadow:0 0 0 4px #fff9e9,0 0 0 7px var(--teal)}.slot-number{position:absolute;top:7px;left:7px;min-width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-size:1.15rem;font-weight:900}.choice-mark{position:absolute;right:6px;top:6px;background:var(--coral);color:#fff;padding:6px;border-radius:50%;min-width:30px;font-weight:900}.votes-on-card{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;min-height:0}.votes-on-card:not(:empty){padding:.4rem}.vote-token{display:inline-grid;place-items:center;border:1px solid var(--teal);border-radius:50%;background:var(--paper);font-size:.75rem;font-weight:900;width:26px;height:26px;animation:ballot .4s ease both}.inspect{position:absolute;right:6px;bottom:6px;min-height:32px;min-width:32px;padding:.2rem .5rem;font-size:.9rem;border-color:#526951;background:var(--paper);z-index:2}.creature.eliminated .creature-choice{opacity:.5}.creature.eliminated:after{content:attr(data-label);background:var(--paper);padding:.3rem .5rem;border:1px solid #817d5e;position:absolute;top:55%;font-size:.8rem;text-align:center}.actions{position:sticky;bottom:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .2rem calc(.75rem + env(safe-area-inset-bottom));background:#d7e8df;border-top:1px solid #879e8d;margin-top:.9rem;min-height:76px}.actions .status{display:flex;flex-direction:column;gap:.2rem;max-width:65ch}.actions .status strong{font-size:1.05rem}.action-buttons{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.actions button{white-space:nowrap}.secondary-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 1rem}.secondary-actions button{font-size:.8rem}.result-banner{background:var(--paper);border:2px solid var(--teal);padding:.8rem 1rem;border-radius:8px;margin-bottom:.8rem;display:flex;justify-content:space-between;gap:.7rem;align-items:center}.result-banner.failed{border-color:#9c3b2f}.result-banner h2{font-size:1.4rem}.result-banner p{font-size:.9rem}.reveal-replay .ballot{animation:ballot .6s ease both}.final-crown{font-size:1rem;background:var(--teal);color:var(--paper);padding:.5rem;position:absolute;bottom:8px;left:0;right:0;text-align:center;border-radius:4px}.creature.champion{animation:champion .8s cubic-bezier(.2,.7,.3,1) both}.footer-note{font-size:.75rem;text-align:center;margin:.75rem 0;color:#456356}dialog{max-width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 32px);border:2px solid var(--teal);border-radius:12px;padding:1.5rem;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#143e36b0}.close{position:sticky;float:right;top:0;right:0;width:44px;font-size:1.6rem;padding:0;z-index:3}#dialog-content{padding-top:.1rem}#dialog-content h2{padding-right:48px;margin-bottom:1rem}#dialog-content p{margin:.7rem 0}.inspection{text-align:center}.inspection img{max-height:70dvh;max-width:100%;border-radius:8px}.sound-row{display:grid;grid-template-columns:80px minmax(90px,1fr) 44px 80px;align-items:center;gap:.6rem;margin:1.2rem 0}.sound-row input{padding:0;min-height:44px}.settings-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.help-pieces{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1rem 0}.help-pieces img{width:85px;border-radius:7px}.help-ballots{display:flex;gap:.5rem}.help-ballots span{width:40px;height:44px;background:var(--teal);color:var(--paper);display:grid;place-items:center;border-radius:6px;font-weight:900}.rules-list{line-height:1.6;padding-left:1.3rem}.rules-list li{margin:.5rem 0}.token-table{border-collapse:collapse;width:100%;margin-top:1rem;text-align:center;font-size:.9rem}.token-table th,.token-table td{border-bottom:1px solid #a1ae94;padding:.5rem}.history-entry{border-bottom:1px solid #a1ae94;padding:.8rem 0}.history-entry img{width:60px;border-radius:4px;float:left;margin-right:.7rem}.history-entry:after{content:"";display:block;clear:both}.history-entry p{font-size:.85rem}.hint-cue{animation:cue .6s ease 2}.hidden{display:none!important}
@keyframes ballot{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}@keyframes nominate{0%{transform:translateY(16px) rotate(-8deg);opacity:.2}100%{transform:none;opacity:1}}@keyframes champion{0%{transform:scale(.95)}45%{transform:scale(1.04)}100%{transform:none}}@keyframes cue{50%{outline:3px solid #184d47;outline-offset:5px}}
body.calm *,body.calm *:before,body.calm *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1400px){.creature{width:min(100%,calc((100dvh - 259px)*.387),265px)}}
@media(max-width:1000px){header{gap:.5rem}nav{gap:.3rem}.welcome,.room-lobby{gap:1.2rem;grid-template-columns:260px minmax(0,1fr)}.playfield{grid-template-columns:195px minmax(0,1fr);gap:1rem}.question-picture{max-width:160px}.question-area h2{font-size:1.3rem}.creature{width:min(100%,calc((100dvh - 280px)*.387))}.connections{max-width:180px}.nominee-label{width:85px}.nominee-slot{width:38px;height:49px}.room-tools{flex-wrap:wrap;justify-content:flex-end}.player{font-size:.8rem;gap:.3rem;padding:.2rem}.player .name{max-width:100px}.table-head{gap:.3rem}.inspect{min-height:44px;min-width:44px}.actions{gap:.5rem}.actions .status strong{font-size:.9rem}}
@media(max-width:700px){header{padding:.4rem .6rem;min-height:58px;flex-wrap:wrap}nav{margin-left:auto}nav button{padding:.4rem .5rem;font-size:.75rem}nav #settings{max-width:75px;line-height:1.1}.wordmark{font-size:1.25rem}.flag{min-width:36px}.flag svg{width:24px}#fullscreen{display:none}#app{padding:.65rem .65rem 0}.welcome{grid-template-columns:1fr;min-height:0;gap:1rem}.entry{gap:.8rem}.entry h1{font-size:3.4rem}.entry .intro{max-width:100%;font-size:1rem}.entry-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}.entry-form label,.entry-form .divider,.entry-form .joinrow,.entry-form .error{grid-column:1/-1}.entry-form>.primary{grid-column:1/-1}.table-preview{max-width:500px;margin:auto;gap:.65rem}.preview-card img{max-height:220px}.preview-caption{font-size:.8rem}.subname{margin-top:.4rem}.room-lobby{grid-template-columns:1fr;gap:1.1rem;min-height:0}.lobby-controls{gap:.7rem}.count{font-size:2.4rem}.room-lobby .table-preview{max-width:380px}.table-head{align-items:flex-start}.players{gap:.25rem;min-width:0}.player .avatar{width:24px;height:24px;font-size:.6rem}.player .name{max-width:80px;font-size:.75rem}.seat-status{font-size:.65rem}.ballot{width:24px;height:29px;font-size:.8rem}.player{gap:.3rem;padding:.2rem;min-height:36px}.room-tools{gap:.3rem}.room-tools .room-code{font-size:.7rem}.room-tools button{font-size:.7rem;min-height:38px;padding:.4rem}.nominee-line{gap:.4rem;margin-bottom:.6rem;padding:.3rem 0;min-height:60px;flex-wrap:wrap}.nominee-label{width:68px;font-size:.72rem}.nominees{gap:4px}.nominee-slot{width:30px;height:39px}.connections{max-width:none;gap:.4rem;margin-left:auto;font-size:.75rem}.connections strong{font-size:.9rem}.connection-pips{gap:3px}.pip{width:10px;height:10px;border-width:1px}.playfield{display:flex;flex-direction:column;gap:.65rem}.question-area{display:grid;grid-template-columns:55px minmax(0,1fr);gap:.2rem .6rem;text-align:left;width:100%;align-items:center;padding:0;position:relative;min-height:70px}.question-picture{width:55px;grid-column:1;grid-row:1/4}.question-area h2{grid-column:2;max-width:none;font-size:1.1rem}.question-stage{justify-content:flex-start;font-size:.7rem;grid-column:2}.reader{font-size:.7rem;grid-column:2}.question-hint{display:none}.reference{grid-column:1/-1}.reference img{height:70px}.board{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.2rem;max-width:450px;margin:auto}.creature{width:min(100%,max(107px,calc((100svh - 360px)*.258)));max-width:185px}.slot-number{width:28px;min-width:28px;height:28px;font-size:.9rem;left:4px;top:4px}.creature-choice{border-width:2px;border-radius:7px}.creature-choice img{border-radius:4px}.inspect{right:3px;bottom:3px;font-size:.85rem;min-width:44px;min-height:36px}.choice-mark{min-width:25px;font-size:.8rem;top:4px;right:4px;padding:5px}.votes-on-card{gap:3px}.vote-token{width:21px;height:21px;font-size:.65rem}.actions{padding:.55rem 0 calc(.55rem + env(safe-area-inset-bottom));margin-top:.7rem;min-height:70px;gap:.5rem}.actions .status{font-size:.75rem;flex:1}.actions .status strong{font-size:.85rem}.actions button{font-size:.85rem;padding:.6rem}.action-buttons{gap:.3rem}.secondary-actions{margin-top:.3rem;gap:.4rem}.secondary-actions button{min-height:40px;font-size:.7rem;padding:.4rem}.result-banner{padding:.65rem;gap:.5rem}.result-banner h2{font-size:1.15rem}.result-banner p{font-size:.75rem}.result-banner strong{white-space:nowrap}.sound-row{grid-template-columns:65px minmax(70px,1fr) 35px 60px;gap:.35rem;font-size:.85rem}dialog{padding:1rem}.nominee-slot.filled{animation-duration:.4s}.footer-note{font-size:.7rem}.final-crown{font-size:.75rem;padding:.3rem}.creature.eliminated:after{font-size:.7rem}.room-note{font-size:.9rem}}
@media(max-width:380px){.wordmark{font-size:1.08rem}nav button{font-size:.7rem;padding:.35rem}nav #settings{max-width:62px}.flag{min-width:32px}.nominee-line{gap:.3rem}.nominee-label{width:60px}.nominee-slot{width:27px;height:35px}.board{gap:.6rem 1rem}.sound-row{grid-template-columns:56px minmax(60px,1fr) 30px 56px}.connections{margin-left:0}.room-tools .room-code{display:none}}
@media(max-height:630px) and (min-width:701px){.nominee-line{min-height:55px}.nominee-slot{width:32px;height:41px}.creature{width:min(100%,max(120px,calc((100dvh - 245px)*.387)))}.question-picture{max-width:135px}.question-hint{display:none}.actions{min-height:64px}.table-head{margin-bottom:.3rem}}
@media(min-width:701px){.creature{width:min(100%,max(115px,calc((100dvh - 370px)*.387)),240px)}}
@media(min-width:701px) and (max-height:850px){.question-picture{max-width:150px}.question-hint{font-size:.8rem}.question-area{gap:.5rem}}
.creature{display:grid;grid-template-columns:1fr;align-items:start}.creature-choice{grid-area:1/1}.creature .inspect{grid-area:1/1;position:relative;right:auto;bottom:auto;justify-self:end;align-self:end;margin:6px}.votes-on-card{grid-row:2}
@media(max-width:700px){header{flex-wrap:nowrap;gap:.3rem}.wordmark{font-size:1.05rem}nav{gap:.25rem}nav #help{max-width:68px;line-height:1.1}nav #settings{max-width:65px}.flag{min-width:32px;padding:4px}.flag svg{width:24px}.table-head{display:grid;grid-template-columns:1fr;gap:.3rem}.players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.player .avatar{display:none}.player .name{max-width:none;flex:1}.player .ballot{flex-shrink:0}.room-tools{justify-content:space-between}.room-code{display:inline!important}.room-tools #menu{margin-left:auto}.creature{width:min(100%,max(107px,calc((100svh - 410px)*.258)))}.creature .inspect{margin:3px}}
@media(max-width:700px){.board{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;max-width:650px}.creature{width:min(100%,max(100px,calc((100svh - 370px)*.387)))}.creature .inspect{font-size:.7rem}}
.nominee-slot.filled,.ballot.revealed{animation:none}.flight{box-shadow:2px 4px 8px #173c3635}
.art-caption{font-size:.85rem;line-height:1.4;background:var(--paper);padding:.6rem;border-radius:5px}
.champion .inspect{align-self:start;margin-top:42px}
.nominee-slot{color:var(--ink);min-width:44px;min-height:44px}.creature .inspect{min-width:44px;min-height:44px;font-size:.75rem}
@media(max-width:700px){.flag{min-width:44px}.wordmark{font-size:.95rem}.room-tools button,.secondary-actions button,.creature .inspect{min-height:44px}.nominee-line{display:grid;grid-template-columns:1fr auto;gap:.3rem}.nominee-label{width:auto}.nominees{grid-column:1/-1;grid-row:2;justify-content:center;gap:5px}.nominee-slot{width:44px;height:57px;min-width:44px;min-height:44px}.connections{grid-column:2;grid-row:1;max-width:210px;font-size:.7rem;gap:4px}.pip{width:9px;height:9px}.connection-pips{gap:2px}.art-caption{grid-column:1/-1;font-size:.75rem}}
@media(max-width:360px){header{flex-wrap:wrap}.wordmark{font-size:1.1rem}nav{margin-left:auto}.connections{max-width:180px}}
.phone-players{display:none}.players-list{display:grid;grid-template-columns:1fr;gap:.65rem}.players-list .player{font-size:1rem;min-height:44px}.players-list .player .name{font-size:1rem;max-width:none;flex:1}.players-list .seat-status{font-size:.8rem}
@media(max-width:700px){#app:is([data-phase="vote"],[data-phase="reveal"],[data-phase="finished"]) #players{display:none}#app:is([data-phase="vote"],[data-phase="reveal"],[data-phase="finished"]) .phone-players{display:block}#app:is([data-phase="vote"],[data-phase="reveal"],[data-phase="finished"]) .room-code{display:none!important}.players-list .avatar{display:grid}}
