:root {
  --turf: #14361f;
  --turf-2: #0d2314;
  --night: #0f1116;
  --chalk: #eef2f8;
  --gold: #f2c94c;
  --gold-soft: #ffe9a8;
  --keeper: #38bdf8;
  --danger: #e11d48;
  --win: #34d399;
  --muted: #93a0b4;
  --panel: #0f1116;

  /* Asset seam: app.js overwrites these at boot from its ASSETS map, so
     dropping raster art into /assets/ needs no CSS edits. Each one is a
     background layer, so a missing file simply falls back to the gradient
     underneath instead of showing a broken image. */
  --asset-pitch: url("/assets/pitch-texture.svg");
  --asset-goal: url("/assets/goal-frame.svg");
  --asset-net: url("/assets/net-texture.svg");
  --asset-ball: url("/assets/ball.svg");
  --asset-keeper: url("/assets/keeper.svg");
  --asset-glove: url("/assets/glove.svg");
  --asset-target: url("/assets/zone-target.svg");
  --asset-boot: url("/assets/boot.svg");
  --asset-spark: url("/assets/spark.svg");

  --zone-w: 150px;
  --goal-h: 340px;
  --ball-size: 46px;
  --keeper-size: 118px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--chalk);
  background-color: var(--turf-2);
  background-image:
    radial-gradient(circle at 50% -8%, rgba(242, 201, 76, 0.2), transparent 55%),
    linear-gradient(170deg, rgba(15, 17, 22, 0.88), rgba(20, 54, 31, 0.68)),
    var(--asset-pitch);
  background-size: auto, auto, 320px 320px;
  background-repeat: no-repeat, no-repeat, repeat;
}

.layout {
  position: relative;
  z-index: 1;
  width: min(1120px, 96vw);
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 54, 31, 0.55), rgba(0, 0, 0, 0.46));
  border: 1px solid rgba(242, 201, 76, 0.22);
}

/* ---- topbar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0 0.6rem;
  flex-wrap: wrap;
}

.logo-wrap { position: relative; display: flex; align-items: center; gap: 0.7rem; }

.boot-mark {
  display: inline-block;
  width: 52px;
  height: 40px;
  background: var(--asset-boot) center/contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(242, 201, 76, 0.5));
}

.wordmark h1 {
  margin: 0;
  font-size: clamp(1.2rem, 3.4vw, 2rem);
  color: var(--gold);
  letter-spacing: 0.14em;
  text-shadow: 0 2px 0 #08120b, 0 0 18px rgba(242, 201, 76, 0.28);
}

.wordmark .tagline { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.04em; }

h2 { margin: 0 0 0.5rem; color: var(--gold); font-size: 1rem; }

.topbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.pill {
  border: 1px solid rgba(242, 201, 76, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  font-weight: 700;
}

.mode-pill { color: var(--win); font-size: 0.78rem; letter-spacing: 0.1em; }
.balance-pill { color: var(--gold); }

.demo-toggle { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.82rem; }
.demo-toggle input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }

.sprinkle-zone { position: absolute; inset: -60% -40%; pointer-events: none; overflow: visible; }

.sprinkle-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 24px;
  margin: -12px 0 0 -9px;
  background: var(--asset-spark) center/contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(242, 201, 76, 0.8));
  animation: sprinkle-fly 900ms ease-out forwards;
}

@keyframes sprinkle-fly {
  0% { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* ---- stage ---- */

.stage {
  position: relative;
  margin-top: 0.4rem;
  border-radius: 18px;
  padding: 0.9rem 0.6rem 0.3rem;
  border: 2px solid rgba(242, 201, 76, 0.35);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.09), transparent 60%),
    linear-gradient(180deg, #16301f 0%, var(--turf) 45%, #0b1d11 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.goal {
  position: relative;
  width: min(100%, 640px);
  margin: 0 auto;
  aspect-ratio: 480 / 300;
  min-height: 200px;
  background: var(--asset-goal) center/100% 100% no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

/* Goal mouth inset, matching the frame artwork's interior. */
.net,
.zone-grid {
  position: absolute;
  left: 7.9%;
  right: 7.9%;
  top: 12.7%;
  bottom: 7.3%;
}

.net {
  background: var(--asset-net) 0 0 / 48px 48px repeat, rgba(4, 12, 7, 0.55);
  border-radius: 3px;
  opacity: 0.85;
}

.net.ripple { animation: net-ripple 520ms ease-out 1; }

@keyframes net-ripple {
  0% { background-size: 48px 48px; }
  45% { background-size: 60px 58px; }
  100% { background-size: 48px 48px; }
}

.zone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
  z-index: 3;
}

