:root {
  --ink: #eaffff;
  --muted: #90b8c8;
  --cyan: #1ffcff;
  --cyan-bright: #a9ffff;
  --violet: #a869ff;
  --lime: #b8ff43;
  --panel: rgba(5, 26, 47, 0.72);
  --line: rgba(94, 246, 255, 0.3);
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Roboto", ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  background: #03101f;
  color: var(--ink);
}

body {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(4, 22, 42, 0.34), rgba(2, 8, 19, 0.84)),
    url("assets/art/cyber-city-arena.webp");
  background-position: center;
  background-size: cover;
  font-family: var(--body);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 50% 34%, rgba(31, 252, 255, 0.2), transparent 31%),
    radial-gradient(circle at 19% 58%, rgba(168, 105, 255, 0.18), transparent 23%),
    linear-gradient(90deg, rgba(1, 10, 26, 0.76), transparent 28% 72%, rgba(1, 10, 26, 0.76));
}

body::after {
  opacity: 0.15;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(141, 251, 255, 0.2) 4px);
  mix-blend-mode: soft-light;
}

.ambient-grid {
  position: fixed;
  z-index: 0;
  inset: auto -20% -20%;
  height: 50%;
  opacity: 0.24;
  transform: perspective(360px) rotateX(63deg);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(54, 235, 255, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 235, 255, 0.24) 1px, transparent 1px);
  background-size: 52px 42px;
  pointer-events: none;
}

.game-shell {
  position: relative;
  z-index: 4;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  pointer-events: none;
}

.shell-header {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr);
  align-items: center;
  width: min(1500px, 100%);
  margin: 0 auto 8px;
}

.arcade-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: clamp(108px, 10vw, 160px);
  opacity: 0.92;
  pointer-events: auto;
  transition: opacity 160ms ease, filter 160ms ease;
}

.arcade-brand:hover { opacity: 1; filter: drop-shadow(0 0 10px rgba(31, 252, 255, 0.7)); }
.arcade-brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }

.title-lockup {
  text-align: center;
  filter: drop-shadow(0 0 14px rgba(31, 252, 255, 0.35));
}

.title-kicker {
  display: block;
  margin-bottom: -1px;
  color: var(--cyan-bright);
  font: 800 clamp(7px, 0.62vw, 10px)/1 var(--display);
  letter-spacing: 0.31em;
}

.title-lockup h1 {
  color: #fff;
  font: 800 clamp(22px, 2.05vw, 35px)/1 var(--display);
  letter-spacing: 0.055em;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.7), 0 0 18px rgba(168, 105, 255, 0.9);
}

.title-lockup h1 span {
  color: var(--cyan);
  text-shadow: 0 0 9px rgba(31, 252, 255, 0.95), 0 0 24px rgba(31, 252, 255, 0.64);
}

.icon-button {
  border: 1px solid rgba(90, 246, 255, 0.46);
  background: linear-gradient(145deg, rgba(20, 65, 88, 0.68), rgba(3, 17, 35, 0.86));
  box-shadow: inset 0 0 16px rgba(31, 252, 255, 0.08), 0 0 18px rgba(31, 252, 255, 0.08);
  color: var(--cyan-bright);
  cursor: pointer;
  pointer-events: auto;
}

.icon-button:hover,
.icon-button:focus-visible { border-color: var(--cyan); box-shadow: inset 0 0 18px rgba(31, 252, 255, 0.16), 0 0 22px rgba(31, 252, 255, 0.3); outline: none; }

.icon-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.8;
}

.play-layout {
  display: grid;
  min-height: 0;
  align-items: center;
  justify-content: center;
  width: min(1480px, 100%);
  margin: 0 auto;
}

.hud-column {
  display: grid;
  gap: clamp(12px, 2vh, 24px);
  align-content: center;
}

.hud-card {
  position: relative;
  overflow: hidden;
  padding: clamp(15px, 1.5vw, 22px);
  border: 1px solid var(--line);
  border-radius: 14px 3px 14px 3px;
  background: linear-gradient(145deg, rgba(39, 89, 112, 0.2), transparent 48%), var(--panel);
  box-shadow: inset 0 1px rgba(210, 255, 255, 0.13), inset 0 0 26px rgba(31, 252, 255, 0.045), 0 14px 35px rgba(0, 5, 18, 0.28);
  backdrop-filter: blur(13px) saturate(125%);
}

