@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800;900&family=Noto+Sans+JP:wght@800;900&display=swap");

:root {
  color-scheme: light;
  --ink: #2f1b16;
  --cream: #fff4d4;
  --paper: #f9dc98;
  --red: #a7342a;
  --red-dark: #70211c;
  --gold: #f4b73b;
  --blue: #1e6571;
  --wood: #7d4427;
  --shadow: 0 18px 50px rgba(37, 16, 10, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.45), transparent 24rem),
    linear-gradient(150deg, #e8c175, #bb7547);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit;
}

.game-shell {
  --game-scale: 1;
  container-name: ponyland-game;
  container-type: size;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 390px;
  height: 844px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) translateZ(0) scale(var(--game-scale));
  transform-origin: center;
}

html.mobile-portrait-layout,
html.mobile-portrait-layout body {
  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
}

html.mobile-portrait-layout .game-shell {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  transform: none;
  transform-origin: center;
  box-shadow: none;
}

.game-header {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 92px;
  padding: max(0.8rem, env(safe-area-inset-top)) 1rem 0.8rem;
  color: #fff9e9;
  background: var(--red-dark);
  border-bottom: 5px solid var(--gold);
}

.brand-kicker {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.brand h1 {
  margin: 0;
  font-family: system-ui, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.status-panel {
  display: flex;
  align-items: center;
  gap: .73rem;
  padding: 0.55rem .75rem;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: inset 0 -3px rgba(111, 50, 27, 0.12);
}

.status-item {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 0.18rem;
}

.status-label {
  grid-column: 1 / -1;
  color: #765044;
  font-size: 0.75rem;
  font-weight: 800;
}

.status-value {
  min-width: 1.8ch;
  color: var(--red);
  font: 900 1.5rem/0.9 Georgia, serif;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.test-value {
  font-family: inherit;
  font-size: 1rem;
}

.status-unit {
  font-size: 0.72rem;
  font-weight: 800;
}

.status-divider {
  width: 1px;
  height: 38px;
  background: #d8bd8a;
}

.game-area {
  position: relative;
  min-height: 0;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  background:
    linear-gradient(rgba(60, 28, 17, 0.16) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, #c9874b 0 2px, transparent 2px) 0 0 / 84px 100%,
    #d99a5a;
  transition: background-color 450ms ease, filter 450ms ease;
}

/* ステージが進むと背景色と模様が順番に変わります。 */
.game-area[data-stage-theme="2"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.13) 0 5px, transparent 6px) 0 0 / 44px 44px,
    linear-gradient(rgba(30, 63, 70, .18) 1px, transparent 1px) 0 0 / 100% 48px,
    #4e9290;
}

.game-area[data-stage-theme="3"] {
  background:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25% 75%, rgba(255,255,255,.08) 75%) 0 0 / 52px 52px,
    #73558f;
}

.game-area[data-stage-theme="4"] {
  background:
    radial-gradient(circle, rgba(255,231,122,.13) 0 8px, transparent 9px) 0 0 / 58px 58px,
    #355d7a;
}

.game-area[data-stage-theme="5"] {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 24px),
    #833c55;
}

/* 写真・星空を使うステージの背景レイヤーです。 */
.depth-scroll {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #071125;
  transition: opacity 350ms ease;
}

.depth-scenery {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--scene-width, 100%);
  height: var(--scene-height, 100%);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translate3d(calc(-50% + var(--pan-x, 0px)), calc(-50% + var(--pan-y, 0px)), 0);
}

/* ステージ2以降は、指定された風景を表示します。 */
.game-area:not([data-background="classic"]) .depth-scroll {
  opacity: 1;
}

.game-area[data-background="grassland"] .depth-scroll {
  background: #80b94c;
}

.game-area[data-background="grassland"] .depth-scenery {
  background-image:
    linear-gradient(rgba(25, 67, 28, 0.06), rgba(25, 67, 28, 0.12)),
    url("assets/grassland-pony-bg.jpg");
  background-position: 35% 58%;
  transform-origin: 50% 62%;
}

.game-area[data-background="lupine-day"] .depth-scroll {
  background: #557f43;
}

.game-area[data-background="lupine-day"] .depth-scenery {
  background-image: url("assets/stage-lupine-day-game-v2.jpg");
  background-position: 50% 54%;
}

.game-area[data-background="abu-lake"] .depth-scroll {
  background: #67a8df;
}

.game-area[data-background="abu-lake"] .depth-scenery {
  background-image: url("assets/stage-chokai-lake-day-v1.jpg");
  background-position: 50% 50%;
}

.game-area[data-background="lupine-night"] .depth-scroll {
  background: #06172b;
}

.game-area[data-background="lupine-night"] .depth-scenery {
  background-image: url("assets/stage-lupine-night-game-v2.jpg");
  background-position: 50% 50%;
}

.game-area[data-background="winter-sign"] .depth-scroll,
.game-area[data-background="winter-dragon"] .depth-scroll,
.game-area[data-background="winter-snowmobile"] .depth-scroll {
  background: #cfe3f6;
}

.game-area[data-background="winter-sign"] .depth-scenery {
  background-image: url("assets/stage-winter-sign-game-v2.jpg");
  background-position: 50% 54%;
}

.game-area[data-background="winter-dragon"] .depth-scenery {
  background-image: url("assets/stage-winter-dragon-kamakura-game-v5.jpg");
  background-position: 50% 52%;
}

.game-area[data-background="winter-snowmobile"] .depth-scenery {
  background-image: url("assets/stage-winter-snowmobile-canoe-game-v1.jpg");
  background-position: 50% 52%;
}

.game-area[data-background="spring"] .depth-scenery {
  background-image: url("assets/stage-spring.jpg");
  background-position: 72% 66%;
}

.game-area[data-background="summer"] .depth-scenery {
  background-image: url("assets/stage-summer.jpg");
  background-position: 55% 68%;
}

.game-area[data-background="autumn"] .depth-scenery {
  background-image: url("assets/stage-autumn.jpg");
  background-position: 38% 68%;
}

.game-area[data-background="winter"] .depth-scenery {
  background-image: url("assets/stage-winter.jpg");
  background-position: 35% 68%;
}

/* 各ステージの20秒間、背景は巻き戻らずゆっくり拡大し続けます。 */
.game-area.is-playing:not([data-background="classic"]) .depth-scenery {
  animation: none;
}

/* ===== 遠距離ステージ ===== */
.range-stage-scene {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #142035;
  pointer-events: none;
}

.range-stage-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.range-weapon-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.range-zoom-control {
  display: none;
  position: absolute;
  z-index: 19;
  top: 10px;
  right: 10px;
  align-items: center;
  gap: .35rem;
  padding: .3rem .42rem;
  color: #effff4;
  font-size: .68rem;
  font-weight: 900;
  background: rgba(6, 20, 28, .82);
  border: 1px solid rgba(168, 255, 202, .72);
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .38);
}

.range-zoom-control select {
  min-height: 28px;
  padding: .15rem .3rem;
  color: #f4fff5;
  font: 900 .72rem/1 system-ui, sans-serif;
  background: #173c38;
  border: 1px solid #79d9a2;
  border-radius: 5px;
}

html[data-stage-mode="range"] .range-stage-scene { display: block; }
html[data-stage-mode="range"] .range-zoom-control { display: flex; top: 108px; }
html[data-stage-mode="range"] .train-stage-scene,
html[data-stage-mode="range"] .depth-scroll,
html[data-stage-mode="range"] .awning,
html[data-stage-mode="range"] .back-wall,
html[data-stage-mode="range"] .world-layer { display: none; }
html[data-stage-mode="range"] .power-status,
html[data-stage-mode="range"] .ammo-status,
html[data-stage-mode="range"] .ammo-label,
html[data-stage-mode="range"] .aim-reticle.is-visible { display: block; }
html[data-stage-mode="range"] .aim-reticle.range-reticle-hidden { display: none; }

/* ===== 鳥海山・電車ステージ試作 ===== */
.train-stage-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: none;
  width: var(--world-width, 100%);
  height: var(--world-height, 100%);
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(calc(-50% + var(--pan-x, 0px)), calc(-50% + var(--pan-y, 0px)), 0);
}

html[data-stage-mode="train"] .train-stage-scene { display: block; }
html[data-stage-mode="train"] .depth-scroll,
html[data-stage-mode="train"] .awning,
html[data-stage-mode="train"] .back-wall,
html[data-stage-mode="train"] .world-layer { display: none; }

.game-area[data-background="train"] { background: #69b9ef; }

.train-parallax-layer {
  position: absolute;
  inset: 0;
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

.train-parallax-layer[data-train-speed] {
  overflow: hidden;
  background-image: none;
  will-change: auto;
}

.train-parallax-track {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  transform: translate3d(var(--train-parallax-offset, 0px), 0, 0);
  will-change: transform;
  pointer-events: none;
}

.train-mountain-layer {
  z-index: 0;
  background-image: url("assets/train-stage/train-layer-01-sky-mount-chokai-v1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

.train-ridge-layer {
  z-index: 1;
}
.train-ridge-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-layer-02-distant-ridge-turbines-v1.png");
}

.train-forest-layer {
  z-index: 2;
}
.train-forest-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-layer-03-near-forest-v3.png");
}

.train-meadow-layer {
  z-index: 3;
}
.train-meadow-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-layer-04-meadow-nanohana-v1.png");
}

.train-railway-layer {
  z-index: 6;
}
.train-railway-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-layer-05-railway-v1.png");
}

.train-foreground-meadow-layer {
  z-index: 7;
  transform: translateY(13%);
}
.train-foreground-meadow-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-layer-04-meadow-nanohana-v1.png");
}

.train-actor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.train-air-back-layer { z-index: 4; }
.train-air-front-layer { z-index: 8; }

.train-car {
  position: absolute;
  left: 50%;
  top: 8.3%;
  z-index: 5;
  width: 82%;
  height: 82%;
  transform: translateX(-50%);
  transform-origin: 50% 78%;
  animation: train-running-bob 920ms ease-in-out infinite alternate;
  will-change: transform;
}

.train-car > img,
.train-window-layer,
.train-roof-snow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.train-car > img { object-fit: fill; user-select: none; }
.train-car-interior-back { z-index: 1; }
.train-car-foreground { z-index: 3; pointer-events: none; }
.train-roof-snow { display: none; z-index: 4; pointer-events: none; }

.train-stage-scene[data-train-theme="winter"] .train-mountain-layer {
  background-image: url("assets/train-stage/train-winter-sky-chokai-v3.jpg");
}
.train-stage-scene[data-train-theme="winter"] .train-forest-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-winter-near-forest-v2.png");
}
.train-stage-scene[data-train-theme="winter"] .train-meadow-layer .train-parallax-track,
.train-stage-scene[data-train-theme="winter"] .train-foreground-meadow-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-winter-snowfield-v1.png");
}
.train-stage-scene[data-train-theme="winter"] .train-railway-layer .train-parallax-track {
  background-image: url("assets/train-stage/train-winter-railway-v1.png");
}
.train-stage-scene[data-train-theme="winter"] .train-roof-snow {
  display: block;
  background: url("assets/train-stage/train-winter-roof-snow-v1.png") center / 100% 100% no-repeat;
}

/* Seasonal images supply only the sky; reuse the daytime mountain silhouette. */
.train-stage-scene[data-train-theme="sunset"] .train-mountain-layer {
  background-image: url("assets/stage-summer.jpg");
  background-size: cover;
  background-position: center top;
}
.train-stage-scene[data-train-theme="night"] .train-mountain-layer {
  background-image: url("assets/stage-spring.jpg");
  background-size: cover;
  background-position: center top;
}
.train-stage-scene[data-train-theme="sunset"] .train-mountain-layer::after,
.train-stage-scene[data-train-theme="night"] .train-night-mountain-relief::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/train-stage/train-layer-01-sky-mount-chokai-v1.jpg") center / 100% 100% no-repeat;
  /* Follow the existing ridge, excluding the blue daytime sky. */
  clip-path: polygon(0% 41%, 1% 40%, 2% 39.5%, 3% 40.5%, 5% 40.5%,
    8% 39%, 11% 37%, 14% 34.5%, 17% 31%, 20% 29%, 23% 26.5%,
    26% 23.5%, 28% 21%, 30% 18%, 32% 15.5%, 34% 13%,
    35% 14%, 36% 12.8%, 37% 14.5%, 38% 15.5%, 40% 20%,
    42% 23%, 44% 25%, 46% 26%, 48% 28%, 50% 29%,
    52% 29.7%, 54% 31.5%, 56% 29%, 58% 28%, 60% 29%,
    62% 31%, 64% 33%, 66% 33.5%, 68% 32%, 70% 30%,
    72% 30%, 74% 32%, 76% 34%, 78% 36%, 80% 37%,
    82% 39%, 85% 40%, 88% 41%, 91% 42%, 94% 43%,
    97% 43%, 100% 42%, 100% 100%, 0% 100%);
}
.train-stage-scene[data-train-theme="sunset"] .train-mountain-layer::after {
  transform: translateY(-2%);
  filter: brightness(.72) sepia(.32) saturate(.72);
}
.train-night-mountain-relief { display: none; }
.train-stage-scene[data-train-theme="night"] .train-night-mountain-relief {
  display: block;
  position: absolute;
  inset: 0;
  /* Keep the mountain texture sharp; soften only its alpha edge below. */
}
.train-stage-scene[data-train-theme="night"] .train-night-mountain-relief::before {
  filter: saturate(.4) brightness(.56) contrast(1.08);
  clip-path: none;
  -webkit-mask: url("assets/train-stage/train-mountain-ridge-feather.svg") center / 100% 100% no-repeat;
  mask: url("assets/train-stage/train-mountain-ridge-feather.svg") center / 100% 100% no-repeat;
}

/* Mobile Safari: use the same night tint and feathered ridge baked into one
   transparent image, avoiding a full-scene SVG mask and filter at runtime. */
html.mobile-portrait-layout .train-stage-scene[data-train-theme="night"] .train-night-mountain-relief::before {
  background-image: url("assets/train-stage/train-mountain-night-feathered-v1.png");
  filter: none;
  -webkit-mask: none;
  mask: none;
}
.train-stage-scene[data-train-theme="sunset"] .train-parallax-track {
  filter: brightness(.66) sepia(.28) saturate(.8);
}
.train-stage-scene[data-train-theme="sunset"] .train-car-foreground {
  filter: brightness(.82) sepia(.22);
}
.train-stage-scene[data-train-theme="sunset"] .train-car-interior-back {
  filter: brightness(.95) sepia(.3);
}

/* iPhone-class portrait screens: keep the sunset look without retaining several
   full-scene filtered GPU layers at the same time. */
html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: rgba(70, 30, 22, .22);
}

html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"] .train-parallax-track,
html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"] .train-mountain-layer::after,
html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"] .train-car-foreground,
html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"] .train-car-interior-back {
  filter: none;
}

/* Mobile Safari: preserve the sunset-tinted Chokai ridge with its feathered
   edge already baked into the image, so no runtime mask or filter is needed. */
html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"] .train-mountain-layer::after {
  background-image: url("assets/train-stage/train-mountain-sunset-feathered-v1.png");
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

html.mobile-portrait-layout .train-stage-scene[data-train-theme="sunset"] .train-parallax-layer {
  will-change: auto;
}

