@import url("/assets/css/remaining-game-assets.css");

body[data-game-id] :is(
  .game-canvas,
  .vr-canvas,
  .timer-face,
  .reaction-pad,
  .color-stage,
  .memory-stage,
  .tap-area,
  .duel-arena
) {
  transition: opacity .14s ease-out;
}

body[data-game-id]:not([data-game-assets-ready="true"]) :is(
  .game-canvas,
  .vr-canvas,
  .timer-face,
  .reaction-pad,
  .color-stage,
  .memory-stage,
  .tap-area,
  .duel-arena
) {
  opacity: 0;
}

body[data-game-id] {
  --mission-cyan: #58d8e3;
  --mission-amber: #ffc769;
  --mission-ink: #0d2330;
  background: #f2f8f8;
}

body[data-game-id] .game-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  background: linear-gradient(110deg, #101e2b 0%, #164245 65%, #205a50 100%);
}

body[data-game-id] .game-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(103, 218, 226, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 218, 226, .13) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

body[data-game-id] .game-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(20px, 6vw, 96px);
  width: 144px;
  aspect-ratio: 1;
  background: var(--game-art) center / contain no-repeat;
  pointer-events: none;
  animation: mission-float 6s ease-in-out infinite;
}

body[data-game-id] .game-hero > div {
  width: min(720px, calc(100% - 180px));
}

body[data-game-id] .game-hero h1 {
  max-width: none;
}

body[data-game-id] .game-shell {
  background-color: #f2f8f8;
  background-image:
    linear-gradient(rgba(13, 83, 93, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 83, 93, .045) 1px, transparent 1px);
  background-size: 36px 36px;
}

body[data-game-id] .game-panel {
  border-color: #c7dade;
  background: #fcfefe;
  box-shadow: 0 18px 40px rgba(18, 49, 53, .12);
}

body[data-game-id] .game-panel__top {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #d5e6e8;
}

body[data-game-id] .score-row > div,
body[data-game-id] .endless-hud > div,
body[data-game-id] .runner-hud > div,
body[data-game-id] .sky-hud > div {
  border-color: #2c5260;
  background: var(--mission-ink);
  color: #f4fbfc;
}

body[data-game-id] .score-row .label,
body[data-game-id] .endless-hud .label,
body[data-game-id] .runner-hud .label,
body[data-game-id] .sky-hud .label {
  color: #b5d3da;
}

body[data-game-id] .game-canvas {
  border: 2px solid #397e8c;
  background: #0b1b29;
  box-shadow: 0 0 0 3px #d8ebed, 0 14px 28px rgba(13, 42, 53, .18);
}

body[data-game-id] .timer-face,
body[data-game-id] .memory-stage {
  border-color: #3b7886;
  background: #0d2330;
  box-shadow: inset 0 0 0 1px rgba(88, 216, 227, .14);
}

body[data-game-id] .timer-face span:last-child,
body[data-game-id] .memory-stage__level {
  color: #b8d5db;
}

