:root{--paper: #f7f1df;--ink: #2b2b2b;--accent: #c0392b;--blue: #2a6ee0;--green: #1f9d55;font-family:Caveat,Comic Sans MS,cursive,system-ui}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:#e9e2cc;color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}.centered,.lobby{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}.title{font-size:3rem;margin:0}.tagline,.muted{opacity:.7;margin:0}.small{font-size:.9rem;word-break:break-all}.big-btn{font-family:inherit;font-size:1.6rem;padding:12px 26px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.big-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.big-btn.create{background:#ffe08a}.big-btn.join{background:#aee3ff}.divider{opacity:.6;margin:8px 0}.join-row{display:flex;gap:10px;align-items:stretch}.code-input{font-family:inherit;font-size:2.2rem;font-weight:700;width:9ch;padding:10px 12px;letter-spacing:.12rem;text-align:center;text-transform:uppercase;border:3px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink)}.code-input::placeholder{color:var(--ink);opacity:.35}.code-input:focus{outline:none;box-shadow:0 0 0 3px #2a6ee066}.error{color:var(--accent);font-size:1.4rem}.room-code{font-family:inherit;color:var(--ink);font-size:4rem;letter-spacing:.3rem;font-weight:700;background:var(--paper);border:3px dashed var(--ink);border-radius:16px;padding:8px 24px;cursor:pointer}.room-code:active{transform:translateY(1px)}.link-copy{cursor:pointer;text-decoration:underline dotted}.board{max-width:560px;margin:0 auto;padding:8px 10px 24px;display:flex;flex-direction:column;gap:10px}.topbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pill{background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:2px 12px;font-size:1.2rem}.pill.turn{flex:1;font-weight:700}.pill.p2p{background:#c8f7c5}.pill.relay{background:#ffe3a3}.pill.score{background:#e6dcff;font-weight:700}.score-sep{opacity:.5;margin:0 4px}.pill.mute{font-family:inherit;cursor:pointer;margin-left:auto;background:var(--paper)}.pill.mute:active{transform:translateY(1px)}.series-tally{display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:1.4rem}.series-num{font-size:2.4rem;font-weight:700}.series-label{opacity:.6}.series-sep{opacity:.5;font-size:2rem}.find-target{font-size:2.4rem;text-align:center;background:#fff3b0;border:3px solid var(--ink);border-radius:12px;padding:4px}.find-target b{font-size:3rem;color:var(--accent)}.sheet{position:relative;width:100%;aspect-ratio:1 / .7;background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(0,0,0,.05) 38px 39px),var(--paper);border:3px solid var(--ink);border-radius:10px;box-shadow:inset 0 0 40px #00000014;overflow:hidden}.sheet-flip{position:absolute;top:0;right:0;bottom:0;left:0;transform:scaleX(-1)}.sheet-circles{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.sheet-num{position:absolute;font-family:inherit;font-size:clamp(1.2rem,6vw,2.2rem);font-weight:700;color:var(--ink);background:transparent;border:none;padding:6px;cursor:pointer;line-height:1}.sheet-num:disabled{cursor:default}.sheet-num:not(:disabled):active{color:var(--blue)}.sheet-num.circled{opacity:.5}.grids{display:flex;gap:10px}.grid-wrap{flex:1}.grid-label{font-size:1.3rem;display:flex;justify-content:space-between;align-items:baseline}.grid-count{font-weight:700;font-size:1.6rem;color:var(--accent)}.grid-count-total{font-size:1.1rem;color:var(--ink);opacity:.55}.grid{display:grid;grid-auto-rows:1fr;gap:2px;background:var(--ink);border:3px solid var(--ink);border-radius:8px;aspect-ratio:1 / 1}.grid.holdable{outline:3px dashed var(--green);outline-offset:2px;cursor:pointer;animation:holdInvite 1.1s ease-in-out infinite alternate}@keyframes holdInvite{0%{outline-color:#1f9d5573}to{outline-color:#1f9d55f2}}.box{position:relative;background:var(--paper);display:flex;align-items:center;justify-content:center}.box.x{background:#fff}.box.filling{background:#fffdf3}.box .mark{font-size:clamp(.7rem,3.4vw,1.4rem);line-height:1;color:var(--accent);font-weight:700}.box.x .mark{animation:xpop .18s ease-out}.box .mark.grow{opacity:calc(.12 + .88 * var(--p, 0));transform:scale(calc(.35 + .65 * var(--p, 0)))}@keyframes xpop{0%{transform:scale(.25) rotate(-12deg)}to{transform:scale(1) rotate(0)}}.bell{font-family:inherit;color:var(--ink);width:100%;display:flex;align-items:center;gap:14px;padding:12px 18px;min-height:76px;border:3px solid var(--ink);border-radius:16px;background:var(--paper);text-align:left;box-shadow:3px 3px #0000002e}.bell:disabled{opacity:1}.bell-ico{font-size:2.4rem;line-height:1;flex:none}.bell-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.bell-number{font-size:2.8rem;font-weight:700;color:var(--accent);line-height:1}.bell-text{font-size:1.2rem;font-weight:700;opacity:.85}.bell.inert{background:#efe9d6;box-shadow:none;cursor:default}.bell.inert .bell-ico{opacity:.45}.bell.inert .bell-text{opacity:.7}.bell.target{background:#fff3b0;cursor:default}.bell.target .bell-ico{animation:bellNudge 1.3s ease-in-out infinite;transform-origin:50% 10%}.bell.armed{background:#ffd23f;cursor:pointer;border-width:4px;box-shadow:4px 4px 0 var(--ink);animation:bellPulse .45s infinite alternate}.bell.armed .bell-ico{animation:bellRing .22s infinite;transform-origin:50% 10%}.bell.armed .bell-text{opacity:1}@keyframes bellPulse{0%{transform:scale(1)}to{transform:scale(1.03)}}@keyframes bellRing{0%,to{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}@keyframes bellNudge{0%,88%,to{transform:rotate(0)}94%{transform:rotate(-9deg)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center}.end-card{background:var(--paper);border:4px solid var(--ink);border-radius:20px;padding:30px 40px;text-align:center;display:flex;flex-direction:column;gap:16px}.end-title{font-size:2.6rem;margin:0}
