:root{--page: #1c1538;--panel: #2a2150;--panel-2: #352a63;--line: #ffffff1a;--ink: #140f2a;--text: #fff;--muted: #b9b0dc;--yellow: #ffd43b;--green: #2fbf71;--pink: #ff5d8f;--blue: #3f8cff;--font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Rounded", system-ui, sans-serif;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}button,input{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}html,body,#root{height:100%;margin:0;overflow:hidden;background:var(--page)}body{font-family:var(--font);color:var(--text)}button{cursor:pointer;font-family:var(--font)}.dg{height:100%;box-sizing:border-box;padding:12px;gap:12px;display:grid;grid-template-columns:236px minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);background:radial-gradient(1200px 600px at 50% -10%,#3a2b78 0%,transparent 60%),var(--page);user-select:none;-webkit-user-select:none}.top{grid-column:1 / -1;display:grid;grid-template-columns:236px minmax(0,1fr) auto 300px;gap:12px;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;line-height:.95;letter-spacing:.3px}.brand .logo{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:var(--yellow);font-size:28px;box-shadow:0 4px #b8860b;transform:rotate(-6deg)}.wordbox{background:var(--panel);border-radius:18px;padding:8px 16px 10px;text-align:center;box-shadow:inset 0 0 0 2px var(--line);min-width:0}.wlabel{font-size:13px;font-weight:900;letter-spacing:2px;color:var(--muted)}.word{display:flex;justify-content:center;align-items:flex-end;gap:7px;min-height:50px;flex-wrap:wrap}.word .cell{display:grid;place-items:end center;width:34px;height:46px;border-bottom:5px solid #fff;font-size:34px;font-weight:900;line-height:1}.word .cell.on{color:var(--yellow)}.word .gap{width:18px}.word sup{align-self:center;margin-left:10px;padding:2px 8px;border-radius:8px;background:#ffffff1a;font-size:16px;font-weight:900;color:var(--muted)}.word.full .cell,.word.got .cell{border-bottom-color:transparent;width:auto;min-width:24px;color:#fff;font-size:38px}.word.got .cell{color:var(--green)}.word.hintpop .cell.on{animation:letter .5s cubic-bezier(.3,1.8,.5,1)}@keyframes letter{0%{transform:scale(.3) translateY(10px)}to{transform:none}}.ring{position:relative;width:72px;height:72px}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:8}.ring .bg{stroke:#fff2;fill:var(--panel)}.ring .arc{stroke:var(--yellow);stroke-linecap:round;transition:stroke .3s}.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;font-weight:900}.ring.hurry .arc{stroke:#ff4b4b}.ring.hurry b{color:#ff6b6b;animation:beat 1s infinite}@keyframes beat{0%,to{transform:scale(1)}15%{transform:scale(1.25)}}.topr{display:flex;align-items:center;justify-content:flex-end;gap:10px}.turn{font-weight:900;font-size:20px;background:var(--panel);padding:10px 16px;border-radius:14px;box-shadow:inset 0 0 0 2px var(--line);white-space:nowrap}.lb{width:50px;height:50px;border-radius:14px;border:0;font-size:24px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);transition:transform .12s}.lb:hover{transform:scale(1.08) rotate(-4deg)}.lb:active{transform:scale(.94)}.players{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px}.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.plist li{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);font-weight:800;font-size:17px;transition:background .3s}.plist li.me{box-shadow:inset 0 0 0 3px var(--yellow)}.plist li.got{background:#1e6b45}.plist li.drawing{background:#4a3a8f}.plist li.bump{animation:bump .45s cubic-bezier(.3,1.8,.5,1)}@keyframes bump{0%{transform:scale(1.08)}to{transform:none}}.plist .rank{width:16px;color:var(--muted);font-size:14px;text-align:center}.plist .av{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--c);color:var(--ink);font-weight:900;font-size:16px;box-shadow:0 0 0 2px #fff6}.plist .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plist .nm small{font-size:12px;color:var(--muted)}.plist .pen{font-size:20px;animation:wiggle .8s ease-in-out infinite}.plist .tick{color:#9dffc8;font-size:20px;font-weight:900}.plist b{font-size:19px;min-width:34px;text-align:right}.plist .plus{position:absolute;right:8px;top:-6px;color:var(--green);font-weight:900;font-size:22px;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;animation:rise 1.2s ease-out forwards;pointer-events:none}@keyframes rise{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1;transform:translateY(-6px) scale(1.15)}to{opacity:0;transform:translateY(-30px)}}@keyframes wiggle{50%{transform:rotate(-14deg) translate(-2px)}}.chatboard{background:var(--panel);border-radius:14px;padding:8px 12px;box-shadow:inset 0 0 0 2px var(--line)}.chatboard:empty{display:none}.ch-h{font-size:12px;font-weight:900;letter-spacing:1.5px;color:#c9b8ff;margin-bottom:4px}.ch-r{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:15px}.ch-r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px}.board{position:relative;flex:none;border-radius:18px;overflow:hidden;background:#fffdf7;box-shadow:0 0 0 4px #fff,0 10px 0 4px #00000040,0 0 40px #8f7bff40}.board canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.drawing .board canvas{cursor:crosshair}.board.wob{animation:wob .5s ease-out}@keyframes wob{20%{transform:rotate(-1.2deg) scale(1.01)}45%{transform:rotate(.9deg)}70%{transform:rotate(-.4deg)}}.drawer-tag{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-weight:900;font-size:17px;pointer-events:none;box-shadow:0 3px #0003}.fxl{position:absolute;inset:0;pointer-events:none;overflow:hidden}.cf{position:absolute;top:60%;width:12px;height:16px;border-radius:3px;animation:cf 1.5s cubic-bezier(.2,.7,.4,1) forwards}@keyframes cf{0%{transform:translate(0) rotate(0);opacity:1}40%{transform:translate(calc(var(--x) * .6),var(--y)) rotate(calc(var(--r) * .5));opacity:1}to{transform:translate(var(--x),calc(var(--y) + 60vmin)) rotate(var(--r));opacity:0}}.flashmsg{position:absolute;left:50%;top:16%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;white-space:nowrap;font-weight:900;font-size:clamp(26px,4.4vw,52px);color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);transition:opacity .2s,transform .35s cubic-bezier(.3,1.7,.5,1)}.flashmsg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}.flashmsg.good{color:#6dffae}.flashmsg.close{color:var(--yellow);font-size:clamp(22px,3.4vw,40px)}.overlay{position:absolute;inset:0;display:none;place-items:center;background:#1c1538cc;backdrop-filter:blur(2px)}.overlay.on{display:grid}.overlay.soft{background:#1c153899}.ocard{text-align:center;padding:20px 28px;animation:cardin .45s cubic-bezier(.3,1.6,.5,1);max-width:92%}@keyframes cardin{0%{transform:scale(.6) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}.ot{font-weight:900;font-size:clamp(22px,3.6vw,40px);text-shadow:0 3px 0 var(--ink)}.os{margin-top:10px;color:var(--muted);font-weight:800;font-size:clamp(14px,1.8vw,20px)}.bigpen{font-size:64px;animation:wiggle .8s ease-in-out infinite}.choices{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:18px}.choices button{border:0;border-radius:16px;padding:16px 26px;font-size:clamp(20px,2.8vw,30px);font-weight:900;color:var(--ink);background:var(--yellow);box-shadow:0 6px #b8860b;text-transform:uppercase;transition:transform .1s}.choices button:hover{transform:translateY(-3px) rotate(-2deg)}.choices button:active{transform:translateY(4px);box-shadow:0 2px #b8860b}.bigword{font-weight:900;font-size:clamp(44px,8vw,96px);line-height:1;color:var(--yellow);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);margin:8px 0 14px;animation:stamp .6s cubic-bezier(.3,1.9,.5,1)}@keyframes stamp{0%{transform:scale(2.4) rotate(8deg);opacity:0}60%{opacity:1}to{transform:rotate(-2deg)}}.gains{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.gain{display:flex;gap:8px;align-items:center;background:var(--ink);padding:6px 12px;border-radius:999px;font-weight:800;font-size:17px}.gain b{color:#6dffae}.gain.dr b{color:var(--yellow)}.steps{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-top:18px}.step{width:clamp(90px,14vw,150px);text-align:center}.step .md{font-size:40px}.step .pn{font-weight:900;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step .pb{margin-top:6px;background:var(--c);color:var(--ink);font-weight:900;font-size:24px;border-radius:12px 12px 0 0;display:grid;place-items:center}.step.s0 .pb{height:130px}.step.s1 .pb{height:90px}.step.s2 .pb{height:64px}.dock{flex:none;height:58px;display:grid;place-items:center;width:100%}.tools{display:none;align-items:center;gap:8px;background:var(--panel);padding:7px 10px;border-radius:16px;box-shadow:inset 0 0 0 2px var(--line);flex-wrap:wrap;justify-content:center}.drawing .tools{display:flex}.drawing .hintbar{display:none}.swatches,.sizes{display:flex;gap:5px}.sw{width:30px;height:30px;border-radius:50%;border:3px solid #ffffff55;background:var(--c);font-size:16px;padding:0}.sw.on{border-color:#fff;transform:scale(1.15);box-shadow:0 0 0 3px var(--yellow)}.sz{width:38px;height:38px;border-radius:12px;border:0;background:var(--panel-2);display:grid;place-items:center}.sz i{display:block;border-radius:50%;background:#fff}.sz.on{box-shadow:0 0 0 3px var(--yellow)}.tool{border:0;border-radius:12px;padding:0 12px;height:38px;white-space:nowrap;font-weight:900;font-size:16px;color:#fff;background:var(--panel-2)}.tool:active,.sz:active,.sw:active{transform:scale(.92)}.hintbar{color:var(--muted);font-weight:800;font-size:16px;text-align:center}.side{min-height:0;display:flex;flex-direction:column;gap:8px;background:var(--panel);border-radius:18px;padding:10px;box-shadow:inset 0 0 0 2px var(--line)}.feedh{font-size:13px;font-weight:900;letter-spacing:2px;color:var(--muted);padding:2px 4px}.feed{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}.fl{padding:6px 10px;border-radius:10px;font-weight:800;font-size:16px;line-height:1.25;background:#ffffff0d;border-left:5px solid var(--c, #fff);animation:fin .25s ease-out;overflow-wrap:anywhere;user-select:text}.fl.k-ok,.fl.k-cok{background:#1e6b45;color:#d6ffe8;border-left-color:#6dffae;font-weight:900}.fl.k-s{background:transparent;color:var(--yellow);border-left-color:transparent;text-align:center;font-size:14px}.fl.k-c{color:#e3dbff}.fl.k-close{background:#5a4a10;color:#ffe98a;border-left-color:var(--yellow)}@keyframes fin{0%{transform:translate(20px);opacity:0}}.guess{display:flex;gap:6px}.guess input{flex:1;min-width:0;height:50px;border-radius:14px;border:0;padding:0 14px;font:800 18px var(--font);color:var(--ink);background:#fff;outline:none;box-shadow:inset 0 0 0 3px transparent;user-select:text}.guess input:focus{box-shadow:inset 0 0 0 3px var(--yellow)}.guess input:disabled{background:#4a3f7a;color:#fff}.guess input:disabled::placeholder{color:#d9d0ff}.guess button{width:54px;height:50px;border:0;border-radius:14px;background:var(--yellow);color:var(--ink);font-size:22px;font-weight:900;box-shadow:0 4px #b8860b}.guess button:active{transform:translateY(3px);box-shadow:0 1px #b8860b}@media(max-width:1100px){.dg{grid-template-columns:200px minmax(0,1fr) 250px}.top{grid-template-columns:200px minmax(0,1fr) auto 250px}.brand{font-size:18px}}@media(max-width:1000px)and (min-width:761px){.dg{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto auto minmax(0,1fr);gap:10px}.top{grid-template-columns:minmax(0,1fr) auto auto}.brand{display:none}.players{grid-column:1 / -1;overflow:visible;flex-direction:row;flex-wrap:wrap;gap:6px}.plist{flex-direction:row;flex-wrap:wrap;gap:6px}.chatboard{display:flex;align-items:center;gap:10px;padding:5px 10px}.ch-h{margin:0}.ch-r:nth-child(n+4){display:none}.plist li{padding:5px 10px;font-size:15px}.plist .rank{display:none}.plist .av{width:24px;height:24px;font-size:13px}.plist .nm{max-width:120px}.plist b{min-width:0;font-size:16px}}@media(max-width:760px){html,body,#root{overflow:auto}.dg{height:auto;min-height:100%;padding:8px;gap:8px;grid-template-columns:1fr;grid-template-rows:auto}.top{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.brand{display:none}.wordbox{padding:6px 8px}.wlabel{font-size:11px}.word{gap:4px;min-height:36px}.word .cell{width:20px;height:32px;font-size:24px;border-bottom-width:4px}.word.full .cell,.word.got .cell{font-size:28px;min-width:16px}.ring{width:56px;height:56px}.ring b{font-size:22px}.topr{flex-direction:column;gap:4px}.turn{font-size:13px;padding:4px 8px}.lb{width:40px;height:34px;font-size:18px}.stage{order:2}.players{order:4;overflow:visible}.plist{flex-direction:row;flex-wrap:wrap;gap:4px}.plist li{font-size:13px;padding:4px 8px;gap:5px}.plist .rank{display:none}.plist .av{width:22px;height:22px;font-size:12px}.plist b{font-size:14px;min-width:0}.side{order:3;padding:8px}.feed{max-height:26vh;min-height:90px}.hintbar{display:none}.dock{height:auto}.tools{gap:6px;padding:6px}.sw{width:28px;height:28px}.sz,.tool{height:34px}.sz{width:34px}.drawer-tag{font-size:13px;padding:4px 9px;left:8px;top:8px}}
