:root {
  --ink: #eaffff;
  --muted: #90b8c8;
  --cyan: #1ffcff;
  --cyan-bright: #a9ffff;
  --violet: #a869ff;
  --magenta: #ff49d1;
  --lime: #b8ff43;
  --danger: #ff4d79;
  --panel: rgba(5, 26, 47, 0.72);
  --panel-strong: rgba(5, 21, 41, 0.9);
  --line: rgba(94, 246, 255, 0.3);
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

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

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

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

body::before {
  inset: 0;
  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 {
  inset: 0;
  opacity: 0.15;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(141, 251, 255, 0.2) 4px);
  mix-blend-mode: soft-light;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.game-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  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));
}

.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;
}

.launcher-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: clamp(108px, 9vw, 152px);
  opacity: 0.88;
  transition: opacity 160ms ease, filter 160ms ease;
}

.launcher-brand:hover {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(31, 252, 255, 0.7));
}

.launcher-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: 600 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 {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(90, 246, 255, 0.46);
  border-radius: 10px;
  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;
}

.icon-button:hover,
.icon-button:focus-visible {
  outline: none;
  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);
}

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

.fullscreen-exit,
:fullscreen .fullscreen-enter {
  display: none;
}

:fullscreen .fullscreen-exit {
  display: block;
}

.play-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(154px, 244px) minmax(280px, auto) minmax(154px, 244px);
  gap: clamp(12px, 2vw, 34px);
  align-items: center;
  justify-content: center;
  width: min(1480px, 100%);
  min-height: 0;
  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 {
  color: var(--muted);
  font: 600 clamp(9px, 0.68vw, 11px)/1.15 var(--display);
  letter-spacing: 0.15em;
}

.hud-value-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 9px 0 6px;
}

.hud-value-row img {
  width: clamp(27px, 2.25vw, 38px);
  height: clamp(27px, 2.25vw, 38px);
  filter: drop-shadow(0 0 10px rgba(31, 252, 255, 0.55));
}

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

.hud-note {
  color: rgba(143, 189, 202, 0.6);
  font-size: 9px;
  letter-spacing: 0.2em;
}

.stage-meter {
  overflow: hidden;
  height: 3px;
  margin-top: 13px;
  background: rgba(131, 201, 214, 0.12);
}

.stage-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 10px var(--cyan);
  transition: width 300ms ease;
}

.hud-card--metric {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-height: 94px;
}

.metric-value {
  color: var(--cyan-bright);
  font: 700 clamp(28px, 2.7vw, 46px)/0.82 var(--display);
  text-shadow: 0 0 15px rgba(31, 252, 255, 0.52);
}

.metric-value span {
  color: var(--violet);
  font-size: 0.5em;
}

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

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

.score-disclosure p {
  color: rgba(176, 206, 215, 0.68);
  font-size: clamp(9px, 0.72vw, 11px);
  line-height: 1.45;
}

.game-frame {
  position: relative;
  width: min(calc((100dvh - 134px) * 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);
}

.frame-glow {
  position: absolute;
  z-index: -1;
  inset: -12px;
  border: 1px solid rgba(31, 252, 255, 0.13);
  border-radius: 26px 8px 26px 8px;
  pointer-events: none;
}

.game-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(173, 255, 255, 0.22);
  border-radius: 14px 2px 14px 2px;
  background: #020913;
  isolation: isolate;
}

#c2canvasdiv {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  touch-action: none;
  -ms-touch-action: none;
}

#c2canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  image-rendering: optimizeSpeed;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Browser-native targets over the two end-screen icons. They are enabled only
   when a run has ended, avoiding the legacy Construct Touch issue in Safari. */
.end-screen-control {
  position: absolute;
  z-index: 8;
  top: 71.1%;
  width: 30.6%;
  height: 16.4%;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.end-screen-control--select { left: 32.6%; }
.end-screen-control--replay { left: 67.4%; }

.end-screen-control:focus-visible {
  outline: 2px solid rgba(178, 255, 255, 0.95);
  outline-offset: 3px;
}

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

.frame-caption {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  height: 22px;
  color: rgba(128, 232, 243, 0.46);
  font: 600 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%);
  margin: 7px auto 0;
  min-height: 24px;
}