.hud-card::before,
.hud-card::after { position: absolute; content: ""; pointer-events: none; }
.hud-card::before { top: 0; left: 14px; width: 38%; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.hud-card::after { right: -18px; bottom: -28px; width: 75px; height: 75px; border: 1px solid rgba(168, 105, 255, 0.13); transform: rotate(45deg); }

.hud-label,
.hud-value,
.metric-value,
.score-value {
  font-family: var(--display);
  text-transform: uppercase;
}

.hud-label {
  color: var(--muted);
  font: 800 clamp(9px, 0.68vw, 11px)/1.15 var(--display);
  letter-spacing: 0.15em;
}

.hud-value,
.metric-value {
  color: #fff;
  font: 800 clamp(26px, 2.3vw, 40px)/1 var(--display);
  text-shadow: 0 0 13px rgba(31, 252, 255, 0.45);
}

.hud-card--metric { display: grid; grid-template-columns: 1fr auto; align-items: end; min-height: 94px; }
.metric-value { color: var(--cyan-bright); line-height: 0.88; text-shadow: 0 0 15px rgba(31, 252, 255, 0.52); }

.score-value {
  display: block;
  margin: 9px 0;
  color: #e7d6ff;
  font: 800 clamp(22px, 2vw, 34px)/1 var(--display);
  letter-spacing: 0.08em;
  text-shadow: 0 0 14px rgba(168, 105, 255, 0.5);
}

.score-disclosure { border-color: rgba(168, 105, 255, 0.36); }

.score-disclosure p {
  color: rgba(176, 206, 215, 0.68);
  font: 400 clamp(9px, 0.72vw, 11px)/1.45 var(--body);
}

.game-frame {
  position: relative;
  width: min(calc((100dvh - 160px) * 0.5625), 720px, 48vw);
  min-width: 280px;
  padding: 6px;
  border: 1px solid rgba(99, 247, 255, 0.5);
  border-radius: 20px 5px 20px 5px;
  background: linear-gradient(145deg, rgba(108, 247, 255, 0.16), rgba(5, 18, 39, 0.88) 16%, rgba(5, 13, 30, 0.94) 82%, rgba(168, 105, 255, 0.18));
  box-shadow: 0 0 0 1px rgba(0, 7, 18, 0.9), 0 0 22px rgba(31, 252, 255, 0.24), 0 0 72px rgba(113, 68, 255, 0.16), 0 24px 56px rgba(0, 5, 17, 0.66);
  pointer-events: auto;
}

.frame-glow {
  position: absolute;
  inset: -12px;
  z-index: -1;
  border: 1px solid rgba(31, 252, 255, 0.13);
  border-radius: 26px 8px 26px 8px;
  pointer-events: none;
  animation: frame-breathe 3.8s ease-in-out infinite alternate;
}

.game-viewport {
  border: 1px solid rgba(173, 255, 255, 0.22);
  border-radius: 14px 2px 14px 2px;
  background: #020913;
  touch-action: none;
}

.game-surface {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(31, 252, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 252, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(168, 105, 255, 0.22), transparent 42%),
    #04101e;
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.game-surface::after {
  content: "GAME SURFACE";
  color: rgba(234, 255, 255, 0.72);
  font: 800 16px/1 var(--display);
  letter-spacing: 0.18em;
}

[data-arcade-viewport] > .game-surface.gtap-surface {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  min-height: 0;
  overflow: hidden;
  padding: clamp(16px, 4vw, 28px);
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 49%, rgba(104, 61, 235, 0.25), transparent 34%),
    radial-gradient(circle at 50% 45%, rgba(18, 203, 255, 0.12), transparent 52%),
    linear-gradient(160deg, #071837, #020611 70%);
}

.gtap-surface::before,
.gtap-surface::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.gtap-surface::before {
  opacity: 0.24;
  background-image: linear-gradient(rgba(37, 254, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 254, 255, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(transparent, #000 26%, #000 75%, transparent);
}

.gtap-surface::after { background: radial-gradient(circle, transparent 37%, rgba(0, 0, 0, 0.62) 100%); }

.counter-lockup { display: grid; justify-items: center; gap: 5px; text-align: center; }
.counter-lockup span { color: var(--muted); font: 800 10px/1 var(--display); letter-spacing: 0.2em; }
.counter-value-row { display: flex; align-items: center; justify-content: center; gap: 9px; }
.counter-value-row img { width: clamp(26px, 7vw, 39px); height: clamp(26px, 7vw, 39px); filter: drop-shadow(0 0 10px rgba(106, 101, 255, 0.72)); }
.counter-lockup output { color: #f9c94e; font: 800 clamp(31px, 8vw, 50px)/1 var(--display); text-shadow: 0 0 18px rgba(249, 201, 78, 0.34); }
.counter-value-row small { align-self: end; margin: 0 0 5px -3px; color: #f9c94e; font: 800 clamp(8px, 2vw, 11px)/1 var(--display); letter-spacing: 0.12em; text-shadow: 0 0 10px rgba(249, 201, 78, 0.35); }
.tap-hint { margin-top: 11px; color: rgba(234, 255, 255, 0.82); font: 700 12px/1.35 var(--body); text-align: center; }
.counter-lockup { grid-row: 1; }
.tap-hint { grid-row: 2; }

.dancer-button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(88%, 320px);
  min-height: 0;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
}

.dancer-button:focus-visible { outline: 3px solid #f9c94e; outline-offset: 5px; border-radius: 50%; }
.dancer-button:disabled { cursor: not-allowed; filter: grayscale(0.75) brightness(0.58); }
.dancer-orbit { position: absolute; width: 84%; aspect-ratio: 1; border: 1px solid rgba(31, 252, 255, 0.4); border-radius: 50%; background: radial-gradient(circle, rgba(73, 52, 189, 0.12), transparent 64%); box-shadow: inset 0 0 34px rgba(96, 72, 255, 0.2), 0 0 28px rgba(31, 252, 255, 0.12); }
.dancer-idle { z-index: 2; display: grid; width: 100%; place-self: center; place-items: center; transform-origin: 50% 90%; animation: gtap-idle 4.8s ease-in-out infinite; }
.dancer-button img { display: block; width: 100%; max-height: min(41vh, 400px); margin-inline: auto; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 20px 15px rgba(0, 0, 0, 0.62)); transform-origin: 50% 88%; user-select: none; -webkit-user-drag: none; }
.dancer-shadow { position: absolute; z-index: 1; bottom: 5%; width: 46%; height: 18px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.82), rgba(24, 220, 255, 0.15) 46%, transparent 72%); filter: blur(5px); transform: scaleX(1.15); }
.dancer-button:not(:disabled):hover img { filter: drop-shadow(0 0 18px rgba(158, 98, 255, 0.72)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.6)); }
@keyframes gtap-idle { 0%, 100% { transform: translateY(0) rotate(-0.25deg) scale(1); } 50% { transform: translateY(-3px) rotate(0.3deg) scale(1.012); } }

.energy-panel { display: grid; grid-row: 4; gap: 11px; justify-items: center; padding-top: 15px; }
.energy-panel output { color: var(--ink); font: 800 13px/1 var(--display); }
.energy-track { width: min(100%, 290px); height: 14px; overflow: hidden; border: 1px solid rgba(78, 225, 255, 0.52); border-radius: 99px; background: rgba(0, 4, 14, 0.62); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.7); }
.energy-track i { display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, #1ffcff 0%, #7671ff 58%, #b06dff 100%); box-shadow: 0 0 14px rgba(76, 217, 255, 0.48); transition: transform 160ms ease; }
.mute-button { grid-row: 5; justify-self: center; margin-top: 12px; padding: 7px 10px; border: 1px solid rgba(31, 252, 255, 0.38); border-radius: 8px; background: rgba(4, 22, 42, 0.7); color: var(--muted); cursor: pointer; font: 800 9px/1 var(--display); letter-spacing: 0.12em; }
.mute-button:focus-visible { outline: 2px solid #f9c94e; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .dancer-idle { animation: none; } .energy-track i { transition: none; } }

.frame-caption {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  height: 22px;
  color: rgba(128, 232, 243, 0.46);
  font: 800 7px/1 var(--display);
  letter-spacing: 0.22em;
}

.frame-caption i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
}

.shell-footer {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  width: min(1100px, 100%);
  min-height: 24px;
  margin: 7px auto 0;
}

.system-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(184, 255, 67, 0.21);
  border-radius: 99px;
  background: rgba(1, 15, 29, 0.7);
  color: #caff7c;
  font: 800 9px/1 var(--display);
  letter-spacing: 0.1em;
}

.status-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px var(--lime);
}

.fair-play-note { color: rgba(167, 203, 214, 0.58); font-size: 9px; line-height: 1.35; }
.fair-play-note span {
  color: rgba(138, 244, 255, 0.76);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.effects-layer { position: fixed; z-index: 120; inset: 0; display: block; overflow: visible; pointer-events: none; }

@keyframes frame-breathe { to { border-color: rgba(31, 252, 255, 0.28); box-shadow: 0 0 26px rgba(31, 252, 255, 0.12); } }

@media (max-width: 720px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(3, 19, 36, 0.22), rgba(1, 8, 18, 0.72)),
      url("assets/art/cyber-city-arena-mobile.webp");
    background-position: center bottom;
  }

  .game-shell {
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .shell-header { grid-template-columns: 76px 1fr 74px; margin-bottom: 4px; }
  .arcade-brand { width: 74px; }
  .title-kicker { display: none; }
  .title-lockup h1 { font-size: clamp(16px, 5vw, 24px); }
  .icon-button { width: 72px; height: 72px; border-radius: 18px; }
  .icon-button svg { width: 36px; }

  .game-frame { padding: 4px; border-radius: 15px 4px; }
  .frame-caption { height: 14px; font-size: 6px; }
  [data-arcade-viewport] > .game-surface.gtap-surface { grid-template-rows: auto auto minmax(0, 1fr) auto auto; align-content: stretch; }

  .hud-card {
    min-height: 0;
    padding: 7px 9px;
    border-radius: 9px 2px;
    background: rgba(3, 20, 37, 0.82);
    backdrop-filter: blur(9px);
  }

  .hud-label { font-size: 6px; letter-spacing: 0.1em; }
  .hud-value,
  .metric-value,
  .score-value { font-size: clamp(15px, 4.8vw, 21px); }
  .metric-value { display: block; margin-top: 5px; }
  .score-value { margin: 5px 0 0; letter-spacing: 0.03em; }
  .score-disclosure p { display: none; }
  .shell-footer { gap: 7px; min-height: 25px; margin-top: 3px; }
  .system-status { padding: 6px 8px; font-size: 7px; }
  .fair-play-note { display: none; }
}