:root {
  --bg: #0e1420;
  --bg-elevated: #161e2e;
  --text: #eef2f8;
  --text-dim: #8b96a8;
  --accent: #3ea6ff;
  --success: #34c759;
  --danger: #ff453a;
  --warning: #ffb020;
  --border: #263248;
  --sky-top: #8fd3f4;
  --sky-bottom: #c9ecff;
  --trunk: #9a6a3f;
  --trunk-dark: #7a5230;
  --branch-green: #5fae55;
  --branch-green-dark: #4a9241;
  --grass: #6cbf5a;
  --grass-dark: #58a047;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  overscroll-behavior: none;
  user-select: none;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.screen { display: flex; flex-direction: column; align-items: center; flex: 1; }
.screen.hidden { display: none; }

h1 { font-size: 22px; margin: 8px 0; text-align: center; }
h2 { font-size: 24px; margin: 12px 0; text-align: center; }

.balance { font-size: 16px; color: var(--text-dim); margin: 4px 0 16px; }
.balance span { color: var(--warning); font-weight: 700; }
.best-score { font-size: 13px; color: var(--text-dim); margin-top: 14px; }

.hint { font-size: 13px; color: var(--text-dim); text-align: center; margin: 14px 0; line-height: 1.7; }

.stake-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.stake-btn {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stake-btn:active { background: var(--accent); border-color: var(--accent); }
.stake-btn .sub { font-size: 12px; font-weight: 400; color: var(--text-dim); }

.error-text { color: var(--danger); font-size: 14px; margin-top: 16px; text-align: center; min-height: 20px; }

.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 60px 0 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  padding: 12px 28px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  margin-top: 16px;
}
.btn-danger { background: var(--danger); color: #fff; }
.btn-primary { background: var(--accent); color: #fff; width: 100%; }

.opponent-row {
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 10px;
  font-size: 14px;
  color: var(--text-dim);
}
.opponent-row.hidden { display: none; }
#opponent-score { font-weight: 700; color: var(--text); }

/* ── the game stage ─────────────────────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  /* fill the rest of the screen instead of stopping at a fixed aspect
     ratio and leaving dark empty space above the controls */
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom) 80%);
}

.sky { position: absolute; inset: 0; overflow: hidden; }
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50px;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.c1 { width: 70px; height: 24px; top: 8%; left: 8%; }
.c1::before { width: 34px; height: 34px; top: -16px; left: 8px; }
.c1::after { width: 26px; height: 26px; top: -10px; left: 36px; }
.c2 { width: 50px; height: 18px; top: 18%; right: 10%; }
.c2::before { width: 24px; height: 24px; top: -11px; left: 6px; }
.c2::after { width: 18px; height: 18px; top: -7px; left: 26px; }
.c3 { width: 60px; height: 20px; top: 30%; left: 55%; }
.c3::before { width: 28px; height: 28px; top: -13px; left: 6px; }
.c3::after { width: 20px; height: 20px; top: -8px; left: 30px; }

.timer-bar-wrap {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 20px;
  background: #fff;
  border: 3px solid #6b4423;
  border-radius: 999px;
  overflow: hidden;
  z-index: 6;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.timer-bar {
  height: 100%;
  width: 100%;
  background: var(--success);
  border-radius: 999px;
  transition: width 0.15s linear, background 0.2s linear;
}
.timer-bar.low { background: var(--danger); }

.score {
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  z-index: 6;
}

.ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 15%;
  background: linear-gradient(to bottom, var(--grass) 0%, var(--grass) 35%, var(--grass-dark) 35%, #7a5230 55%, #634128 100%);
  border-top: 4px solid #7fcf6a;
  z-index: 3;
}
.ground::before, .ground::after {
  /* little roots/rocks poking out of the dirt band, for texture */
  content: "";
  position: absolute;
  bottom: 8%;
  width: 22px; height: 14px;
  background: #4f3620;
  border-radius: 50%;
}
.ground::before { left: 8%; }
.ground::after { right: 12%; width: 16px; height: 10px; }

.tree {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 20%;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 8px 8px 0 0;
  /* no overflow:hidden here — branches are children positioned outside
     this box's own width (left/right: 100%) and would get clipped along
     with it; border-radius still rounds the background paint on its own */
  /* one continuous bark gradient across the WHOLE trunk (not per-segment) —
     the per-segment background used to create a visible seam at every
     chop boundary; painting it once on the container makes the column
     genuinely seamless, the way the reference game's trunk looks */
  background: linear-gradient(90deg,
    var(--trunk-dark) 0%, var(--trunk-dark) 8%,
    var(--trunk) 8%, var(--trunk) 40%,
    #d1a06a 40%, #d1a06a 60%,
    var(--trunk) 60%, var(--trunk) 92%,
    var(--trunk-dark) 92%, var(--trunk-dark) 100%);
}
.segment {
  position: relative;
  width: 100%;
  /* taller than the character (84px) on purpose: the character's box is
     nearly two old segment-heights tall, so a branch on the segment ABOVE
     the current one could visually reach into the character even though
     it isn't live yet. Making each segment at least as tall as the
     character means only the bottom (current) segment's branch can ever
     be near the character. */
  height: var(--seg-h, 92px);
  box-sizing: border-box;
}

.branch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 14px;
  background: var(--trunk-dark);
  z-index: 1;
}
.branch::after {
  /* a fuller, layered clump of foliage instead of one flat blob — but
     kept short in reach: the whole point is that it must never touch the
     character even on their own side (see .character positions below) */
  content: "";
  position: absolute;
  top: 50%;
  width: 46px;
  height: 36px;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.3), transparent 42%),
    radial-gradient(circle at 68% 72%, var(--branch-green-dark) 0%, transparent 55%),
    var(--branch-green);
  border: 3px solid var(--branch-green-dark);
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  transform: translateY(-52%);
}
.branch.left { right: 100%; }
.branch.left::after { right: 100%; margin-right: -4px; }

