:root{color-scheme:dark;--ink:#343b3b;--panel:#232928;--line:#ffffff29;--text:#f5f2e9;--dim:#d1d4cf;--accent:#ff9a79;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--text);overscroll-behavior:none}
.shell{
  --screen-top:calc(12px + env(safe-area-inset-top));
  --screen-left:calc(14px + env(safe-area-inset-left));
  --screen-right:calc(14px + env(safe-area-inset-right));
  --screen-bottom:calc(14px + env(safe-area-inset-bottom));
  position:relative;
  height:100dvh;
  overflow:hidden;
}
.presence{position:absolute;top:var(--screen-top);left:var(--screen-left);display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);padding:6px 9px;border-radius:6px;font-size:11px;white-space:nowrap;pointer-events:none}
.presence i{display:block;width:7px;height:7px;border-radius:50%;background:#ecaa5b}.presence i.on{background:#81dcaa;box-shadow:0 0 10px #81dcaa70}
.arena{height:100%;position:relative;overflow:hidden;isolation:isolate}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hint{position:absolute;bottom:calc(var(--screen-bottom) + 36px);left:50%;transform:translateX(-50%);max-width:90%;width:max-content;text-align:center;font-size:12px;padding:6px 9px;background:var(--panel);border:1px solid var(--line);border-radius:6px;pointer-events:none}.hint:empty{display:none}
.toast{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;text-align:center;font-weight:950;letter-spacing:-.04em;font-size:clamp(19px,4vw,33px);color:#39231c;text-shadow:0 2px #fff4e7;pointer-events:none}
.hud{position:absolute;top:var(--screen-top);right:var(--screen-right);width:140px;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-variant-numeric:tabular-nums}
.hud h2{margin:0;font-size:12px;font-weight:700}
.hud ol{list-style:none;padding:0;margin:5px 0;display:grid;gap:2px}
.hud li{display:grid;grid-template-columns:14px 6px minmax(0,1fr) auto;align-items:center;gap:5px;padding:3px 2px;border-radius:4px;font-size:10px;line-height:1.15}
.hud li.me{background:#f8895b37}.hud li span:nth-of-type(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud li .rank{color:#d0c6b9}.hud li i{width:5px;height:5px;border-radius:50%}.hud li b{color:#ffbc91}
.hud li.empty{display:block;color:#dbcbb9}.hud-score{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #fef1dd40;padding-top:5px;font-size:10px;color:#f0dfcf}
.hud-score strong{font-size:13px;color:#ffbe9a}
.controls{position:absolute;bottom:var(--screen-bottom);left:var(--screen-left);display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px}.desktop-keys{display:flex;flex-wrap:wrap;gap:13px}.desktop-keys span{white-space:nowrap}kbd{font:700 10px system-ui;color:var(--text);border:1px solid var(--line);padding:3px 5px;border-radius:4px;margin-right:3px}
button{font:inherit;color:var(--text);cursor:pointer}.controls button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 10px;white-space:nowrap}.controls button span{color:var(--accent)}button:focus-visible{outline:2px solid #f78059;outline-offset:3px}
.touch{display:none;position:absolute;inset:auto 14px 13px;justify-content:flex-end;align-items:end;pointer-events:none}.touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stick{position:absolute;transform:translate(-50%,-50%);pointer-events:none;width:82px;height:82px;place-items:center;border:1px solid #4e453677;border-radius:50%;background:#4e453623}.stick:not([hidden]){display:grid}.stick i{width:36px;height:36px;background:#f9f4e7;border:1px solid #54483499;border-radius:50%}
.actions{display:flex;gap:8px}.actions button{border:1px solid #16141466;background:#302c28;color:#faf5ea;border-radius:50%;height:56px;width:56px;font-weight:900;font-size:12px}.actions button small{display:block;font-size:9px;color:#ded6c5}.actions #slap{width:65px;height:65px;background:#fa704d;color:#281a15}.actions button.held{transform:scale(.91);filter:brightness(1.13)}
@media(pointer:coarse){.touch{display:flex}}
@media(pointer:fine){canvas{cursor:none}}
.credit{position:absolute;right:var(--screen-right);bottom:var(--screen-bottom);color:var(--dim);font-size:9px}.credit a{color:inherit}

@media (pointer:coarse), (max-width:780px) {
  .shell {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .desktop-keys { display: none; }
  .hint { bottom: calc(var(--screen-bottom) + 84px); }
  .controls {
    bottom: calc(var(--screen-bottom) + 11px);
  }
  .controls button { min-height: 40px; }
  .hud { width: 125px; padding: 6px; }
  .hud li { font-size: 9px; padding: 2px 1px; }
  .toast { top: max(20%, calc(var(--screen-top) + 80px)); }
  .touch {
    left: var(--screen-left);
    right: var(--screen-right);
    bottom: calc(25px + env(safe-area-inset-bottom));
  }
  .credit {
    inset: auto var(--screen-right) calc(6px + env(safe-area-inset-bottom)) var(--screen-left);
    text-align: center;
    pointer-events: none;
  }
  .credit a { pointer-events: auto; }
}