.train-stage-scene[data-train-theme="night"] .train-parallax-track {
  filter: brightness(.32) saturate(.45);
}
.train-stage-scene[data-train-theme="night"] .train-car-foreground {
  filter: brightness(.52) saturate(.55);
}
/* Only tint opaque interior pixels: far windows remain transparent. */
.train-stage-scene[data-train-theme="night"] .train-car-interior-back {
  filter: brightness(2.35) sepia(.55) saturate(1.05);
}
.train-stage-scene[data-train-theme="night"] .train-interior-actor {
  filter: brightness(1.18) sepia(.18) saturate(1.05);
}
.train-stage-scene[data-train-theme="night"] .train-interior-actor.train-abu.abu-mecha {
  filter: drop-shadow(0 2px 2px rgba(10,18,24,.62));
}
.train-interior-light, .train-night-lamps, .train-window-glow { display: none; pointer-events: none; }
.train-stage-scene[data-train-theme="night"] .train-window-glow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  background: url("assets/train-stage/train-window-warm-glow.svg?v=2") center / 100% 100% no-repeat;
}
.train-stage-scene[data-train-theme="night"] .train-interior-light {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Follow opaque inner walls only; preserve the far-window transparency. */
  background: linear-gradient(to bottom, #fff8d8 26%, #ffe5a4 40%, #e9ac60 65%);
  opacity: .72;
  -webkit-mask: url("assets/train-stage/train-car-02-interior-back-v1.png") center / 100% 100% no-repeat;
  mask: url("assets/train-stage/train-car-02-interior-back-v1.png") center / 100% 100% no-repeat;
}
.train-stage-scene[data-train-theme="night"] .train-night-lamps {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
}
.train-lamp {
  position: absolute;
  top: 27.5%;
  width: .55%;
  height: 2%;
  border-radius: 50%;
  background: #fff8dc;
  box-shadow: 0 0 4px 2px #ffe3a1, 0 0 13px 5px #ffbc5b99, 0 0 25px 8px #ffb84d30;
  transform: translate(-50%, -50%);
}
.train-lamp-left { left: 3.6%; }
.train-lamp-right { left: 96.4%; }
.train-lamp::after {
  content: "";
  position: absolute;
  top: 1300%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #ffe6b1;
  box-shadow: 0 0 4px 1px #ffd380, 0 0 12px 4px #ffad5480;
}
.train-stage-scene[data-train-theme="night"] .train-air-actor {
  filter: brightness(.85) saturate(.75);
}

.train-window-layer {
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: url("assets/train-stage/train-car-02-window-mask-v1.png");
  mask-image: url("assets/train-stage/train-car-02-window-mask-v1.png");
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.train-interior-actor {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 40%;
  width: var(--train-actor-width, 7.1%);
  height: var(--train-actor-height, 21%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity 150ms ease, transform 210ms cubic-bezier(.18,.82,.28,1.14);
  pointer-events: none;
  will-change: left, top, transform;
}

.train-interior-actor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.train-interior-actor.is-hit { animation: train-abu-hit 300ms ease-out both; }

.train-interior-actor.train-target {
  width: var(--train-actor-width);
  height: var(--train-actor-height);
  border-radius: 50%;
}

.train-interior-actor.train-abu {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(10,18,24,.62));
}

.train-interior-actor.train-abu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  user-select: none;
}

.train-interior-actor.train-abu .hp-label {
  position: absolute;
  right: 2%;
  bottom: -4%;
  padding: 2px 6px;
  color: #fff4c3;
  font-size: .46rem;
  font-weight: 1000;
  background: rgba(61,21,17,.9);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.train-interior-actor.damage-flash { animation: item-damage 160ms ease; }
.train-interior-actor.train-abu.damage-flash {
  animation: none;
}
.train-interior-actor.train-abu.damage-flash img {
  filter: none !important;
  animation: train-abu-damage-opacity 180ms ease;
}

.train-air-actor { pointer-events: none; }

.train-interior-actor.missile-locked::before { display: none; }
.train-lock-marker {
  position: absolute;
  z-index: 19;
  pointer-events: none;
  background:
    linear-gradient(#7eff86,#7eff86) left top / 28% 3px,
    linear-gradient(#7eff86,#7eff86) right top / 28% 3px,
    linear-gradient(#7eff86,#7eff86) left bottom / 28% 3px,
    linear-gradient(#7eff86,#7eff86) right bottom / 28% 3px,
    linear-gradient(#7eff86,#7eff86) left top / 3px 28%,
    linear-gradient(#7eff86,#7eff86) right top / 3px 28%,
    linear-gradient(#7eff86,#7eff86) left bottom / 3px 28%,
    linear-gradient(#7eff86,#7eff86) right bottom / 3px 28%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px #35ff72);
  transform: translate(-10px, -10px);
  box-sizing: content-box;
  padding: 10px;
}

@keyframes train-running-bob {
  from { transform: translateX(calc(-50% + var(--train-motion-x, 0px))) translateY(-1px) rotate(-.06deg); }
  to { transform: translateX(calc(-50% + var(--train-motion-x, 0px))) translateY(2px) rotate(.06deg); }
}

@keyframes train-abu-hit {
  0% { opacity: 1; filter: brightness(1) drop-shadow(0 2px 2px rgba(10,18,24,.62)); }
  38% { opacity: 1; filter: brightness(2.5) drop-shadow(0 0 9px #fff); transform: translate(-50%, -55%) rotate(-8deg) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, 25%) rotate(12deg) scale(.72); }
}

@keyframes train-abu-damage-opacity {
  0%, 100% { opacity: 1; }
  48% { opacity: .32; }
}

.world-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--world-width, 100%);
  height: var(--world-height, 100%);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(calc(-50% + var(--pan-x, 0px)), calc(-50% + var(--pan-y, 0px)), 0);
}

.target-directions {
  position: absolute;
  inset: 54px 0 0;
  z-index: 18;
  pointer-events: none;
}

.direction-indicator {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .22rem;
  width: 32px;
  min-height: 76px;
  padding: .42rem .25rem;
  color: #fff8bd;
  font-weight: 1000;
  line-height: 1;
  background: rgba(18, 45, 62, .82);
  border: 2px solid rgba(255, 238, 154, .9);
  border-radius: 999px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.direction-indicator.is-visible { display: flex; }
.direction-left { left: 6px; top: 50%; transform: translateY(-50%); }
.direction-right { right: 6px; top: 50%; transform: translateY(-50%); }
.direction-up,
.direction-down {
  left: 50%;
  width: 76px;
  min-height: 32px;
  height: 32px;
  padding: .25rem .42rem;
  flex-direction: row;
  transform: translateX(-50%);
}
.direction-up { top: 6px; }
.direction-down { bottom: 6px; }
.direction-indicator.has-giant {
  width: 42px;
  min-height: 88px;
  padding: .45rem .25rem;
  color: #fff;
  font-size: 1.2rem;
  background: rgba(151, 25, 31, .92);
  border-color: #ffd057;
}
.direction-up.has-giant,
.direction-down.has-giant {
  width: 76px;
  min-height: 32px;
  height: 32px;
  padding: .25rem .42rem;
  flex-direction: row;
}

.awning {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 48px;
  background: repeating-linear-gradient(90deg, var(--cream) 0 58px, var(--red) 58px 116px);
  filter: drop-shadow(0 5px 0 rgba(59, 24, 15, 0.22));
  clip-path: polygon(0 0, 100% 0, 100% 75%, 96% 100%, 92% 75%, 88% 100%, 84% 75%, 80% 100%, 76% 75%, 72% 100%, 68% 75%, 64% 100%, 60% 75%, 56% 100%, 52% 75%, 48% 100%, 44% 75%, 40% 100%, 36% 75%, 32% 100%, 28% 75%, 24% 100%, 20% 75%, 16% 100%, 12% 75%, 8% 100%, 4% 75%, 0 100%);
}

.back-wall {
  display: none;
  position: absolute;
  top: 74px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 0.4rem 1.4rem;
  color: #fff5cf;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: var(--blue);
  border: 3px solid #153f46;
  box-shadow: 4px 5px 0 rgba(49, 27, 19, 0.28);
}

.shelf {
  position: absolute;
  left: 3%;
  width: 94%;
  height: 17px;
  background: linear-gradient(#a76638, #69351f);
  border: 2px solid #4d281b;
  box-shadow: 0 9px 0 rgba(75, 36, 22, 0.18);
}

.shelf-top { top: 48%; }
.shelf-bottom { top: 80%; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  visibility: hidden;
  opacity: 0;
  background: rgba(44, 20, 14, 0.58);
  backdrop-filter: blur(4px);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.overlay.is-visible {
  visibility: visible;
  opacity: 1;
}

.overlay-card {
  width: min(100%, 430px);
  padding: 1.4rem;
  text-align: center;
  background: var(--cream);
  border: 5px solid var(--gold);
  border-radius: 18px;
  box-shadow: 0 10px 0 var(--red-dark), 0 24px 55px rgba(25, 10, 5, 0.35);
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--red);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.overlay-card h2 {
  margin: 0;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.3;
}

.start-card {
  padding-block: 1.25rem;
}

.start-card h2 {
  font-family: system-ui, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 1000;
  letter-spacing: .08em;
}

.start-english-title {
  margin: .2rem 0 1rem;
  color: var(--red);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .2em;
}

.start-lead,
.start-center-copy {
  margin: 0;
  font-weight: 900;
}

.start-lead { font-size: 1.05rem; }
.start-center-copy { margin-top: .25rem; color: var(--red); font-size: .9rem; }

.start-target-demo {
  position: relative;
  display: grid;
  place-items: center;
  width: 126px;
  height: 116px;
  margin: .65rem auto .55rem;
}

.start-demo-target {
  position: relative;
  display: block;
  width: 82px;
  aspect-ratio: 1;
  border: 4px solid #49251a;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd34e 0 19%, #b22d28 20% 39%, #fff1ca 40% 59%, #207482 60% 100%);
  box-shadow: 0 6px 0 rgba(73, 37, 26, .28);
}

.start-demo-target::after {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(255, 246, 125, .72), 0 0 22px 8px rgba(255, 211, 78, .46);
  animation: start-center-glow 2.3s ease-in-out infinite;
}

.start-target-demo strong {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff46a;
  font: 1000 1.65rem/1 system-ui, sans-serif;
  text-shadow: 0 3px 0 #7a1f18, 0 0 18px #fff07a;
  transform: translate(-50%, -50%);
  animation: start-great-demo 2.3s ease-in-out infinite;
}

.target-guide {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: .98rem;
  margin: 1.4rem 0;
}

.target-guide span {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  color: #5d3a2d;
  font-size: 0.82rem;
  font-weight: 800;
}

.guide-target {
  display: block;
  width: var(--guide-size);
  aspect-ratio: 1;
  background: radial-gradient(circle, #ffd34e 0 19%, #b22d28 20% 39%, #fff1ca 40% 59%, #207482 60% 100%);
  border: 2px solid #49251a;
  border-radius: 50%;
}

.guide-target.large { --guide-size: 46px; }
.guide-target.medium { --guide-size: 36px; }
.guide-target.small { --guide-size: 28px; }

.primary-button {
  min-width: 210px;
  min-height: 54px;
  padding: 0.8rem 1.5rem;
  color: #fffaf0;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(#c74b3c, var(--red));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--red-dark);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.primary-button:hover { filter: brightness(1.07); }
.primary-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-dark); }
.primary-button:focus-visible,
.sound-button:focus-visible,
.target:focus-visible { outline: 4px solid #247bff; outline-offset: 3px; }

.help-text {
  margin: 1rem 0 0;
  color: #755347;
  font-size: 0.82rem;
}

.tutorial-replay-button {
  display: block;
  min-width: 150px;
  margin: .85rem auto 0;
  padding: .55rem 1rem;
  color: #6b2e24;
  font-weight: 900;
  background: rgba(255,255,255,.72);
  border: 2px solid #b97036;
  border-radius: 999px;
  cursor: pointer;
}
.tutorial-replay-button span,
.tutorial-replay-button small { display: block; }
.tutorial-replay-button small { margin-top: .08rem; font-size: .58rem; letter-spacing: .14em; }
.tutorial-replay-button[hidden] { display: none; }

.tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: transparent;
  transition: opacity 180ms ease, visibility 180ms ease;
  pointer-events: none;
}
.tutorial-overlay.is-visible { visibility: visible; opacity: 1; }
.tutorial-copy {
  position: absolute;
  z-index: 3;
  top: 17%;
  left: 50%;
  width: min(94%, 520px);
  transform: translateX(-50%);
  text-shadow: 0 3px 8px rgba(0,0,0,.9);
}
.tutorial-copy span { display: block; color: #ffe462; font-size: .95rem; font-weight: 1000; letter-spacing: .14em; }
.tutorial-copy strong { display: block; margin-top: .3rem; font-size: 1.75rem; line-height: 1.18; }
.tutorial-copy p { margin: .45rem 0 0; font-size: 1.05rem; font-weight: 900; }
.tutorial-copy p:empty { display: none; }
.tutorial-tap-zone {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3.5%;
  box-sizing: border-box;
  border: 3px solid rgba(255,241,123,.88);
  background: transparent;
  box-shadow: 0 0 0 100vmax rgba(2, 8, 24, .68), inset 0 0 22px rgba(255,226,78,.12), 0 0 12px rgba(255,226,78,.32);
}
.tutorial-hand-guide {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 120px;
  height: 122px;
  transform: translateX(-50%);
}
.tutorial-press-hand {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  color: #fff;
  font: normal 4rem/1 Arial, sans-serif;
  font-style: normal;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.8));
  transform: translateX(-50%);
}
.tutorial-tap-rays {
  position: absolute;
  z-index: 1;
  top: -3px;
  left: 50%;
  width: 82px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from -4deg, #fff17b 0deg 6deg, transparent 6deg 42deg);
  -webkit-mask: radial-gradient(circle, transparent 0 53%, #000 55% 76%, transparent 78%);
  mask: radial-gradient(circle, transparent 0 53%, #000 55% 76%, transparent 78%);
}
.tutorial-overlay[data-step="tap"] .tutorial-hand-guide,
.tutorial-overlay[data-step="tap-active"] .tutorial-hand-guide {
  animation: tutorial-tap-blink .78s ease-in-out infinite;
}
.tutorial-overlay[data-step="rapid"] .tutorial-hand-guide { animation: none; opacity: 1; }
.tutorial-tap-zone b { margin-top: .3rem; color: #fff17b; font-size: 1.2rem; text-shadow: 0 2px 5px #000; }
.tutorial-gesture-guide { position: absolute; z-index: 2; inset: 0; display: none; }
.tutorial-practice-target {
  --tutorial-target-x: 0px;
  --tutorial-target-y: 0px;
  position: absolute;
  left: 68%;
  top: 43%;
  width: 76px;
  height: 76px;
  transform: translate(calc(-50% + var(--tutorial-target-x)), calc(-50% + var(--tutorial-target-y)));
  border: 4px solid #fff2b3;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe24e 0 18%, #b72f2a 19% 37%, #fff1ca 38% 57%, #277485 58% 100%);
  box-shadow: 0 6px 0 #542719, 0 0 24px rgba(255,228,90,.7);
  transition: transform 70ms linear;
}
.tutorial-practice-target.damage-flash { animation: item-damage 160ms ease; }
.tutorial-practice-target.is-destroyed { animation: tutorial-target-destroy 480ms ease-out forwards; }
.tutorial-gesture-ring {
  position: absolute;
  left: 50%;
  top: 80%;
  width: 136px;
  height: 136px;
  transform: translate(-50%, -50%);
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
.tutorial-gesture-ring path {
  fill: none;
  stroke: #fff17b;
  stroke-width: 5;
  stroke-linecap: round;
}
.tutorial-gesture-ring marker path { fill: #fff17b; stroke: none; }
.tutorial-hand {
  position: absolute;
  left: 50%;
  top: 80%;
  color: #fff;
  font: normal 2.8rem/1 Arial, sans-serif;
  transform: translate(-50%, 0) translate(var(--tutorial-hand-x, 54px), var(--tutorial-hand-y, 0px));
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.7));
}
.tutorial-go {
  position: absolute;
  left: 50%;
  top: 48%;
  display: none;
  transform: translate(-50%, -50%);
  color: #fff36a;
  font-size: 4rem;
  font-style: italic;
  text-shadow: 0 6px 0 #9c3026, 0 0 30px #ffdc40;
  animation: tutorial-go-pop 950ms ease-out both;
}
.tutorial-overlay[data-step="tap-active"] { background: transparent; }
.tutorial-overlay[data-step="between"] { background: transparent; }
.tutorial-overlay[data-step="between"] .tutorial-copy,
.tutorial-overlay[data-step="between"] .tutorial-gesture-guide { opacity: 0; }
.tutorial-overlay[data-step="rapid"] { background: transparent; }
.tutorial-overlay[data-step="swipe"] { background: transparent; }
.tutorial-overlay[data-step="swipe"] .tutorial-hand-guide,
.tutorial-overlay[data-step="swipe"] .tutorial-tap-zone b { display: none; }
.tutorial-overlay[data-step="swipe"] .tutorial-gesture-guide { display: block; }
.tutorial-overlay[data-step="swipe"] .tutorial-practice-target { filter: brightness(1.35) drop-shadow(0 0 12px #ffe45e); }
.tutorial-aim-focus .aim-reticle { z-index: 26; filter: drop-shadow(0 0 8px #fff16a); }
.tutorial-active .projectile { z-index: 27; filter: brightness(1.35) drop-shadow(0 0 9px #7eeaff); }
.tutorial-active .hit-effect { z-index: 28; }
.tutorial-active .target,
.tutorial-active .power-item,
.tutorial-active .direction-indicator { display: none !important; }
.tutorial-active .power-status,
.tutorial-active .ammo-status,
.tutorial-active .weapon-status { opacity: 0; }
.tutorial-active .back-wall { display: none; }
.tutorial-overlay[data-step="go"] { background: rgba(2, 8, 24, .48); }
.tutorial-overlay[data-step="go"] .tutorial-copy,
.tutorial-overlay[data-step="go"] .tutorial-tap-zone,
  .tutorial-overlay[data-step="go"] .tutorial-gesture-ring,
.tutorial-overlay[data-step="go"] .tutorial-hand { display: none; }
.tutorial-overlay[data-step="go"] .tutorial-gesture-guide { display: block; }
.tutorial-overlay[data-step="go"] .tutorial-go { display: block; }

@keyframes tutorial-tap-blink {
  0%, 42% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  58%, 100% { opacity: .18; transform: translateX(-50%) translateY(7px) scale(.9); }
}
@keyframes tutorial-target-destroy {
  0% { opacity: 1; filter: brightness(1); }
  35% { opacity: 1; filter: brightness(2.2); }
  100% { opacity: 0; filter: brightness(2.5); transform: translate(calc(-50% + var(--tutorial-target-x)), calc(-50% + var(--tutorial-target-y))) scale(1.8) rotate(18deg); }
}
@keyframes tutorial-go-pop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 35% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes start-center-glow {
  0%, 25%, 100% { opacity: .28; transform: scale(.72); }
  48%, 68% { opacity: 1; transform: scale(1.22); }
}
@keyframes start-great-demo {
  0%, 26%, 85%, 100% { opacity: 0; transform: translate(-50%, calc(-50% + 5px)) scale(.72); }
  45%, 66% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

.center-tip {
  margin: -0.55rem 0 1.15rem;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 1000;
}

.center-tip span { color: var(--gold); font-size: 1.2em; }

.target {
  position: absolute;
  z-index: 5;
  width: var(--target-size);
  height: var(--target-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffdb4d 0 17%, #af2f29 18% 34%, #ffefca 35% 52%, #236b76 53% 71%, #f9d78d 72% 100%);
  box-shadow: 0 5px 0 #542719, 0 9px 12px rgba(57, 25, 16, 0.32);
  cursor: crosshair;
  pointer-events: none;
  animation: target-pop 180ms cubic-bezier(.2, 1.5, .5, 1);
  touch-action: manipulation;
  will-change: transform, left, top;
}

.aim-reticle {
  position: absolute;
  z-index: 12;
  display: none;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 245, 128, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(12, 25, 45, 0.65), 0 0 12px rgba(255, 225, 76, 0.8);
  pointer-events: none;
}

.aim-reticle::before,
.aim-reticle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff8aa;
  box-shadow: 0 0 2px #13223c;
}

.aim-reticle::before { width: 44px; height: 2px; transform: translate(-50%, -50%); }
.aim-reticle::after { width: 2px; height: 44px; transform: translate(-50%, -50%); }
.aim-reticle.is-visible { display: block; }
.aim-reticle.lock-mode {
  width: 48px;
  height: 48px;
  border: 3px dashed #7dff84;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(2, 30, 22, .72), 0 0 18px #34ff8b;
  animation: lock-search 900ms ease-in-out infinite alternate;
}
.aim-reticle.lock-mode::before,
.aim-reticle.lock-mode::after { background: #9dffa3; }
.aim-reticle.lock-mode.locking { border-color: #ffe34d; box-shadow: 0 0 20px #ffcf31; }

.projectile {
  position: absolute;
  z-index: 15;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: translate3d(var(--start-x), var(--start-y), 0) scale(1);
  transform-origin: center;
  animation: projectile-flight 400ms linear forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.projectile-body {
  position: absolute;
  top: -5px;
  left: -17px;
  display: block;
  width: 34px;
  height: 10px;
  transform: rotate(var(--angle));
  border: 2px solid rgba(4, 23, 58, 0.92);
  border-radius: 50% / 45%;
  background: linear-gradient(180deg, #c9f7ff 0%, #39bfff 23%, #0875dc 55%, #003b96 82%, #001f60 100%);
  box-shadow: 0 0 5px #fff, 0 0 12px #33caff, 0 0 22px rgba(28, 111, 255, 0.95);
}

.projectile-body::before,
.projectile-body::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 8px;
  border-radius: 50%;
}

.projectile-body::before {
  left: -2px;
  background: linear-gradient(90deg, #001d55, #0964bb);
  border: 1px solid #00163e;
}

.projectile-body::after {
  right: -3px;
  background: radial-gradient(ellipse, #fff 0 18%, #a9f5ff 35%, #27bbff 68%, #075dbb 100%);
  border: 1px solid #d9fbff;
  box-shadow: 0 0 8px #86ebff, 0 0 16px #208cff;
}

.power-status {
  position: absolute;
  z-index: 11;
  top: 118px;
  right: 12px;
  display: grid;
  width: 104px;
  box-sizing: border-box;
  padding: 0.38rem 0.65rem;
  color: #e9fbff;
  text-align: center;
  background: rgba(4, 25, 62, 0.78);
  border: 2px solid #5fd8ff;
  border-radius: 9px;
  box-shadow: 0 0 12px rgba(31, 159, 255, 0.45);
  pointer-events: none;
}

.power-status span { font-size: 0.68rem; font-weight: 800; }
.power-status strong { color: #85edff; font-size: 0.88rem; }
.power-status.is-max {
  border-color: #96f4ff;
  box-shadow: 0 0 16px rgba(75, 224, 255, .86);
}

.ammo-status {
  position: absolute;
  z-index: 11;
  top: 178px;
  right: 12px;
  display: grid;
  width: 104px;
  box-sizing: border-box;
  padding: 0.38rem 0.65rem;
  color: #edfff2;
  text-align: center;
  background: rgba(5, 55, 35, 0.8);
  border: 2px solid #65f39b;
  border-radius: 9px;
  box-shadow: 0 0 12px rgba(40, 220, 114, 0.42);
  pointer-events: none;
}

.ammo-status span { font-size: 0.68rem; font-weight: 800; }
.ammo-status strong { color: #8dffad; font-size: 0.88rem; }
.ammo-status-track {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
}
.ammo-status-track b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,#6df39a,#c8ff77);
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(109,243,154,.8);
  transform-origin: left center;
  transition: transform 180ms ease;
}
.ammo-status.is-max {
  border-color: #a4ffc0;
  box-shadow: 0 0 16px rgba(73, 238, 132, .82);
}

.weapon-status {
  position: absolute;
  z-index: 18;
  right: 12px;
  top: 12px;
  display: grid;
  grid-template-columns: 74px;
  justify-items: center;
  width: 96px;
  padding: .28rem .38rem .38rem;
  color: #e9fff1;
  text-align: center;
  background: rgba(8, 20, 36, .8);
  border: 2px solid rgba(108, 224, 255, .78);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .38), inset 0 0 12px rgba(78, 215, 255, .12);
  pointer-events: none;
}
.weapon-status img { width: 74px; height: 50px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.weapon-status strong { color: #eaffff; font-size: .69rem; line-height: 1.15; }
.weapon-status span { font-size: .62rem; font-weight: 900; }
.weapon-status .weapon-status-label { color: #75e8ff; letter-spacing: .08em; }
.weapon-status.weapon-missile {
  border-color: rgba(199, 109, 255, .96);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .38), inset 0 0 14px rgba(185, 72, 255, .22), 0 0 12px rgba(185, 72, 255, .5);
}
.weapon-status.weapon-missile .weapon-status-label { color: #e4b3ff; }
.weapon-status.weapon-bomb {
  border-color: rgba(255, 167, 63, .96);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .38), inset 0 0 14px rgba(255, 132, 35, .2), 0 0 12px rgba(255, 132, 35, .48);
  animation: weapon-pop 220ms ease-out;
}
.weapon-status.weapon-bomb .weapon-status-label { color: #ffb24c; }
.weapon-status.weapon-missile.weapon-acquired { animation: weapon-missile-acquired 900ms ease-out; }
.weapon-status.weapon-bomb.weapon-acquired { animation: weapon-bomb-acquired 900ms ease-out; }
.weapon-status.weapon-rifle {
  grid-template-columns: 132px;
  width: 148px;
}
.weapon-status.weapon-rifle img { width: 132px; height: 46px; }

.stage-progress {
  position: absolute;
  z-index: 18;
  top: 8px;
  left: 8px;
  min-width: 112px;
  padding: 7px 10px;
  color: #effaff;
  background: rgba(8,62,119,.93);
  border: 2px solid #7fe7ff;
  border-radius: 9px;
  box-shadow: 0 3px 0 #052c5e;
  font: 900 13px/1.15 system-ui,sans-serif;
  pointer-events: none;
}
.stage-progress[hidden] { display:none; }
.stage-progress small { display:block; color:#a9efff; font-size:9px; letter-spacing:.13em; }
.stage-countdown {
  position: absolute;
  z-index: 24;
  top: 10px;
  left: 50%;
  display: none;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font: 900 10px/1 system-ui,sans-serif;
  text-shadow: 0 3px 0 #8f1717,0 0 8px rgba(0,0,0,.8);
  pointer-events: none;
}
.stage-countdown.is-visible { display:block; }
.stage-countdown span { display:block; }
.stage-countdown strong { display:block; color:#ffe13b; font-size:44px; line-height:.85; }
.stage-condition {
  position: absolute;
  z-index: 29;
  left: 22px;
  right: 22px;
  top: 150px;
  padding: 16px 14px 14px;
  visibility: hidden;
  opacity: 0;
  color: #effaff;
  text-align: center;
  background: linear-gradient(180deg,rgba(19,94,158,.98),rgba(7,49,101,.98));
  border: 3px solid #8fe7ff;
  border-radius: 14px;
  box-shadow: 0 6px 0 #062e62,0 11px 26px rgba(0,0,0,.5),inset 0 0 18px rgba(115,224,255,.28);
  font-family: system-ui,sans-serif;
  pointer-events: none;
  transition: opacity 180ms ease,visibility 180ms ease;
}
.stage-condition.is-visible { visibility:visible; opacity:1; }
.stage-condition-kicker { color:#a9efff; font-size:14px; font-weight:1000; letter-spacing:.18em; }
.stage-condition-title { margin-top:5px; font-size:25px; line-height:1.18; font-weight:1000; }
.stage-condition-icons { min-height:64px; margin:11px 0 7px; display:flex; align-items:center; justify-content:center; gap:13px; }
.stage-condition-icons img { width:65px; height:52px; object-fit:contain; filter:drop-shadow(0 4px 2px rgba(0,0,0,.45)); }
.stage-condition-icons img.commander-icon { width:116px; height:72px; }
.stage-condition-note { color:#fff3a7; font-size:14px; font-weight:1000; }
.condition-target-icon,.condition-giant-icon { display:inline-block; border-radius:50%; flex:0 0 auto; box-shadow:0 4px 0 #542719; }
.condition-target-icon { width:48px; height:48px; background:radial-gradient(circle,#ffdb4d 0 17%,#af2f29 18% 34%,#ffefca 35% 52%,#236b76 53% 71%,#f9d78d 72% 100%); }
.condition-giant-icon {
  width:76px;
  height:76px;
  box-sizing:border-box;
  background:radial-gradient(circle,#fff09b 0 13%,#b11f31 14% 28%,#fff4d1 29% 45%,#236e89 46% 63%,#e5ad35 64% 100%);
  border:4px double #ffe785;
  box-shadow:0 5px 0 #4b211c,0 0 18px rgba(255,218,76,.82);
}
.condition-scope-icon { position:relative; display:grid; place-items:center; width:96px; height:64px; }
.condition-aim-reticle {
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:30px;
  height:30px;
  pointer-events:none;
  background:
    linear-gradient(#fff4b8,#fff4b8) center/30px 1.5px no-repeat,
    linear-gradient(#fff4b8,#fff4b8) center/1.5px 30px no-repeat;
  filter:drop-shadow(0 0 2px rgba(255,244,184,.8));
  animation:condition-range-aim 1.85s ease-in-out forwards;
}
.condition-aim-reticle::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  transform:translate(-50%,-50%);
  border:1.5px solid #fff4b8;
  border-radius:50%;
  box-shadow:0 0 5px rgba(255,244,184,.82),0 0 0 1px rgba(18,29,43,.55);
}
.condition-scope-icon .condition-target-icon {
  width:48px;
  height:48px;
  background:radial-gradient(circle,#ffda65 0 19%,#346baf 20% 39%,#e5f7ff 40% 59%,#277eab 60% 79%,#b8e6fa 80% 100%);
  box-shadow:0 4px 0 #294257,0 0 9px rgba(71,166,211,.5);
  animation:condition-range-target-hit 1.85s ease-out forwards;
}
.condition-range-projectile {
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:7px;
  height:28px;
  border:1px solid rgba(240,252,255,.9);
  border-radius:999px;
  background:linear-gradient(to bottom,#2d73ff 0 18%,#37a4ff 42%,#86e7ff 70%,#f4ffff 100%);
  box-shadow:0 0 7px rgba(76,190,255,.9);
  opacity:0;
  animation:condition-range-projectile 1.85s ease-in forwards;
}
.condition-range-impact {
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:14px;
  height:14px;
  border:2px solid #fff;
  border-radius:50%;
  opacity:0;
  animation:condition-range-impact 1.85s ease-out forwards;
}

/* ===== 星空・照準視点の専用試作 ===== */
.fps-weapon-view,
.fps-weapon-panel { display: none; }

.fps-gun-sprite { display: none; }

.fps-gun-shadow,
.fps-gun-stock,
.fps-gun-body,
.fps-gun-barrel,
.fps-gun-muzzle,
.fps-gun-sight { position: absolute; display: block; }

.fps-gun-shadow {
  left: 25px;
  bottom: 0;
  width: 126px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  filter: blur(7px);
}

.fps-gun-stock {
  left: 34px;
  bottom: 6px;
  width: 106px;
  height: 57px;
  border: 4px solid #17273a;
  border-radius: 46% 46% 18% 18%;
  background: linear-gradient(90deg, #25364b, #7489a0 45%, #26394e);
}

.fps-gun-body {
  left: 46px;
  bottom: 33px;
  width: 82px;
  height: 68px;
  border: 4px solid #14243a;
  border-radius: 27px 27px 18px 18px;
  background:
    linear-gradient(90deg, transparent 0 18%, var(--gun-light) 19% 29%, transparent 30% 70%, var(--gun-light) 71% 81%, transparent 82%),
    linear-gradient(90deg, var(--gun-dark), var(--gun-main) 24% 76%, var(--gun-dark));
  box-shadow: inset 0 0 15px rgba(255,255,255,.35), 0 0 13px color-mix(in srgb, var(--gun-light) 75%, transparent);
}

.fps-gun-barrel {
  left: 65px;
  top: 19px;
  width: 44px;
  height: 91px;
  border: 4px solid #15263b;
  border-radius: 18px 18px 24px 24px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 5px, transparent 5px 12px),
    linear-gradient(90deg, var(--gun-dark), var(--gun-main) 22% 78%, var(--gun-dark));
  box-shadow: inset 0 0 12px rgba(255,255,255,.3);
}

.weapon-missile .fps-gun-barrel { left: 58px; width: 58px; border-radius: 22px; }
.weapon-bomb .fps-gun-barrel { left: 52px; top: 27px; width: 70px; height: 82px; border-radius: 28px; }

.fps-gun-muzzle {
  left: 61px;
  top: 8px;
  width: 52px;
  height: 28px;
  border: 5px solid #14243a;
  border-radius: 50%;
  background: radial-gradient(circle, #061528 0 31%, var(--gun-light) 34% 54%, var(--gun-dark) 57% 100%);
  box-shadow: 0 0 14px var(--gun-light);
}

.weapon-missile .fps-gun-muzzle { left: 54px; width: 66px; }
.weapon-bomb .fps-gun-muzzle { left: 46px; top: 13px; width: 82px; height: 42px; }

.fps-gun-sight {
  left: 80px;
  top: 38px;
  width: 14px;
  height: 22px;
  border: 3px solid #16263b;
  border-radius: 5px 5px 2px 2px;
  background: var(--gun-light);
  box-shadow: 0 0 9px var(--gun-light);
}

.fps-current-label {
  position: absolute;
  left: 8px;
  top: -18px;
  padding: 2px 8px;
  color: #07253b;
  font-size: .62rem;
  font-weight: 1000;
  background: #6eeaff;
  border-radius: 999px;
  box-shadow: 0 0 10px #36d9ff;
}

.fps-weapon-slot {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 2px;
  opacity: .58;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.06);
}

.fps-weapon-slot.is-active {
  opacity: 1;
  border-color: #6eeaff;
  box-shadow: inset 0 0 10px rgba(77,222,255,.35), 0 0 10px rgba(77,222,255,.58);
}

.fps-weapon-slot b { font-size: .6rem; line-height: 1; }
.fps-weapon-icon { position: relative; display: block; width: 31px; height: 15px; border: 2px solid #17263a; border-radius: 7px; }
.fps-weapon-icon::after { content: ""; position: absolute; right: -8px; top: 3px; width: 10px; height: 6px; border: 2px solid #17263a; border-radius: 3px; background: inherit; }
.icon-rapid { background: linear-gradient(#6eeaff, #177fd2); }
.icon-missile { width: 34px; height: 17px; background: linear-gradient(#c8ff84, #6d9b36); }
.icon-bomb { width: 28px; height: 20px; border-radius: 10px; background: linear-gradient(#ffd45b, #dc6b24); }

@keyframes fps-gun-recoil {
  45% { transform: translateX(-50%) translateY(calc(var(--gun-pitch-offset, 0px) + 7px)) rotate(var(--gun-angle, 0deg)) scaleY(var(--gun-pitch-scale, 1)); }
  100% { transform: translateX(-50%) translateY(var(--gun-pitch-offset, 0px)) rotate(var(--gun-angle, 0deg)) scaleY(var(--gun-pitch-scale, 1)); }
}

@keyframes fps-sprite-recoil {
  45% { transform: translateX(-50%) translateY(calc(var(--gun-pitch-offset, 0px) + 7px)) scaleY(var(--gun-pitch-scale, 1)) scale(.985); }
  100% { transform: translateX(-50%) translateY(var(--gun-pitch-offset, 0px)) scaleY(var(--gun-pitch-scale, 1)) scale(1); }
}

.power-item {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: #06234c;
  background: radial-gradient(circle, #fff 0 17%, #9dffff 18% 34%, #29c9ff 35% 58%, #0866ce 59% 76%, #f8dc50 77% 100%);
  border: 3px solid #eaffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #fff, 0 0 20px #27c9ff, 0 6px 9px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  will-change: transform;
}

.power-item span { font-size: 1.65rem; line-height: 1; filter: drop-shadow(0 1px #fff); }
.power-item .item-art {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  transform: translateY(-4px);
}
.power-item .item-art img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .34));
}
.power-item.ammo-up .item-art img { width: 52px; height: 58px; }
.power-item.missile-up .item-art img { width: 60px; height: 60px; }
.power-item.bomb-up .item-art img { width: 58px; height: 58px; }
.power-item b { position: absolute; bottom: 14px; font-size: 0.52rem; letter-spacing: 0.03em; }
.power-item em {
  position: absolute;
  bottom: 3px;
  padding: 0 0.28rem;
  color: #fff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 1000;
  background: rgba(2, 29, 72, 0.72);
  border-radius: 999px;
}
.power-item.ammo-up {
  color: #053f24;
  background: radial-gradient(circle, #fff 0 16%, #a8ffba 17% 34%, #39df7a 35% 62%, #08783d 63% 100%);
  border-color: #caffcf;
  box-shadow: 0 0 8px #fff, 0 0 22px #39e87f, 0 6px 9px rgba(0, 0, 0, 0.42);
}

.power-item.missile-up {
  color: #2b1437;
  background: radial-gradient(circle, #fff 0 16%, #f1d0ff 17% 34%, #b969ff 35% 62%, #542077 63% 100%);
  border-color: #f7ddff;
  box-shadow: 0 0 8px #fff, 0 0 24px #b353ff, 0 6px 9px rgba(0, 0, 0, .42);
}

.power-item.bomb-up {
  color: #461708;
  background: radial-gradient(circle, #fff 0 16%, #fff090 17% 34%, #ff8a2b 35% 62%, #9b2116 63% 100%);
  border-color: #fff0a3;
  box-shadow: 0 0 8px #fff, 0 0 26px #ff6c24, 0 6px 9px rgba(0, 0, 0, .42);
}

.power-item.is-locked { filter: brightness(1.45); }
.power-item.damage-flash { animation: item-damage 160ms ease; }
.power-item.is-collected { animation: item-collected 220ms ease forwards !important; }
.hit-effect.power { color: #8ff9ff; font-size: 1.55rem; text-shadow: 0 3px 0 #083773, 0 0 18px #33dfff; }
.hit-effect.power.reset { color: #ffe36b; text-shadow: 0 3px 0 #7b1f22, 0 0 18px #ff5a3b; }
.hit-effect.ammo { color: #aaffbd; font-size: 1.45rem; text-shadow: 0 3px 0 #07532b, 0 0 18px #3cff84; }
.hit-effect.missile { color: #baffbd; font-size: 1.5rem; text-shadow: 0 3px 0 #174421, 0 0 18px #55ff76; }
.hit-effect.bomb,
.hit-effect.special { color: #fff18c; font-size: 1.42rem; text-shadow: 0 3px 0 #8a2712, 0 0 20px #ff642c; }

.target.missile-locked,
.power-item.missile-locked {
  outline: 4px solid rgba(126, 255, 134, .92);
  outline-offset: 8px;
  box-shadow: 0 0 0 12px rgba(67, 255, 105, .14), 0 0 28px #35ff72;
}

.homing-missile,
.screen-bomb {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

/* Shared lock presentation: four L-shaped corners with open side centers. */
.target.missile-locked,
.power-item.missile-locked,
.train-interior-actor.missile-locked,
.train-air-actor.missile-locked { outline: none; box-shadow: none; }
.missile-locked::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(#7eff86,#7eff86) left top / 28% 3px,
    linear-gradient(#7eff86,#7eff86) right top / 28% 3px,
    linear-gradient(#7eff86,#7eff86) left bottom / 28% 3px,
    linear-gradient(#7eff86,#7eff86) right bottom / 28% 3px,
    linear-gradient(#7eff86,#7eff86) left top / 3px 28%,
    linear-gradient(#7eff86,#7eff86) right top / 3px 28%,
    linear-gradient(#7eff86,#7eff86) left bottom / 3px 28%,
    linear-gradient(#7eff86,#7eff86) right bottom / 3px 28%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px #35ff72);
}
.power-item.missile-locked::before {
  transform: rotate(var(--item-lock-counter-rotation, 0deg));
  transform-origin: center;
}
.missile-body {
  position: absolute;
  left: -18px;
  top: -5px;
  width: 36px;
  height: 10px;
  border-radius: 70% 48% 48% 70%;
  background: linear-gradient(#fff7d5 0 18%, #d7dce3 20% 55%, #687483 58% 100%);
  border: 1px solid #202d3a;
  box-shadow: 0 0 8px #ffeb97;
}
.missile-body::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 1px;
  border-width: 4px 0 4px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #ff9b23;
  filter: drop-shadow(0 0 5px #ffdd4e);
}
.missile-smoke {
  position: absolute;
  right: 10px;
  top: -17px;
  width: 122px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 84% 50%, rgba(255,255,255,.98) 0 18%, transparent 40%),
    radial-gradient(ellipse at 59% 42%, rgba(207,222,231,.9) 0 21%, transparent 49%),
    radial-gradient(ellipse at 27% 62%, rgba(105,126,141,.76) 0 20%, transparent 52%);
  filter: blur(4.5px);
  opacity: 1;
  transform-origin: right center;
  animation: smoke-pulse 80ms ease-in-out infinite alternate;
}
.missile-smoke::before,
.missile-smoke::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(230, 240, 245, .72);
  filter: blur(5px);
}
.missile-smoke::before { left: 19px; top: -9px; width: 48px; height: 39px; }
.missile-smoke::after { left: 61px; top: 10px; width: 44px; height: 35px; }
.missile-smoke-particle {
  position: absolute;
  z-index: 19;
  width: var(--smoke-size, 72px);
  height: var(--smoke-size, 72px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,253,255,.96) 0 23%, rgba(166,186,199,.78) 44%, rgba(74,94,108,0) 76%);
  filter: blur(2px);
  pointer-events: none;
  animation: smoke-trail 1s ease-out forwards;
}
.screen-bomb img {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,150,55,.42));
}
.special-explosion {
  position: absolute;
  z-index: 21;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 10%, #fff36d 13% 27%, #ff6b24 30% 52%, rgba(219,29,20,.5) 55% 66%, transparent 70%);
  pointer-events: none;
  animation: special-explode 650ms ease-out forwards;
}
.special-explosion.bomb-explosion { width: 88px; height: 88px; animation-name: bomb-explode; animation-duration: 950ms; }
.game-area.bomb-shake { animation: bomb-shake 320ms ease-out; }

.reload-indicator {
  position: absolute;
  z-index: 22;
  top: 50%;
  left: 50%;
  display: none;
  width: min(78%, 280px);
  transform: translate(-50%, -50%);
  padding: 0.8rem 1rem;
  color: #fff7ca;
  text-align: center;
  background: rgba(55, 24, 18, 0.88);
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.reload-indicator.is-visible { display: grid; gap: 0.22rem; }
.reload-indicator strong { color: #ffd950; font: 900 1.65rem/1 Georgia, serif; letter-spacing: 0.12em; }
.reload-indicator span { font-weight: 900; }
.reload-indicator i { display: block; height: 7px; margin-top: 0.35rem; overflow: hidden; background: #25120e; border-radius: 999px; }
.reload-indicator b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ef8d2e, #fff074); animation: reload-progress 1.5s linear forwards; }

/* 背景だけでなく、的の配色も5ステージごとに変化します。 */
.game-area[data-stage-theme="2"] .target {
  background: radial-gradient(circle, #dfff57 0 17%, #542378 18% 34%, #f7d9ff 35% 52%, #17846f 53% 71%, #f3ffbd 72% 100%);
}

.game-area[data-stage-theme="3"] .target {
  background: radial-gradient(circle, #fff4b5 0 17%, #176ac2 18% 34%, #d8f7ff 35% 52%, #e14d55 53% 71%, #b8ddff 72% 100%);
}

.game-area[data-stage-theme="4"] .target {
  background: radial-gradient(circle, #ffed65 0 17%, #20263a 18% 34%, #ffd2b6 35% 52%, #e45f38 53% 71%, #fff2c7 72% 100%);
}

.game-area[data-stage-theme="5"] .target {
  background: radial-gradient(circle, #ffffff 0 17%, #db2f83 18% 34%, #ffe3f2 35% 52%, #ebad20 53% 71%, #63285c 72% 100%);
}

.target::after {
  content: none;
  display: none;
}

.target.abu-target {
  width: var(--target-size);
  height: var(--abu-height);
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 4px rgba(35, 24, 18, .34));
}

.target.abu-target::after { content: none; }

.target.abu-target img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  user-select: none;
  pointer-events: none;
}

.target.abu-target.is-flying img {
  filter: drop-shadow(0 0 5px rgba(180, 235, 255, .58));
}

.target.abu-target.is-perched img {
  filter: drop-shadow(0 4px 2px rgba(43, 25, 15, .35));
}

.target.abu-target.abu-mecha {
  filter: drop-shadow(0 5px 5px rgba(31, 39, 48, .44));
}

.target.abu-target.abu-commander {
  z-index: 7;
  filter: drop-shadow(0 8px 8px rgba(29, 12, 10, .5));
}

.target.abu-target.abu-commander.is-entering img {
  animation: commander-entry 700ms cubic-bezier(.2, .9, .28, 1) both;
  filter: drop-shadow(0 0 18px rgba(255, 62, 34, .95));
}

.target.abu-target.abu-commander.is-damaged img {
  filter: drop-shadow(0 0 9px rgba(255, 72, 37, .62));
}

.target.abu-target.abu-commander.commander-hit img {
  animation: commander-impact 80ms ease-out;
}

.target.abu-target.abu-commander.is-escaping img {
  filter: drop-shadow(-18px 4px 9px rgba(255, 86, 45, .52));
}

.target.abu-target.abu-commander.is-creeping img {
  filter: drop-shadow(0 0 10px rgba(255, 103, 55, .56));
}

.target.abu-target.abu-commander.is-destroyed {
  z-index: 10;
  pointer-events: none;
  animation: commander-destroyed 1200ms ease-in forwards;
}

.target.abu-target.abu-commander.is-destroyed .hp-label,
.target.abu-target.abu-commander.is-destroyed .giant-hp-bar {
  display: none;
}

.target.abu-target.abu-commander .hp-label {
  right: 12%;
  bottom: -11px;
  color: #fff;
  background: rgba(100, 12, 14, .92);
}

.target.abu-target .hp-label {
  right: 4px;
  bottom: -7px;
  color: #fff4c3;
  background: rgba(61, 21, 17, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.target.abu-target.damage-flash {
  animation: none;
}

.target.abu-target.damage-flash img {
  animation: abu-outline-damage 180ms ease;
}

.center-hit-zone {
  position: absolute;
  z-index: 2;
  top: 28%;
  left: 28%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
}

.target.hit {
  pointer-events: none;
  animation: target-hit 240ms ease forwards;
}

.hit-effect {
  position: absolute;
  z-index: 20;
  display: none;
  transform: translate(-50%, -50%);
  color: #fff9dd;
  font: 1000 1.4rem/1 system-ui, sans-serif;
  text-shadow: 0 3px 0 var(--red-dark), 0 0 12px var(--gold);
  pointer-events: none;
}

.hit-effect.show {
  display: block;
  animation: score-pop 500ms ease-out forwards;
}
.hit-effect.score { font-size: 1.9rem; white-space: nowrap; }

.hit-effect.power.show,
.hit-effect.ammo.show {
  animation-duration: 1.2s;
}

.hit-effect.center {
  color: #fff46a;
  font-size: 1.65rem;
  text-shadow: 0 3px 0 #7a1f18, 0 0 18px #fff07a;
}

.hit-effect.great {
  color: transparent;
  font: 800 20px/1 system-ui, sans-serif;
  background: linear-gradient(90deg, #ff6f91 0%, #ffbf66 20%, #fff47a 40%, #70ef9a 60%, #69d9ff 80%, #c991ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px #b9fff3);
}

.final-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.75rem 0 0;
  color: var(--red);
}

.reached-stage {
  margin: .6rem 0 1rem;
  color: var(--red);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.reached-stage strong {
  font: 900 3rem/1 Georgia, serif;
}

.result-label {
  margin: 0;
  color: #755347;
  font-size: .78rem;
  font-weight: 800;
}

.clear-card { animation: clear-bounce 420ms cubic-bezier(.2, 1.5, .45, 1); }
.clear-stars { margin: 0 0 .45rem; color: var(--gold); font-size: 1.45rem; letter-spacing: .25em; }
.next-hint { margin: 1rem 0 0; color: #755347; font-weight: 800; }

.final-score strong { font: 900 3.65rem/1 Georgia, serif; }
.final-score span { font-weight: 900; }
.result-message { margin: 0.6rem 0 1.4rem; font-weight: 800; }

.game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 30;
  isolation: isolate;
  gap: 0.65rem;
  min-height: 58px;
  padding: 0.65rem max(1rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  color: #ffefc2;
  background: #43251b;
}

.ammo-wrap {
  display: none;
  grid-template-columns: auto minmax(90px, 230px) auto;
  align-items: center;
  gap: .6rem;
  flex: 1 1 auto;
  width: min(100%, 480px);
  min-width: 0;
  font-size: .75rem;
  font-weight: 800;
}

.ammo-track {
  height: 12px;
  overflow: hidden;
  background: #24140f;
  border: 2px solid #916448;
  border-radius: 999px;
}

.ammo-track.ammo-gained {
  animation: ammo-gained-pulse 560ms ease;
}

.power-status.hud-gained,
.ammo-status.hud-gained {
  animation: hud-gained-pulse 1.2s ease-in-out;
}

.ammo-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #fff087);
  border-radius: inherit;
  transition: width 180ms ease;
}

#ammo-count { white-space: nowrap; color: #ffdc6d; font-variant-numeric: tabular-nums; }

.footer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
}

.sound-button {
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  color: #fff3cc;
  font-size: 0.78rem;
  font-weight: 800;
  background: #68402f;
  border: 1px solid #916448;
  border-radius: 8px;
  cursor: pointer;
}

.sound-button:hover { filter: brightness(1.08); }

@keyframes target-pop {
  from { transform: scale(0.15); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes target-hit {
  0% { filter: brightness(1); }
  35% { filter: brightness(2.15) drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #86eeff); }
  100% { transform: scale(0.3) rotate(28deg); opacity: 0; filter: brightness(1); }
}

@keyframes score-pop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  25% { transform: translate(-50%, -80%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(0.95); opacity: 0; }
}

@keyframes clear-bounce {
  from { transform: scale(.55) rotate(-3deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes projectile-flight {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) scale(1);
    opacity: 1;
  }
  92% { opacity: 1; }
  100% {
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(0.24);
    opacity: 0.82;
  }
}
@keyframes lock-search {
  from { transform: translate(-50%, -50%) scale(.96); opacity: .82; }
  to { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes weapon-pop { from { transform: scale(.7); opacity: 0; } }
@keyframes condition-range-aim {
  0% { transform:translate(-58px,-50%); opacity:0; }
  10% { opacity:1; }
  43%, 70% { transform:translate(-50%,-50%); opacity:1; }
  78%, 100% { transform:translate(-50%,-50%); opacity:0; }
}
@keyframes condition-range-projectile {
  0%, 51% { transform:translate(-50%,64px) scale(1.35); opacity:0; }
  54% { transform:translate(-50%,64px) scale(1.35); opacity:1; }
  69% { transform:translate(-50%,-50%) scale(.35); opacity:1; }
  70%, 100% { transform:translate(-50%,-50%) scale(.2); opacity:0; }
}
@keyframes condition-range-impact {
  0%, 68% { transform:translate(-50%,-50%) scale(.2); opacity:0; box-shadow:none; }
  71% { opacity:1; box-shadow:0 0 10px #fff,0 0 22px #86eeff; }
  87%, 100% { transform:translate(-50%,-50%) scale(4); opacity:0; box-shadow:0 0 15px #86eeff; }
}
@keyframes condition-range-target-hit {
  0%, 68% { transform:scale(1) rotate(0); opacity:1; filter:brightness(1); }
  73% { transform:scale(1.08); opacity:1; filter:brightness(2.2) drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #86eeff); }
  91%, 100% { transform:scale(.2) rotate(24deg); opacity:0; filter:brightness(1); }
}
@keyframes weapon-missile-acquired {
  0%, 100% { transform: scale(1); }
  18%, 58% { transform: scale(1.1); border-color: #e2b0ff; box-shadow: 0 0 24px #c35dff, inset 0 0 18px rgba(202, 104, 255, .48); }
  38%, 78% { transform: scale(1.03); box-shadow: 0 0 15px #9b38e5, inset 0 0 12px rgba(185, 72, 255, .32); }
}
@keyframes weapon-bomb-acquired {
  0%, 100% { transform: scale(1); }
  18%, 58% { transform: scale(1.1); border-color: #ffc16f; box-shadow: 0 0 24px #ff8a2a, inset 0 0 18px rgba(255, 139, 42, .48); }
  38%, 78% { transform: scale(1.03); box-shadow: 0 0 15px #ef6e13, inset 0 0 12px rgba(255, 132, 35, .32); }
}
@keyframes smoke-pulse {
  from { transform: scale(var(--missile-smoke-scale, 1)) scaleX(.96) scaleY(.92); opacity: .9; }
  to { transform: scale(var(--missile-smoke-scale, 1)) scaleX(1.08) scaleY(1.12); opacity: .68; }
}
@keyframes smoke-trail {
  0% { transform: translate(-50%, -50%) scale(.72); opacity: .9; }
  45% { opacity: .72; }
  100% { transform: translate(calc(-50% + var(--smoke-drift)), calc(-50% - 18px)) scale(1.35); opacity: 0; }
}
@keyframes special-explode { from { transform: translate(-50%, -50%) scale(.25); opacity: 1; } to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }
@keyframes bomb-explode { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 45% { opacity: 1; } to { transform: translate(-50%, -50%) scale(7); opacity: 0; } }
@keyframes bomb-shake { 20% { transform: translate(-5px,3px); } 45% { transform: translate(5px,-2px); } 70% { transform: translate(-3px,1px); } }

@keyframes item-collected {
  to { transform: scale(0.15) rotate(25deg); opacity: 0; }
}

@keyframes item-damage {
  50% { filter: brightness(2.1); box-shadow: 0 0 14px #fff, 0 0 28px #86eeff; }
}

@keyframes ammo-gained-pulse {
  0%, 100% { filter: none; }
  42% { filter: brightness(1.65) drop-shadow(0 0 8px #ffe36d); }
}

@keyframes hud-gained-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  12%, 46%, 80% { transform: scale(1.12); filter: brightness(1.9) drop-shadow(0 0 13px #fff27a); }
  29%, 63% { transform: scale(1.02); filter: brightness(1.12) drop-shadow(0 0 4px #ffe36d); }
}

@keyframes abu-outline-damage {
  0%, 100% { filter: none; }
  48% {
    filter:
      brightness(2.05)
      drop-shadow(0 0 3px rgba(255, 255, 255, .98))
      drop-shadow(0 0 9px rgba(122, 226, 255, .95))
      drop-shadow(0 0 18px rgba(48, 160, 255, .82));
  }
}

@keyframes reload-progress { to { width: 100%; } }

@keyframes scenery-zoom {
  from { transform: translateY(0) scale(1.01); }
  to { transform: translateY(3%) scale(1.68); }
}

@container ponyland-game (max-width: 520px) {
  .game-header { min-height: 80px; }
  .brand-kicker { font-size: 0.62rem; }
  .status-panel { gap: 0.55rem; padding: 0.45rem 0.65rem; }
  .status-label { font-size: 0.66rem; }
  .status-unit { font-size: 0.65rem; }
  .back-wall { top: 66px; font-size: 0.78rem; white-space: nowrap; }
  .power-status { top: 108px; right: 8px; width: 92px; padding: .3rem .5rem; }
  .ammo-status { top: 162px; right: 8px; width: 92px; padding: .3rem .5rem .45rem; }
  .weapon-status { top: 6px; right: 6px; bottom: auto; grid-template-columns: 62px; width: 78px; padding: .22rem .28rem .3rem; }
  .weapon-status img { width: 62px; height: 42px; }
  .weapon-status.weapon-rifle { grid-template-columns: 126px; width: 142px; }
  .weapon-status.weapon-rifle img { width: 126px; height: 42px; }
  .ammo-wrap { grid-template-columns: auto minmax(70px, 1fr) auto; gap: .4rem; }
  .ammo-label { display: inline; }
  .sound-button { padding-inline: .55rem; }
  .game-footer { gap: .45rem; padding-inline: .65rem; }
}

.privacy-link {
  min-height: 32px;
  padding: .42rem .68rem;
  color: #fff8e7;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.55;
  text-decoration: none;
  background: #604036;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
}

.comments-link,
.comments-link:link,
.comments-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #492318;
  -webkit-text-fill-color: #492318;
  background-color: #edbd4e;
  background-image: linear-gradient(#ffe88c, #edbd4e);
  border-color: #fff0bd;
  box-shadow: 0 2px 0 #9b6428;
}

/* ===== 差し替え可能なキャンペーン広告 ===== */
.campaign-mini-ad { position:relative; width:min(100%,330px); height:92px; margin:.7rem auto 0; padding:0; display:block; overflow:hidden; border:3px solid #fff; border-radius:15px; background:#dff4ff; color:#842c20; box-shadow:0 5px 12px #3c1d1238; text-align:left; cursor:pointer; isolation:isolate; }
.campaign-mini-ad::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,transparent 0 30%,#f5fbffd9 44%,#edf9fff2 100%); pointer-events:none; }
.campaign-mini-ad img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; background:#dff4ff; }
.campaign-mini-ad span { position:absolute; z-index:2; left:31%; right:38px; top:7px; bottom:5px; display:flex; flex-direction:column; justify-content:center; }
.campaign-mini-ad strong { display:block; line-height:1.02; letter-spacing:-.035em; font-family:"Noto Sans JP","Yu Gothic",sans-serif; font-weight:900; text-align:center; }
.campaign-mini-ad strong b,.campaign-mini-ad strong em { display:block; color:#e63b2e; font-style:normal; paint-order:stroke fill; }
.campaign-mini-ad strong b { font-size:.96rem; font-weight:900; -webkit-text-stroke:1px #fff; text-shadow:1px 1px 1px #6d321f55; }
.campaign-mini-ad strong em { margin-top:1px; font-size:1.26rem; font-weight:900; -webkit-text-stroke:1.5px #fff; text-shadow:1px 1px 1px #6d321f55; }
.campaign-mini-ad small { margin-top:4px; color:#3b2a20; font-family:"Noto Sans JP","Yu Gothic",sans-serif; font-size:.62rem; font-weight:700; line-height:1.12; text-align:center; letter-spacing:-.025em; text-shadow:1px 0 #fff,-1px 0 #fff,0 1px #fff; }
.campaign-mini-ad i { position:absolute; z-index:3; right:7px; top:50%; display:grid; place-items:center; width:30px; height:30px; overflow:hidden; border-radius:50%; background:linear-gradient(#8d5a36,#5f331f); color:transparent; font-size:0; box-shadow:inset 0 0 0 2px #b98a61,0 2px 3px #4b281c66; transform:translateY(-50%); }
.campaign-mini-ad i::before { content:""; display:block; box-sizing:border-box; width:9px; height:9px; margin-left:-2px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:translateY(4px) rotate(-45deg); filter:drop-shadow(1px 1px 0 #49251566); }
.game-over-actions .campaign-mini-ad { margin-top: .25rem; }
.campaign-mini-ad[hidden] { display:none; }
.campaign-ad-rotation { width:min(100%,330px); margin:.7rem auto 0; text-align:center; }
.campaign-ad-rotation .campaign-mini-ad { margin:0 auto; }
.game-over-actions .campaign-ad-rotation { margin-top:.25rem; }
.real-shooting-mini-ad::after { background:linear-gradient(90deg,transparent 0 30%,#fff1d7c9 46%,#fff8e8f5 100%); }
.real-shooting-mini-ad img { width:108%; object-position:center center; transform:translateX(calc(-3% - 10px)); }
.real-shooting-mini-ad span { left:29%; right:39px; top:5px; bottom:5px; }
.real-shooting-mini-ad::before { content:"広告"; position:absolute; z-index:4; top:5px; left:6px; padding:2px 6px; border-radius:5px; background:#563227d9; color:#fff; font-size:.58rem; font-weight:900; line-height:1.2; }
.real-shooting-mini-ad strong b,.real-shooting-mini-ad strong em { color:#9e291d; }
.real-shooting-mini-ad strong b { font-size:.975rem; letter-spacing:.03em; }
.real-shooting-mini-ad strong em { font-size:0; }
.real-shooting-mini-ad .real-shooting-headline { display:flex; align-items:baseline; justify-content:center; margin-top:1px; white-space:nowrap; }
.real-shooting-mini-ad .real-shooting-headline span { position:static; inset:auto; display:inline; flex:none; }
.real-shooting-mini-ad .real-shooting-focus { color:#a51f18; font-size:1.62rem; font-weight:1000; line-height:.95; letter-spacing:-.08em; -webkit-text-stroke:1px #fff; text-shadow:1px 1px 1px #6d321f55; }
.real-shooting-mini-ad .real-shooting-particle { margin:0 1px; color:#57351d; font-size:.78rem; font-weight:900; letter-spacing:0; -webkit-text-stroke:0; text-shadow:0 1px #fff; transform:translateY(-1px); }
.real-shooting-mini-ad .real-shooting-action { margin-left:2px; color:#d34824; font-size:1.08rem; font-weight:1000; letter-spacing:-.06em; -webkit-text-stroke:.7px #fff; text-shadow:1px 1px 1px #6d321f44; }
.real-shooting-mini-ad small { color:#57351d; }
.real-shooting-mini-ad small + small { margin-top:1px; }
.campaign-overlay { position: absolute; z-index: 200; inset: 0; display: none; overflow: hidden; background: #dff3ff; color: #4a291b; }
.campaign-overlay.is-visible { display: block; }
.campaign-page { position: absolute; inset: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.campaign-page[hidden] { display: none; }
.campaign-page button { font-family: inherit; }
.campaign-primary,.campaign-secondary,.campaign-back-button { display: block; width: min(330px,calc(100% - 36px)); min-height: 50px; margin: 10px auto 0; border-radius: 25px; font-weight: 900; cursor: pointer; }
.campaign-primary { border: 3px solid #fff; background: linear-gradient(#ff6770,#eb294d); color: #fff; font-size: 1rem; box-shadow: 0 5px 0 #a71e34,0 7px 12px #5a1e2840; }
.campaign-primary:disabled { filter: grayscale(.8); opacity: .55; cursor: default; }
.campaign-secondary { border: 2px solid #9d6b48; background: #fff7e8; color: #714328; font-size: .86rem; }
.campaign-back-button { border: 3px solid #fff; background: #516f89; color: #fff; font-size: 1rem; box-shadow: 0 5px 0 #314b62,0 7px 12px #263c5040; }
.campaign-hero,.warehouse-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign-intro::after { content:""; position: absolute; inset: 0; background: linear-gradient(#eaf8ffb8 0 28%,transparent 50%,#edf8ff 91%); pointer-events:none; }
.campaign-intro-copy { position: relative; z-index: 1; padding: 45px 8px 0; text-align: center; color: #163b5d; text-shadow: 0 2px #fff,1px 0 #fff,-1px 0 #fff; }
.campaign-intro-copy>p:first-child { margin: 0; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size: 2.32rem; font-weight: 900; line-height:1.08; letter-spacing:-.07em; white-space:nowrap; }
.campaign-intro-copy h2 { margin: 0; color: #ef3d48; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size: 3.225rem; font-weight:900; line-height: 1.08; letter-spacing:0; white-space:nowrap; transform:none; }
.campaign-intro-copy h2 span { color: #f08a24; }
.campaign-intro-copy h2 small { font-size:.6em; font-weight:inherit; }
.campaign-intro-copy>p:last-child { margin: 12px 0 0; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:.92rem; font-weight:900; line-height:1.45; letter-spacing:-.03em; white-space:nowrap; }
.campaign-bottom-actions { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px; }
.campaign-intro #campaign-warehouse-button,.campaign-intro .campaign-back-button { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-weight:900; }

.shooting-ad-page { padding:clamp(16px,4vw,28px) 0 28px; background:linear-gradient(180deg,#fff9eb,#f4dfb8); color:#47281c; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; text-align:center; }
.shooting-ad-heading { padding:0 15px 13px; }
.shooting-ad-heading>span { display:inline-block; padding:4px 10px; border:1px solid #b68457; border-radius:20px; background:#fff; color:#79502f; font-size:.72rem; font-weight:800; }
.shooting-ad-heading h2 { margin:12px 0 5px; color:#81261f; font-size:clamp(1.42rem,6vw,2rem); font-weight:900; line-height:1.25; letter-spacing:-.04em; }
.shooting-ad-heading>p { margin:0; color:#64452f; font-size:1rem; font-weight:800; }
.shooting-ad-photo { width:min(100% - 28px,520px); margin:0 auto 14px; padding:5px; border:2px solid #ac7443; border-radius:13px; background:#fff; box-shadow:0 4px 9px #57391e30; }
.shooting-ad-photo img { display:block; width:100%; max-height:58vh; border-radius:8px; object-fit:contain; background:#e4d3b8; }
.shooting-ad-photo-main img { aspect-ratio:4/5; max-height:none; object-fit:cover; object-position:center top; }
.shooting-ad-photo figcaption { padding:4px 0 1px; color:#72583d; font-size:.7rem; }
.shooting-ad-content { width:min(100% - 32px,520px); margin:0 auto; text-align:left; }
.shooting-ad-content>p { margin:0 auto 13px; font-size:.92rem; font-weight:700; line-height:1.7; }
.shooting-ad-attractions { margin:0 0 14px; padding:12px 11px; border:1px solid #d5ad77; border-radius:12px; background:#fffaf0; text-align:center; }
.shooting-ad-attractions h3 { margin:0 0 9px; color:#7f3024; font-size:1rem; font-weight:900; }
.shooting-ad-attractions ul { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0; padding:0; list-style:none; }
.shooting-ad-attractions li { padding:5px 9px; border-radius:14px; background:#e7f2d2; color:#405b27; font-size:.74rem; font-weight:900; }
.shooting-ad-content>.shooting-ad-photo-wide { width:100%; margin:0 auto 16px; }
.shooting-ad-photo-wide img { aspect-ratio:3/2; max-height:none; object-fit:cover; object-position:center; }
.shooting-ad-price { padding:15px 12px 13px; border:3px solid #9a3627; border-radius:14px; background:linear-gradient(135deg,#fff3d3,#ffe7a7); color:#70231a; text-align:center; box-shadow:0 4px 0 #68241c,0 7px 12px #64331d25; }
.shooting-ad-price>strong { display:block; color:#b33a26; font-size:1.04rem; font-weight:900; }
.shooting-ad-price>b { display:block; margin:4px 0; color:#9c271d; font-size:clamp(1.6rem,8vw,2.15rem); font-weight:900; line-height:1.12; text-shadow:0 1px #fff; }
.shooting-ad-price>b span:first-child { font-size:.62em; letter-spacing:.08em; }
.shooting-ad-price>b .shooting-ad-price-amount { font-size:.82em; letter-spacing:-.03em; }
.shooting-ad-price>p { margin:7px 0 2px; font-size:.86rem; font-weight:800; line-height:1.5; }
.shooting-ad-price>small { color:#765740; font-size:.7rem; }
.shooting-ad-location { margin:16px 0 0; padding:14px 13px; border:1px solid #c8aa82; border-radius:12px; background:#fffdf8; }
.shooting-ad-location h3 { margin:0 0 5px; color:#6b2a1f; font-size:1.1rem; }
.shooting-ad-location address { font-style:normal; font-size:.9rem; line-height:1.55; }
.shooting-ad-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px; }
.shooting-ad-links a { display:grid; min-height:42px; place-items:center; border:1px solid #a06d43; border-radius:8px; background:#fff3df; color:#643923; font-size:.79rem; font-weight:900; text-decoration:none; }
.shooting-ad-links a:last-child { grid-column:1/-1; }
.shooting-ad-location>small { color:#6b5a48; font-size:.7rem; line-height:1.4; }
.shooting-ad-back { position:relative; margin-top:18px; }

/* ===== 牧場Cafe広告 ===== */
.cafe-mini-ad { background:#4c2d1d; color:#fff4d8; }
.cafe-mini-ad::before,.pony-visit-mini-ad::before { content:"広告"; position:absolute; z-index:4; top:5px; left:6px; padding:2px 6px; border-radius:5px; background:#40251bd9; color:#fff; font-size:.58rem; font-weight:900; line-height:1.2; }
.cafe-mini-ad::after { background:linear-gradient(90deg,transparent 0 29%,#4d2d1dcc 47%,#382014fa 100%); }
.cafe-mini-ad img { width:47%; object-position:center; }
.cafe-mini-ad span { left:calc(43% - 2.04rem); right:38px; top:6px; bottom:5px; }
.cafe-mini-ad strong b { color:#ffe1a5; font-size:.68rem; letter-spacing:.01em; -webkit-text-stroke:0; text-shadow:none; }
.cafe-mini-ad strong em { color:#fff4d8; font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif; font-size:1.35rem; letter-spacing:.02em; -webkit-text-stroke:0; text-shadow:0 2px 2px #1d0d08; transform:translateX(.69rem); }
.cafe-mini-ad small { color:#fff4d8; font-size:.58rem; letter-spacing:-.04em; text-shadow:0 1px #27140c; transform:translateX(-.44rem); }

.cafe-ad-page { padding:0 0 28px; background:linear-gradient(180deg,#fffaf0,#efe0c5); color:#392a1e; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; }
.cafe-ad-hero { position:relative; min-height:305px; display:grid; align-content:end; overflow:hidden; }
.cafe-ad-hero::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,transparent 25%,#2c170db8 72%,#241109ed); }
.cafe-ad-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.cafe-ad-hero>div { position:relative; z-index:2; padding:25px 24px; color:#fff8e9; text-align:left; }
.cafe-ad-hero span { font-size:.7rem; font-weight:900; letter-spacing:.14em; }
.cafe-ad-hero h2 { margin:4px 0 6px; color:inherit; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(1.65rem,7vw,2.15rem); font-weight:900; line-height:1.15; }
.cafe-ad-hero p { margin:0; font-size:.76rem; font-weight:700; line-height:1.55; }
.cafe-ad-content { width:min(100% - 28px,540px); margin:0 auto; padding:18px 0 0; }
.cafe-ad-content>h3 { margin:0 0 12px; color:#4a2c1c; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:1.35rem; text-align:center; }
.cafe-menu-photos { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.cafe-menu-photos figure { margin:0; overflow:hidden; border-radius:12px; background:#f4e7cb; box-shadow:0 3px 8px #4f311824; }
.cafe-menu-photos img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 45%; }
.cafe-menu-photos figcaption { padding:7px 5px 8px; color:#4a2c1c; font-size:.72rem; font-weight:900; text-align:center; }
.cafe-menu-panels { display:grid; grid-template-columns:1.18fr .82fr; gap:10px; margin-top:13px; }
.cafe-menu-board,.cafe-soft-card { border-radius:14px; padding:14px 12px; }
.cafe-menu-board { background:#392014; color:#fff1d2; box-shadow:inset 0 0 0 3px #ffffff12,0 3px 7px #3a211c2b; }
.cafe-menu-board h3,.cafe-soft-card h3 { margin:0 0 7px; font-size:1rem; }
.cafe-menu-board dl { display:grid; grid-template-columns:1fr auto; gap:5px 8px; margin:0; font-size:.68rem; line-height:1.35; }
.cafe-menu-board dt,.cafe-menu-board dd { margin:0; }
.cafe-soft-card { display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,#f4d89d,#fff3d4); color:#4a2c1c; text-align:center; }
.cafe-soft-serve-image { display:block; width:88px; height:92px; margin:0 auto -2px; object-fit:contain; filter:drop-shadow(0 4px 3px #6542212b); }
.cafe-soft-card h3 { margin-top:5px; font-size:.78rem; }
.cafe-soft-card strong { font-size:.86rem; }
.cafe-soft-card b { color:#7a351f; font-size:1.3rem; }
.cafe-soft-card p { margin:4px 0 0; font-size:.62rem; font-weight:800; }
.cafe-ad-note { margin:11px 3px 0; color:#735f4f; font-size:.62rem; line-height:1.45; text-align:center; }
.cafe-official-link { display:grid; width:min(280px,calc(100% - 36px)); min-height:48px; margin:13px auto 0; place-items:center; border:3px solid #fff; border-radius:25px; background:#56744c; color:#fff; font-size:.84rem; font-weight:900; text-decoration:none; box-shadow:0 4px 0 #344b2f,0 6px 10px #33472d33; }
.cafe-ad-back { margin-top:15px; }

/* ===== ポニー出張サービス広告 ===== */
.pony-visit-mini-ad { background:#4c281e; color:#fff6e8; }
.pony-visit-mini-ad::after { background:linear-gradient(90deg,transparent 0 28%,#542d20cf 49%,#3b1f18fa 100%); }
.pony-visit-mini-ad img { width:52%; object-position:center 54%; }
.pony-visit-mini-ad span { left:calc(43% - 2.3rem); right:38px; top:5px; bottom:5px; }
.pony-visit-mini-ad strong b { color:#ffe5bb; font-size:.7rem; letter-spacing:.05em; -webkit-text-stroke:0; text-shadow:0 1px #3b1f15; }
.pony-visit-mini-ad strong em { color:#fff9ec; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:1.15rem; line-height:1.05; letter-spacing:-.03em; -webkit-text-stroke:0; text-shadow:0 2px 2px #28120d; white-space:nowrap; }
.pony-visit-mini-ad small { color:#fff4df; font-size:.62rem; text-shadow:0 1px #29140d; }

.pony-visit-ad-page { padding:0 0 28px; background:linear-gradient(180deg,#fffaf1,#f1e5cf); color:#3b2b21; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; }
.pony-visit-hero { position:relative; min-height:340px; display:grid; align-content:end; overflow:hidden; }
.pony-visit-hero::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,transparent 26%,#3821168c 66%,#27130dde); }
.pony-visit-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.pony-visit-hero>div { position:relative; z-index:2; padding:26px 24px; color:#fff9ee; text-align:left; }
.pony-visit-hero span { font-size:.7rem; font-weight:900; letter-spacing:.13em; }
.pony-visit-hero h2 { margin:5px 0 0; color:inherit; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(1.55rem,6.6vw,2rem); font-weight:900; line-height:1.18; }
.pony-visit-content { width:min(100% - 28px,540px); margin:0 auto; padding:18px 0 0; }
.pony-visit-lead { margin:0 auto 15px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:1.08rem; font-weight:900; line-height:1.65; text-align:center; }
.pony-visit-points { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pony-visit-points section { min-height:92px; display:flex; padding:10px 8px; flex-direction:column; align-items:center; justify-content:center; border-radius:13px; background:#f2e7d2; text-align:center; }
.pony-visit-points strong { font-size:.78rem; }
.pony-visit-points small { margin-top:4px; color:#735f51; font-size:.58rem; line-height:1.45; }
.pony-visit-budget { display:grid; grid-template-columns:108px 1fr; gap:13px; align-items:center; margin-top:12px; padding:13px; border-radius:16px; background:linear-gradient(135deg,#f0ce86,#f8e7bd); color:#3e291a; }
.pony-visit-budget img { width:108px; height:108px; border-radius:50%; object-fit:cover; object-position:center 37%; box-shadow:0 5px 13px #56331f38; }
.pony-visit-budget h3 { margin:0; font-size:1.02rem; line-height:1.42; }
.pony-visit-budget p { margin:6px 0 0; font-size:.65rem; font-weight:700; line-height:1.5; }
.pony-visit-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.pony-visit-gallery img { width:100%; aspect-ratio:1/1; border-radius:10px; object-fit:cover; }
.pony-visit-gallery img:first-child { object-position:center 69%; }
.pony-visit-gallery img:nth-child(2) { object-position:center 55%; }
.pony-visit-gallery img:last-child { object-position:center 31%; }
.pony-visit-contact { margin-top:12px; padding:16px 12px; border-radius:16px; background:#592e22; color:#fff7e9; text-align:center; }
.pony-visit-contact small { display:block; font-size:.68rem; font-weight:800; letter-spacing:.08em; }
.pony-visit-contact>a:first-of-type { display:block; margin:4px 0 11px; color:#fff; font-size:clamp(1.45rem,7vw,1.9rem); font-weight:900; text-decoration:none; }
.pony-visit-contact>a:last-of-type { display:grid; width:min(240px,calc(100% - 30px)); min-height:44px; margin:0 auto; place-items:center; border-radius:22px; background:#56744c; color:#fff; font-size:.8rem; font-weight:900; text-decoration:none; }
.pony-visit-note { margin:10px 3px 0; color:#735f51; font-size:.62rem; line-height:1.45; text-align:center; }
.pony-visit-back { margin-top:15px; }

@media (max-width:420px) {
  .cafe-mini-ad span { left:calc(42% - 2.04rem); }
  .pony-visit-mini-ad span { left:calc(42% - 2.3rem); }
  .cafe-menu-panels { grid-template-columns:1fr; }
  .cafe-soft-card { min-height:175px; }
  .pony-visit-points { grid-template-columns:1fr; }
  .pony-visit-points section { min-height:68px; }
  .pony-visit-budget { grid-template-columns:92px 1fr; }
  .pony-visit-budget img { width:92px; height:92px; }
}

.warehouse-page { background: #4e2f1d; text-align: center; }
.warehouse-background { object-position: center top; }
.warehouse-page::after { content:""; position:absolute; inset:0; background:linear-gradient(#29130699 0 16%,transparent 39%,#3b1f11aa 70%); pointer-events:none; }
.warehouse-page>h2,.warehouse-lead { position:relative; z-index:2; color:#fff7d7; text-shadow:0 3px 2px #3f1708,2px 0 #3f1708,-2px 0 #3f1708; }
.warehouse-page>h2 { position:relative; display:inline-block; margin:26px 0 2px; padding:13px 36px 14px; border:6px solid #6f3b19; border-radius:13px; background:radial-gradient(ellipse at 16% 35%,#8c4e22 0 2px,transparent 3px),radial-gradient(ellipse at 84% 68%,#9a5828 0 3px,transparent 4px),repeating-linear-gradient(3deg,#efbd68 0 5px,#e6a957 6px 9px,#f3c776 10px 15px); color:#54280f; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1.98rem; font-weight:900; line-height:1.12; letter-spacing:-.04em; text-shadow:0 2px #ffe2a1,1px 0 #ffe2a1,-1px 0 #ffe2a1; box-shadow:inset 0 0 0 2px #f8d28b,0 5px 0 #47230f,0 8px 12px #1f0d0888; transform:none; }
.warehouse-page>h2::before,.warehouse-page>h2::after { content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f2c47b 0 18%,#74401f 25% 65%,#3d1d0d 70%); box-shadow:0 1px 1px #fff6; transform:translateY(-50%); }
.warehouse-page>h2::before { left:9px; }
.warehouse-page>h2::after { right:9px; }
.warehouse-lead { margin:5px 0; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1.14rem; font-weight:900; line-height:1.3; }
.warehouse-hay-stack { position:absolute; z-index:2; left:50%; top:156px; width:150px; height:150px; transform:translateX(-50%); pointer-events:none; }
html.mobile-portrait-layout .warehouse-hay-stack { top:163px; }
.warehouse-hay-stack img { position:absolute; width:35px; filter:drop-shadow(0 3px 2px #3e2108aa); }
.warehouse-hay-stack .feed-block-thin { filter:drop-shadow(0 1px 1px #3e210899); }
.warehouse-status-card { position:relative; z-index:3; width:calc(100% - 28px); margin:190px auto 22px; padding:15px 14px 17px; border:5px solid #865026; border-radius:15px; background:repeating-linear-gradient(0deg,#fff8e9f2 0 8px,#fcefd8f2 9px 10px),linear-gradient(#fffaf0f7,#f2d5a9f7); color:#4e2a18; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; box-shadow:inset 0 0 0 3px #e6bb79,inset 0 0 18px #b2743133,0 7px 0 #4f2915,0 11px 20px #1f0e08aa; }
.warehouse-status-card::before { content:""; position:absolute; inset:7px; border:1px solid #c99654; border-radius:8px; pointer-events:none; }
.warehouse-status-heading,.warehouse-current { display:flex; align-items:baseline; gap:7px; }
.warehouse-status-heading { position:relative; align-items:center; justify-content:space-between; border-bottom:2px solid #d2a36b; padding:1px 4px 9px; font-size:.86rem; font-weight:900; }
.warehouse-status-heading strong { color:#5b2918; font-size:1.04rem; }
.warehouse-status-heading span { position:relative; display:flex; min-width:172px; padding:5px 8px 4px 60px; flex-direction:column; align-items:center; border-radius:9px; background:#fffaf0d9; color:#6b3a22; text-align:center; box-shadow:inset 0 1px #fff,0 2px 4px #8650261c; }
.warehouse-status-heading span::before { content:""; position:absolute; left:8px; top:50%; width:46px; height:38px; background:url("assets/winter-feed-support/winter-feed-hay-stack-custom-mixed-v2.png") center/contain no-repeat; filter:drop-shadow(0 2px 1px #6a3d2166); transform:translateY(-50%); }
.warehouse-status-heading span small { margin-top:4px; color:#8f6242; font-size:.68rem; font-weight:700; line-height:1.15; white-space:nowrap; }
.warehouse-current { position:relative; padding:9px 4px 5px; }
.warehouse-current span,.warehouse-current b { font-size:.8rem; font-weight:900; }
.warehouse-current strong { color:#7a2c1e; font-size:2.25rem; line-height:1; text-shadow:0 1px #fff0cf; }
.warehouse-current em { margin-left:auto; color:#65321e; font-size:1rem; font-style:normal; font-weight:900; }
.warehouse-progress { position:relative; height:28px; overflow:hidden; border:3px solid #9b7148; border-radius:15px; background:linear-gradient(#e8dccb,#fffaf0 45%,#eadbc8); box-shadow:inset 0 2px 4px #5b351d55,0 1px #fff6; }
.warehouse-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(#b7ec69 0 18%,#78cb40 48%,#4fa92e 100%); box-shadow:inset 0 2px 2px #fff8,inset 0 -2px 2px #31751f88; transition:width .7s ease; }
#warehouse-goal-copy { position:relative; display:flex; min-height:70px; margin:10px 0 7px; padding:10px 8px 9px 70px; align-items:center; justify-content:center; border-top:2px solid #e0bc86; border-bottom:2px solid #e0bc86; color:#4d2b18; font-size:.78rem; font-weight:900; line-height:1.4; text-align:center; }
#warehouse-goal-copy::before { content:""; position:absolute; left:10px; top:50%; width:50px; height:50px; background:url("assets/winter-feed-support/winter-feed-hay-block-v1.png") center/contain no-repeat; filter:drop-shadow(0 3px 2px #6a3d2188); transform:translateY(-50%); }
#warehouse-goal-copy.is-empty { min-height:58px; padding:6px 8px; font-size:.86rem; }
#warehouse-goal-copy.is-empty::before { display:none; }

.support-page,.history-page { padding:22px 0; background:linear-gradient(#6e371a66,#6e371aaa),url("assets/winter-feed-support/winter-feed-warehouse-indoor-three-ponies-v1.jpg") center/cover fixed; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; }
.campaign-paper-card { width:calc(100% - 28px); margin:0 auto; padding:18px 13px; border:4px solid #9a6135; border-radius:17px; background:linear-gradient(#fff8e9f7,#f9e1bcf7); box-shadow:0 8px 20px #2d130b99; }
.campaign-paper-card h2 { margin:0; text-align:center; font-size:1.55rem; }
.support-page .campaign-paper-card h2 { position:relative; width:78%; margin:-6px auto 0; padding:9px 12px 10px; border:4px solid #6f3b19; border-radius:10px; background:radial-gradient(ellipse at 12% 35%,#8c4e22 0 2px,transparent 3px),radial-gradient(ellipse at 88% 68%,#9a5828 0 3px,transparent 4px),repeating-linear-gradient(3deg,#efbd68 0 5px,#e6a957 6px 9px,#f3c776 10px 15px); color:#54280f; -webkit-text-stroke:2px #fff; paint-order:stroke fill; text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff; box-shadow:inset 0 0 0 2px #f8d28b,0 4px 0 #47230f,0 6px 9px #1f0d0866; }
.support-page .campaign-paper-card h2::before,.support-page .campaign-paper-card h2::after,.history-heading::before,.history-heading::after { content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f2c47b 0 18%,#74401f 25% 65%,#3d1d0d 70%); box-shadow:0 1px 1px #fff6; transform:translateY(-50%); }
.support-page .campaign-paper-card h2::before,.history-heading::before { left:9px; }
.support-page .campaign-paper-card h2::after,.history-heading::after { right:9px; }
.support-lead { margin:14px 0 18px; text-align:center; font-size:1.08rem; font-weight:800; -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.support-amount-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.support-amount-options button { position:relative; min-height:76px; padding-left:44px; padding-right:8px; border:2px solid #dfc59f; border-radius:13px; background:#fff; color:#e85445; box-shadow:0 2px 4px #71442422; }
.support-amount-options button.is-selected { border-color:#ed3d54; background:#fff3f2; box-shadow:0 0 0 3px #ed3d5430; }
.feed-amount-100 { --feed-image:url("assets/winter-feed-support/winter-feed-hay-stack-100-wheat-v1.png"); }
.feed-amount-500 { --feed-image:url("assets/winter-feed-support/winter-feed-hay-stack-500-natural-v1.png"); }
.feed-amount-1000 { --feed-image:url("assets/winter-feed-support/winter-feed-hay-stack-1000-green-v1.png"); }
.feed-amount-custom { --feed-image:url("assets/winter-feed-support/winter-feed-hay-stack-custom-mixed-v2.png"); }
.support-card-feed { position:absolute; left:10px; top:50%; width:38px; height:34px; background:var(--feed-image) center/contain no-repeat; filter:drop-shadow(0 2px 1px #6a3d2166); transform:translateY(-50%); }
.support-amount-options strong,.support-amount-options small { display:block; }
.support-amount-options strong { font-size:1rem; }
.support-amount-options small { margin-top:4px; color:#a04b2d; font-weight:800; }
.support-field { display:block; margin-top:12px; font-size:.76rem; font-weight:900; }
.support-name-field { font-size:.936rem; -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.support-field[hidden] { display:none; }
.support-field small { color:#856953; }
.support-field input { box-sizing:border-box; width:100%; height:44px; margin-top:5px; padding:0 12px; border:2px solid #c7ad8b; border-radius:7px; background:#fff; color:#173f69; font:900 1.1rem inherit; text-transform:uppercase; }
#custom-support-amount { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1.5rem; font-weight:900; text-align:center; }
#support-name { width:90px; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1.54rem; text-align:center; }
.support-details-with-photo { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:10px; align-items:center; margin-top:12px; }
.support-details-fields { min-width:0; }
.support-details-fields .support-name-field { margin-top:0; }
.support-name-rule { display:block; margin-top:1px; font-size:.72rem; }
.support-details-fields .support-private { margin-bottom:0; }
.support-photo-frame { width:115px; height:140px; margin:auto 4px auto 1px; overflow:hidden; border:4px solid #fff2d6; border-radius:17px; outline:3px solid #8b5733; background:#ead4b4; box-shadow:0 4px 0 #5d341d,0 7px 12px #56331f55,inset 0 0 0 1px #d3a86e; }
.support-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 51%; filter:brightness(1.14) contrast(.97); transform:scale(1.28); transform-origin:68% 54%; }
.support-name-input-row { display:flex; align-items:center; gap:10px; margin-top:5px; }
.support-name-input-row #support-name { flex:0 0 90px; margin-top:0; }
.support-name-input-row .support-name-example { color:#a58a75; font-size:.72rem; font-weight:800; white-space:nowrap; }
.support-page #support-submit-button,.support-page .campaign-secondary { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1rem; }
.support-page .campaign-secondary { -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.support-private { display:flex; gap:7px; align-items:flex-start; margin:12px 0; color:#4a291b; font-size:.936rem; font-weight:900; -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.support-private input { width:20px; height:20px; accent-color:#e74a53; }
.support-private small { display:block; color:#856953; }
.support-form-error { min-height:1.2em; margin:0; color:#b5262d; font-size:.7rem; font-weight:900; text-align:center; }
.test-mode-note { display:block; margin-top:10px; color:#775f50; font-size:.6rem; text-align:center; }
.test-mode-note[hidden] { display:none; }

.success-page { isolation:isolate; height:100%; min-height:0; padding:24px 14px 28px; overflow-x:hidden; overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; background:linear-gradient(#89cdf5,#edf9ff 58%,#fff4e3); font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; text-align:center; }
.success-page::before { content:""; position:absolute; z-index:0; left:0; right:0; top:295px; height:390px; background:linear-gradient(transparent 0,#eaf8ffdd 46%,#fff6e8 82%); pointer-events:none; }
.success-background { position:absolute; z-index:0; left:0; top:0; width:100%; height:590px; object-fit:cover; object-position:center top; filter:saturate(.93); pointer-events:none; }
.success-rays { display:none; }
.success-page>*:not(.success-rays):not(.success-background):not(.success-static-effects) { position:relative; z-index:2; }
.success-static-effects { position:absolute; z-index:1; inset:0 0 auto; height:310px; overflow:hidden; pointer-events:none; }
.success-static-effects i { position:absolute; display:block; width:8px; height:8px; background:#ffe26a; box-shadow:0 0 5px #fff,0 0 8px #ffd65a; transform:rotate(45deg); }
.success-static-effects i::after { content:""; position:absolute; left:50%; top:50%; width:2px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 5px #fff9c4; transform:translate(-50%,-50%); }
.success-static-effects i:nth-child(1) { left:6%; top:74px; width:6px; height:6px; }
.success-static-effects i:nth-child(2) { right:7%; top:92px; width:10px; height:10px; }
.success-static-effects i:nth-child(3) { right:20%; top:173px; width:5px; height:5px; }
.success-static-effects i:nth-child(4) { right:4%; top:244px; width:7px; height:7px; }
.success-static-effects i:nth-child(5) { right:37%; top:190px; width:5px; height:5px; }
.success-static-effects i:nth-child(6) { right:31%; top:47px; width:4px; height:4px; }
.success-static-effects i:nth-child(7),.success-static-effects i:nth-child(8),.success-static-effects i:nth-child(9),.success-static-effects i:nth-child(10) { width:5px; height:13px; border-radius:4px; box-shadow:none; }
.success-static-effects i:nth-child(7)::after,.success-static-effects i:nth-child(8)::after,.success-static-effects i:nth-child(9)::after,.success-static-effects i:nth-child(10)::after { content:none; }
.success-static-effects i:nth-child(7) { right:13%; top:205px; background:#ff9b45; transform:rotate(24deg); }
.success-static-effects i:nth-child(8) { right:27%; top:270px; background:#ffe05e; transform:rotate(-31deg); }
.success-static-effects i:nth-child(9) { right:42%; top:268px; background:#ffb342; transform:rotate(38deg); }
.success-static-effects i:nth-child(10) { right:3%; top:151px; background:#fff3a0; transform:rotate(-18deg); }
.success-page h2 { isolation:isolate; margin:0 -5px; font-size:1.52rem; -webkit-text-stroke:3px #fff; paint-order:stroke fill; text-shadow:0 2px #fff; }
.success-page h2::before { content:""; position:absolute; z-index:-1; left:4%; right:4%; top:-13px; bottom:-13px; background:radial-gradient(ellipse,#ffffffed 0,#e8f8ffbb 48%,transparent 74%); filter:blur(2px); }
.success-page h2 span { display:inline-block; color:#f34c58; font-size:1.2em; }
.success-page h2 strong { color:#f28a28; font:inherit; }
.success-amount { isolation:isolate; display:flex; justify-content:center; align-items:center; gap:8px; margin:8px 0 0; }
.success-amount::before { content:""; position:absolute; z-index:-1; left:50%; top:50%; width:285px; height:150px; background:repeating-conic-gradient(from -4deg,#fff6a777 0 8deg,transparent 8deg 20deg); -webkit-mask-image:radial-gradient(ellipse,#000 0 28%,#000b 49%,transparent 72%); mask-image:radial-gradient(ellipse,#000 0 28%,#000b 49%,transparent 72%); transform:translate(-50%,-50%); }
.success-amount img { width:62px; height:62px; object-fit:contain; }
.success-amount strong { color:#f03e49; font-size:2.35rem; text-shadow:0 3px #fff; }
.success-amount #success-kg { display:inline-block; font-size:1.44em; line-height:.8; }
.success-arrived { isolation:isolate; margin:-5px 0 3px; color:#183d63; font-size:1.32rem; font-weight:1000; -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.success-arrived::before { content:""; position:absolute; z-index:-1; left:-2%; right:-2%; top:-9px; bottom:-9px; border-radius:50%; background:radial-gradient(ellipse,#fff 0,#eefaffd9 48%,transparent 76%); }
.success-arrived-star { position:absolute; top:50%; color:#ffd650; font-size:1rem; -webkit-text-stroke:0; text-shadow:0 0 4px #fff; transform:translateY(-50%); }
.success-arrived-star-left { left:calc(-2% + 25px); }
.success-arrived-star-right { right:calc(-2% + 25px); }
.success-pony-stage { position:relative; height:315px; margin:0 -14px -52px; }
.success-pony-stage>span { position:absolute; right:16px; top:54px; padding:15px 13px; border:3px solid #eedfd4; border-radius:50%; background:#fff; color:#e94250; font-size:1.05rem; font-weight:1000; box-shadow:0 3px 9px #5555; transform:rotate(-4deg); }
.success-pony-stage>span::before { content:""; position:absolute; left:-20px; top:50%; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:21px solid #eedfd4; transform:translateY(-50%); }
.success-pony-stage>span::after { content:""; position:absolute; left:-14px; top:50%; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:15px solid #fff; transform:translateY(-50%); }
.success-name-board { position:relative; padding:15px 28px; border:4px solid #8e572d; border-radius:10px; background:repeating-linear-gradient(2deg,#f8c873 0 7px,#efb65e 8px 11px,#f6c46e 12px 18px); font-size:1.224rem; font-weight:900; -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; box-shadow:inset 0 0 0 2px #ffe09a,0 5px 9px #5a301766; }
.success-name-board::before,.success-name-board::after { content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f2c47b 0 18%,#74401f 25% 65%,#3d1d0d 70%); box-shadow:0 1px 1px #fff6; transform:translateY(-50%); }
.success-name-board::before { left:9px; }
.success-name-board::after { right:9px; }
.success-name-board strong { display:inline-block; color:#5d2b20; font-size:1.2em; }
.success-page .campaign-primary { margin-top:8px; }
.success-page .campaign-secondary,.success-page .campaign-back-button { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1rem; }
.success-page.is-composed-pony .success-background { top:-10px; }
.success-page.is-composed-pony[data-success-pony="black"] .success-background { top:-18px; }
.success-page.is-composed-pony .success-pony-stage>span { transform:translateY(calc(66.6667% + 50px)) rotate(-4deg); }
.success-page.is-composed-pony .success-name-board,
.success-page.is-composed-pony .campaign-primary,
.success-page.is-composed-pony .campaign-secondary,
.success-page.is-composed-pony .campaign-back-button { top:-10px; }
@keyframes success-rays { to { transform:rotate(360deg); } }

.history-page { min-height:100%; padding:44px 14px 34px; background:#9b5a2f; }
.history-background { position:absolute; z-index:0; left:0; top:0; width:100%; height:auto; pointer-events:none; }
.history-heading { position:relative; z-index:3; width:78%; margin:-20px auto 0; padding:18px 12px 11px; border:4px solid #6f3b19; border-radius:11px; background:radial-gradient(ellipse at 12% 35%,#8c4e22 0 2px,transparent 3px),radial-gradient(ellipse at 88% 68%,#9a5828 0 3px,transparent 4px),repeating-linear-gradient(3deg,#efbd68 0 5px,#e6a957 6px 9px,#f3c776 10px 15px); color:#54280f; text-align:center; box-shadow:inset 0 0 0 2px #f8d28b,0 4px 0 #47230f,0 6px 9px #1f0d0866; }
.history-heading h2 { margin:0; color:#54280f; font-size:1.768rem; line-height:1.12; -webkit-text-stroke:2px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.history-heading strong { display:block; margin-top:2px; color:#6f321b; font-size:1.08rem; -webkit-text-stroke:2px #fff; paint-order:stroke fill; text-shadow:0 1px #fff; }
.history-speech { position:absolute; z-index:3; left:50%; top:127px; width:100%; margin:0; padding:0 12px; color:#fff7d7; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:1.14rem; font-weight:900; line-height:1.3; text-align:center; text-shadow:0 3px 2px #3f1708,2px 0 #3f1708,-2px 0 #3f1708; transform:translateX(-50%); }
.history-speech::before,.history-speech::after { content:none; }
.support-history-frame { position:relative; z-index:2; margin:280px 0 14px; padding:10px 10px 14px; border:3px solid #d0ad7e; border-radius:13px; background:#fff8eaf2; box-shadow:0 5px 12px #32180c66; }
.history-thanks { position:absolute; z-index:4; left:50%; bottom:calc(100% + 10px); width:max-content; margin:0; padding:8px 18px 9px 25px; border:3px solid #e7b990; border-radius:50%; background:#fffdf8; color:#e66f2f; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:.96rem; font-weight:900; line-height:1.2; text-align:center; -webkit-text-stroke:1px #fff; paint-order:stroke fill; text-shadow:0 1px #fff,0 3px 7px #49200b44; transform:translateX(calc(-50% - 11.5px)); }
.history-thanks::before,.history-thanks::after { content:none; }
.support-history-list { margin:0; padding:0 2px; list-style:none; }
.support-history-list li { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:9px 2px; border-bottom:1px solid #dec9a8; font-size:.72rem; }
.support-history-list li:last-child { border-bottom:0; }
.support-history-list strong { display:flex; align-items:center; color:#623322; font-size:1.08rem; line-height:1.15; }
.history-feed-icon { flex:0 0 24px; width:24px; height:20px; margin-right:5px; background:var(--feed-image) center/contain no-repeat; filter:drop-shadow(0 1px 1px #6a3d2166); }
.history-feed-icon.is-empty { background:none; filter:none; }
.support-history-list span { color:#db4250; font-weight:900; }
.support-history-list time { grid-column:2; grid-row:1; color:#6f5a49; }
.support-history-list .empty-history { display:block; padding:54px 0; text-align:center; color:#806b5c; }
.history-actions { position:relative; z-index:4; margin-top:12px; padding-top:4px; border-top:2px solid #dec9a8; }
.history-page .campaign-primary,.history-page .campaign-back-button { position:relative; z-index:5; width:100%; }

@media (prefers-reduced-motion:reduce) { .success-rays { animation:none; } .warehouse-progress i { transition:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .start-demo-target::after,
  .start-target-demo strong { animation: none !important; }
  /* 背景の奥行き演出は残し、急な反復だけを避けます。 */
  .game-area.is-playing:not([data-background="classic"]) .depth-scenery { animation-duration: 20s !important; }
  .projectile { animation-duration: 400ms !important; }
  .reload-indicator b { animation-duration: 1.5s !important; }
}

/* ===== ステージ制試作版 ===== */
.depth-scenery {
  right: auto;
  bottom: auto;
  transform: translate3d(calc(-50% + var(--pan-x, 0px)), calc(-50% + var(--pan-y, 0px)), 0);
  transition: background-image 500ms ease;
}

.game-area.is-playing:not([data-background="classic"]) .depth-scenery {
  animation: none;
}

.shelf { display: none; }

.shelf-row {
  position: absolute;
  left: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 17px;
  overflow: visible;
  pointer-events: none;
}

.shelf-row i {
  position: absolute;
  top: 0;
  display: block;
  height: 17px;
  background: linear-gradient(#b97843, #69351f);
  border-block: 2px solid #4d281b;
  border-inline: 0;
  box-shadow: 0 8px 0 rgba(43, 20, 12, 0.23);
}

.shelf-top { top: 41%; }
.shelf-bottom { top: 78%; }

/* 棚板は切れ目なしで、左右の世界端よりさらに外まで続きます。 */

.target-hp-bar,
.giant-target .giant-hp-bar,
.abu-commander .giant-hp-bar {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -17px;
  height: 10px;
  overflow: hidden;
  background: rgba(35, 17, 14, .85);
  border: 2px solid #fff3c4;
  border-radius: 999px;
}

.target-hp-fill,
.giant-target .giant-hp-fill,
.abu-commander .giant-hp-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #48d566;
  transform-origin: left center;
  transition: transform 180ms ease, background-color 180ms ease;
}

.target:not(.giant-target):not(.abu-commander) .target-hp-bar {
  left: 12%;
  right: 12%;
  bottom: -12px;
  height: 6px;
  border-width: 1px;
}

.train-interior-actor .target-hp-bar,
.power-item .target-hp-bar {
  left: 14%;
  right: 14%;
  bottom: -7px;
  height: 5px;
  border-width: 1px;
}

.giant-target.is-entering { filter: brightness(.85) saturate(.8); }
.game-area.boss-landed { animation: boss-screen-shake 260ms ease; }

.target { animation: none; }
.target.damage-flash { animation: item-damage 160ms ease; }
html[data-stage-mode="normal"] .target.hard-1:not(.abu-target) {
  box-shadow:
    0 5px 0 #542719,
    0 9px 12px rgba(57, 25, 16, .32),
    0 0 7px rgba(255, 250, 210, .65),
    0 0 14px rgba(255, 220, 92, .48);
}
.target-medium.hard-2 {
  background: radial-gradient(circle, #fff4a0 0 17%, #e57d16 18% 34%, #fff3be 35% 52%, #d39a12 53% 71%, #ffcf42 72% 100%);
  box-shadow: 0 5px 0 #704008, 0 0 16px rgba(255, 187, 38, .75);
}
.target-medium.hard-3 {
  background: radial-gradient(circle, #ffd8fa 0 17%, #7f154f 18% 34%, #ffd5ec 35% 52%, #b21e45 53% 71%, #742367 72% 100%);
  box-shadow: 0 5px 0 #3f102f, 0 0 17px rgba(224, 45, 121, .75);
}
.target-large.hard-5 {
  background: radial-gradient(circle, #fff5bd 0 17%, #a55a24 18% 34%, #ffe6aa 35% 52%, #b57625 53% 71%, #f0ba51 72% 100%);
  box-shadow: 0 5px 0 #603614, 0 0 15px rgba(255, 180, 64, .72);
}
.target-large.hard-7 {
  background: radial-gradient(circle, #e7fbff 0 17%, #17659a 18% 34%, #c4f0ff 35% 52%, #287bb3 53% 71%, #65c7e9 72% 100%);
  box-shadow: 0 5px 0 #17425f, 0 0 17px rgba(83, 199, 239, .78);
}
.target-large.hard-10 {
  background: radial-gradient(circle, #fff0de 0 17%, #861d25 18% 34%, #ffd1c4 35% 52%, #ae2934 53% 71%, #de5960 72% 100%);
  box-shadow: 0 5px 0 #51131a, 0 0 19px rgba(229, 68, 78, .82);
}
.target .hp-label {
  position: absolute;
  z-index: 4;
  right: -7px;
  bottom: -9px;
  padding: 2px 6px;
  color: white;
  font-size: .62rem;
  font-weight: 1000;
  background: rgba(45, 17, 15, .82);
  border-radius: 999px;
}
.target.giant-target {
  z-index: 4;
  background: radial-gradient(circle, #fff09b 0 13%, #b11f31 14% 28%, #fff4d1 29% 45%, #236e89 46% 63%, #e5ad35 64% 100%);
  border: 6px double #ffe785;
  box-shadow: 0 8px 0 #4b211c, 0 0 28px rgba(255, 218, 76, .82);
}

.boss-warning {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 24;
  display: none;
  transform: translate(-50%, -50%);
  padding: .65rem 1.1rem;
  color: #fff082;
  font-weight: 1000;
  letter-spacing: .08em;
  white-space: nowrap;
  background: rgba(94, 15, 18, .9);
  border: 3px solid #ffc541;
  border-radius: 10px;
  pointer-events: none;
}
.boss-warning.show { display: block; animation: warning-pop 1.6s ease forwards; }

.stage-overlay { background: rgba(12, 27, 44, .48); }
.result-overlay { background: rgba(7, 13, 28, .72); backdrop-filter: blur(7px); }
.result-card { max-height:98%; padding:1rem; overflow:auto; }
.ranking-entry-row { display: flex; align-items: flex-end; justify-content: center; gap: .55rem; }
.ranking-entry-row[hidden], .ranking-panel[hidden], .online-rank-result[hidden] { display: none !important; }
.name-entry { display: grid; gap: .3rem; color: #6d4133; font-size: .7rem; font-weight: 1000; letter-spacing: .1em; }
.name-entry input { width: 104px; padding: .6rem .5rem; text-align: center; text-transform: uppercase; font: 900 1.2rem/1 monospace; border: 3px solid var(--gold); border-radius: 8px; background: #fffdf2; }
.name-entry small { color: #87675b; font-size: .65rem; letter-spacing: .04em; }
.ranking-entry-row .primary-button { min-width: 132px; min-height: 46px; margin-bottom: 1rem; padding-inline: .8rem; }
.secondary-button { padding: .65rem 1rem; color: #fff8e7; font-weight: 900; background: #765247; border: 0; border-radius: 999px; cursor: pointer; }
.online-rank-result { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .55rem 0 .2rem; padding: .65rem .8rem; color: #fff8e7; background: linear-gradient(145deg, #8d2d24, #5d1715); border: 3px solid var(--gold); border-radius: 12px; }
.online-rank-result span { font: 1000 clamp(.9rem, 4vw, 1.2rem)/1.15 monospace; white-space: nowrap; }
.online-rank-result strong { color: #ffe190; font: 1000 clamp(1.2rem, 5vw, 1.6rem)/1.15 monospace; }
.ranking-record-meta { margin: .28rem 0 .5rem; color: #765247; font: 800 .68rem/1.35 monospace; }
.ranking-message { min-height: 1.1em; margin: .45rem 0; color: #765247; font-size: .72rem; font-weight: 800; }
.ranking-panel h3 { margin: 1rem 0 .5rem; color: var(--red); letter-spacing: .12em; }
.ranking-scroll-shell { position: relative; padding-right: 8px; }
.ranking-panel ol { max-height: 190px; margin: 0 0 .25rem; padding: .55rem .7rem .9rem .55rem; overflow: auto; text-align: left; list-style: none; background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.95); border-radius: 9px; scrollbar-width: thin; }
.ranking-panel li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .4rem; font: 800 .72rem/1.35 monospace; border-radius: 6px; }
.ranking-panel li b { color: #6f211d; white-space: nowrap; }
.ranking-panel li span { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.ranking-panel li.is-current { color: #53220e; background: #ffe18e; outline: 2px solid #d89718; }
.ranking-scroll-bar { position: absolute; top: 12px; right: 1px; width: 3px; height: 38px; border-radius: 99px; background: rgba(111,33,29,.45); pointer-events: none; }
.ranking-scroll-cue { position: absolute; left: 50%; bottom: 2px; color: #8d2d24; font-size: .65rem; transform: translateX(-50%); pointer-events: none; }
.game-over-actions { display:grid; justify-items:center; gap:.3rem; margin-top:.5rem; padding-bottom:.35rem; }
.result-choice-button { width:min(100%,255px); min-height:48px; padding:.65rem 1rem; }
.result-choice-button span, .result-choice-button small { display: block; }
.result-choice-button small { margin-top:.1rem; font-size:.58rem; line-height:1; letter-spacing:.16em; opacity:.85; }
.continue-note { margin:-.08rem 0 .16rem; color:#87675b; font-size:.6rem; font-weight:800; }
.game-area.is-ended .depth-scroll { filter: brightness(.55) blur(2px); }

@keyframes warning-pop {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  18%, 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

@keyframes commander-entry {
  0% { transform: scale(.45); opacity: 0; }
  58% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes commander-impact {
  45% { transform: translateX(-5px) scale(1.035); filter: brightness(1.45) drop-shadow(0 0 15px #ff4b2f); }
}

@keyframes commander-destroyed {
  0%, 18% { transform: translate(0, 0) rotate(0); opacity: 1; }
  24% { transform: translate(-6px, 3px) rotate(-1deg); }
  31% { transform: translate(6px, -3px) rotate(1deg); }
  40% { transform: translate(-4px, 2px) rotate(-1deg); opacity: 1; }
  100% { transform: translateY(34px) rotate(3deg) scale(.94); opacity: 0; filter: grayscale(.35) blur(1px); }
}

@keyframes boss-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 3px); }
  50% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, 2px); }
}

@container ponyland-game (max-width: 520px) {
  .game-header { gap: .35rem; padding-inline: .55rem; }
  .brand h1 { font-size: 1.2rem; }
  .brand-kicker { display: block; }
  .status-panel { gap: .3rem; padding-inline: .4rem; }
  .status-divider { height: 32px; }
  .status-value { font-size: 1.28rem; }
  .status-label { font-size: .58rem; }
  .status-unit { display: none; }
  .shelf-top { top: 39%; }
  .shelf-bottom { top: 76%; }
  .ranking-entry-row { align-items: center; flex-wrap: wrap; }
}