:root{--bg:#0f2a1f;--bg-raised:#173d2d;--bg-row:#fdf8ef12;--text:#fdf8ef;--muted:#b9c9bf;--accent:#d7263d;--gold:#f2c14e;--card:#fdf8ef;--card-text:#0f2a1f;--start-card:#d6e9da;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(ellipse at top, #1d4a36 0%, var(--bg) 60%) fixed;min-height:100dvh;margin:0;overflow-x:hidden}a{color:var(--gold)}h1{margin:0 0 .5em}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}input,select{font:inherit;background:var(--text);color:var(--card-text);border:2px solid #0000;border-radius:10px;width:100%;padding:12px;font-size:1.1rem}input:focus,select:focus{border-color:var(--gold);outline:none}.center{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:16px;display:flex}.stack{flex-direction:column;gap:14px;width:100%;display:flex}h2{margin:0 0 .4em;font-size:1.3rem}h3{margin:.5em 0 .2em}.muted{color:var(--muted)}.small-text{font-size:.9rem}.big-text{font-size:1.6rem}.error{color:#ffb3bd;margin:0}.panel{background:var(--bg-raised);border-radius:16px;width:100%;max-width:560px;padding:20px}.field{text-align:left;flex-direction:column;gap:6px;font-weight:600;display:flex}.field.narrow{max-width:110px}.row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.row>.field{flex:1}.row>input{flex:1;min-width:0}.primary,.secondary,.game-button{border:none;border-radius:12px;padding:14px 20px;font-size:1.05rem;font-weight:700}.primary{background:var(--accent);color:#fff}.secondary{background:var(--bg-row);color:var(--text);border:1px solid #fdf8ef40}.small{padding:6px 12px;font-size:.9rem}.link{color:var(--gold);background:0 0;border:none;padding:8px;text-decoration:underline}.button-link{text-align:center;text-decoration:none;display:block}.page{flex-direction:column;align-items:center;gap:18px;max-width:900px;margin:0 auto;padding:16px;display:flex}.page .panel{max-width:none}.topbar{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.topbar h1{margin:0}.list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.list li{background:var(--bg-row);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.list li.off{opacity:.5}.points-input{text-align:right;width:110px}.phone{flex-direction:column;gap:16px;max-width:480px;margin:0 auto;padding:16px;display:flex}.form-page h1{text-align:center}.phone-team{align-items:center;gap:12px;font-size:1.2rem;display:flex}.avatar{font-size:1.6em;line-height:1}.avatar.huge{font-size:5rem}.avatar-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.avatar-choice{aspect-ratio:1;background:var(--bg-row);border:2px solid #0000;border-radius:12px;padding:0;font-size:1.8rem}.avatar-choice.selected{border-color:var(--gold);background:#f2c14e33}.avatar-choice:disabled{opacity:.2}.waiting{text-align:center;padding:20px 0;font-size:1.2rem}.code{letter-spacing:.15em;color:var(--gold)}.code-input{text-align:center;letter-spacing:.4em;text-transform:uppercase;font-size:1.8rem}.standings{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.standings li{background:var(--bg-row);border-radius:10px;grid-template-columns:2.2em 2em 1fr auto;align-items:center;gap:10px;padding:8px 14px;display:grid}.standings li.me{outline:2px solid var(--gold)}.standings .rank{color:var(--muted);font-weight:800}.standings .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.standings .points{color:var(--gold);font-size:1.2em;font-weight:800}.standings.big{font-size:clamp(1rem,1.9vh,2rem)}.standings.big li{padding:.45em .9em}.standings.big li:first-child .rank{color:var(--gold)}.screen{flex-direction:column;gap:2vh;height:100dvh;padding:3vh 3vw;display:flex}.screen-head{justify-content:space-between;align-items:baseline;display:flex}.screen-head h1{margin:0;font-size:clamp(2rem,5vh,4.5rem)}.screen-head .muted{font-size:clamp(1rem,2.5vh,2rem)}.screen-body{flex:1;grid-template-columns:1fr minmax(320px,26vw);gap:3vw;min-height:0;display:grid}.screen-main{min-height:0;overflow:auto}.screen-main h2{font-size:clamp(1.3rem,3vh,2.5rem)}.screen-side{flex-direction:column;gap:2vh;min-height:0;display:flex;position:relative;overflow:auto}.screen-side .panel{max-width:none}.qr-box{background:var(--card);color:var(--card-text);text-align:center;border-radius:16px;padding:14px}.qr svg{width:100%;max-height:32vh;display:block}.join-hint{margin:8px 0 0;font-size:clamp(1rem,2.2vh,1.6rem);font-weight:700}.team-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px;display:grid}.team-tile{background:var(--bg-row);border-radius:14px;align-items:center;gap:12px;min-width:0;padding:14px 18px;font-size:clamp(1rem,2.4vh,1.8rem);font-weight:700;display:flex}.team-tile span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.game-button{background:var(--gold);color:var(--card-text);text-align:left}.corner-link{opacity:.5;font-size:.85rem}.final{align-items:center;overflow:auto}.final .standings{width:min(900px,100%)}.winner{text-align:center}.winner-avatars{font-size:clamp(4rem,14vh,10rem)}.winner h2{color:var(--gold);font-size:clamp(2rem,6vh,5rem)}@media (width<=800px){.screen{height:auto;min-height:100dvh}.screen-body{grid-template-columns:1fr}}.leader-link{text-align:center;opacity:.6;margin-top:24px;font-size:.85rem;display:block}.quiz{overflow:auto}.quiz-body{flex-direction:column;flex:1;gap:3vh;min-height:0;display:flex}.quiz-body .standings{width:min(1000px,100%)}.quiz .quiz-question{margin:0;font-size:clamp(1.6rem,5vh,4rem);line-height:1.2}.quiz-options{flex-direction:column;gap:2vh;margin:0;padding:0;list-style:none;display:flex}.quiz-option{background:var(--opt);color:#fff;border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2em;padding:2vh 2vw;font-size:clamp(1.2rem,3.6vh,3rem);font-weight:700;transition:opacity .3s,transform .3s;display:grid}.quiz-option .letter,.quiz-choice .letter{background:#00000040;border-radius:50%;place-items:center;width:1.8em;height:1.8em;font-weight:800;display:inline-grid}.quiz-option.wrong{opacity:.35}.quiz-option.right{outline:6px solid var(--gold);transform:scale(1.02)}.quiz-option .pickers{align-items:center;gap:.6em;display:flex}.quiz-option .pick-avatars{font-size:.8em}.opt-0{--opt:#c0392b}.opt-1{--opt:#2471a3}.opt-2{--opt:#b7950b}.opt-3{--opt:#7d3c98}.opt-4{--opt:#1e8449}.opt-5{--opt:#a04000}.quiz-answered{flex-direction:column;gap:1vh;display:flex}.answered-avatars{flex-wrap:wrap;gap:.4em;font-size:clamp(1.4rem,4vh,3rem);display:flex}.answered-avatars .out{opacity:.2;filter:grayscale()}.quiz-controls{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.quiz-controls .corner-link{margin-left:auto}.quiz-phone .quiz-question{margin:0;font-size:1.4rem}.quiz-choice{text-align:left;background:var(--opt);color:#fff;border:3px solid #0000;border-radius:14px;align-items:center;gap:12px;padding:16px;font-size:1.15rem;font-weight:700;display:flex}.quiz-choice.chosen{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}.quiz-choice.dim{opacity:.5}.verdict{font-size:3rem;font-weight:800}.verdict.right{color:var(--gold)}.verdict.wrong{color:#ffb3bd}.quiz-body>h2:not(.quiz-question){margin:0;font-size:clamp(1.3rem,4vh,3rem)}.pgrid{touch-action:manipulation;background:#8aa597;border-radius:10px;gap:3px;width:100%;max-width:min(460px,62vh);margin:0 auto;padding:3px;display:grid}.pgrid.small{border-radius:4px;flex:none;gap:1px;max-width:120px;margin:0;padding:1px}.pcell{aspect-ratio:1;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;border-radius:4px;justify-content:center;align-items:center;min-width:0;padding:0;display:flex}.pgrid.small .pcell{border-radius:1px}.pcell svg{pointer-events:none;width:82%;height:82%}.plegend{grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none;display:grid}.plegend li{align-items:center;gap:8px;display:flex}.plegend .pcell{flex:none;width:32px;box-shadow:0 0 0 2px #8aa597}.pattern-clock{text-align:center;font-variant-numeric:tabular-nums;font-size:clamp(3rem,14vh,9rem);font-weight:800;line-height:1}.pattern-clock.small{font-size:2.6rem}.pattern-countdown{min-height:50vh;font-size:1.5rem}.pattern-ready{color:#9be3b0;font-weight:700}.pattern-finished{text-align:center;color:#9be3b0;margin:0;font-size:1.5rem;font-weight:800}.pattern-done{outline:3px solid #9be3b0}.pattern-intro{margin:0;font-size:1.1rem}.pattern-settings{flex-wrap:wrap;gap:24px;display:flex}.pattern-screen .team-grid,.pattern-screen>.stack{width:100%}.pattern-results{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));align-items:start;gap:18px;width:100%;display:grid}.pattern-ranking{flex-direction:column;gap:10px;margin:0;padding:0;font-size:1.15rem;list-style:none;display:flex}.pattern-ranking li{align-items:center;gap:12px;display:flex}.pattern-place{min-width:1.6em;font-weight:800}.pattern-ranking .pgrid.small{width:96px}.pattern-second{background:var(--card);color:var(--card-text);text-align:center}.pattern-second .qr svg{max-height:40vh}.second-phone summary{cursor:pointer;color:var(--gold)}.second-phone .qr{background:var(--card);border-radius:12px;margin-top:10px;padding:10px}.time-picker{align-items:center;gap:10px;display:flex}.time-part{flex-direction:column;align-items:center;gap:6px;display:flex}.time-part>span{font-variant-numeric:tabular-nums;text-align:center;min-width:2ch;font-size:2.6rem;font-weight:800}.time-part button{padding:8px 18px}.time-colon{padding-bottom:20px;font-size:2.6rem;font-weight:800}.pattern-role{text-align:center;margin:0}.square-diagram{text-align:center;align-self:center;width:100%;max-width:420px;margin:0}.square-diagram.small{max-width:240px}.square-diagram svg{width:100%;height:auto;display:block}.square-diagram figcaption{margin-top:4px;font-weight:700}.sq-floor{fill:#fdf8ef0f;stroke:#fdf8ef2e;stroke-width:.04px}.sq-caller{fill:var(--muted);text-anchor:middle;letter-spacing:.05px;font-size:.42px}.sq-body{fill:var(--card);stroke:var(--card-text);stroke-width:.07px}.sq-nose{fill:var(--card);stroke:var(--card-text);stroke-width:.05px}.sq-label{fill:var(--card-text);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:.62px;font-weight:800}.sq-dancer.mine .sq-body,.sq-dancer.mine .sq-nose{fill:var(--gold)}.sq-dancer.dim{opacity:.35}.sq-dancer.right .sq-body{stroke:#2e9e5b;stroke-width:.14px}.sq-dancer.wrong .sq-body{fill:#ffb3bd;stroke:var(--accent);stroke-width:.16px}.sq-dancer.tappable{cursor:pointer}.sq-dancer.tappable:focus{outline:none}.sq-dancer.tappable:focus-visible .sq-hit{stroke:var(--gold);stroke-width:.08px}.sq-hit{fill:#0000}.sq-badge circle{fill:var(--accent);stroke:var(--card);stroke-width:.06px}.sq-badge text{fill:#fff;text-anchor:middle;dominant-baseline:central;font-size:.44px;font-weight:800}.square-call{text-align:center;color:var(--gold);font-size:clamp(2rem,9vh,5rem);font-weight:800;line-height:1.1}.square-call.phone{font-size:1.7rem}.square-step{text-align:center;margin:0}.square-screen>.stack{width:100%}.square-sequences{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px;display:grid}.square-sequences button{text-align:left;flex-direction:column;gap:6px;display:flex}.square-sequences small{opacity:.85;font-size:.85rem;font-weight:400}.square-pair{grid-template-columns:1fr 1fr;gap:12px;display:grid}.square-preview{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.square-mine{margin:0;padding-left:1.2em;font-size:1.15rem;font-weight:700}.square-play{gap:10px}.square-playhead{justify-content:space-between;align-items:center;display:flex}.square-playhead .pattern-clock.small{font-size:1.8rem}.square-prompt{text-align:center;margin:0;font-size:1.25rem}.square-locked{text-align:center;color:#ffb3bd;margin:0;font-size:1.4rem;font-weight:800}.square-progress{text-align:center;margin:0}.square-badge-inline{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:1.5em;height:1.5em;font-size:.9em;font-weight:800;display:inline-grid}