.system-status {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  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: 600 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);
}

.system-status[data-state="pending"] {
  color: #ffe687;
  border-color: rgba(255, 218, 79, 0.28);
}

.system-status[data-state="pending"] .status-light {
  background: #ffd84f;
  box-shadow: 0 0 9px #ffd84f;
  animation: status-pulse 900ms infinite alternate;
}

.system-status[data-state="failed"],
.system-status[data-state="locked"] {
  color: #ff9bb4;
  border-color: rgba(255, 77, 121, 0.45);
  background: rgba(49, 5, 25, 0.75);
}

.system-status[data-state="failed"] .status-light,
.system-status[data-state="locked"] .status-light {
  background: var(--danger);
  box-shadow: 0 0 9px var(--danger);
}

.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: 700;
  letter-spacing: 0.1em;
}

.reward-shockwave {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(169, 255, 255, 0.58);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.45);
  box-shadow: 0 0 8px rgba(31, 252, 255, 0.3);
  animation: reward-shock 460ms ease-out forwards;
}

.reward-burst-label {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  color: rgba(235, 255, 255, 0.96);
  font: 800 clamp(13px, 2.5vw, 20px)/1 var(--display);
  letter-spacing: 0.05em;
  text-shadow: 0 0 7px rgba(31, 252, 255, 0.62);
  white-space: nowrap;
  animation: reward-label 720ms cubic-bezier(.22, .7, .28, 1) forwards;
}

.reward-coin {
  position: absolute;
  z-index: 3;
  width: clamp(22px, 4vw, 32px);
  height: clamp(22px, 4vw, 32px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(31, 252, 255, 0.46));
  will-change: transform, opacity;
  animation: reward-flight var(--flight-duration, 760ms) cubic-bezier(.22, .74, .28, 1) var(--flight-delay, 0ms) forwards;
}

.hud-card.is-awarded {
  animation: hud-award 380ms ease-out;
}

@keyframes reward-shock {
  55% { opacity: 0.46; }
  to { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

@keyframes reward-label {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.92); }
  16% { opacity: 0.96; transform: translate(-50%, -50%) scale(1); }
  66% { opacity: 0.9; transform: translate(-50%, -74%) scale(0.98); }
  100% { opacity: 0; transform: translate(-50%, -112%) scale(0.94); }
}

@keyframes reward-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(-8deg); }
  14% { opacity: 0.96; }
  46% { opacity: 0.96; transform: translate(calc(-50% + var(--arc-x)), calc(-50% + var(--arc-y))) scale(0.98) rotate(4deg); }
  82% { opacity: 0.88; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--flight-x)), calc(-50% + var(--flight-y))) scale(0.56) rotate(10deg); }
}

