:root {
  color-scheme: dark;
  --gold: #ffd21c;
  --gold-dark: #b98b00;
  --black: #090a0b;
  --panel: rgba(8, 9, 10, .91);
  --white: #f7f4df;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(255,210,28,.18), transparent 35%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.018) 18px 20px),
    #050607;
  color: var(--white);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}

button { font: inherit; }
.arcade-shell { min-height: 100dvh; display: grid; place-items: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.game-card {
  width: min(100%, 470px);
  height: min(920px, calc(100dvh - 30px));
  min-height: 520px;
  position: relative;
  border: 2px solid var(--gold);
  border-radius: 18px;
  overflow: hidden;
  background: #090a0b;
  box-shadow: 0 0 0 4px #111, 0 0 36px rgba(255,210,28,.2);
}

.brandbar {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  color: var(--gold);
  background: #050505;
  border-bottom: 1px solid rgba(255,210,28,.35);
  letter-spacing: 1.5px;
  position: relative;
  z-index: 10;
}
.brand span { color: #fff; }
.brand em { margin-left: 5px; color: #777; font: 800 8px Arial, sans-serif; letter-spacing: 1px; }
.icon-button { border: 0; background: transparent; color: #fff; font-size: 18px; padding: 6px 8px; cursor: pointer; }
.game-wrap { position: absolute; inset: 42px 0 0; overflow: hidden; background: #0b0d0e; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.hud {
  position: absolute;
  inset: 10px 12px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  text-shadow: 0 2px 5px #000;
}
.hud div { display: flex; flex-direction: column; }
.hud-record { text-align: right; color: var(--gold); }
.hud small, .result-grid small { font-family: Arial, sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 1.6px; }
.hud strong { font-size: 30px; line-height: .9; }
.combo {
  position: absolute;
  left: 50%; top: 22%;
  translate: -50% -50%;
  width: 92%; text-align: center;
  color: var(--gold); font-size: 32px; font-style: italic;
  transform: rotate(-4deg) scale(.7);
  opacity: 0; pointer-events: none;
  text-shadow: 3px 3px #000, 0 0 18px rgba(255,210,28,.65);
}
.combo.show { animation: combo-pop .8s ease-out; }
@keyframes combo-pop { 20% { opacity: 1; transform: rotate(-4deg) scale(1.08); } 75% { opacity: 1; } 100% { opacity: 0; transform: rotate(-2deg) scale(1); } }

.panel {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  text-align: center;
  background: linear-gradient(rgba(5,6,7,.58), rgba(5,6,7,.94));
  backdrop-filter: blur(2px);
}
.panel[hidden] { display: none; }
.logo-smiley {
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; position: relative;
  border-radius: 50%; background: var(--gold); color: #070707;
  transform: rotate(-7deg);
  box-shadow: 0 0 30px rgba(255,210,28,.5);
}
.logo-smiley span { width: 8px; height: 8px; margin: 0 5px; color: #080808; font-size: 20px; line-height: 0; }
.logo-smiley b { position: absolute; margin-top: 24px; color: #080808; font: 900 28px/1 Arial, sans-serif; transform: rotate(180deg); }
.eyebrow { margin: 18px 0 5px; color: var(--gold); letter-spacing: 2px; font-size: 14px; }
h1, h2 { margin: 0; font-size: clamp(60px, 16vw, 92px); line-height: .76; letter-spacing: -2px; transform: skewY(-3deg); text-shadow: 5px 5px #000; }
h1 span, h2 span { color: var(--gold); }
h2 { font-size: 70px; }
.instruction { font-family: Arial, sans-serif; font-weight: 800; line-height: 1.4; font-size: 15px; margin: 20px 0 14px; }
.feature-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -5px 0 20px; }
.feature-chips span { border: 1px solid rgba(255,210,28,.55); padding: 4px 7px; color: #ccc; background: rgba(0,0,0,.45); font: 800 8px Arial, sans-serif; letter-spacing: 1px; }
.nickname-field { width: min(100%, 310px); margin-bottom: 12px; text-align: left; color: var(--gold); font: 800 9px Arial, sans-serif; letter-spacing: 1.2px; }
.nickname-field input { width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid rgba(255,210,28,.7); border-radius: 3px; outline: 0; background: rgba(0,0,0,.82); color: #fff; font: 800 15px Arial, sans-serif; user-select: text; touch-action: manipulation; }
.nickname-field input:focus { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,210,28,.35); }
.score-status { min-height: 16px; margin: 12px 0 0; color: #bbb; font: 800 10px/1.35 Arial, sans-serif; letter-spacing: .5px; }
.score-status.accepted { color: #58e68b; }
.score-status.suspicious { color: #ff756b; }
.leaderboard { width: min(100%, 360px); max-height: 135px; overflow: auto; margin-top: 18px; padding: 8px 12px; border-top: 1px solid rgba(255,210,28,.35); background: rgba(0,0,0,.35); text-align: left; }
.leaderboard h3 { margin: 0 0 5px; color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.leaderboard ol { margin: 0; padding-left: 24px; font: 800 10px/1.6 Arial, sans-serif; }
.leaderboard li::marker { color: var(--gold); }
.leaderboard li span { float: right; color: var(--gold); }
.primary-button {
  width: min(100%, 310px); min-height: 57px;
  border: 0; border-radius: 4px;
  color: #080808; background: var(--gold);
  padding: 14px 20px;
  font-size: 22px; letter-spacing: 1px;
  transform: skew(-4deg);
  box-shadow: 5px 5px 0 rgba(255,255,255,.95);
  cursor: pointer;
}
.primary-button:active { translate: 3px 3px; box-shadow: 2px 2px 0 #fff; }
.desktop-hint, .prototype-note { font: 700 10px/1.2 Arial, sans-serif; letter-spacing: 1px; opacity: .55; }
.desktop-hint { margin-top: 20px; }
.prototype-note { position: fixed; bottom: 2px; margin: 0; color: #9a9a9a; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 8px; margin: 28px 0 16px; }
.result-grid div { padding: 10px 4px; border: 1px solid rgba(255,210,28,.45); background: #0b0b0b; display: flex; flex-direction: column; }
.result-grid strong { color: var(--gold); font-size: 28px; }
.new-record { margin: 0 0 17px; color: var(--gold); font-size: 20px; animation: record-pulse .7s infinite alternate; }
.error-message { width: 100%; max-height: 150px; overflow: auto; margin: 24px 0; padding: 12px; background: #180707; border: 1px solid #ff5147; color: #fff; font: 700 12px/1.45 Consolas, monospace; user-select: text; }
@keyframes record-pulse { to { scale: 1.08; text-shadow: 0 0 14px var(--gold); } }

.touch-guide { position: absolute; z-index: 4; inset: auto 0 14px; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; opacity: .55; }
.touch-guide[hidden] { display: none; }
.touch-guide div { display: flex; flex-direction: column; align-items: center; font-size: 38px; }
.touch-guide span { font: 800 9px Arial, sans-serif; letter-spacing: 1px; }
.pause-panel { position: absolute; z-index: 15; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(3,4,5,.84); backdrop-filter: blur(5px); }
.pause-panel[hidden] { display: none; }
.pause-panel p { margin: 0; color: var(--gold); font-size: 22px; letter-spacing: 2px; text-shadow: 3px 3px #000; }
.pause-panel strong { margin-top: 8px; color: #fff; font-size: 105px; line-height: 1; text-shadow: 6px 6px #000, 0 0 25px rgba(255,210,28,.55); animation: countdown-hit .7s ease-out; }
.version-badge { position: absolute; z-index: 3; right: 7px; bottom: 5px; color: rgba(255,255,255,.28); font: 700 8px Arial, sans-serif; pointer-events: none; }
@keyframes countdown-hit { from { scale: 1.45; color: var(--gold); } to { scale: 1; color: #fff; } }
.rotate-hint { display: none; }
.account-link { margin-left: auto; color: var(--gold); font: 900 9px Arial,sans-serif; letter-spacing: 1px; text-decoration: none; }
.member-status { margin: 11px 0 6px; padding: 9px 12px; border: 1px solid rgba(255,210,28,.5); color: var(--gold); font: 900 11px Arial,sans-serif; letter-spacing: 1px; }
.account-link + .icon-button { margin-left: 8px; }

@media (orientation: landscape) and (max-height: 550px) {
  .rotate-hint { display: grid; place-items: center; position: absolute; z-index: 20; inset: 0; padding: 30px; text-align: center; background: #080909; color: var(--gold); font: 24px/1.2 Impact, sans-serif; }
}
@media (max-width: 500px) {
  .arcade-shell { padding: 0; }
  .game-card { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .brandbar { height: calc(42px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .game-wrap { top: calc(42px + env(safe-area-inset-top)); }
  .prototype-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .combo.show, .new-record { animation: none; } }