:root {
  color-scheme: dark;
  --ink: #1a0811;
  --ivory: #fff2d6;
  --muted: #dfbc9c;
  --gold: #efbd72;
  --line: #875031;
  --surface: #2b111c;
  font-family: system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  color: var(--ivory);
  min-width: 0;
  background:
    radial-gradient(ellipse 1100px 780px at 50% 7%, #651d2e 0%, #2b101e 62%, transparent 100%),
    var(--ink);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid #ffeab2; outline-offset: 3px; }
.top {
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 max(12px, calc((100vw - 1000px)/2));
  background: #1d0a13ed;
  border-bottom: 1px solid #bd754c57;
  white-space: nowrap;
}
.top a { display: inline-flex; align-items: center; min-height: 44px; font-size: .82rem; text-decoration: none; }
.top a:hover { text-decoration: underline; }
.edition { font-size: .64rem; letter-spacing: .2em; color: #eebd80; }
main, footer { width: min(100% - 28px, 680px); margin-inline: auto; }
.stage { position: relative; isolation: isolate; padding: 16px 0 0; }
.stage::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -1vw 5%;
  background:
    radial-gradient(ellipse at 10% 16%, #ffb05353, transparent 30%),
    radial-gradient(ellipse at 92% 14%, #ff9e4d49, transparent 27%),
    repeating-linear-gradient(62deg, #ffd9870d 0 1px, transparent 1px 21px),
    repeating-linear-gradient(-62deg, #ffd9870d 0 1px, transparent 1px 21px);
  mask-image: radial-gradient(ellipse at center, #000 18%, transparent 72%);
  pointer-events: none;
}
.wallet {
  width: min(100%, 460px); min-height: 57px; margin: 0 auto 10px;
  display: flex; gap: 11px; align-items: center;
  border: 1px solid #8f523b; border-radius: 12px;
  background: linear-gradient(120deg,#2d1320,#4d1926 50%,#2d1320);
  box-shadow: inset 0 1px #e9a67a2c, 0 6px 15px #20091276;
  padding: 7px 14px; font-size: .59rem; font-weight: 800; letter-spacing: .13em; color: #eabb93;
}
.wallet strong { display: block; color: var(--ivory); font-size: 1.28rem; letter-spacing: .025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wallet-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #bf844a; border-radius: 50%; font-size: 1.1rem; color: #ffde9a; background: #543125; }
.currency { margin-left: auto; font-size: .66rem; letter-spacing: .16em; }
.cabinet {
  position: relative; margin: auto; width: min(100%, 460px);
  border: 3px solid #d69a54; border-radius: 35px 35px 19px 19px;
  background:
    radial-gradient(ellipse 70% 24% at 50% 10%, #b54442 0%, transparent 85%),
    repeating-linear-gradient(122deg,#ffe4a009 0 1px,transparent 1px 9px),
    linear-gradient(120deg,#32121d,#761e30 50%,#34111e);
  padding: 6px 16px 11px;
  box-shadow: 0 0 0 1px #471c21, inset 0 0 0 2px #5f321e, inset 0 0 0 4px #ffdb89, inset 0 0 0 5px #7a4827,
    0 18px 34px #11030bab, 0 0 42px #de6b3c24;
}
.cabinet::before,.cabinet::after { content:""; position:absolute; width:7px; height:7px; bottom: 10px; border-radius:50%; background:#e6b46c; box-shadow: inset 0 1px 0 #ffeabb, 0 1px 2px #2b0a0b; }
.cabinet::before {left:9px} .cabinet::after {right:9px}
.crest { height: 94px; display: flex; align-items: center; justify-content: center; gap: clamp(8px,4vw,22px); }
.crest img { width: min(62%, 223px); height: 100%; filter: drop-shadow(0 4px 4px #44131d8c); }
.side-mark { color:#f9cb88; font-size: 1.18rem; text-shadow: 0 0 11px #f88f58; }
h1 { margin: -3px 0 0; text-align:center; font: bold clamp(2.15rem,8vw,3.05rem)/1 Georgia,serif; letter-spacing: -.045em; color: #ffde94; text-shadow: 0 2px #713d20, 0 4px 10px #26091e; }
.subtitle { margin: 4px 0 12px; text-align:center; color:#ffd295; font-size: .6rem; font-weight: 800; }
.reels {
  position: relative; aspect-ratio: 1.63; overflow: hidden; isolation: isolate;
  border-radius: 11px; border: 3px solid #c78748;
  background: #2b111a;
  box-shadow: 0 0 0 1px #351121, 0 0 0 2px #eeb66b, 0 0 0 4px #593027, inset 0 0 20px #120610;
}
.tiles { position:absolute; inset:0; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.reel { min-width:0; height:100%; overflow:hidden; background: #331422; border-inline: 1px solid #d59a6554; }
.belt { height:100%; display:flex; flex-direction:column; }
.tile {
  flex: 0 0 33.333333%; min-height: 0; position:relative; display:grid; place-items:center;
  background: radial-gradient(ellipse at center,#8a4551,#532330 72%);
  border: 1px solid #d8996742;
  box-shadow: inset 0 0 0 2px #220d1780, inset 0 0 18px #220d1766;
}
.tile svg { width: 86%; height: 100%; min-height: 0; filter: drop-shadow(0 3px 4px #240b17a8); }
.tile.center { z-index: 1; box-shadow: inset 0 0 0 3px #ffd884, inset 0 0 21px #ffb9587d; }
.tile b { position:absolute; z-index:4; right:4px; top:4px; color:#2b111a; font-size:.76rem; border-radius:6px; padding:2px 5px; background:#ffda8c; }
.tile.lit { background:radial-gradient(ellipse at center,#ad6352,#632534 75%); outline: 1px solid #ffc87d; outline-offset: -2px; }
.rolling .belt { animation: roll .29s linear infinite; filter:blur(2px); }
.r1 .belt { animation-duration:.36s; } .r2 .belt { animation-duration:.44s; }
.drop .belt { animation: drop .24s cubic-bezier(.18,.9,.35,1.15); }
.tiles[data-paused="true"] .belt { animation-play-state:paused; }
@keyframes roll { to { transform: translateY(-100%); } }
@keyframes drop { from { transform: translateY(-26%); filter:blur(1.2px); } }
.overlay,.coins { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.overlay { z-index: 2; }
.overlay path { fill:none; stroke:#ffe6a1; stroke-width:4px; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px #ffae39) drop-shadow(0 1px 1px #391310); }
.coins { z-index: 3; overflow:hidden; }
.coins i {
  position:absolute; width:8px; height:8px; border:1px solid #ffe5a6; border-radius:50%; background:#dfa751;
  left:calc(12% + var(--i)*9%); top:66%; opacity:0;
  animation: coins .71s ease-out calc(var(--i)*.036s) both;
}
@keyframes coins { 15% {opacity:.8} 100% {transform:translate(18px,-93px) rotateY(160deg);opacity:0} }
.line-strip { display:flex; justify-content:space-between; align-items:center; gap:6px; color:#ffdaa8; font-size:.68rem; letter-spacing:.05em; }
#line-display { padding:0 2px; color:#ffe5af; background:transparent; border:0; font-size:.74rem; font-weight:700; text-align:right; }
#line-display:not(:disabled):hover { text-decoration:underline; }
.stake-picker { min-width:0; margin:0; padding:0; border:0; display:grid; gap:6px; grid-template-columns:repeat(4,1fr); }
legend { padding:0; margin-bottom:4px; color:#ffe3ba; font-size:.73rem; }
.stake-picker button {
  border:1px solid #ad754a; border-radius:8px; color:#ffebc6; font-size:.9rem; font-weight:700;
  background:linear-gradient(#68302e,#391625); box-shadow:inset 0 1px #ffcc9638;
}
.stake-picker [aria-pressed="true"] { color:#2d141b; border-color:#ffdea0; background:linear-gradient(#ffe3a6,#dca353); }
.stake-picker button:disabled { opacity:.57; }
#spin,#refill {
  width:100%; margin-top:8px; min-height:48px; border-radius:9px;
  border:1px solid #ffe1a3; background:linear-gradient(#ffdf93,#db9c48);
  color:#331619; font-weight:900; font-size:1rem; box-shadow:0 3px #8b4b2d,inset 0 1px #fff3cb;
}
#spin span { margin-left:8px; font-size:1.12rem; }
#spin:hover:not(:disabled),#refill:hover,.stake-picker button:hover:not(:disabled) { filter:brightness(1.13); }
#spin:disabled { opacity:.64; }
.status { margin: 10px 1px 0; min-height: 19px; text-align:center; font-size:.73rem; line-height:1.35; color:#ffe1bf; }
.panel { margin: 13px 0; padding: 19px; border:1px solid #92573d; border-radius:13px; background:var(--surface); box-shadow:inset 0 1px #ffe0a21d; }
.results { width:min(100%,460px); margin-inline:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:11px 4px; text-align:center; }
.results div+div { border-left:1px solid #92573d73; }
.results span { display:block; font-size:.73rem; color:#efc7a3; }
.results strong { display:block; font-size:clamp(1rem,5vw,1.42rem); font-variant-numeric:tabular-nums; }
.results [data-sign="-1"] { color:#ffc1b4; }
.results [data-sign="1"] { color:#ffe29f; }
h2,h3 { font-family:Georgia,serif; color:#ffe1a4; }
h2 { margin: 0 0 12px; font-size:1.6rem; }
h3 { margin:8px 0 7px; font-size:1.12rem; }
.panel p,.panel li { font-size:.89rem; line-height:1.55; color:var(--muted); }
.panel .eyebrow { margin:0 0 4px; color:#e8b575; letter-spacing:.15em; font-size:.66rem; font-weight:800; }
.steps { padding-left:1.4rem; }
.steps li+li { margin-top:5px; }
.example { border-left:2px solid #e2a761; padding:7px 11px; background:#51232a; }
.example strong { color:#ffdc9e; }
.tables { display:grid; gap: 19px; grid-template-columns:1fr 1fr; }
table { border-collapse:collapse; width:100%; font-size:.8rem; }
th,td { text-align:left; border-bottom:1px solid #99563c64; padding:4px; }
table td,table thead th:last-child { text-align:right; }
table svg { display:inline-block; width:28px; height:28px; vertical-align:middle; margin-right:5px; }
.line-map > div { display:flex; align-items:center; gap:8px; min-height:36px; font-size:.83rem; }
.line-map svg { flex:0 0 28px; width:28px; height:26px; border:1px solid #94533c; border-radius:4px; }
.line-map path { stroke:#eab773; stroke-width:14; fill:none; }
.line-map .grid { stroke:#94533c; stroke-width:5; }
.line-map b { color:var(--gold); margin-right:4px; }
.history { margin:0; padding:0; list-style:none; }
.history li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; padding:7px 0; border-bottom:1px solid #99563c64; }
.history strong { color:#ffe5bb; }
footer { padding:1px 0 22px; color:var(--muted); font-size:.77rem; }
footer a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:480px) {
  .top { min-height:51px; }
  main,footer { width:calc(100% - 20px); }
  .stage { padding-top:10px; }
  .crest { height:77px; }
  .cabinet { padding-inline:12px; }
  .subtitle { margin-bottom:10px; }
}
@media (max-width:365px) {
  .edition { letter-spacing:.06em; }
  .tables { grid-template-columns:1fr; }
  .panel { padding-inline:13px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; }
}

.coins[data-paused="true"] i { animation-play-state:paused; }