:root{color:#1e1b16;font-synthesis:none;text-rendering:geometricprecision;--ink:#1e1b16;--paper:#fffaf0;--paper-deep:#f7e5aa;--yellow:#f9d84a;--coral:#f87171;--blue:#3b82f6;--green:#10b981;--teal:#0f766e;--violet:#7c3aed;--line:#1e1b1624;--shadow:0 24px 60px #32260638;background:#f6e7ba;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}body.in-game{overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled,input:disabled{cursor:not-allowed;opacity:.55}#app{min-height:100vh}body.in-game #app{height:100dvh;min-height:0}.menu-screen{background:linear-gradient(115deg,#ffffff73,#0000 44%),radial-gradient(circle at 15% 16%,#f9d84ad6,#0000 22%),linear-gradient(135deg,#fff3c4 0%,#f9c4a5 39%,#a7f3d0 100%);grid-template-columns:minmax(280px,.95fr) minmax(320px,1fr);align-items:center;gap:clamp(24px,5vw,80px);min-height:100vh;padding:clamp(24px,5vw,76px);display:grid;position:relative}.menu-art{min-height:500px;position:relative}.paint-mark{box-shadow:var(--shadow);border:8px solid #1e1b1629;position:absolute;transform:rotate(-10deg)}.mark-a{background:#f9d84a;border-radius:48% 52% 42% 58%/48% 42% 58% 52%;width:64%;height:34%;inset:7% 12% auto auto}.mark-b{background:#38bdf8;border-radius:58% 42% 62% 38%/52% 62% 38% 48%;width:58%;height:30%;inset:40% auto auto 5%;transform:rotate(13deg)}.mark-c{background:#fb7185;border-radius:40% 60% 52% 48%/42% 38% 62% 58%;width:52%;height:24%;inset:auto 12% 6% auto;transform:rotate(-4deg)}.brush-card{width:68%;height:46%;position:absolute;top:24%;left:16%;transform:rotate(-18deg)}.brush-handle{background:#292524;border:5px solid #ffffffb8;border-radius:999px;height:34px;position:absolute;inset:43% 8% auto 21%;box-shadow:0 18px 30px #1e1b1638}.brush-tip{background:#f8fafc;border:5px solid #292524;border-radius:52% 18% 18% 52%;width:28%;height:72px;position:absolute;top:35%;left:6%}.menu-panel{z-index:1;width:min(520px,100%);position:relative}.eyebrow{color:#7c2d12;letter-spacing:0;text-transform:uppercase;margin:0 0 10px;font-size:.88rem;font-weight:900}h1{color:#1e1b16;letter-spacing:0;margin:0 0 28px;font-size:clamp(4rem,15vw,8rem);line-height:.82}.join-card{box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffaf0e6;border:2px solid #1e1b162e;border-radius:8px;gap:18px;padding:22px;display:grid}label{color:#1e1b16bd;gap:8px;font-size:.84rem;font-weight:800;display:grid}input{width:100%;min-height:48px;color:var(--ink);background:#fffdf6;border:2px solid #1e1b162e;border-radius:8px;outline:0;padding:0 14px}input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb29}.menu-actions{gap:12px;display:grid}.join-row{grid-template-columns:1fr auto;gap:10px;display:grid}.primary-btn,.secondary-btn,.ghost-btn,.code-btn{letter-spacing:0;border-radius:8px;min-height:44px;padding:0 16px;font-weight:900;transition:transform .16s,box-shadow .16s,background .16s}.primary-btn{color:#fffaf0;background:#1e1b16;box-shadow:0 12px 24px #1e1b163d}.secondary-btn{background:var(--yellow);color:#1e1b16;border:2px solid #1e1b162e}.ghost-btn,.code-btn{color:#1e1b16;background:#fffaf0b8;border:2px solid #1e1b1624}.primary-btn:not(:disabled):hover,.secondary-btn:not(:disabled):hover,.ghost-btn:not(:disabled):hover,.code-btn:not(:disabled):hover{transform:translateY(-1px)}.wide{width:100%}.status-line{color:#7c2d12;min-height:20px;margin:0;font-weight:800}.game-screen{background-color:#f6e7ba;background-image:linear-gradient(90deg,#ffffff80 1px,#0000 1px),linear-gradient(#ffffff6b 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;grid-template:"topbar topbar topbar""players board guesses"minmax(0,1fr)/minmax(180px,220px) minmax(0,1fr) minmax(240px,300px);gap:10px;height:100dvh;min-height:0;padding:10px;display:grid;overflow:hidden}.topbar{border:2px solid var(--line);background:#fffaf0e0;border-radius:8px;grid-area:topbar;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding:8px 10px;display:grid;box-shadow:0 10px 28px #48340c1f}.exit-btn{color:#9a3412;background:#fff7ed;border-color:#c2410c47;min-width:72px}.room-pill,.turn-strip,.panel-title,.word-card{align-items:center;gap:10px;display:flex}.room-pill span,.turn-strip span,.panel-title span,.word-card span{color:#1e1b16a3;text-transform:uppercase;font-size:.78rem;font-weight:900}.code-btn{background:#38bdf8;min-width:94px}.code-btn.copied{background:#86efac}.turn-strip{border:2px solid var(--line);background:#fff;border-radius:8px;justify-content:center;justify-self:end;min-width:174px;padding:8px 12px}.turn-strip strong{text-align:right;font-variant-numeric:tabular-nums;min-width:48px}.players-panel,.board-panel,.guess-panel{min-height:0}.players-panel{grid-area:players}.board-panel{grid-area:board}.guess-panel{grid-area:guesses}.players-panel,.guess-panel{border:2px solid var(--line);background:#fffaf0db;border-radius:8px;grid-template-rows:auto 1fr auto;gap:10px;padding:12px;display:grid;overflow:hidden;box-shadow:0 10px 28px #48340c1f}.panel-title{justify-content:space-between}.player-list{align-content:start;gap:10px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.player-item{background:#fffdf6;border:2px solid #1e1b161a;border-left:8px solid #38bdf8;border-radius:8px;grid-template-columns:1fr auto;gap:6px;min-height:52px;padding:8px;display:grid}.player-item.painter{border-left-color:#fb7185}.player-item.muted{opacity:.55}.player-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:900;overflow:hidden}.player-badges{flex-wrap:wrap;grid-column:1/-1;gap:5px;display:flex}.badge{color:#1d4ed8;background:#dbeafe;border-radius:999px;padding:3px 7px;font-size:.68rem;font-weight:900}.painter-badge{color:#be123c;background:#ffe4e6}.board-panel{grid-template-rows:auto minmax(0,1fr) auto;gap:10px;display:grid}.word-card{color:#fffaf0;background:#1e1b16;border-radius:8px;justify-content:space-between;min-height:54px;padding:10px 14px;box-shadow:0 10px 28px #48340c24}.word-card span{color:#fffaf0b3}.word-card strong{text-align:right;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:clamp(1.05rem,3vw,1.8rem);overflow:hidden}.canvas-wrap{background:#fffaf0;border:3px solid #1e1b16;border-radius:8px;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 8px #f9d84a38,0 18px 42px #48340c2e}canvas{touch-action:none;width:100%;height:100%;display:block}.canvas-lock{color:#fffaf0;text-align:center;pointer-events:none;background:#1e1b16db;border-radius:8px;max-width:min(320px,100% - 32px);padding:12px 16px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-2deg)}.paint-toolbar{border:2px solid var(--line);background:#fffaf0e6;border-radius:8px;grid-template-columns:1fr minmax(130px,190px) auto;align-items:center;gap:10px;min-height:56px;padding:9px 10px;display:grid}.paint-toolbar.disabled{opacity:.72}.swatches{flex-wrap:wrap;gap:6px;display:flex}.swatch{border:2px solid #1e1b163d;border-radius:999px;width:25px;height:25px;box-shadow:inset 0 0 0 3px #ffffff57}.swatch.selected{outline:4px solid #3b82f647;transform:translateY(-1px)}.brush-size{grid-template-columns:auto 1fr;align-items:center}.brush-size input{min-height:32px;padding:0}.guess-feed{align-content:start;gap:8px;padding-right:2px;display:grid;overflow:auto}.empty-feed{color:#1e1b168f;text-align:center;place-items:center;min-height:90px;font-weight:800;display:grid}.guess-item{background:#fffdf6;border:2px solid #1e1b161a;border-radius:8px;gap:3px;padding:9px 10px;display:grid}.guess-item strong{font-size:.78rem}.guess-item span{overflow-wrap:anywhere}.guess-item.correct{background:#dcfce7;border-color:#16a34a57}.guess-form{grid-template-columns:1fr auto;gap:8px;display:grid}@media (width<=980px){.menu-screen{grid-template-columns:1fr;align-content:center}.menu-art{min-height:260px}.menu-panel{width:100%}.game-screen{grid-template:"topbar topbar""board board"minmax(0,1fr)"players guesses"minmax(116px,22dvh)/minmax(0,.85fr) minmax(0,1.15fr)}.players-panel,.guess-panel{min-height:0;padding:10px}.player-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.player-item{min-height:42px;padding:7px}.badge{padding:2px 6px}}@media (width<=640px){.menu-screen{padding:18px}.menu-art{min-height:180px}.join-row,.guess-form,.paint-toolbar{grid-template-columns:1fr}.game-screen{grid-template:"topbar""board"minmax(0,1fr)"players"minmax(76px,13dvh)"guesses"minmax(104px,18dvh)/1fr;gap:8px;padding:8px}.topbar{grid-template-columns:auto 1fr;gap:8px;min-height:0}.turn-strip{grid-column:1/-1;width:100%;min-width:0;min-height:36px;padding:5px 8px}.room-pill{justify-self:end}.word-card{min-height:44px;padding:8px 10px}.player-list{grid-template-columns:1fr}.word-card{flex-direction:column;align-items:flex-start}.word-card strong{text-align:left;white-space:normal;max-width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}