body[data-game-id] .reaction-pad,
body[data-game-id] .tap-area {
  border: 2px solid #397e8c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

body[data-game-id] .color-stage {
  border-color: #3b7886;
  background: #102936;
  color: #f4fbfc;
}

body[data-game-id] .target-swatch {
  border-color: #91c9d1;
}

body[data-game-id] .result-card {
  border-color: #2d5661;
  background: #102936;
  color: #f4fbfc;
  animation: mission-result 220ms ease-out both;
}

body[data-game-id] .result-card__label,
body[data-game-id] .result-metrics dt {
  color: #b5d3da;
}

body[data-game-id] .result-message {
  font-size: 1rem;
  line-height: 1.5;
}

body[data-game-id] .result-metrics div {
  border-color: #315c68;
  background: #1a3a47;
}

body[data-game-id] .endless-start-hint span {
  border-color: rgba(88, 216, 227, .65);
  border-radius: 8px;
  background: rgba(8, 30, 43, .88);
  color: #f4fbfc;
}

body[data-game-id] .button--primary {
  border-color: #0c7581;
  background: #0c7581;
}

body[data-game-id] .button--primary:hover {
  background: #095e6a;
}

body[data-game-id] .button--retry {
  border-color: #d39835;
  background: #fff1cc;
}

body[data-game-id="ten-seconds"] { --game-art: url("/assets/images/game-icons/ten-seconds.webp"); }
body[data-game-id="reaction"] { --game-art: url("/assets/images/game-icons/reaction.webp"); }
body[data-game-id="color"] { --game-art: url("/assets/images/game-icons/color.webp"); }
body[data-game-id="number-memory"] { --game-art: url("/assets/images/game-icons/number-memory.webp"); }
body[data-game-id="stopwatch"] { --game-art: url("/assets/images/game-icons/stopwatch.webp"); }
body[data-game-id="tap-speed"] { --game-art: url("/assets/images/game-icons/tap-speed.webp"); }
body[data-game-id="color-blocks"] { --game-art: url("/assets/images/game-icons/color-blocks.webp"); }
body[data-game-id="runner"] { --game-art: url("/assets/images/game-icons/runner.webp"); }
body[data-game-id="shooting"] { --game-art: url("/assets/images/game-icons/shooting.webp"); }
body[data-game-id="sky-hop"] { --game-art: url("/assets/images/game-icons/sky-hop.webp"); }
body[data-game-id="block-breaker"] { --game-art: url("/assets/images/game-icons/block-breaker.webp"); }
body[data-game-id="dodge-rush"] { --game-art: url("/assets/images/game-icons/dodge-rush.webp"); }
body[data-game-id="stair-climber"] { --game-art: url("/assets/images/game-icons/stair-climber.webp"); }
body[data-game-id="tower-stack"] { --game-art: url("/assets/images/game-icons/tower-stack.webp"); }
body[data-game-id="lane-switch"] { --game-art: url("/assets/images/game-icons/lane-switch.webp"); }
body[data-game-id="circle-jump"] { --game-art: url("/assets/images/game-icons/circle-jump.webp"); }
body[data-game-id="fall-down"] { --game-art: url("/assets/images/game-icons/fall-down.webp"); }
body[data-game-id="neon-snake"] { --game-art: url("/assets/images/game-icons/neon-snake.webp"); }
body[data-game-id="gate-rush"] { --game-art: url("/assets/images/game-icons/gate-rush.webp"); }
body[data-game-id="balance"] { --game-art: url("/assets/images/game-icons/balance.webp"); }
body[data-game-id="orbit-escape"] { --game-art: url("/assets/images/game-icons/orbit-escape.webp"); }
body[data-game-id="color-gate"] { --game-art: url("/assets/images/game-icons/color-gate.webp"); }
body[data-game-id="spike-climb"] { --game-art: url("/assets/images/game-icons/spike-climb.webp"); }
body[data-game-id="iraira-stick"] { --game-art: url("/assets/images/game-icons/iraira-stick.webp"); }
body[data-game-id="ittou-ryoudan"] { --game-art: url("/assets/images/game-icons/ittou-ryoudan.webp"); }
body[data-game-id="chain-bomb"] { --game-art: url("/assets/images/game-icons/chain-bomb.webp"); }
body[data-game-id="bullet-reflect"] { --game-art: url("/assets/images/game-icons/bullet-reflect.webp"); }
body[data-game-id="gunman-duel"] { --game-art: url("/assets/images/game-icons/gunman-duel.webp"); }
body[data-game-id="last-line"] { --game-art: url("/assets/images/game-icons/last-line.webp"); }
body[data-game-id="space-train-defense"] { --game-art: url("/assets/images/game-icons/space-train-defense.webp"); }
body[data-game-id="void-rail"] { --game-art: url("/assets/images/game-icons/void-rail.webp"); }

@keyframes mission-float {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 5px)); }
}