.zone {
  position: relative;
  border: 1px dashed rgba(238, 242, 248, 0.22);
  border-radius: 8px;
  background: rgba(238, 242, 248, 0.04);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 800;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.35rem 0.45rem;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  min-width: 0;
}

.zone .zone-hint {
  font-size: 0.62rem;
  opacity: 0.55;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 0.25rem;
}

.zone:hover:not(:disabled) {
  background: rgba(242, 201, 76, 0.12);
  border-color: rgba(242, 201, 76, 0.5);
  color: var(--gold-soft);
}

.zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--asset-target) center/62% no-repeat;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.zone:hover:not(:disabled)::after { opacity: 0.35; }

.zone.selected {
  background: rgba(242, 201, 76, 0.18);
  border: 1px solid var(--gold);
  color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(242, 201, 76, 0.35);
}

.zone.selected::after { opacity: 1; }

.zone.covered {
  border-color: var(--keeper);
  background: rgba(56, 189, 248, 0.18);
  color: #bae6fd;
}

.zone.goal-hit {
  border-color: var(--win);
  background: rgba(52, 211, 153, 0.28);
  color: #d1fae5;
  animation: zone-goal 620ms ease-out 1;
}

@keyframes zone-goal {
  0% { box-shadow: inset 0 0 0 rgba(52, 211, 153, 0); }
  35% { box-shadow: inset 0 0 42px rgba(52, 211, 153, 0.85), 0 0 22px rgba(52, 211, 153, 0.5); }
  100% { box-shadow: inset 0 0 0 rgba(52, 211, 153, 0); }
}

.zone.saved {
  border-color: var(--danger);
  background: rgba(225, 29, 72, 0.3);
  color: #ffc9d4;
  animation: zone-save 620ms ease-out 1;
}

.zone.saved::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: var(--asset-glove) center/contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

@keyframes zone-save {
  0% { box-shadow: inset 0 0 0 rgba(225, 29, 72, 0); }
  35% { box-shadow: inset 0 0 42px rgba(225, 29, 72, 0.85), 0 0 22px rgba(225, 29, 72, 0.55); }
  100% { box-shadow: inset 0 0 0 rgba(225, 29, 72, 0); }
}

.zone:disabled { cursor: not-allowed; opacity: 0.75; }

.keeper {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: var(--keeper-size);
  height: calc(var(--keeper-size) * 1.17);
  margin-left: calc(var(--keeper-size) / -2);
  background: var(--asset-keeper) center bottom/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.65));
  pointer-events: none;
  z-index: 4;
  transition: transform 420ms cubic-bezier(0.22, 0.9, 0.3, 1.2);
  will-change: transform;
}

.stage.shake { animation: stage-shake 420ms ease-in-out 1; }

@keyframes stage-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
}

.pitch {
  position: relative;
  height: 108px;
  margin-top: 0.2rem;
}

.spot {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 74px;
  height: 16px;
  margin-left: -37px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 70%, transparent);
}

.ball {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: var(--ball-size);
  height: var(--ball-size);
  margin-left: calc(var(--ball-size) / -2);
  background: var(--asset-ball) center/contain no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 5;
  transition: transform 420ms cubic-bezier(0.3, 0.7, 0.35, 1);
  will-change: transform;
}

.no-tween { transition: none !important; }

/* ---- HUD ---- */

.hud {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(242, 201, 76, 0.22);
}

.hud-label { display: block; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.16em; }

.hud-mult {
  display: block;
  font-size: clamp(1.9rem, 6vw, 3rem);
  color: var(--gold);
  text-shadow: 0 0 22px rgba(242, 201, 76, 0.4);
  line-height: 1.05;
}

.hud-mult.pulse-win { animation: mult-pulse 620ms ease-out; }

@keyframes mult-pulse {
  0% { transform: scale(1) translateY(0); color: var(--gold); }
  40% { transform: scale(1.16) translateY(-6px); color: var(--win); }
  100% { transform: scale(1) translateY(0); color: var(--gold); }
}

