:root{--ink: #2b2238;--paper: #fffaf3;--pink: #ff6b8b;--blue: #4fc3ff;--lemon: #ffd23f;--mint: #6ee07a;--shadow: 0 6px 0 rgba(43, 34, 56, .9)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#9fdcff;color:var(--ink);font-family:"Baloo 2",system-ui,sans-serif}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block}button{font:inherit;cursor:pointer}.ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;padding:16px 32px}.panel{pointer-events:auto;background:var(--paper);border:4px solid var(--ink);border-radius:26px;box-shadow:var(--shadow);padding:20px 24px;width:min(500px,100%);max-height:calc(100vh - 32px);overflow:auto}.panel.win{margin:0 auto;width:min(560px,100%);text-align:center}.logo{text-align:center;margin-bottom:10px;line-height:.9}.logo span{font-family:Lilita One,sans-serif;font-size:58px;letter-spacing:1px;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;display:inline-block}.logo .k{color:var(--pink);transform:rotate(-4deg)}.logo .h{color:var(--lemon);transform:rotate(3deg) translateY(4px)}.logo .tag{font-size:14px;font-weight:700;opacity:.7;margin-top:8px}.look{display:flex;gap:12px;margin:12px 0;align-items:flex-start}.look-controls{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}.look-controls input.name{width:100%}canvas.avatar{width:132px;height:150px;flex:none;border:3px solid var(--ink);border-radius:20px;background:linear-gradient(#bfe8ff,#fff3e6)}@media(max-width:420px){canvas.avatar{width:96px;height:109px}}input.name,input.code{font:inherit;font-size:20px;font-weight:800;border:3px solid var(--ink);border-radius:14px;padding:6px 12px;background:#fff;color:var(--ink);outline:none}input.name:focus,input.code:focus{border-color:var(--pink)}input.code{width:96px;text-align:center;letter-spacing:3px;text-transform:uppercase}.shake{animation:shake .4s}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--ink)}.swatch.on{outline:4px solid var(--ink);outline-offset:2px}.swatch.taken{opacity:.25;cursor:not-allowed}.hats{display:flex;gap:6px;flex-wrap:wrap}.hat{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:1px 10px;font-weight:700;font-size:14px;color:var(--ink)}.hat.on{background:var(--lemon)}.row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}button.big{border:3px solid var(--ink);border-radius:16px;background:var(--pink);color:#fff;font-weight:800;font-size:20px;padding:6px 18px;box-shadow:0 4px 0 var(--ink);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;transition:transform .08s}button.big:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}button.big.alt{background:var(--blue)}button.big.go{background:var(--mint);width:100%;margin-top:10px;font-size:24px}button.big:disabled{background:#cfc8d8;cursor:default}.err{color:#e0344d;font-weight:700;min-height:1.2em;margin-top:6px}.tip{font-size:14px;opacity:.7;margin-top:8px;text-align:center}.codebox{text-align:center;background:var(--lemon);border:3px solid var(--ink);border-radius:18px;padding:6px}.codebox .lbl{font-weight:700;font-size:13px;opacity:.7}.codebox .c{font-family:Lilita One,sans-serif;font-size:48px;letter-spacing:8px;line-height:1}.copy{border:2px solid var(--ink);background:#fff;border-radius:999px;font-weight:700;padding:0 12px;margin-top:4px;color:var(--ink)}.crew{margin-top:12px;display:flex;flex-direction:column;align-items:stretch}.member{display:flex;align-items:center;gap:10px;border:3px solid var(--ink);border-radius:14px;padding:4px 10px;background:#fff;font-weight:800}.member.empty{border-style:dashed;opacity:.5;font-weight:600;font-size:14px;margin-top:6px}.member .dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--ink);flex:none}.member .nm{flex:1}.hostbadge{font-size:12px;background:var(--lemon);border:2px solid var(--ink);border-radius:999px;padding:0 8px}.ropelink{height:14px;width:6px;margin-left:20px;background:repeating-linear-gradient(45deg,#e8c58a 0,#e8c58a 4px,#c99a5a 4px,#c99a5a 8px);border-left:2px solid var(--ink);border-right:2px solid var(--ink)}.setting{display:block;margin-top:10px;font-weight:800}.setting small{display:block;font-weight:600;opacity:.65;margin-left:24px}.board{margin-top:14px;text-align:left}.board .bt{font-family:Lilita One,sans-serif;font-size:20px}.board .empty{opacity:.6;font-size:14px}.board .br{display:flex;gap:8px;font-weight:700;font-size:15px;border-bottom:2px dashed rgba(43,34,56,.15)}.board .rk{width:22px;opacity:.6}.board .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board .tm{font-variant-numeric:tabular-nums}.winhead{font-family:Lilita One,sans-serif;font-size:36px;color:var(--lemon);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}.winlabel{font-weight:800;opacity:.6;margin-top:6px}.wintime{font-family:Lilita One,sans-serif;font-size:64px;line-height:1;font-variant-numeric:tabular-nums}.winsub{font-weight:700;opacity:.7}.awards{display:grid;gap:6px;margin:12px 0}.award{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:4px 10px;font-weight:700}.award b{display:block;font-family:Lilita One,sans-serif;font-weight:400;color:var(--pink);font-size:18px}table.blame{width:100%;border-collapse:collapse;font-weight:700}table.blame th{font-size:13px;opacity:.6}table.blame td,table.blame th{padding:2px 6px;border-bottom:2px dashed rgba(43,34,56,.15)}table.blame td:first-child{text-align:left}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;font-weight:800}.hud>*{position:absolute}.hud-timer{top:16px;left:50%;transform:translate(-50%);font-family:Lilita One,sans-serif;font-size:40px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums}.hud-meter{right:28px;top:50%;transform:translateY(-50%);height:52vh;width:14px}.hud-meter-bar{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff9;border:3px solid var(--ink);border-radius:999px}.hud-meter-top{position:absolute;top:-34px;left:50%;transform:translate(-50%);font-size:22px}.hud-meter-dot{position:absolute;left:50%;width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);transform:translate(-50%,50%);transition:bottom .15s linear}.hud-meter-dot.me{width:26px;height:26px;z-index:2}.hud-grip{left:50%;bottom:120px;transform:translate(-50%);width:200px;height:20px;border:3px solid var(--ink);border-radius:999px;background:#ffffffb3;overflow:hidden}.hud-grip.active{box-shadow:0 0 0 4px #fff9}.hud-grip-fill{height:100%}.hud-grip span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:13px;line-height:14px}.hud-brace{left:50%;bottom:150px;transform:translate(-50%);background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:0 14px;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}.hud-brace.taut{background:var(--pink);animation:wob .25s infinite alternate}@keyframes wob{to{transform:translate(-50%) scale(1.08)}}.hud-charge{left:50%;top:58%;transform:translate(-50%);width:80px;height:12px;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}.hud-charge-fill{height:100%;background:var(--lemon)}.hud-charge.full .hud-charge-fill{background:var(--pink)}.hud-reset{left:50%;bottom:190px;transform:translate(-50%);width:300px;height:26px;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}.hud-reset-fill{height:100%;background:var(--lemon)}.hud-reset span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:14px;line-height:20px}.hud-toasts{top:74px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.hud-toast{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 16px;font-size:18px;animation:tin .25s;transition:opacity .4s,transform .4s;white-space:nowrap}.hud-toast.good{background:var(--mint)}.hud-toast.bad{background:var(--pink);color:#fff;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}.hud-toast.out{opacity:0;transform:translateY(-8px)}@keyframes tin{0%{transform:scale(.6);opacity:0}}.hud-count{top:34%;left:50%;transform:translate(-50%,-50%);font-family:Lilita One,sans-serif;font-size:120px;color:var(--lemon);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;opacity:0}.hud-count.pop{animation:pop .9s forwards}@keyframes pop{0%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0}}.hud-flash{top:0;right:0;bottom:0;left:0;background:#fff;opacity:0}.hud-lock{left:50%;bottom:40px;transform:translate(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:4px 16px;font-size:15px}.hud-help{left:16px;bottom:16px;background:#fffaf3e6;border:3px solid var(--ink);border-radius:16px;padding:6px 12px;font-size:13px;font-weight:600;line-height:1.45}.hud-help.hidden{display:none}body:not(.playing) .hud-lock{bottom:16px;left:auto;right:16px;transform:none}@media(max-width:720px){.ui{padding:16px;justify-content:center}.logo span{font-size:44px}.hud-help{display:none}}.celebrate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;transition:opacity .8s;background:radial-gradient(ellipse 70% 45% at 50% 42%,#2b22388c,#2b223800 70%)}body.celebrating .hud,body.celebrating .ui{opacity:0;transition:opacity .4s}.celebrate.out{opacity:0}.celebrate canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.celebrate-msg{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;width:100%;padding:0 16px}.celebrate-title{font-family:Lilita One,sans-serif;font-size:clamp(48px,10vw,128px);line-height:1;color:var(--lemon);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;letter-spacing:2px;animation:cheer .9s cubic-bezier(.2,1.6,.4,1) both,bob 1.6s .9s ease-in-out infinite;text-shadow:0 8px 0 rgba(43,34,56,.85)}.celebrate-sub{margin-top:14px;font-size:clamp(18px,2.6vw,30px);font-weight:800;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;animation:tin .5s .6s both}.celebrate-sub b{color:var(--pink)}.celebrate-time{font-family:Lilita One,sans-serif;font-size:clamp(44px,7vw,92px);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums;animation:cheer .7s .9s cubic-bezier(.2,1.6,.4,1) both}@keyframes cheer{0%{transform:scale(.2) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes bob{50%{transform:translateY(-8px) rotate(-1.5deg)}}.world-banner{left:0;right:0;top:22%;text-align:center;pointer-events:none;font-family:Lilita One,sans-serif;font-size:clamp(36px,6vw,72px);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;animation:cheer .7s cubic-bezier(.2,1.6,.4,1) both;transition:opacity .7s;white-space:nowrap}.world-banner small{display:block;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:.32em;-webkit-text-stroke:2px var(--ink);letter-spacing:2px;text-transform:uppercase}.world-banner.out{opacity:0}.look .dress{width:100%;font-size:18px;background:var(--lemon);color:var(--ink);-webkit-text-stroke:0}.look-summary{font-size:13px;font-weight:700;opacity:.65;min-height:1.2em}.wardrobe{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;overflow:auto;padding:18px 24px;background:radial-gradient(ellipse at 50% 45%,#4f9dff,#2a5fd0 55%,#1b3f96);display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:800}.wardrobe-head{display:flex;align-items:center;gap:12px;width:min(1100px,100%)}.wardrobe-title{flex:1;font-family:Lilita One,sans-serif;font-size:42px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}.wardrobe-head .big.go{width:auto;margin:0}.wardrobe-grid{display:grid;grid-template-columns:1fr 360px 1fr;gap:18px;align-items:center;width:min(1100px,100%)}.wardrobe .slots{display:grid;gap:10px}.slot{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:6px 8px;box-shadow:0 4px 0 var(--ink)}.slot.muted{opacity:.45}.slot-mid{text-align:center;min-width:0}.slot-label{font-family:Lilita One,sans-serif;font-weight:400;font-size:18px;color:#2a5fd0}.slot-value{display:flex;align-items:center;justify-content:center;gap:6px;min-height:26px}.slot-value b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-value small{opacity:.5;font-size:12px}.swatch-dot{width:26px;height:26px;border-radius:50%;border:3px solid var(--ink)}.arrow{width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);background:var(--lemon);color:var(--ink);font-size:18px;box-shadow:0 3px 0 var(--ink);transition:transform .08s}.arrow:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.stage{display:flex;flex-direction:column;align-items:center}.stage .tip{color:#fff;opacity:.8}canvas.avatar.big{width:340px;height:440px;border:4px solid var(--ink);border-radius:28px;cursor:grab;background:radial-gradient(circle at 50% 55%,#9ad7ff,#4f9dff 60%,#2a5fd0);box-shadow:0 0 0 6px #ffffff40,0 8px 0 var(--ink)}canvas.avatar.big:active{cursor:grabbing}@media(max-width:900px){.wardrobe-grid{grid-template-columns:1fr}.stage{order:-1}canvas.avatar.big{width:240px;height:310px}.wardrobe-title{font-size:30px}}
