:root {
  --ink: #fffaf0;
  --violet: #160d35;
  --violet-2: #29165c;
  --pink: #ff4f9a;
  --cyan: #38e8e1;
  --gold: #ffd64a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0c071e; color: var(--ink); font-family: "Arial Rounded MT Bold", "Hiragino Sans", "Yu Gothic", sans-serif; }
body { min-height: 100vh; overflow-x: hidden; }
body::before { content:""; position: fixed; inset: 0; pointer-events:none; background: radial-gradient(circle at 15% 10%, #6938c455 0 15%, transparent 35%), radial-gradient(circle at 80% 85%, #ff35752e, transparent 35%); }
button { font: inherit; }
.shell { width: min(1040px, 100%); margin: 0 auto; padding: 18px 20px 22px; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:52px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.03em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; color:#160d35; background:var(--gold); border-radius:11px 4px 11px 4px; transform:rotate(-4deg); font-size:22px; box-shadow:0 0 20px #ffd64a66; }
.sound-btn { border:1px solid #ffffff3b; border-radius:999px; background:#ffffff0d; color:white; padding:8px 13px; cursor:pointer; font-size:13px; }
.scoreboard { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:12px 0; }
.metric { display:flex; align-items:baseline; justify-content:center; gap:10px; padding:9px; background:#ffffff0b; border:1px solid #ffffff18; border-radius:13px; }
.metric span { color:#c8b9f5; font-size:12px; font-weight:900; letter-spacing:.14em; }
.metric strong { font-size:clamp(22px,4vw,34px); line-height:1; font-variant-numeric:tabular-nums; }
.metric.time strong { color:var(--gold); }
.game-wrap { position:relative; width:min(100%,620px); margin:0 auto; height:min(76vh,820px); min-height:600px; overflow:hidden; border:3px solid #8e65e8; border-radius:22px; background:#251158; box-shadow:0 25px 70px #00000077, inset 0 0 0 2px #ffffff17; }
canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.overlay { position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:#100721bb; backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:.25s ease; z-index:5; }
.overlay.visible { opacity:1; visibility:visible; }
.card { width:min(560px, 94%); text-align:center; padding:30px clamp(20px,5vw,42px); background:linear-gradient(145deg,#30126eed,#170b39f2); border:1px solid #ffffff30; border-radius:24px; box-shadow:0 20px 50px #0008; }
.eyebrow { margin:0 0 8px; color:var(--cyan); font-size:13px; letter-spacing:.2em; font-weight:900; }
h1 { margin:0; font-size:clamp(32px,6vw,57px); line-height:1.08; letter-spacing:-.04em; }
h1 em { color:var(--gold); font-style:normal; text-shadow:3px 3px 0 #e23a73; }
.rules { max-width:470px; margin:18px auto; color:#e2d9fb; line-height:1.75; font-size:15px; }
.target-guide { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 18px; margin:17px 0 24px; font-size:13px; }
.target-guide span { display:flex; align-items:center; gap:6px; }
.player-id-field { display:block; max-width:330px; margin:0 auto 5px; text-align:left; }
.player-id-field span { display:block; margin:0 0 6px 10px; color:#c8b9f5; font-size:12px; font-weight:900; letter-spacing:.08em; }
.player-id-field input { width:100%; border:1px solid #ffffff35; border-radius:999px; padding:12px 16px; color:#fff; background:#0c071e99; font:inherit; font-size:16px; outline:none; }
.player-id-field input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #38e8e122; }
.player-id-field input.invalid { border-color:#ff5f7e; animation:shake .25s linear; }
.input-error { min-height:18px; margin:3px 0 8px; color:#ff91a7; font-size:12px; font-weight:700; }
@keyframes shake { 25%{transform:translateX(-5px)}75%{transform:translateX(5px)} }
.dot { width:16px; height:16px; border-radius:50%; display:inline-grid; place-items:center; border:3px solid white; font-size:10px; line-height:1; }
.dot.gold { background:var(--gold); }.dot.pink{background:var(--pink)}.dot.blue{background:#428bf5}
.dot.danger{background:#ee304f;color:#fff;font-weight:900}
.primary { min-width:230px; border:0; border-radius:999px; padding:15px 28px; color:#1a0e36; background:linear-gradient(90deg,var(--gold),#ff9c42); font-size:17px; font-weight:900; cursor:pointer; box-shadow:0 8px 0 #c73c54, 0 13px 30px #0005; transition:.12s; }
.primary:hover { transform:translateY(-2px); }.primary:active { transform:translateY(5px); box-shadow:0 3px 0 #c73c54; }
.combo { position:absolute; top:18px; left:50%; transform:translateX(-50%) scale(.7); color:var(--gold); font-size:clamp(28px,5vw,48px); font-weight:1000; font-style:italic; text-shadow:3px 3px 0 #e23a73,0 0 18px #ffd64a; opacity:0; z-index:3; pointer-events:none; transition:.14s; }
.combo.show { opacity:1; transform:translateX(-50%) scale(1); }
.result-card h2 { margin:4px 0 18px; font-size:clamp(28px,5vw,46px); }
.final-score { display:flex; flex-direction:column; padding:18px; background:#0c071e77; border-radius:18px; }
.final-score span { color:#c8b9f5; letter-spacing:.18em; font-size:12px; font-weight:bold; }
.final-score strong { color:var(--gold); font-size:clamp(48px,9vw,78px); line-height:1.08; }
.result-stats { display:flex; justify-content:center; gap:26px; margin:18px 0; color:#cfc3ec; }
.result-stats strong { color:white; margin-left:5px; }
.play-proof { display:grid; grid-template-columns:auto 1fr; gap:14px; margin:0 0 14px; padding:12px 14px; color:#eae3ff; background:#0c071e88; border:1px solid #ffffff1f; border-radius:13px; text-align:left; }
.play-proof span { display:flex; flex-direction:column; gap:3px; }
.play-proof span:last-child { text-align:right; }
.play-proof small { color:#9988c5; font-size:10px; font-weight:900; letter-spacing:.14em; }
.play-proof strong { font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.new-best { min-height:24px; margin:0 0 15px; color:var(--cyan); font-weight:900; }
footer { padding:14px 4px 0; text-align:center; color:#aa9ccf; font-size:13px; }
footer span { color:var(--cyan); font-weight:900; margin-right:8px; }
@media (max-width:650px) {
  html, body { height:100%; min-height:0; overflow:hidden; overscroll-behavior:none; }
  body { position:fixed; inset:0; }
  .shell { height:100%; height:100dvh; display:flex; flex-direction:column; padding:10px 10px max(10px, env(safe-area-inset-bottom)); overflow:hidden; }
  .topbar, .scoreboard { flex-shrink:0; }
  .brand { font-size:14px; }.brand-mark{width:31px;height:31px;font-size:19px}.sound-btn{font-size:12px}
  .scoreboard { margin:8px 0; }.metric { flex-direction:column; gap:2px; padding:7px; }.metric strong{font-size:23px}
  .game-wrap { flex:1; height:auto; min-height:0; max-height:none; border-radius:17px; }
  .card { padding:25px 18px; }.rules{font-size:14px;line-height:1.6}.target-guide{gap:7px 12px;margin-bottom:20px}.primary{min-width:210px}
  .play-proof { grid-template-columns:1fr; text-align:center; }
  .play-proof span:last-child { text-align:center; }
  footer { display:none; }
}
@media (max-width:650px) {
  .overlay { padding:10px; overflow-y:auto; overscroll-behavior:contain; align-items:safe center; }
  .card { flex-shrink:0; }
}
@media (max-height:700px) and (max-width:650px) {
  .card { padding:16px 12px; }
  h1 { font-size:30px; }
  .rules { margin:10px auto; font-size:13px; }
  .target-guide { margin:10px 0; }
  .result-stats { gap:12px; margin:10px 0; }
  .final-score { padding:10px; }
}

.bonus-guide { margin:0 0 14px; color:#e2d9fb; font-size:12px; line-height:1.6; }
.combo { font-size:clamp(22px,5vw,38px); white-space:nowrap; }