.hud-side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.hud-side strong { display: block; margin-top: 0.2rem; color: var(--gold); font-size: 1rem; }

/* ---- controls ---- */

.controls {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: minmax(260px, 2fr) auto auto auto auto auto;
  gap: 0.6rem;
  align-items: stretch;
}

button {
  border: 0;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: #fff;
}

button:disabled { opacity: 0.45; cursor: not-allowed; }

.ghost {
  background: none;
  border: 1px solid rgba(242, 201, 76, 0.4);
  color: var(--gold);
  padding: 0.32rem 0.7rem;
  font-size: 0.74rem;
  border-radius: 8px;
}

.control-block { background: rgba(0, 0, 0, 0.4); border-radius: 10px; padding: 0.4rem 0.55rem; }
.control-block label { display: block; color: var(--muted); font-size: 0.74rem; }
.control-block select {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem;
  color: #f1f1f1;
  background: #1b2a20;
}

.difficulty-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; margin-top: 0.3rem; }

.difficulty-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: #17281c;
  font-size: 0.76rem;
}

.difficulty-btn .d-caption { font-size: 0.64rem; font-weight: 600; color: var(--muted); }
.difficulty-btn.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(242, 201, 76, 0.24), rgba(242, 201, 76, 0.06));
  color: var(--gold);
}
.difficulty-btn.active .d-caption { color: #e7d49a; }

.primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #3b2f06;
  min-width: 132px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.shoot {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  min-width: 118px;
  border: 1px solid rgba(147, 197, 253, 0.4);
}

.collect { background: linear-gradient(180deg, #2e9d5b, #17603a); min-width: 168px; }

/* ---- history ---- */

.history-wrap { margin-top: 0.8rem; }
.history-strip { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.4rem 0; }
.history-empty { color: var(--muted); font-size: 0.82rem; }

.history-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.history-chip .chip-tag {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.history-chip.win { background: rgba(52, 211, 153, 0.16); border-color: var(--win); color: #b9f5dc; }
.history-chip.loss { background: rgba(225, 29, 72, 0.18); border-color: var(--danger); color: #ffc9d4; }

/* ---- results / panels ---- */

.results {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.results div {
  background: linear-gradient(180deg, rgba(20, 54, 31, 0.72), rgba(0, 0, 0, 0.5));
  border: 1px solid rgba(242, 201, 76, 0.24);
  border-radius: 10px;
  padding: 0.55rem;
}

.results span { display: block; color: var(--muted); font-size: 0.74rem; }
.results strong { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--gold); overflow-wrap: anywhere; }

.verify-link {
  display: block;
  margin: 0.7rem auto 0;
  background: none;
  border: 1px solid rgba(242, 201, 76, 0.4);
  color: var(--gold);
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  border-radius: 8px;
}

.panels {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

.panel {
  background: var(--panel);
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.table-scroll { max-height: 260px; overflow-y: auto; }
.panel table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.panel th, .panel td { text-align: left; padding: 0.25rem 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.panel th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
.panel ul { margin: 0; padding-left: 1.1rem; color: #dbe4f0; }
.panel ul li { margin: 0.2rem 0; }

/* ---- toast / modal ---- */

.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 26, 18, 0.97);
  color: #fff6e0;
  border: 1px solid rgba(242, 201, 76, 0.45);
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  z-index: 60;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 6, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  overflow: auto;
}

.modal-overlay[hidden] { display: none; }

.modal-card {
  margin: auto;
  background: linear-gradient(180deg, #1a3a24, #0c1a10);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-card h2 { margin-bottom: 0.4rem; }
.modal-card p { margin: 0.2rem 0 0.6rem; color: var(--muted); }

.verify-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.7rem;
  text-align: left;
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
}

.verify-details dt { color: var(--muted); }
.verify-details dd { margin: 0; color: var(--gold); overflow-wrap: anywhere; }

/* ---- ambience ---- */

.floodlights { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.floodlights span {
  position: absolute;
  top: -40px;
  width: 130px;
  height: 60vh;
  background: linear-gradient(180deg, rgba(255, 249, 224, 0.16), transparent 72%);
  filter: blur(14px);
  transform-origin: 50% 0;
  animation: flood-sway 14s ease-in-out infinite alternate;
}

.floodlights span:nth-child(1) { left: 4%; animation-duration: 15s; animation-delay: 0s; }
.floodlights span:nth-child(2) { left: 22%; animation-duration: 18s; animation-delay: 1.6s; }
.floodlights span:nth-child(3) { left: 40%; animation-duration: 13s; animation-delay: 3.2s; }
.floodlights span:nth-child(4) { left: 58%; animation-duration: 17s; animation-delay: 2.1s; }
.floodlights span:nth-child(5) { left: 76%; animation-duration: 16s; animation-delay: 4.4s; }
.floodlights span:nth-child(6) { left: 90%; animation-duration: 19s; animation-delay: 5.8s; }

@keyframes flood-sway {
  0% { transform: rotate(-3deg); opacity: 0.5; }
  100% { transform: rotate(3deg); opacity: 0.85; }
}

@media (max-width: 900px) {
  .practice-row { grid-template-columns: 1fr; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .difficulty-block { grid-column: 1 / -1; }
  .results { grid-template-columns: 1fr 1fr; }
  .panels { grid-template-columns: 1fr; }
  .hud { grid-template-columns: 1fr; }
  .zone { font-size: 0.62rem; padding: 0.25rem 0.3rem; }
  .zone .zone-hint { display: none; }
  :root { --keeper-size: 84px; --ball-size: 36px; }
}

/* ---- profit-practice presentation ---- */

.rebet { background: linear-gradient(180deg, #ffe9a8, var(--gold)); color: #3b2f06; min-width: 118px; }

.practice-row { margin-top: 0.7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.chip-block { background: rgba(0, 0, 0, 0.4); border-radius: 10px; padding: 0.45rem 0.55rem; }
.chip-row, .social-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.stake-chip {
  padding: 0.38rem 0.65rem; border-radius: 999px; font-size: 0.76rem;
  background: #1b2a20; color: var(--chalk); border: 1px solid rgba(255, 255, 255, 0.16);
}
.stake-chip.active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.stake-chip.anchor { border-color: var(--danger); color: #ffd9e2; font-weight: 900; }
.social-item {
  border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.76rem; font-weight: 700;
  background: rgba(52, 211, 153, 0.13); border: 1px solid rgba(52, 211, 153, 0.45); color: #b9f5dc;
}

.ceremony-banner, .win-tier-banner, .near-miss-banner {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 8;
  padding: 0.35rem 0.9rem; border-radius: 999px; font-weight: 900; letter-spacing: 0.06em;
  white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis;
}
.ceremony-banner { top: 0.45rem; background: rgba(0, 0, 0, 0.72); color: var(--gold); border: 1px solid var(--gold); }
.win-tier-banner { top: 0.45rem; background: linear-gradient(180deg, #7dffce, #2e9d5b); color: #062b18; }
.win-tier-banner.tier-big { background: linear-gradient(180deg, #ffe9a8, #f2c94c); color: #3b2f06; }
.win-tier-banner.tier-mega { background: linear-gradient(180deg, #ffc4ec, #f06bd8); color: #3d0730; }
.win-tier-banner.tier-epic { background: linear-gradient(180deg, #fff3b0, #ff8a3d); color: #431407; }
.near-miss-banner { top: 2.6rem; background: linear-gradient(180deg, #ffd9a0, #ff8a3d); color: #2b1503; animation: near-miss-pop 420ms ease-out; }
@keyframes near-miss-pop { 0% { transform: translateX(-50%) scale(0.82); } 60% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } }

.zone.near-miss { border-color: #ff8a3d; box-shadow: inset 0 0 0 2px rgba(255, 138, 61, 0.65), 0 0 18px rgba(255, 138, 61, 0.5); }

.stage.tease .ball, .stage.tease .keeper { transition-duration: 950ms; }

/* The page is fully playable without motion: app.js skips every decorative
   beat when this query matches and the transitions below collapse to zero. */
@media (prefers-reduced-motion: reduce) {
  .floodlights { display: none; }
  .ball, .keeper, .zone, .zone::after { transition-duration: 0ms; }
  .sprinkle-icon,
  .zone.goal-hit,
  .zone.saved,
  .net.ripple,
  .stage.shake,
  .hud-mult.pulse-win { animation: none; }
  .near-miss-banner { animation: none; }
  .stage.tease .ball, .stage.tease .keeper { transition-duration: 0ms; }
}