:root {
  --bg: #15112a;
  --card: #241d43;
  --ink: #f4f0ff;
  --dim: #a59cc8;
  --hot: #ff6fc3;
  --go: #62d26f;
  --warn: #ffd84a;
  --line: #3b3166;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { display: flex; flex-direction: column; }
.hidden { display: none !important; }
.screen { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.card { width: 100%; max-width: 420px; background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; margin: auto; }
.logo { font-size: 44px; margin: 0; text-align: center; letter-spacing: -1px; font-weight: 900; }
.logo span { color: var(--hot); }
.tag { margin: 0; color: var(--dim); text-align: center; line-height: 1.4; font-size: 15px; }
#homeArt { width: 100%; max-width: 300px; height: 70px; align-self: center; }
h2 { margin: 0; text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--dim); font-weight: 600; }
input { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: #1a1534; color: var(--ink); min-width: 0; }
input:focus { outline: none; border-color: var(--hot); }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.colors button.on { border-color: #fff; transform: scale(1.1); }
.btn { font: inherit; font-weight: 700; font-size: 16px; padding: 11px 14px; border-radius: 12px; border: 0; background: #3b3166; color: var(--ink); cursor: pointer; }
.btn:hover { filter: brightness(1.15); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.btn.big { background: var(--hot); color: #2a0b1e; font-size: 18px; padding: 14px; }
.btn.small { font-size: 14px; padding: 8px 12px; }
.btn.ghost { background: transparent; color: var(--dim); }
.row { display: flex; gap: 8px; align-items: center; }
.row input { flex: 1; }
#code { text-transform: uppercase; letter-spacing: 4px; text-align: center; max-width: 120px; }
.err { color: #ff8c8c; margin: 0; min-height: 1em; text-align: center; font-size: 14px; }
.hint { color: var(--dim); margin: 0; text-align: center; font-size: 14px; }
.code { color: var(--warn); letter-spacing: 3px; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plist li { display: flex; align-items: center; gap: 10px; background: #1a1534; padding: 8px 10px; border-radius: 10px; }
.plist .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.plist .tagr { margin-left: auto; color: var(--dim); font-size: 12px; }
.ranking li { font-size: 17px; }
.ranking .place { width: 28px; font-weight: 800; color: var(--warn); }
.check { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--dim); }
.how { color: var(--dim); font-size: 14px; }
.how p { margin: 6px 0; line-height: 1.4; }
footer { text-align: center; font-size: 11px; color: #6c6390; padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); flex: none; }

/* the game */
#game { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; overflow: hidden; }
#hud { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-weight: 700; font-size: 15px; background: #1a1534; flex: none; }
#hudTimer { font-variant-numeric: tabular-nums; color: var(--warn); min-width: 44px; text-align: right; }
#scores { display: flex; gap: 6px; padding: 4px 8px; overflow-x: auto; flex: none; background: #1a1534; border-bottom: 2px solid var(--line); }
#scores .s { display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 2px 8px; border-radius: 99px; background: #241d43; white-space: nowrap; }
#scores .s .dot { width: 10px; height: 10px; border-radius: 50%; }
#scores .s.me { outline: 2px solid var(--hot); }
#scores .s .st { color: var(--dim); font-size: 11px; }
#stage { position: relative; flex: 1; min-height: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#banner { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92%; }
#banner .msg { background: rgba(20,14,40,0.85); border: 2px solid var(--line); padding: 6px 14px; border-radius: 99px; font-weight: 800; font-size: 16px; text-align: center; animation: pop 0.35s ease-out; }
#banner .msg.kill { border-color: #ff5d5d; color: #ffd0d0; font-size: 19px; }
#banner .msg.finish { border-color: var(--go); color: #d3ffd8; }
#banner .msg.bomb { border-color: #ff9f3f; }
#banner .msg.big { font-size: 20px; border-color: var(--hot); }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
#overlay { position: absolute; inset: 0; background: rgba(15,10,30,0.82); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
#overlay .box { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px; width: 100%; max-width: 460px; }
#overlay h3 { margin: 0 0 4px; text-align: center; }
#overlay table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
#overlay td, #overlay th { padding: 5px 4px; text-align: right; }
#overlay td:first-child, #overlay th:first-child { text-align: left; }
#overlay th { color: var(--dim); font-weight: 600; font-size: 12px; }
#overlay .plus { color: var(--go); font-weight: 800; }
#tray { flex: none; background: #1a1534; border-top: 2px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#trayMsg { margin: 0; font-size: 14px; color: var(--dim); text-align: center; }
#offers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.offer { background: #241d43; border: 2px solid var(--line); border-radius: 12px; padding: 6px; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--ink); font: inherit; }
.offer canvas { width: 72px; height: 44px; }
.offer .nm { font-size: 12px; font-weight: 700; }
.offer .kd { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.offer.trap .kd { color: #ff9a9a; }
.offer.helper .kd { color: #9affa6; }
.offer.eraser .kd { color: #ffc27a; }
.offer.on { border-color: var(--hot); background: #3a2350; }
.offer.extra { border-style: dashed; }
.offer:disabled { opacity: 0.4; cursor: default; }
#placeBtn { background: var(--go); color: #0d2a10; }
#pad { flex: none; display: flex; gap: 10px; padding: 10px 12px calc(10px); background: #1a1534; border-top: 2px solid var(--line); user-select: none; -webkit-user-select: none; }
#pad button { flex: 1; height: 72px; border-radius: 16px; border: 0; background: #3b3166; color: var(--ink); font-size: 26px; font-weight: 800; touch-action: none; -webkit-tap-highlight-color: transparent; }
#pad #padJ { flex: 1.4; background: var(--hot); color: #2a0b1e; font-size: 20px; }
#pad button.down { filter: brightness(1.4); transform: scale(0.97); }
@media (max-width: 420px) {
  .offer { width: 78px; padding: 4px; }
  .offer canvas { width: 64px; height: 38px; }
  #pad button { height: 64px; }
  #banner .msg { font-size: 14px; }
  #banner .msg.kill { font-size: 16px; }
}
#announce { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; width: min(92vw, 520px);
  background: var(--warn); color: #2a1f00; font-weight: 800; font-size: 15px; text-align: center; padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45); animation: pop 0.35s ease-out; pointer-events: none; }