@keyframes hud-award {
  35% { border-color: rgba(31, 252, 255, 0.74); box-shadow: inset 0 0 18px rgba(31, 252, 255, 0.1), 0 0 14px rgba(31, 252, 255, 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .reward-shockwave,
  .reward-burst-label,
  .reward-coin,
  .hud-card.is-awarded {
    animation-duration: 1ms;
  }
}

@keyframes status-pulse {
  to { opacity: 0.45; }
}

@media (max-width: 1020px) {
  .play-layout {
    grid-template-columns: minmax(128px, 180px) minmax(280px, auto) minmax(128px, 180px);
    gap: 12px;
  }

  .game-frame {
    width: min(calc((100dvh - 136px) * 0.5625), 54vw);
  }

  .hud-card {
    padding: 13px;
  }

  .hud-card--metric {
    display: block;
    min-height: 0;
  }

  .metric-value {
    display: block;
    margin-top: 8px;
  }
}

@media (max-width: 720px), (max-height: 600px) and (orientation: landscape) {
  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");
  }

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

  .shell-header {
    grid-template-columns: 72px 1fr 42px;
    margin-bottom: 4px;
  }

  .launcher-brand {
    width: 70px;
  }

  .title-kicker {
    display: none;
  }

  .title-lockup h1 {
    font-size: clamp(16px, 5vw, 24px);
  }

  .icon-button {
    width: 36px;
    height: 36px;
  }

  .play-layout {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    width: 100%;
    min-height: 0;
  }

  .game-frame {
    grid-area: 1 / 1;
    width: min(calc((100dvh - 106px) * 0.5625), 100%);
    min-width: 0;
    padding: 4px;
    border-radius: 15px 4px;
  }

  .frame-caption {
    height: 14px;
    font-size: 6px;
  }

  .hud-column {
    position: absolute;
    z-index: 20;
    left: 50%;
    width: min(calc(100% - 20px), calc((100dvh - 108px) * 0.5625 - 16px));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hud-column--left {
    top: 9px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .hud-column--right {
    bottom: 25px;
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.4fr;
    gap: 5px;
  }

  .hud-card {
    padding: 8px 9px;
    border-radius: 9px 2px;
    background: rgba(3, 20, 37, 0.76);
    backdrop-filter: blur(9px);
  }

  .hud-label {
    font-size: 7px;
    letter-spacing: 0.1em;
  }

  .hud-value-row {
    gap: 5px;
    margin: 4px 0 0;
  }

  .hud-value-row img {
    width: 18px;
    height: 18px;
  }

  .hud-value {
    font-size: clamp(17px, 5vw, 25px);
  }

  .hud-note,
  .stage-meter,
  .score-disclosure p {
    display: none;
  }

  .hud-card--metric {
    min-height: 46px;
  }

  .metric-value,
  .score-value {
    display: block;
    margin: 5px 0 0;
    font-size: clamp(16px, 4.5vw, 24px);
  }

  .score-value {
    letter-spacing: 0.025em;
  }

  .shell-footer {
    gap: 7px;
    margin-top: 3px;
    min-height: 25px;
  }

  .system-status {
    padding: 6px 8px;
    font-size: 7px;
  }

  .fair-play-note {
    overflow: hidden;
    max-height: 2.6em;
    font-size: 7px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .game-shell {
    --landscape-game-width: min(calc((100vh - 22px) * 0.5625), calc((100dvh - 22px) * 0.5625), 42vw);
    display: block;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  .shell-header {
    position: fixed;
    z-index: 30;
    top: max(4px, env(safe-area-inset-top));
    right: max(4px, env(safe-area-inset-right));
    left: auto;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
  }

  .launcher-brand,
  .title-lockup {
    display: none;
  }

  .icon-button {
    width: 32px;
    height: 32px;
  }

  .play-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--landscape-game-width) minmax(0, 1fr);
    gap: clamp(4px, 1.4vw, 12px);
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .game-frame {
    grid-area: auto;
    grid-row: 1;
    grid-column: 2;
    width: var(--landscape-game-width);
    max-width: 100%;
    padding: 3px;
  }

  .frame-caption {
    height: 10px;
    font-size: 5px;
  }

  .frame-glow {
    inset: -4px;
  }

  .hud-column {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100%, 220px);
    transform: none;
    pointer-events: none;
  }

  .hud-column--left {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hud-column--right {
    grid-row: 1;
    grid-column: 3;
    justify-self: start;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .hud-card {
    padding: 6px 7px;
  }

  .hud-card--metric {
    min-height: 40px;
  }

  .hud-value-row {
    margin-top: 3px;
  }

  .hud-value,
  .metric-value,
  .score-value {
    font-size: 17px;
  }

  .shell-footer {
    position: fixed;
    z-index: 30;
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(4px, env(safe-area-inset-left));
    justify-content: flex-start;
    width: min(calc((100vw - var(--landscape-game-width)) / 2 - 12px), 220px);
    min-height: 0;
    margin: 0;
  }

  .system-status {
    max-width: 100%;
    padding: 5px 7px;
    font-size: 6px;
    line-height: 1.15;
  }

  .fair-play-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}