/* BUCK HUNT — trail-cam wall, autumn dawn palette. Mobile first: the whole
   game is designed for a phone held upright and scales up from there. */

:root {
  --bg: #12100d;
  --bg-2: #1b1813;
  --panel: #241f18;
  --edge: #3b3227;
  --ink: #f0e6d6;
  --muted: #a2937c;
  --amber: #d99b3f;
  --amber-hot: #f5b755;
  --rust: #a4552a;
  --moss: #5d6b45;
  --gold: #f0c463;
  --win: #7fd18b;
  --shadow: 0 2px 0 rgba(0,0,0,.5);
  --frame: clamp(58px, 18vw, 96px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 0%, #241d14 0%, var(--bg) 62%),
    var(--bg);
}

/* ---------- top bar: pool ticker + balance ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(#241f18, #1a1611);
  border-bottom: 1px solid var(--edge);
  position: sticky;
  top: 0;
  z-index: 30;
}

.pool {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pool-badge {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6d17e, #9a6a1d 70%, #6b460f);
  box-shadow: 0 0 12px rgba(240,196,99,.35);
  display: grid; place-items: center;
  font-size: 15px;
}

.pool-text { min-width: 0; }
.pool-label {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.pool-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 17px; color: var(--gold);
  text-shadow: var(--shadow);
  line-height: 1.1;
}

.balance { text-align: right; flex: none; }
.balance-label {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.balance-amount {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 17px; line-height: 1.1;
}

.iconbtn {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--edge);
  background: #2b241b;
  color: var(--ink);
  font-size: 15px;
  display: grid; place-items: center;
  cursor: pointer;
}
.iconbtn:active { transform: translateY(1px); }

/* ---------- the trail-cam wall ---------- */

main {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Spread the panels down the screen rather than packing them at the top.
     On a tall phone the board, tray and HUD occupy about half the height, and
     top-packing them left a dead band above the controls that read as an
     unfinished page. */
  justify-content: space-evenly;
}

.wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 6px;
  background: linear-gradient(#1d1913, #15120e);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}

.cam {
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}

.cam-label {
  font-size: 8px; letter-spacing: .1em; color: #6f6350; text-align: center;
  text-transform: uppercase;
}

.cell {
  position: relative;
  aspect-ratio: 1 / 1.12;
  border-radius: 5px;
  overflow: hidden;
  /* A trail-cam PHOTO PRINT, not a black hole. The symbols are dark rim-lit
     animals; on the near-black the board started with, bear, boar and fox were
     mud at the 96px they actually display at. Checked at true size against
     four card tones — this one separates them without washing out the keyed
     edges the way a light card does. */
  background: #3d3428;
  border: 1px solid #2e281f;
  display: grid; place-items: center;
  /* the trail-cam vignette every photo print shares */
  box-shadow: inset 0 0 14px rgba(0,0,0,.85);
}

.cell img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* placeholder art: a labelled colour block, readable at phone size */
.cell .ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: clamp(7px, 2.1vw, 11px);
  font-weight: 800; letter-spacing: .04em;
  text-align: center; line-height: 1.05;
  color: #12100d;
  padding: 2px;
}

.cell.win { animation: cellwin .9s ease-in-out 2; }
@keyframes cellwin {
  0%, 100% { box-shadow: inset 0 0 14px rgba(0,0,0,.85); }
  50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(240,196,99,.6); }
}

.cell.shell::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px var(--amber);
  border-radius: 5px;
}

/* the shutter snap: a white flash that wipes down the camera */
.cam.snap .cell { animation: snap .26s ease-out; }
@keyframes snap {
  0% { filter: brightness(2.4) contrast(.4); transform: translateY(-6px); }
  60% { filter: brightness(1.1); }
  100% { filter: none; transform: none; }
}

/* ---------- shell tray ---------- */

