:root {
  color-scheme: dark;
  --ink: #fff0cb;
  --muted: #bacbb3;
  --gold: #eaba71;
  --panel: #1a3630;
  --border: #486052;
  --accent: #e7b360;
  font: 16px/1.45 system-ui, -apple-system, sans-serif;
  background: #132b26;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .51; }
button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid #fff1ad;
  outline-offset: 3px;
}
a { color: inherit; text-underline-offset: .23em; }
[hidden] { display: none !important; }
.top { background: #122b27; border-bottom: 1px solid #b18d575b; }
.top-inner {
  width: min(100% - 34px, 1120px);
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-inline: auto;
}
.back { display: inline-flex; width: fit-content; align-items: center; gap: 9px; min-height: 44px; color: #eadbb7; font-size: .83rem; text-decoration: none; font-weight: 700; }
.back:hover, .guide-link:hover { text-decoration: underline; }
.back span:first-child { color: var(--gold); font-size: 1.16rem; }
.brand { display: flex; gap: 12px; align-items: center; color: #e4bd7b; letter-spacing: .23em; font-size: .69rem; font-weight: 800; }
.brand i { width: 17px; height: 1px; background: #e4bd7b75; }
.wallet { justify-self: end; text-align: right; display: grid; gap: 0; }
.wallet > span, .eyebrow, .subtitle, .section-kicker { letter-spacing: .16em; font-weight: 800; }
.wallet > span { color: #c9d6ba; font-size: .59rem; }
.wallet strong { color: #ffedbc; font-size: 1.24rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
.wallet i { color: #ecb96f; font-size: .86em; font-style: normal; }

.scene {
  position: relative;
  isolation: isolate;
  padding: 25px 14px 17px;
  background:
    linear-gradient(180deg,#19392d17 0%,#122d2540 44%,#142e29 98%),
    url("assets/lago.svg") center 15% / cover no-repeat #345b4d;
  border-bottom: 1px solid #6e6b4b;
}
.scene[data-bonus="true"] { --accent: #bce0a4; }
.scene[data-bonus="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,#17474532,#183e315c 65%,transparent);
  pointer-events: none;
}
.scene-inner { width: min(100%, 670px); margin-inline: auto; }
.hero { text-align: center; margin: 0 0 16px; text-shadow: 0 2px 8px #19382b; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 3px; padding: 4px 11px;
  background: #163a30; border: 1px solid #efc17a78; border-radius: 20px;
  color: #ffedbc; font-size: .64rem;
}
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #e6b775; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; }
h1 { font-size: clamp(2.1rem, 7.8vw, 4.55rem); letter-spacing: -.067em; line-height: 1.02; margin: 2px 0 5px; color: #fff4d0; }
h1 em { color: #f8cd84; font-weight: inherit; }
.subtitle { margin: 0; font-size: .7rem; color: #fff0ca; }
.subtitle span { color: #eaba71; margin: 0 .25em; }

.game {
  position: relative; isolation: isolate;
  --reel-size: clamp(50px, 14.3vw, 87px);
  border: 1px solid #b98b59;
  border-radius: 19px;
  padding: 10px 12px 9px;
  box-shadow: 0 20px 58px #0d252393, inset 0 0 0 3px #293c2a;
  background: linear-gradient(145deg,#233d2e,#152e29 57%,#183730);
}
.game-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin: 0 3px 6px; }
.game-label strong { color: var(--accent); font: bold clamp(.9rem, 3.2vw, 1.16rem) Georgia, serif; }
.game-label > span { color: #e5e8c9; font-weight: 750; font-size: .66rem; letter-spacing: .08em; text-align: right; }
.scene[data-bonus="true"] .game-label > span { letter-spacing: 0; }
.frame {
  position: relative;
  padding: 7px;
  background:
    repeating-linear-gradient(2deg,transparent 0 3px,#512b202f 3px 4px,transparent 4px 9px),
    linear-gradient(136deg,#c49056,#6e422c 34%,#a47044 58%,#6a432e);
  border-radius: 12px;
  border: 1px solid #f0ba758b;
  box-shadow: inset 0 0 0 2px #71472d, 0 3px 8px #111e1a;
}
.frame::before, .frame::after {
  content: "";
  position: absolute; top: 2px; width: 3px; height: 3px;
  border-radius: 100%; background: #e2b479; box-shadow: 0 1px #543721; z-index: 2;
}
.frame::before { left: 3px; } .frame::after { right: 3px; }
.board {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  height: calc(var(--reel-size) * 3);
  gap: 3px; overflow: hidden;
  border: 1px solid #503b25; border-radius: 6px;
  background: #654c33;
}
.reel { overflow: hidden; min-width: 0; }
.track { display: grid; height: 100%; grid-auto-rows: 1fr; }
.track.moving {
  height: 400%;
  animation: spin var(--stop) cubic-bezier(.23,.66,.25,1) both;
}
@keyframes spin { 0% { transform: translateY(0); } 100% { transform: translateY(-75%); } }
.tile {
  display: grid; place-items: center;
  min-height: 0; min-width: 0; position: relative;
  border-bottom: 1px solid #9b8159;
  background: radial-gradient(ellipse at 50% 36%,#fff1d0,#e9d6ac 78%,#cdb588);
  color: #24443a;
}
.tile[data-symbol="cash"] { background: radial-gradient(ellipse at 50% 38%,#fff4b2,#dce4a8 73%,#b0c485); }
.tile[data-symbol="fisher"] { background: radial-gradient(ellipse at 50% 38%,#e9efd5,#b9d1af); }
.tile[data-win="true"] { box-shadow: inset 0 0 0 2px #9f652e, inset 0 0 20px 0 #efb4569e; }
.symbol { width: 91%; height: 93%; object-fit: contain; pointer-events: none; }
.tile[data-symbol="cash"] .symbol { width: 86%; height: 82%; transform: translateY(-8%); }
.fish-value, .symbol-tag {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  line-height: 1.1; border-radius: 10px; white-space: nowrap;
}
.fish-value {
  background: #345742; color: #fff5bd; border: 1px solid #ffdc75;
  padding: 1px 7px; font-size: clamp(.72rem, 2.8vw, .95rem); font-variant-numeric: tabular-nums;
}
.symbol-tag { background: #fff0cd; color: #453925; padding: 1px 4px; font-size: clamp(.43rem, 1.5vw, .61rem); font-weight: 900; letter-spacing: .05em; }
.lines { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; overflow: visible; opacity: .75; }
.lines polyline { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #593222); }
.lines polyline:nth-child(2n) { stroke-dasharray: 4 4; }

.basket-row {
  min-height: 54px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px;
  align-items: center; padding: 5px 1px;
}
.basket { display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: #263f32; border: 1px solid #537052; border-radius: 7px; color: var(--accent); min-width: 110px; }
.basket svg { width: 24px; flex: none; }
.basket div { display: grid; line-height: 1.22; }
.basket span { font-size: .55rem; letter-spacing: .07em; font-weight: 800; }
.basket b { font-size: .72rem; min-height: 14px; }
#status { font-size: .75rem; font-weight: 670; line-height: 1.23; color: #e3ead3; }
.scene[data-collecting="true"] .basket { animation: pulse-basket .7s .4s ease-out both; }
@keyframes pulse-basket { 52% { box-shadow: 0 0 14px #f5cd7894; border-color: #eec278; } }
.flights {
  position: absolute; z-index: 2; pointer-events: none;
  inset: 47px 21px auto; height: calc(var(--reel-size) * 3 + 35px);
}
.flight {
  position: absolute;
  padding: 2px 7px; background: #f4d37b; border: 1px solid #fff1ab; color: #234637;
  font-weight: 900; font-size: .82rem; border-radius: 100px;
  box-shadow: 0 0 0 3px #f5c36938, 0 0 9px #ffd783;
  transform: translate(-50%, -50%);
  animation: fish-to-basket .84s var(--delay) ease-in-out both;
}
@keyframes fish-to-basket {
  0% { left: var(--sx); top: var(--sy); opacity: 0; }
  12% { opacity: 1; }
  45% { left: calc(var(--sx) * .58 + 6%); top: calc(var(--sy) - 12%); }
  85% { opacity: 1; }
  100% { left: 7%; top: 100%; opacity: 0; scale: .55; }
}
.scene[data-paused="true"] :is(.moving,.flight,.basket) { animation-play-state: paused; }

.controls { display: grid; grid-template-columns: 1.12fr 1fr; gap: 9px; align-items: stretch; }
.stake { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: center; }
.stake-label { color: #e0e8ca; font-weight: 780; letter-spacing: .06em; font-size: .63rem; white-space: nowrap; }
.stake-label small { display: block; font-size: .49rem; }
.stake-options, .motion { display: grid; gap: 5px; }
.stake-options { grid-template-columns: repeat(4,minmax(44px,1fr)); }
.motion { grid-template-columns: .74fr 1.26fr; }
.stake-options button, .motion button, .primary {
  min-height: 44px;
  border-radius: 7px; font-weight: 800; line-height: 1.15;
}
.stake-options button, .motion button {
  border: 1px solid #637b64; background: #243e34; color: #fff2cf; padding: 3px 4px;
  font-size: .8rem;
}
.stake-options button[aria-pressed="true"] { background: #efcd8d; border-color: #ffe4a4; color: #342c20; }
.stake-options button:hover:not(:disabled), .motion button:hover { border-color: #ffdaa1; }
.primary {
  width: 100%; padding: 5px 8px;
  background: linear-gradient(180deg,#f7d493,#d5984e);
  border: 1px solid #fce0a0; box-shadow: inset 0 -2px #83532b4d;
  color: #2e2519; font-size: .96rem;
}
.primary.bonus { background: linear-gradient(180deg,#d3e7b0,#90bb80); border-color: #dbefc2; color: #1c3527; }
.primary:hover:not(:disabled) { filter: brightness(1.09); }
.receipt {
  display: grid; grid-template-columns: .8fr 1fr 1.25fr .86fr; gap: 4px;
  margin-top: 8px; border-top: 1px solid #526b56; padding-top: 6px;
}
.receipt div { display: grid; gap: 0; min-width: 0; padding: 0 4px; }
.receipt span { font-size: .63rem; color: #d1dfc6; font-weight: 660; min-height: 2.3em; }
.receipt b { color: #ffe8b7; font-size: .94rem; font-variant-numeric: tabular-nums; }
.receipt b[data-sign="1"] { color: #c9eca9; }
.receipt b[data-sign="-1"] { color: #f3c49f; }
.breakdown { margin: 4px 4px 0; min-height: 1.5em; font-size: .64rem; color: #bfd1b9; }
.guide-link {
  margin: 0 auto; width: fit-content; display: flex; align-items: center; gap: 8px;
  min-height: 44px; color: #f7deb0; text-decoration: none; font-size: .76rem; font-weight: 760;
}
.guide-link span { color: #ecbb73; }

.details { width: min(100% - 30px, 920px); margin: 0 auto; padding: 35px 0 24px; }
.details section { margin: 0 0 38px; }
.section-kicker { color: #e8bb79; font-size: .64rem; margin: 0 0 4px; }
h2 { font-size: clamp(1.7rem, 5vw, 2.45rem); line-height: 1.05; margin: 0 0 15px; letter-spacing: -.03em; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.steps article, .example, details { background: #1c3931; border: 1px solid #526b57; border-radius: 10px; }
.steps article { padding: 14px; }
.steps article > span { color: #e8bb79; font-size: .72rem; font-weight: 800; }
.steps h3 { margin: 4px 0; font-size: .97rem; }
.steps p, .rule-content p, footer p { color: #d1dfc7; font-size: .86rem; margin: 0; }
.example { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px 18px; padding: 10px 14px; margin: 11px 0 0; }
.example-intro { display: grid; font-size: .89rem; }
.example-intro > span { color: #d1dfc7; font-size: .74rem; }
.example-math { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .82rem; }
.example-math > span { display: flex; align-items: center; gap: 3px; padding: 0 5px; background: #29483a; border-radius: 6px; font-weight: 800; }
.example-math img { width: 25px; height: 24px; }
.example-math i { color: #eac487; font-style: normal; }
.example-math > strong { color: #f6d692; white-space: nowrap; }
details + details { margin-top: 8px; }
summary { min-height: 44px; cursor: pointer; padding: 11px 14px; font-weight: 750; font-size: .85rem; }
.rule-content { padding: 0 14px 14px; }
.rule-content p + p { margin-top: 9px; }
table { border-collapse: collapse; width: 100%; font-size: .8rem; margin: 12px 0; }
caption { text-align: left; font-size: .73rem; color: #d1dfc7; margin-bottom: 3px; }
th, td { text-align: left; border-bottom: 1px solid #526b57; padding: 5px 4px; }
.path-list { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.path { display: grid; text-align: center; gap: 1px; color: #d3e1c5; font-size: .67rem; }
.path svg { width: 100%; height: 31px; background: #28473b; border-radius: 4px; }
.path polyline { fill: none; stroke-width: 2; }
.history { margin: 0; padding: 0; list-style: none; }
.history li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; border-bottom: 1px solid #506653; padding: 8px 0; color: #d1dfc7; font-size: .82rem; }
.history li strong { color: #ffe8b7; }
footer { border-top: 1px solid #526b57; padding-top: 14px; }
footer a { display: inline-flex; min-height: 44px; align-items: center; font-size: .8rem; color: #f2cd90; }
@media (max-width: 660px) {
  .top-inner { grid-template-columns: 1fr 1fr; min-height: 56px; width: calc(100% - 26px); }
  .brand { display: none; }
  .scene { padding: 16px 10px 5px; background-position: 57% 0; }
  .hero { margin-bottom: 12px; }
  .game { padding: 8px 8px 7px; border-radius: 13px; }
  .frame { padding: 5px; border-radius: 9px; }
  .lines { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .flights { inset: 40px 15px auto; }
  .controls { grid-template-columns: 1fr; gap: 6px; }
  .stake { grid-template-columns: 54px 1fr; }
  .basket-row { min-height: 53px; }
  .steps { grid-template-columns: 1fr; gap: 7px; }
  .steps article { padding: 9px 12px; }
}
@media (max-width: 350px) {
  .receipt span { font-size: .56rem; }
  .game-label > span { font-size: .57rem; }
  .stake { grid-template-columns: 48px 1fr; gap: 4px; }
  .path-list { grid-template-columns: repeat(3,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .track.moving { animation-duration: 0s; }
  .flight, .scene[data-collecting="true"] .basket { animation: none; }
}