:root{--ink: #1f2a37;--ink-soft: #4a5563;--paper: #f3efe4;--paper-deep: #e7e0d0;--line: #c9d7e8;--line-red: #e8b4b4;--chalk: #f7f3e8;--board: #2f5d4a;--board-dark: #244a3b;--crayon-red: #c45c4a;--crayon-blue: #3d6ea5;--crayon-yellow: #e2b84a;--ok: #3f7d5a;--ko: #a24b3f;--shadow: rgba(40, 32, 20, .14);--radius: 18px;--font-display: "Caveat", cursive;--font-body: "Patrick Hand", cursive;--font-school: "Schoolbell", cursive}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:1.15rem;background:radial-gradient(circle at 12% 18%,rgba(226,184,74,.18),transparent 28%),radial-gradient(circle at 88% 10%,rgba(61,110,165,.12),transparent 26%),linear-gradient(160deg,#d9e5d3,#efe8d8 42%,#f6f1e6);background-attachment:fixed}button,input{font:inherit}button{cursor:pointer}.page{min-height:100vh;padding:1.25rem clamp(1rem,3vw,2rem) 2.5rem}.home-page{box-sizing:border-box;height:100dvh;max-height:100dvh;min-height:0;padding-top:1rem;padding-bottom:1rem;display:flex;flex-direction:column;overflow:hidden}.home-page .home-topbar{flex-shrink:0;margin-bottom:.5rem}.home-hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;overflow:auto}.home-hero .notebook{flex-shrink:0}.home-hero .made-by{flex-shrink:0;margin-top:0}.center-page{display:grid;place-items:center;gap:1rem}.topbar{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;margin-bottom:1rem}.home-topbar{justify-content:space-between}.rounds-counter{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.35rem .85rem .4rem;border:2px solid var(--ink);border-radius:14px 18px 12px 16px;background:linear-gradient(180deg,#ffffffb8,#f7f3e8e6);box-shadow:3px 4px #2f5d4a24;transform:rotate(-1.2deg);line-height:1.05;transition:transform .18s ease}.rounds-counter.bump{transform:rotate(-1.2deg) scale(1.06)}.rounds-counter-value{font-family:var(--font-display);font-size:1.85rem;font-weight:700;color:var(--board-dark);letter-spacing:.02em}.rounds-counter-label{font-size:.85rem;color:var(--ink-soft);letter-spacing:.02em}.room-topbar{justify-content:space-between;flex-wrap:wrap}.topbar-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.lang-switch{display:inline-flex;gap:.15rem;padding:.2rem;border:2px solid var(--ink);border-radius:999px;background:#ffffffa6;box-shadow:2px 3px #2f5d4a1f}.lang-switch button{border:0;border-radius:999px;background:transparent;min-width:2.4rem;padding:.3rem .85rem;color:var(--ink-soft);font-weight:600;letter-spacing:.04em;line-height:1.2;transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}.lang-switch button:hover:not(:disabled):not(.active){color:var(--ink);background:#2f5d4a14}.lang-switch button.active{background:var(--board);color:var(--chalk);box-shadow:inset 0 -2px #0000002e;transform:translateY(-1px)}.lang-switch button:disabled{opacity:.55;cursor:not-allowed}.notebook{width:min(720px,100%);background:repeating-linear-gradient(transparent,transparent 31px,var(--line) 32px),linear-gradient(90deg,transparent 48px,var(--line-red) 48px,var(--line-red) 50px,transparent 50px),var(--paper);border:3px solid var(--ink);border-radius:6px 22px 10px 18px;box-shadow:8px 10px #2f5d4a2e,0 18px 40px var(--shadow);padding:2rem 1.5rem 2rem 4rem;transform:rotate(-.4deg);animation:settle .7s ease-out}@keyframes settle{0%{opacity:0;transform:translateY(18px) rotate(-1.5deg)}to{opacity:1;transform:translateY(0) rotate(-.4deg)}}.brand{margin:0;font-family:var(--font-display);font-size:clamp(3.4rem,10vw,5.4rem);line-height:.9;color:var(--board-dark);letter-spacing:.02em;font-weight:700}.scribble{text-decoration:underline wavy rgba(196,92,74,.55);text-underline-offset:.12em}.tagline{margin:.4rem 0 1.5rem;font-family:var(--font-school);font-size:1.35rem;color:var(--ink-soft)}.field{display:grid;gap:.35rem;margin-bottom:1rem}.field span{font-family:var(--font-school)}.field small,.muted{color:var(--ink-soft);font-size:.95rem}input{width:100%;border:2px dashed var(--crayon-blue);border-radius:12px;background:#ffffffb8;padding:.65rem .85rem;outline:none;transition:border-color .16s ease,transform .16s ease}input:focus{border-style:solid;border-color:var(--board);transform:translateY(-1px)}.home-actions{display:grid;gap:1rem}.join-box{display:grid;gap:.75rem;padding:1rem;border:2px solid rgba(31,42,55,.15);border-radius:var(--radius);background:#ffffff59}.btn{border:2.5px solid var(--ink);border-radius:999px;padding:.55rem 1.2rem;background:var(--chalk);color:var(--ink);box-shadow:3px 3px 0 var(--shadow);transition:transform .14s ease,box-shadow .14s ease,background .14s ease}.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}.btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{background:var(--board);color:var(--chalk);border-color:var(--board-dark)}.btn.secondary{background:#f3d9a4}.btn.ghost{background:transparent;box-shadow:none}.btn.ghost.danger{color:var(--crayon-red);border-color:var(--crayon-red)}.btn.big{font-size:1.25rem;padding:.8rem 1.4rem}.how-to{margin-top:1.75rem;padding-top:1rem;border-top:2px dashed rgba(31,42,55,.2)}.how-to h2{margin:0 0 .35rem;font-family:var(--font-display);font-size:2rem}.how-to p{margin:0;color:var(--ink-soft)}.made-by{margin:1.25rem 0 0;text-align:center;font-size:.92rem;color:#1f2a3773;letter-spacing:.01em}.made-by a{color:inherit;text-decoration:underline;text-decoration-color:#1f2a3740;text-underline-offset:.18em;transition:color .16s ease,text-decoration-color .16s ease}.made-by a:hover{color:var(--board-dark);text-decoration-color:var(--board-dark)}.error-banner{margin:.75rem 0 0;padding:.65rem .9rem;border:2px solid var(--crayon-red);border-radius:12px;background:#f8e4df;color:#7a2f24}.error-banner.floating{position:sticky;top:.5rem;z-index:5}.room-lang-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;padding:.25rem .65rem;border:2px solid var(--ink);border-radius:999px;background:#ffffffa6;font-family:var(--font-school);font-size:.95rem;letter-spacing:.04em}.room-code-badge{display:inline-flex;align-items:baseline;gap:.55rem;padding:.4rem .9rem;border:2.5px solid var(--ink);border-radius:14px;background:#ffffffa6;transform:rotate(-1deg)}.room-code-badge .label{font-family:var(--font-school);color:var(--ink-soft)}.room-code-badge strong{font-family:var(--font-display);font-size:1.8rem;letter-spacing:.08em}.room-layout{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:1.25rem;align-items:start}.panel{background:repeating-linear-gradient(transparent,transparent 27px,rgba(201,215,232,.55) 28px),#fffcf5eb;border:3px solid var(--ink);border-radius:16px 22px 14px 20px;box-shadow:6px 8px #2f5d4a1f;padding:1.1rem 1.2rem 1.3rem}.sticky-panel{position:sticky;top:1rem}.panel-title{margin:0 0 .75rem;font-family:var(--font-display);font-size:2rem;color:var(--board-dark)}.player-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}.player-list li{display:flex;justify-content:space-between;gap:.75rem;padding:.55rem .65rem;border:2px dashed rgba(31,42,55,.2);border-radius:12px;background:#ffffff8c}.player-list li.away{opacity:.55}.player-name{display:block;font-weight:700}.player-list small{color:var(--ink-soft)}.player-score{white-space:nowrap;font-family:var(--font-school);color:var(--crayon-blue)}.leader-tag{margin:.9rem 0 0;font-family:var(--font-school);color:var(--board)}.setting-block{margin-bottom:1.25rem}.setting-block h3{margin:0 0 .45rem;font-family:var(--font-school);font-size:1.35rem}.timer-options,.theme-grid,.chip-row{display:flex;flex-wrap:wrap;gap:.45rem}.chip,.theme-chip{border:2px solid rgba(31,42,55,.35);background:#ffffffb3;border-radius:999px;padding:.35rem .8rem;color:var(--ink)}.chip.active,.theme-chip.active{background:var(--crayon-yellow);border-color:var(--ink);box-shadow:2px 2px #00000014}.chip.yes.active{background:#d7edd9;border-color:var(--ok);color:var(--ok)}.chip.no.active{background:#f3d7d2;border-color:var(--ko);color:var(--ko)}.chip.locked{cursor:default;pointer-events:none;opacity:.95}.chip.locked small{font-size:.85em;opacity:.85}.custom-themes{display:grid;gap:.35rem;margin:.75rem 0}.custom-theme-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem .6rem;border-left:4px solid var(--crayon-red);background:#ffffff8c}.text-btn{border:0;background:transparent;font-size:1.3rem;color:var(--crayon-red)}.inline-form{display:grid;grid-template-columns:1fr auto;gap:.5rem}.readonly-summary{margin-top:.75rem;padding:.75rem;border-radius:12px;background:#2f5d4a14}.main-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}.waiting-note{text-align:center;font-size:1.4rem}.chalk{font-family:var(--font-school)}.letter-stage{width:100%;max-width:560px;min-height:min(62vh,480px);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 30%),linear-gradient(160deg,var(--board) 0%,var(--board-dark) 100%);border:4px solid #1d3329;border-radius:18px;box-shadow:inset 0 0 40px #00000040,8px 10px #0000001f;position:relative;overflow:hidden;animation:boardIn .5s ease}@keyframes boardIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.letter-caption{margin:0;color:#f7f3e8d9;font-size:1.5rem;text-align:center}.letter-wheel{--wheel-size: min(220px, 56vw);width:var(--wheel-size);height:var(--wheel-size);border-radius:50%;border:3px dashed rgba(247,243,232,.45);background:#0000001f;flex-shrink:0;position:relative;display:grid;place-items:center}.letter-chalk{width:100%;height:100%;margin:0;border:0;display:flex;align-items:center;justify-content:center;font-family:Schoolbell,cursive;font-size:calc(var(--wheel-size) * .55);font-weight:400;line-height:1;letter-spacing:0;text-align:center;color:var(--chalk);text-shadow:0 2px 0 rgba(0,0,0,.22);transform-origin:50% 50%;animation:letterSpin 90ms linear infinite;box-sizing:border-box;padding:.1em 0 0}.letter-stage.reveal .letter-chalk{animation:letterStamp .52s ease}.letter-stage.reveal .letter-wheel{border-color:var(--crayon-yellow);box-shadow:0 0 0 6px #e2b84a33}.room-main:has(.letter-stage){display:flex;align-items:center;justify-content:center;min-height:min(70vh,560px)}@keyframes letterSpin{0%{transform:rotate(-5deg) scale(.97)}to{transform:rotate(5deg) scale(1.03)}}@keyframes letterStamp{0%{transform:scale(1.35) rotate(-8deg);opacity:.4}60%{transform:scale(.94) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.letter-dust{position:absolute;inset:auto 10% 12% 10%;height:18px;background:radial-gradient(circle,rgba(247,243,232,.35),transparent 70%);filter:blur(1px);opacity:0}.letter-stage.reveal .letter-dust{animation:dust .7s ease}@keyframes dust{0%{opacity:.8;transform:scaleX(.4)}to{opacity:0;transform:scaleX(1.4) translateY(10px)}}.play-header{display:grid;gap:.35rem;margin-bottom:1rem}.play-header h2{margin:0;font-family:var(--font-display);font-size:2.2rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.letter-inline{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--board);color:var(--chalk);font-family:Schoolbell,cursive;font-size:1.55rem;line-height:1;padding:.1em 0 0;box-sizing:border-box;vertical-align:middle;flex-shrink:0;text-shadow:0 1px 0 rgba(0,0,0,.2)}.timer-pill{justify-self:start;padding:.35rem .85rem;border-radius:999px;border:2px solid var(--ink);background:#fff6d8;font-family:var(--font-school)}.timer-pill.soft{background:#ffffffb3}.timer-pill.urgent{background:#f7d2cb;animation:pulse .7s ease infinite}@keyframes pulse{50%{transform:scale(1.04)}}.answer-grid{display:grid;gap:.7rem;margin-bottom:1.1rem}.answer-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:.6rem;align-items:center}.answer-row span{font-family:var(--font-school)}.vote-status-panel{margin:.85rem 0 1.1rem;padding:.75rem .85rem;border:2px dashed rgba(31,42,55,.2);border-radius:14px;background:#ffffff80}.vote-status-panel h3{margin:0 0 .5rem;font-family:var(--font-school);font-size:1.25rem}.vote-status-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}.vote-status-list li{display:flex;justify-content:space-between;gap:.75rem;padding:.35rem .5rem;border-radius:10px}.vote-status-list li.done{background:#3f7d5a1f;color:var(--ok)}.vote-status-list li.pending{background:#e2b84a2e}.own-answers{margin-bottom:1rem}.own-answers ul,.scoreboard ol{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}.own-answers li,.scoreboard li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem .55rem;border-bottom:1px dashed rgba(31,42,55,.2)}.vote-player-block{margin:1rem 0;padding:.85rem;border:2px solid rgba(31,42,55,.15);border-radius:14px;background:#ffffff73}.vote-player-block h3{margin:0 0 .6rem;font-family:var(--font-display);font-size:1.7rem}.vote-row{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.45rem 0;border-bottom:1px dashed rgba(31,42,55,.15)}.theme-label{display:block;color:var(--ink-soft);font-size:.95rem}.live-votes{display:grid;gap:.15rem;margin-top:.35rem;font-size:.9rem;color:var(--ink-soft)}.live-yes{color:var(--ok)}.live-no{color:var(--ko)}.small-brand{font-size:clamp(2.4rem,8vw,3.4rem)!important}.join-username-card{width:min(520px,100%)}.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1rem 0}.result-card{border:2.5px solid rgba(31,42,55,.25);border-radius:16px;padding:.85rem;background:#fff9}.result-card.winner{border-color:var(--crayon-yellow);box-shadow:0 0 0 3px #e2b84a59;transform:rotate(-.6deg)}.result-card header{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.35rem}.result-card h3{margin:0;font-family:var(--font-display);font-size:1.7rem}.round-score-line{margin:0 0 .55rem;font-family:var(--font-school);color:var(--board)}.result-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}.result-card li{display:grid;grid-template-columns:1fr 1.2fr auto;gap:.35rem;font-size:.98rem}.result-card li.ok em{color:var(--ok)}.result-card li.ko em{color:var(--ko)}.bonus{margin:.65rem 0 0;font-family:var(--font-school);color:var(--board)}.center{text-align:center}@media(max-width:860px){.room-layout{grid-template-columns:1fr}.sticky-panel{position:static}.notebook{padding-left:1.4rem;transform:none}.answer-row{grid-template-columns:1fr}.vote-row{flex-direction:column;align-items:stretch}.inline-form{grid-template-columns:1fr}}