.tray {
  display: flex; align-items: center; gap: 6px;
  transition: opacity .2s;
}
.tray.empty { opacity: .35; }
.tray {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #191510;
  border: 1px solid var(--edge);
}
.tray-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.shellpip {
  width: 9px; height: 20px; border-radius: 3px;
  background: linear-gradient(#c1481f, #7d2f14 60%, #d9b46a 60%, #b08b3c);
  animation: drop .3s ease-out;
}
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }

/* ---------- HUD: the two doors racing ---------- */

.doors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.door {
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--edge);
}
.door-title {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

.gear {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
}
.gear i {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: #17130e;
  border: 1px solid #362e23;
}
.gear i.on {
  background: linear-gradient(#7f8f5c, #4d5a35);
  border-color: #93a56c;
  box-shadow: 0 0 5px rgba(147,165,108,.5);
}
.door.full .gear i.on {
  animation: gearglow 1.1s ease-in-out infinite;
}
@keyframes gearglow { 50% { box-shadow: 0 0 12px rgba(200,230,140,.9); } }

.mystery-count {
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 19px; line-height: 1;
}
.mystery-note { font-size: 9px; color: var(--muted); margin-top: 3px; line-height: 1.25; }

/* the counter escalates as the guarantee closes in */
.door.warm .mystery-count { color: var(--amber); text-shadow: 0 0 10px rgba(217,155,63,.55); }
.door.hot .mystery-count {
  color: #ffcf7a; text-shadow: 0 0 14px rgba(255,207,122,.8);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.06); } }

.mystery-bar {
  height: 3px; margin-top: 5px; border-radius: 2px;
  background: #17130e; overflow: hidden;
}
.mystery-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--moss), var(--amber));
  transition: width .3s ease;
}

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

.controls {
  display: flex; align-items: center; gap: 8px;
  padding: 9px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--edge);
}