@keyframes mission-result {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  body[data-game-id] .game-hero {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  body[data-game-id] .game-hero::after {
    top: 18px;
    right: 16px;
    width: 68px;
    transform: none;
    animation: none;
  }

  body[data-game-id] .game-hero > div {
    width: 100%;
  }

  body[data-game-id] .game-hero .eyebrow,
  body[data-game-id] .game-hero h1 {
    padding-right: 76px;
  }

  body[data-game-id] .game-hero h1 {
    font-size: 1.75rem;
    line-height: 1.18;
  }

  body[data-game-id] .game-hero p {
    margin-bottom: 0;
    font-size: .98rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-game-id] .game-hero::after,
  body[data-game-id] .result-card {
    animation: none;
  }
}

/* Keep the duel controls and state transitions; only its stage gets a space-western skin. */
body[data-game-id="gunman-duel"] .duel-arena {
  border: 2px solid #397e8c;
  border-radius: 8px;
  background:
    radial-gradient(circle at 83% 16%, rgba(255, 199, 105, .15) 0 7%, transparent 13%),
    linear-gradient(180deg, #071526 0%, #102c3a 56%, #163f43 100%);
  box-shadow: inset 0 -30px 60px rgba(3, 12, 25, .35);
}
body[data-game-id="gunman-duel"] .duel-arena::before {
  background-image:
    radial-gradient(circle at 14% 18%, #c5e8f2 0 1px, transparent 2px),
    radial-gradient(circle at 55% 11%, #84ccdc 0 1px, transparent 2px),
    radial-gradient(circle at 76% 35%, #c5e8f2 0 1px, transparent 2px),
    linear-gradient(rgba(88, 216, 227, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 216, 227, .07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}
body[data-game-id="gunman-duel"] .sun {
  background: #f0c779;
  box-shadow: 0 0 0 10px rgba(240, 199, 121, .08), 0 0 40px rgba(240, 199, 121, .22);
}
body[data-game-id="gunman-duel"] .sun::after {
  content: "";
  position: absolute;
  inset: 28px -18px;
  border: 3px solid rgba(180, 224, 229, .65);
  border-radius: 50%;
  transform: rotate(-20deg);
}
body[data-game-id="gunman-duel"] .mesa {
  background: #193b48;
  border-bottom: 3px solid #58d8e3;
  clip-path: polygon(0 100%, 0 48%, 16% 48%, 16% 28%, 36% 28%, 36% 55%, 53% 55%, 53% 7%, 72% 7%, 72% 36%, 90% 36%, 90% 100%);
  opacity: .9;
}
body[data-game-id="gunman-duel"] .dust {
  background: linear-gradient(0deg, rgba(5, 25, 34, .85), transparent 75%);
  border-top: 1px solid rgba(88, 216, 227, .35);
}
body[data-game-id="gunman-duel"] .gunman { filter: drop-shadow(0 10px 8px rgba(2, 15, 28, .5)); }
body[data-game-id="gunman-duel"] .hat {
  height: 11px;
  top: 14px;
  background: #58d8e3;
  border-radius: 6px;
}
body[data-game-id="gunman-duel"] .hat::before {
  height: 20px;
  bottom: 2px;
  background: #1d4050;
  border: 2px solid #58d8e3;
  border-radius: 14px 14px 5px 5px;
}
body[data-game-id="gunman-duel"] .head {
  background: linear-gradient(#d7edf0 0 45%, #183847 45% 100%);
  border: 3px solid #2e7783;
  border-radius: 45% 45% 38% 38%;
}
body[data-game-id="gunman-duel"] .body {
  background: linear-gradient(110deg, #367787 0 35%, #173c4d 35% 100%);
  border: 2px solid #58d8e3;
}
body[data-game-id="gunman-duel"] .arm { background: #2e6573; }
body[data-game-id="gunman-duel"] .gun { background: #bce7eb; box-shadow: 5px 2px 0 #398b96; }
body[data-game-id="gunman-duel"] .legs { border-color: #183b48; }
body[data-game-id="gunman-duel"] .gunman--right .hat,
body[data-game-id="gunman-duel"] .gunman--right .hat::before,
body[data-game-id="gunman-duel"] .gunman--right .body { border-color: #ffc769; }
body[data-game-id="gunman-duel"] .gunman--right .hat { background: #ffc769; }
body[data-game-id="gunman-duel"] .gunman--right .body { background: linear-gradient(110deg, #99743a 0 35%, #493d3f 35% 100%); }
body[data-game-id="gunman-duel"] .duel-name {
  background: rgba(5, 28, 39, .85);
  border: 1px solid rgba(88, 216, 227, .5);
  border-radius: 5px;
}
body[data-game-id="gunman-duel"] .duel-signal {
  border: 2px solid #58d8e3;
  border-radius: 8px;
  background: rgba(6, 31, 43, .93);
  box-shadow: 0 5px 0 #103946;
}
body[data-game-id="gunman-duel"] .duel-signal span { color: #eefbfc; }
body[data-game-id="gunman-duel"] .duel-signal small { color: #b5d3da; }
body[data-game-id="gunman-duel"] .duel-arena[data-state="draw"] .duel-signal {
  border-color: #ffc769;
  background: #2f2d32;
}
body[data-game-id="gunman-duel"] .duel-arena[data-state="draw"] .duel-signal span { color: #ffc769; }
body[data-game-id="gunman-duel"] .muzzle {
  background: radial-gradient(circle, #fff 0 12%, #58d8e3 13% 35%, rgba(88, 216, 227, .45) 36% 55%, transparent 56%);
}
body[data-game-id="gunman-duel"] .duel-shoot,
body[data-game-id="gunman-duel"] .duel-shoot:active {
  background: #9e4d4c !important;
  box-shadow: 0 3px 0 #723434 !important;
}

body[data-game-id="conveyor-sort"] { --game-art: url("/assets/images/game-icons/conveyor-sort.svg"); }
body[data-game-id="gear-puzzle"] { --game-art: url("/assets/images/game-icons/gear-puzzle.svg"); }