:root {
  --gold: #f2b53a;
  --gold-deep: #b9800f;
  --gold-light: #ffe6a0;
  --sand: #e8c78a;
  --sun: #ff8a3c;
  --rust: #c0472a;
  --steel: #7fb0cc;
  --leather: #6b3e1d;
  --wood0: #3a2312;
  --wood1: #23150a;
  --cream: #ffe9c7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden; background: #1a0e0a;
  font-family: "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: manipulation; /* kill pull-to-refresh + dbl-tap zoom */
}

#stage {
  position: fixed;
  inset: 0;
  height: 100dvh; /* dynamic viewport so mobile address bars don't crop the layout */
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #4a2f18 0%, #8a5c30 34%, #9c6a38 60%, #7c4a22 100%);
}

#game { display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* falls back to start when content is taller than screen */
  gap: clamp(12px, 3vh, 22px);
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 24%, rgba(255,138,60,0.28), rgba(20,10,8,0.9) 78%);
  backdrop-filter: blur(2px);
  z-index: 10;
}

/* ---------- logo ---------- */
.logo {
  font-weight: 900; font-size: clamp(46px, 13vw, 100px); letter-spacing: 2px; line-height: 1;
  font-family: "Rockwell", Georgia, "Times New Roman", serif;
}
.logo-g, .logo-b {
  background: linear-gradient(180deg, #fff0c4 0%, var(--gold) 40%, var(--gold-deep) 66%, #6e4304 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #3a2408) drop-shadow(0 0 20px rgba(255,150,50,0.55));
}
.logo-sub { margin-top: 12px; font-size: clamp(11px, 3vw, 15px); letter-spacing: 7px; color: var(--gold-light); font-weight: 700; font-family: "Segoe UI", sans-serif; text-shadow: 0 1px 3px #000; }

.jackpot-strip {
  display: flex; gap: clamp(8px, 3vw, 14px); padding: clamp(6px, 1.4vh, 10px) 16px; border-radius: 14px;
  background: linear-gradient(var(--wood0), var(--wood1));
  border: 3px solid var(--gold-deep);
  box-shadow: 0 0 0 2px #4a2e10 inset, 0 10px 26px rgba(0,0,0,0.5);
}
.jackpot-strip span {
  width: clamp(42px, 12vw, 58px); height: clamp(42px, 12vw, 58px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(25px, 7vw, 34px); color: var(--gold);
  background: radial-gradient(circle at 40% 35%, #5a3616, #2a1708);
  border: 2px solid var(--gold-deep);
  box-shadow: inset 0 2px 6px rgba(255,220,150,0.25), 0 0 14px rgba(242,181,58,0.4);
  text-shadow: 0 0 10px rgba(242,181,58,0.8);
  animation: badge 1.5s ease-in-out infinite alternate;
}
.jackpot-strip span:nth-child(2) { animation-delay: 0.22s; }
.jackpot-strip span:nth-child(3) { animation-delay: 0.44s; }
@keyframes badge { from { transform: rotate(-8deg) scale(0.96); filter: brightness(0.85); } to { transform: rotate(8deg) scale(1.05); filter: brightness(1.2); } }

/* ---------- buttons ---------- */
.menu-buttons { display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 12px); width: min(360px, 86vw); }
.btn {
  cursor: pointer; touch-action: manipulation;
  font-size: clamp(15px, 4.2vw, 17px); font-weight: 800; letter-spacing: 0.5px;
  padding: clamp(11px, 1.7vh, 15px) 18px; border-radius: 12px;
  min-height: 46px; /* comfortable touch target */
  color: var(--cream);
  font-family: "Rockwell", Georgia, serif;
  background: linear-gradient(#4a2c14, #2c1809);
  border: 2px solid var(--gold-deep);
  box-shadow: 0 0 0 1px #4a2e10 inset, 0 6px 16px rgba(0,0,0,0.45);
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 24px rgba(255,150,50,0.3); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary {
  color: #3a1400;
  background: linear-gradient(180deg, #ffe6a0, var(--gold) 52%, var(--gold-deep));
  border-color: #fff0c4;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 0 22px rgba(255,150,50,0.5), 0 6px 16px rgba(0,0,0,0.4);
}
.btn-ghost { background: transparent; border-color: rgba(255,225,170,0.4); color: var(--cream); box-shadow: none; }

.rules { max-width: 470px; font-size: clamp(12px, 3.4vw, 13px); line-height: 1.6; color: #f2d3a6; }
.rules b { color: var(--gold-light); }
/* very short screens (landscape phones): drop non-essential chrome so buttons fit */
@media (max-height: 620px) {
  .rules { display: none; }
  .logo-sub { display: none; }
  .jackpot-strip { display: none; }
}

/* ---------- searching ---------- */
.spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 6px dashed var(--gold-deep);
  border-top-color: var(--gold);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.searching-text { font-size: 24px; font-weight: 800; color: var(--cream); font-family: "Rockwell", Georgia, serif; }
.searching-sub { font-size: 13px; color: #eab98a; }

/* ---------- result ---------- */
.result-title {
  font-size: clamp(50px, 16vw, 120px); font-weight: 900; letter-spacing: 2px;
  font-family: "Rockwell", Georgia, serif;
  background: linear-gradient(180deg, #fff0c4, var(--gold) 44%, var(--gold-deep) 72%, #6e4304);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #3a2408) drop-shadow(0 0 28px rgba(255,160,60,0.65));
  animation: pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.result-title.lose {
  background: linear-gradient(180deg, #ffd0b0, var(--rust) 55%, #6e1f12);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #2a0e08) drop-shadow(0 0 22px rgba(192,71,42,0.6));
}
@keyframes pop { from { transform: scale(0.4) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.result-sub { font-size: 18px; color: var(--cream); font-weight: 700; }

/* ---------- debug tuning panel ---------- */
#tunePanel {
  position: absolute; z-index: 8;
  top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  width: min(300px, 82vw);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; /* scroll if all sliders don't fit */
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(#2c1809, #180c04);
  border: 2px solid var(--gold-deep);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 10px 12px 12px;
  color: var(--cream);
  font-size: 12px;
}
#tunePanel.collapsed #tuneBody,
#tunePanel.collapsed .tune-reset,
#tunePanel.collapsed .tune-sub,
#tunePanel.collapsed #mapPick { display: none; }
.tune-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-family: "Rockwell", Georgia, serif; color: var(--gold-light);
  letter-spacing: 0.5px; margin-bottom: 8px;
}
.tune-head button {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  background: #3a2312; color: var(--gold); border: 1px solid var(--gold-deep);
  font-weight: 900; line-height: 1;
}
.tune-row { margin: 7px 0; }
.tune-row .tune-label {
  display: flex; justify-content: space-between; margin-bottom: 3px;
}
.tune-row .tune-label b { color: #f2d3a6; font-weight: 700; }
.tune-row .tune-label .tune-val { color: var(--gold); font-variant-numeric: tabular-nums; }
.tune-row input[type=range] {
  width: 100%; height: 20px; cursor: pointer; accent-color: var(--gold);
}
/* map picker (debug) */
.tune-sub {
  margin-top: 12px; font-weight: 800; font-family: "Rockwell", Georgia, serif;
  color: var(--gold-light); letter-spacing: 0.5px; font-size: 12px;
}
.map-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.map-btn {
  cursor: pointer; flex: 1 1 auto;
  padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 700;
  color: var(--cream); font-family: "Rockwell", Georgia, serif;
  background: #3a2312; border: 1px solid var(--gold-deep);
}
.map-btn:hover { border-color: var(--gold); }
.map-btn.active {
  color: #3a1400;
  background: linear-gradient(180deg, #ffe6a0, var(--gold) 60%, var(--gold-deep));
  border-color: #fff0c4;
}

.tune-reset {
  margin-top: 10px; width: 100%; cursor: pointer;
  padding: 8px; border-radius: 8px; font-weight: 700;
  background: transparent; color: var(--cream); border: 1px solid rgba(255,225,170,0.4);
}
.tune-reset:hover { border-color: var(--gold); }