.branch.right { left: 100%; }
.branch.right::after { left: 100%; margin-left: -4px; }

/* ── the character ───────────────────────────────────────────────── */
.character {
  position: absolute;
  bottom: 15%;
  width: 60px;
  height: 84px;
  z-index: 4;
  transition: left 0.12s ease, right 0.12s ease;
}
/* real breathing room between the character's rest spot and the trunk —
   even the live/dangerous branch (same side as the character) must never
   visually touch them; the escape is switching sides, not surviving a
   graze */
.character.right { left: 82%; }
.character.left { left: 1%; }

.char-legs {
  position: absolute;
  bottom: 0; left: 14px;
  width: 32px; height: 24px;
  background: #2f4a7a;
  border-radius: 4px 4px 0 0;
}
.char-legs::after {
  /* boots */
  content: "";
  position: absolute;
  bottom: -5px; left: -2px;
  width: 36px; height: 8px;
  background: #3b2a1a;
  border-radius: 4px;
}
.char-body {
  position: absolute;
  bottom: 20px; left: 6px;
  width: 48px; height: 36px;
  border-radius: 10px;
  /* plaid flannel instead of a flat fill */
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 13px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 13px),
    #c0392b;
}
.char-head {
  position: absolute;
  bottom: 52px; left: 14px;
  width: 32px; height: 30px;
  background: #f0c199;
  border-radius: 50%;
}
.char-head::before {
  /* beard */
  content: "";
  position: absolute;
  bottom: -7px; left: 3px;
  width: 26px; height: 15px;
  background: #3b2a1a;
  border-radius: 0 0 13px 13px;
}
.char-head::after {
  /* cap */
  content: "";
  position: absolute;
  top: -9px; left: -2px;
  width: 36px; height: 17px;
  background: #33475a;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 3px 0 -1px #24333f;
}
.char-arm {
  position: absolute;
  bottom: 34px; left: 40px;
  width: 14px; height: 26px;
  background: #c0392b;
  border-radius: 6px;
  transform-origin: top center;
  transition: transform 0.1s ease;
}
.character.left .char-arm { left: 6px; transform-origin: top center; }
.character.chopping .char-arm { transform: rotate(-55deg); }

.axe {
  position: absolute;
  bottom: 22px; left: -2px;
  width: 18px; height: 22px;
}
.axe::before {
  content: "";
  position: absolute;
  left: 7px; top: 0;
  width: 4px; height: 22px;
  background: #6b4423;
  border-radius: 2px;
}
.axe::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 18px; height: 14px;
  background: #cfd6de;
  border-radius: 3px;
}

.character.hit { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-4deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}

.controls {
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  /* the page is RTL, but "left" must always mean the physical left button
     regardless of that — otherwise flex reorders #btn-left to the visual
     right and the controls end up backwards from what they're wired to do */
  direction: ltr;
}
.ctrl-btn {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 4px solid #c9a06a;
  background: repeating-radial-gradient(circle at center, #e8c592 0, #e8c592 8px, #dcb47e 8px, #dcb47e 16px, #e8c592 16px, #e8c592 24px, #dcb47e 24px, #dcb47e 32px);
  color: #6b4423;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctrl-btn svg { width: 34px; height: 34px; }
.ctrl-btn:active { filter: brightness(0.85); }

#result-title { font-size: 26px; }
#result-title.win { color: var(--success); }
#result-title.lose { color: var(--danger); }
#result-title.draw { color: var(--text-dim); }
#result-detail { color: var(--text-dim); font-size: 15px; text-align: center; }