.bets { display: flex; gap: 5px; flex: 1; }
.bet {
  flex: 1;
  padding: 9px 0;
  border-radius: 9px;
  border: 1px solid var(--edge);
  background: #1c1812;
  color: var(--muted);
  font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bet.on { background: linear-gradient(#4a3a22, #33280f); color: var(--gold); border-color: var(--amber); }
.bet:disabled { opacity: .35; cursor: not-allowed; }

.spin {
  flex: none;
  width: 96px; height: 52px;
  border-radius: 12px;
  border: 1px solid #7d4a1c;
  background: linear-gradient(#d98b34, #a4552a);
  color: #1a1208;
  font-weight: 900; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 0 #6d3315;
}
.spin:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d3315; }
.spin:disabled { filter: grayscale(.6) brightness(.7); cursor: wait; box-shadow: none; }

.winline {
  text-align: center;
  min-height: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.winline.win { color: var(--win); }

footer {
  padding: 10px 12px 16px;
  text-align: center;
  font-size: 10px;
  color: #6b6053;
  line-height: 1.6;
}
footer b { color: var(--muted); }

/* ---------- the hunt scene ---------- */

.scene {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  flex-direction: column;
  background: linear-gradient(#20180f, #0d0b08);
}
.scene.open { display: flex; }

.scene.t1 { background: linear-gradient(#2b2a18, #14140c); }
.scene.t2 { background: linear-gradient(#232a19, #10140b); }
.scene.t3 { background: linear-gradient(#161f1c, #0a0f0e); }
.scene.t4 { background: linear-gradient(#2b2418, #120e08); }
.scene.super { background: linear-gradient(#3a2a12, #191007); }

.scene-hud {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.55));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.stat { flex: 1; text-align: center; }
.stat b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.band-label {
  text-align: center;
  padding: 10px 8px 4px;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: #f3c877;
  text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 18px rgba(217,155,63,.35);
}

.spots {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 10px;
  align-items: center;
}

.spot {
  position: relative;
  border-radius: 14px;
  /* Against a painted backdrop a 30%-black card with a hairline border simply
     disappears — the two spots the player did not pick stopped looking like
     things you could pick at all. These have to read as three tappable cards
     over any scene the art throws behind them. */
  border: 1px solid rgba(240,196,99,.28);
  background: rgba(10,8,5,.62);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  /* card-shaped rather than a full-height column: a reveal centred in a
     phone-tall box reads as lost, and the space above is where the forest goes */
  aspect-ratio: 3 / 5;
  max-height: 48vh;
  display: grid; place-items: center;
  cursor: pointer;
  overflow: hidden;
  padding: 8px;
  text-align: center;
}
.spot:active { transform: scale(.985); }
.spot .spot-name {
  position: absolute; top: 10px; left: 0; right: 0;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #cbbca2;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.spot.revealed { cursor: default; }
.spot .reveal { display: none; }
.spot.revealed .reveal { display: grid; place-items: center; gap: 6px; }
.spot.revealed .spot-name { display: none; }
.spot .reveal .r-pay {
  font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--win);
  text-shadow: 0 0 16px rgba(127,209,139,.4);
}
.spot .reveal .r-what {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
}
.spot.revealed { box-shadow: inset 0 0 0 1px rgba(240,196,99,.35); }
/* the scene backdrop, once real art exists for the band */
.scene { background-size: cover; background-position: center; }
.spot.dim { opacity: .32; }

.capmeter { padding: 0 12px 8px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); }
.capmeter-track { height: 4px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.capmeter-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--moss), var(--rust)); transition: width .3s; }
.capmeter-label { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; text-align: center; }

.gunhud { display: flex; gap: 4px; justify-content: center; padding: 8px 0 2px; }
.gunhud i {
  width: 26px; height: 5px; border-radius: 3px; background: #2a241b;
}
.gunhud i.on { background: linear-gradient(90deg, var(--amber), var(--gold)); }
.gunhud i.top { background: linear-gradient(90deg, var(--gold), #fff0c0); box-shadow: 0 0 8px var(--gold); }

.scene-foot { padding: 10px 12px 20px; text-align: center; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75)); }
.tapnote { font-size: 11px; color: #cbbca2; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.9); }

/* ---------- overlays ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 70;
  display: none; place-items: center;
  background: rgba(6,5,3,.82);
  padding: 20px;
  text-align: center;
}
.overlay.open { display: grid; }
.overlay-card {
  max-width: 340px;
  padding: 22px 20px;
  border-radius: 16px;
  background: linear-gradient(#2b2318, #191309);
  border: 1px solid var(--amber);
  box-shadow: 0 0 60px rgba(217,155,63,.25);
}
.overlay h2 {
  margin: 0 0 8px;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--amber);
}
.overlay .big {
  font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--gold); line-height: 1; margin: 6px 0 10px;
  text-shadow: 0 0 24px rgba(240,196,99,.5);
}
.overlay p { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.overlay button {
  padding: 11px 26px; border-radius: 10px; border: none;
  background: linear-gradient(#d98b34, #a4552a); color: #1a1208;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.overlay.legendary .overlay-card { border-color: #fff0c0; animation: legend 1.2s ease-in-out infinite; }
@keyframes legend { 50% { box-shadow: 0 0 90px rgba(255,240,192,.5); } }

.jackpot .overlay-card { border-color: var(--gold); }

/* the mystery door firing: a single hard flash */
.lightning {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: #fff; opacity: 0;
}
.lightning.fire { animation: bolt .5s ease-out; }
@keyframes bolt {
  0% { opacity: 0; } 6% { opacity: .95; } 14% { opacity: .1; }
  22% { opacity: .8; } 40% { opacity: 0; } 100% { opacity: 0; }
}

.history { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; padding-top: 2px; }
.history i {
  width: 7px; height: 7px; border-radius: 2px; background: #2a241b;
}
.history i.w { background: var(--moss); }
.history i.h { background: var(--amber); }
.history i.s { background: var(--gold); }

@media (min-width: 560px) {
  main { max-width: 520px; margin: 0 auto; width: 100%; }
  .spot { min-height: 30vh; }
}