:root{--bg: #FFF4E6;--surface: #FFFFFF;--ink: #3B2A4A;--ink-soft: #7A6A88;--primary: #3DBE8B;--primary-dark: #23936A;--hunter: #FF6B5B;--hunter-dark: #D9473A;--candy: #FF8FC7;--sun: #FFC94D;--sky: #7CC7FF;--lilac: #B79BFF;--line: #EADCCB;--radius-sm: 12px;--radius-md: 20px;--radius-lg: 32px;--pop: 0 6px 0 rgba(59, 42, 74, .18), 0 14px 28px rgba(59, 42, 74, .12);--display: "Baloo 2", system-ui, sans-serif;--body: "Nunito", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:700 16px/1.25 var(--body);user-select:none;-webkit-user-select:none;touch-action:none}canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit;border:0;cursor:pointer}input{font:inherit}.hidden{display:none!important}.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;font:700 24px/1.1 var(--display);background:var(--surface);color:var(--ink);box-shadow:var(--pop);border:3px solid var(--line);transition:transform .08s,box-shadow .08s;white-space:nowrap}.btn:active{transform:translateY(4px);box-shadow:0 2px #3b2a4a2e}.btn.primary{background:var(--primary);color:#fff;border-color:transparent}.btn.hunter{background:var(--hunter);color:#fff;border-color:transparent}.btn.sm{font-size:18px;padding:8px 18px}.btn[disabled]{opacity:.5;pointer-events:none}.btn .key{font:900 13px var(--body);opacity:.7;padding:2px 7px;border-radius:8px;background:#3b2a4a14}.btn.primary .key,.btn.hunter .key{background:#ffffff40}.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--pop);padding:24px 28px}.badge{display:inline-block;padding:5px 14px;border-radius:999px;color:#fff;font:900 13px var(--body);letter-spacing:.04em}.badge.cham{background:var(--primary)}.badge.hunter{background:var(--hunter)}.badge.spec{background:var(--lilac)}.pill{display:inline-flex;align-items:center;gap:12px;padding:9px 18px;border-radius:999px;background:#ffffffeb;box-shadow:var(--pop)}h1,h2{font-family:var(--display);margin:0;line-height:1.05}h1{font-size:40px}h2{font-size:28px}.soft{color:var(--ink-soft)}.screen{position:fixed;inset:0}#menu{background:center/cover no-repeat}#menu:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff5e6f5,#fff5e659 55%,#fff5e600)}#menu .hero{position:absolute;left:clamp(16px,7vw,96px);top:50%;transform:translateY(-55%);display:flex;flex-direction:column;gap:18px;max-width:560px}#menu .logo{font:800 clamp(56px,9vw,104px)/.92 var(--display);margin:0}#menu .tag{font-size:20px;color:var(--ink-soft);margin:0}.namebox{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--line);border-radius:999px;padding:8px 20px;max-width:420px}.namebox input{border:0;outline:0;background:transparent;font:700 18px var(--body);color:var(--ink);width:100%}.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}#menu .foot{position:absolute;left:clamp(16px,7vw,96px);bottom:28px}#menu .ver{position:absolute;right:20px;bottom:14px;font-size:13px;color:var(--ink-soft)}#menu .ver a{color:inherit}.offline-note{font-size:14px;color:var(--ink-soft)}.modal{position:fixed;inset:0;background:#3b2a4a73;display:grid;place-items:center;z-index:50;padding:16px}.modal .card{max-width:640px;width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:14px}.modal ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-soft)}.modal label{display:grid;gap:6px}.modal input[type=range]{width:100%;accent-color:var(--primary)}.codeinput{font:800 32px var(--display);text-align:center;letter-spacing:.08em;padding:10px;border:3px solid var(--line);border-radius:var(--radius-md);outline:0;color:var(--ink);text-transform:uppercase}.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.swatch{padding:14px;border-radius:var(--radius-md);background:var(--bg);border:3px solid var(--line);display:grid;justify-items:center;gap:8px}.swatch.on{border-color:var(--primary);background:#e8f8f0}.swatch i{width:54px;height:54px;border-radius:50%;box-shadow:inset -6px -8px #0000001f}.toggle{display:flex!important;grid-template-columns:none;align-items:center;justify-content:space-between}#lobby{overflow:auto;padding:32px clamp(16px,4vw,64px);background:#fff4e6d1;backdrop-filter:blur(6px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);grid-template-rows:auto 1fr auto;gap:24px}#lobby .top{grid-column:1 / -1;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.code{background:var(--sun);border-radius:999px;padding:8px 18px;display:inline-flex;gap:12px;align-items:center;font:900 20px var(--body);box-shadow:var(--pop)}.code button{background:none;font-size:14px;text-decoration:underline}.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}.room{padding:10px 10px 12px;border-radius:24px;background:#fff;box-shadow:var(--pop);display:grid;gap:8px;text-align:left}.room img{width:100%;aspect-ratio:22/15;object-fit:cover;border-radius:16px;display:block}.room b{font:700 clamp(16px,2vw,24px) var(--display);padding-left:4px}.room.on{background:var(--primary);color:#fff}.rules{display:grid;gap:8px;color:var(--ink-soft);margin-top:20px}.players{display:flex;flex-direction:column;gap:10px}.prow{display:flex;align-items:center;gap:12px;background:var(--bg);padding:10px 14px;border-radius:20px}.prow .av{width:36px;height:36px;border-radius:50%;flex:none;box-shadow:inset -4px -6px #0000001f}.prow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#lobby .bottom{position:sticky;bottom:-32px;padding:10px 0 24px;background:linear-gradient(#fff4e600,#fff4e6f2 40%);grid-column:1 / -1;display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap}#hud{pointer-events:none}#hud .layer>*,.labels>*{position:absolute}.labels{left:0;top:0}#hud button,#hud .picker,#hud .tile{pointer-events:auto}.hud-top{top:16px;left:50%;transform:translate(-50%)}.hud-top .time{font:900 22px var(--body);min-width:64px}.hud-score{top:16px;left:16px;font:900 22px var(--body)}.hud-exit{top:16px;right:16px}.danger{top:78px;left:50%;transform:translate(-50%);background:var(--hunter)!important;color:#fff;font:900 22px var(--body);animation:pulse .6s infinite alternate}@keyframes pulse{to{transform:translate(-50%) scale(1.08)}}.vignette{inset:0;box-shadow:inset 0 0 160px 40px #ff6b5b8c;opacity:0;transition:opacity .3s}.vignette.on{opacity:1}.fogvig{inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(59,42,74,.75) 100%)}.cross{left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #3b2a4a4d}.cross.cool{opacity:.4}.picker{left:50%;bottom:16px;transform:translate(-50%);background:#fffffff2;border-radius:28px;box-shadow:var(--pop);padding:12px 16px;display:grid;gap:8px}.picker .lbl{font-size:13px;color:var(--ink-soft)}.picker .tiles{display:flex;gap:10px}.tile{width:92px;padding:6px 6px 8px;border-radius:18px;background:var(--bg);border:3px solid var(--line);display:grid;justify-items:center;gap:4px;font-size:12px;position:relative}.tile img{width:76px;height:76px;border-radius:12px;object-fit:cover}.tile.on{border-color:var(--primary);background:#dff5ea}.tile kbd{position:absolute;top:4px;left:8px;font:900 12px var(--body);color:var(--ink-soft)}.abilities{right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}.abilities .btn{position:relative;overflow:hidden}.abilities .btn .cd{position:absolute;inset:0;background:#3b2a4a59;transform-origin:left}.minimap{left:16px;bottom:16px;width:180px;height:180px;border-radius:24px;background:#ffffffe6;box-shadow:var(--pop)}.still{left:16px;bottom:208px;font-size:14px;color:var(--primary-dark)}.label{transform:translate(-50%,-100%);font:900 13px var(--body);padding:3px 10px;border-radius:999px;background:#ffffffe6;white-space:nowrap;box-shadow:0 2px #3b2a4a26}.label.hunter{background:var(--hunter);color:#fff;font-size:15px}.label.emote{font-size:30px;background:none;box-shadow:none}.label.note{font-size:28px;background:none;box-shadow:none;animation:rise 1.6s ease-out forwards}@keyframes rise{to{transform:translate(-50%,-260%);opacity:0}}.edge{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:24px solid var(--hunter);filter:drop-shadow(0 3px 0 rgba(59,42,74,.25))}.toast{top:30%;left:50%;transform:translate(-50%);font:900 22px var(--body);background:var(--sun)!important;animation:pop .25s}@keyframes pop{0%{transform:translate(-50%) scale(.6)}}.blind{inset:0;background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;gap:10px}.blind .n{font:800 180px/1 var(--display);color:var(--sun)}.radar{left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;border:4px dashed rgba(255,255,255,.6);display:grid;place-items:center}.radar .arr{position:absolute;inset:0}.radar .arr:before{content:"";position:absolute;left:50%;top:-6px;margin-left:-16px;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid var(--sun)}.radar b{font:900 20px var(--body);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}.specbar{left:50%;bottom:24px;transform:translate(-50%)}.popmsg{top:76px;left:50%;transform:translate(-50%);background:var(--candy)!important;color:#fff;font:900 20px var(--body)}.hint{left:16px;bottom:16px;font-size:13px;color:var(--ink-soft)}.lockhint{left:50%;top:116px;transform:translate(-50%);font-size:15px}.board{width:min(720px,100%);display:grid;gap:12px;justify-items:center}.srow{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto 56px;align-items:center;gap:12px;padding:10px 18px;border-radius:20px;background:var(--bg)}.srow>span{white-space:nowrap}.srow.first{background:var(--sun)}.srow .nm{overflow:hidden;text-overflow:ellipsis}.srow .pts{font:900 22px var(--body);min-width:52px;text-align:right}.touch .joy{left:0;top:0;bottom:0;width:45%;pointer-events:auto}.touch .joy .base{position:absolute;left:var(--jx, 120px);top:var(--jy, calc(100% - 140px) );width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:#ffffff59;border:3px solid rgba(255,255,255,.7);opacity:.6}.touch .joy.on .base{opacity:1}.touch .joy .knob{position:absolute;left:30px;top:30px;width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:var(--pop)}.touch .look{right:0;top:0;bottom:0;width:55%;pointer-events:auto}.touch .picker{top:62px;bottom:auto;padding:6px 10px;border-radius:20px}.touch .picker .lbl,.touch .tile kbd,.touch .tile span{display:none}.touch .tile{width:54px;padding:4px;border-radius:14px}.touch .tile img{width:42px;height:42px;border-radius:10px}.touch .minimap{width:110px;height:110px;top:62px;bottom:auto}.touch .still{top:180px;bottom:auto}.touch .toast{top:45%}.touch .danger{top:auto;bottom:18px}.touch .abilities .btn{font-size:16px;padding:8px 14px}#rotate{position:fixed;inset:0;z-index:99;background:var(--bg);display:none;place-content:center;text-align:center;gap:12px;padding:24px}@media (orientation: portrait) and (pointer: coarse){#rotate{display:grid}}@media (max-width: 960px){.tile{width:72px}.tile img{width:56px;height:56px}.tile span{font-size:11px}.minimap{width:130px;height:130px}.still{bottom:156px}.abilities .btn{font-size:18px;padding:8px 16px}}@media (max-height: 520px){.btn{font-size:18px;padding:8px 18px}#menu .hero{top:14px;transform:none;gap:10px}#menu .logo{font-size:46px}#menu .tag{font-size:15px;max-width:360px}.namebox{padding:4px 16px;max-width:320px}#menu .foot{left:auto;right:16px;bottom:34px;flex-direction:column;align-items:flex-end;gap:8px}.btn.sm{font-size:15px;padding:6px 14px}#lobby{padding:14px;gap:14px}.card{padding:14px 18px}h1{font-size:30px}}.field{font:700 18px var(--body);padding:10px 14px;border:3px solid var(--line);border-radius:var(--radius-md);outline:0;color:var(--ink);width:100%;background:#fff}.field:focus{border-color:var(--primary)}.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg);padding:6px;border-radius:999px}.seg button{padding:10px;border-radius:999px;background:transparent;font:700 16px var(--body);color:var(--ink-soft)}.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px #3b2a4a26}.roomlist{display:grid;gap:10px;max-height:52vh;overflow:auto}.rrow{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:12px;align-items:center;background:var(--bg);border-radius:20px;padding:8px 12px 8px 8px}.rrow img{width:72px;height:48px;object-fit:cover;border-radius:12px}.rinfo{display:grid;gap:2px;min-width:0}.rinfo b,.rinfo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rinfo span{font-size:13px}.pcount{font:900 18px var(--body)}.chat{display:grid;gap:8px;margin-top:8px}.chat .msgs{max-height:180px;min-height:80px;overflow:auto;display:grid;gap:4px;align-content:start;background:var(--bg);border-radius:16px;padding:10px 12px;font-size:14px;user-select:text;-webkit-user-select:text}.chat .msgs .sys{color:var(--ink-soft);font-size:12px}.chatform{display:flex;gap:8px}.chatform input{flex:1;min-width:0;font:700 15px var(--body);padding:8px 14px;border:3px solid var(--line);border-radius:999px;outline:0;color:var(--ink)}.chatform input:focus{border-color:var(--primary)}.chat.ingame{position:absolute;left:16px;bottom:210px;width:min(340px,40vw);pointer-events:auto;margin:0}.chat.ingame .msgs{background:#ffffffb8;max-height:150px;min-height:0}.chat.ingame.quiet:not(.typing){display:none}.chat.ingame .msgs>.old{display:none}.chat.ingame.typing .msgs>.old{display:block}.chat.ingame:not(.typing) .chatform{display:none}.touch .chat.ingame{bottom:auto;top:186px;width:min(300px,38vw)}@media (max-width: 960px){.chat.ingame{bottom:156px}}
