:root {
  color-scheme: dark;
  --ink: #eee7d4;
  --muted: #989181;
  --paper: #ddd3b9;
  --paper-ink: #211d16;
  --table: #10271b;
  --table-deep: #06130d;
  --felt: #0b2417;
  --line: rgba(232, 213, 169, 0.18);
  --red: #b84945;
  --green: #65c98f;
  --amber: #cfa855;
  --brass: #b78d3e;
  --oxblood: #6f292d;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; scrollbar-width: thin; scrollbar-color: #9e7938 #06130d; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #06130d; border-left: 1px solid rgba(207,168,85,.1); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c29b4e, #765724); border: 2px solid #06130d; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #dfbd70, #987333); }
::-webkit-scrollbar-corner { background: #06130d; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse 25rem 18rem at 31% -3%, rgba(205,156,67,.17), transparent 72%),
    radial-gradient(ellipse 25rem 18rem at 69% -3%, rgba(205,156,67,.17), transparent 72%),
    radial-gradient(ellipse 52rem 34rem at 50% 34%, rgba(31,92,57,.26), transparent 75%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 20%, transparent 80%, rgba(0,0,0,.34)),
    repeating-linear-gradient(87deg, rgba(255,245,210,.012) 0 1px, transparent 1px 4px),
    var(--table-deep);
  color: var(--ink);
  font-family: Consolas, "Courier New", monospace;
}

button { font: inherit; }

.table {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 0 12px;
  display: flex;
  flex-direction: column;
}

.masthead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(183,141,62,.3);
  text-align: center;
}

.eyebrow, .instruction, .footer-note, .result-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
}

h1 {
  margin: 0;
  font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(27px, 2.5vw, 34px);
  font-weight: 400;
  letter-spacing: .025em;
  color: #f0e5ca;
  text-shadow: 0 2px 16px rgba(204,153,63,.14);
}

.meters { display: flex; gap: 24px; text-align: right; }
.meters span { font-size: 25px; }
.meters small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.hand-value-meter { transition: color .2s, transform .2s; }
.hand-value-meter.full { color: var(--amber); }
.meter-pulse { animation: meter-pulse .65s cubic-bezier(.2,.8,.2,1); }
.meter-loss { animation: meter-loss .5s ease-out; }
.house {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 10vw, 140px);
  color: #c6bda9;
  padding: 7px 0 4px;
}

.house-centre { min-width: 220px; text-align: center; }
.house-centre p { margin: 13px 0 0; font-family: Georgia, serif; font-style: italic; }
.dealer {
  min-width: 105px;
  text-align: center;
  opacity: .78;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.dealer span { display: block; margin-bottom: 5px; color: #9e8d6b; font-size: 8px; letter-spacing: .22em; }
.dealer strong { display: block; margin-top: 3px; color: #d5c8aa; font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif; font-size: 22px; font-weight: 400; }
.dealer.winner { opacity: 1; transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 0 14px rgba(211,79,71,.42)); }
.mask {
  width: 52px;
  height: 45px;
  margin: auto;
  position: relative;
  border: 1px solid #75664a;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, #302f26, #0d140f);
  box-shadow: 0 8px 22px rgba(0,0,0,.38), inset 0 1px rgba(230,202,139,.08);
  clip-path: polygon(8% 0, 92% 0, 100% 68%, 72% 100%, 50% 82%, 28% 100%, 0 68%);
}
.mask::before, .mask::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 5px;
  top: 18px;
  border-bottom: 2px solid #bd4949;
  filter: drop-shadow(0 0 3px rgba(189,73,73,.45));
}
.mask::before { left: 8px; transform: rotate(8deg); }
.mask::after { right: 8px; transform: rotate(-8deg); }
.mask i { position: absolute; width: 16px; height: 1px; background: #66645e; left: 17px; bottom: 9px; }
.mask-two { border-radius: 42% 50% 45% 38%; transform: scaleX(-1); }

.rules {
  max-width: 820px;
  margin: 0 auto 6px;
  color: #aba38f;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}
.rules strong, .rules span, .rules em { display: block; }
.rules strong { color: #c9b98f; letter-spacing: .1em; }
.rules em { margin-top: 2px; color: #d5b35f; font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif; font-size: 13px; font-style: normal; letter-spacing: .18em; }

.economy {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(70px, 18vw, 220px);
  min-height: 78px;
  padding: 0 0 8px;
}
.kred-bank, .pot-zone { min-width: 105px; text-align: center; position: relative; }
.economy-label { display: block; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.kred-bank strong, .pot-zone strong { display: block; margin-top: 7px; color: #dfb960; font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif; font-size: 19px; }
.chip-stack { width: 58px; height: 40px; margin: 3px auto 0; position: relative; }
.stack-chip {
  position: absolute;
  left: 4px;
  width: 50px;
  height: 14px;
  border: 2px solid #d4aa58;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, #9b7135 0 6px, #e1bd70 6px 11px);
  box-shadow: 0 3px 0 #5d4120, 0 5px 8px rgba(0,0,0,.35);
}
.pot-chip, .flying-chip {
  width: 42px;
  height: 42px;
  border: 4px dashed #ead08c;
  border-radius: 50%;
  background: radial-gradient(circle, #bf8e3f 0 54%, #6e4a21 56%);
  color: #24170b;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 8px 13px rgba(0,0,0,.4);
}
.pot-chip { margin: 8px auto 0; transition: opacity .15s ease, transform .15s ease; }
.pot-chip.empty { opacity: .12; transform: scale(.82); }
.flying-chip { position: fixed; z-index: 90; pointer-events: none; transition: transform .45s cubic-bezier(.2,.75,.25,1), opacity .45s; }

.roulette {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 5, .94);
  backdrop-filter: blur(10px);
  animation: roulette-open .28s ease-out both;
}
.roulette.closing { animation: roulette-close .24s ease-in both; }
.roulette-frame { width: min(1180px, 97vw); text-align: center; }
.roulette-frame header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 9px; }
.roulette-frame header div { text-align: left; }
.roulette-frame header span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.roulette-frame header strong { display: block; margin-top: 3px; font-family: Georgia, serif; font-size: clamp(24px, 4vw, 38px); font-weight: 400; }
.house-rail { display: flex; align-items: center; gap: 8px; }
.house-rail > span { margin-right: 4px; color: #aaa79d; font-size: 9px; letter-spacing: .13em; }
.house-rail b { padding: 7px 10px; border: 1px solid #318c60; background: rgba(19,165,101,.18); color: #b8e8cc; font-size: 11px; font-weight: 400; transition: .18s; }
.house-rail i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: #13a565; border: 1px solid #9af0bd; }
.house-rail b.near { color: #fff; border-color: #9af0bd; background: rgba(19,165,101,.55); box-shadow: 0 0 20px rgba(19,165,101,.5); transform: translateY(-2px); }
.roulette-field {
  width: 100%;
  aspect-ratio: 16 / 5.4;
  position: relative;
  border: 1px solid rgba(233,228,213,.22);
  background: #080b09;
  box-shadow: 0 25px 80px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.5);
  overflow: hidden;
}
#roulette-canvas { display: block; width: 100%; height: 100%; }
.roulette.settling #roulette-canvas { opacity: .2; filter: blur(2px) saturate(.45); transition: opacity .35s, filter .35s; }
.roulette-ball {
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d9d6c9 42%, #6f716b 100%);
  box-shadow: 0 0 5px #fff, 0 0 18px rgba(255,255,255,.8);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: left, top;
  z-index: 2;
}
.roulette-arrival {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  min-width: 230px;
  padding: 18px 28px;
  transform: translate(-50%, -50%);
  background: rgba(7,10,8,.93);
  border: 1px solid var(--amber);
  box-shadow: 0 0 45px rgba(213,170,85,.28);
  animation: arrival .3s cubic-bezier(.2,.8,.2,1) both;
}
.roulette-arrival span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.roulette-arrival strong { display: block; color: var(--ink); font-family: Georgia, serif; font-size: 58px; font-weight: 400; }
.settlement-scene {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(12px, 3vh, 30px);
  background: radial-gradient(circle, rgba(8,12,9,.9), rgba(4,7,5,.96));
  animation: settlement-open .38s ease-out both;
}
.settlement-kicker { color: var(--muted); font-size: 9px; letter-spacing: .22em; }
.settlement-scene h2 { margin: 3px 0 8px; color: var(--ink); font: 400 clamp(22px, 4vh, 38px) Georgia, serif; }
.settlement-ledger { width: min(390px, 92%); color: #c5c1b7; font-size: clamp(10px, 1.5vh, 12px); line-height: 1.85; }
.settlement-ledger .cash-line.total { padding-top: 3px; border-bottom-color: var(--amber); }
.settlement-payment { margin-top: clamp(6px, 1.4vh, 14px); animation: payment-open .5s cubic-bezier(.2,.8,.2,1) both; }
.settlement-payment small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.settlement-payment strong { display: block; color: var(--amber); font: 400 clamp(28px, 5vh, 48px) Georgia, serif; text-shadow: 0 0 28px rgba(213,170,85,.3); }
.settlement-payment strong b { font-weight: 400; }
.settlement-payment span { display: block; color: #aaa79d; font-size: 10px; letter-spacing: .12em; }
.roulette-frame .settlement-again { margin-top: clamp(7px, 1.5vh, 15px); border-color: var(--amber); color: var(--amber); animation: cash-enter .3s ease-out both; }
.roulette-player { min-height: 18px; margin: 10px 0 4px; color: #8b8981; font-family: Georgia, serif; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roulette-frame button { padding: 7px 13px; border: 1px solid #555852; background: transparent; color: #99978f; font: 9px Consolas, monospace; letter-spacing: .12em; cursor: pointer; }

.eye {
  width: 18px;
  height: 10px;
  border: 1px solid #78766f;
  border-radius: 90% 10% 90% 10%;
  transform: rotate(45deg);
  position: relative;
}

.eye::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  top: 2px;
  left: 6px;
}

.writing {
  padding: 17px clamp(15px, 4vw, 38px) 14px;
  background: linear-gradient(180deg, rgba(7,25,16,.76), rgba(4,16,10,.72));
  border: 1px solid rgba(183,141,62,.24);
  box-shadow: inset 0 0 65px rgba(0,0,0,.28), 0 8px 28px rgba(0,0,0,.16);
}
.writing.collapsing { animation: text-collapse .28s ease-in both; transform-origin: 50% 50%; }
.spent-hand .writing { border-color: rgba(211,79,71,.55); box-shadow: inset 0 0 70px rgba(112,27,31,.2); }
.spent-hand .card { filter: saturate(.35) brightness(.78); border-color: #8b5f5a; }
.spent-hand .hand-value-meter { color: #a36d67; text-decoration: line-through; }
.spent-hand #stand-button { border-color: #9a514c; background: #6b302e; color: #f0d8d1; }

.text-line {
  min-height: 48px;
  font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.45;
  overflow-wrap: anywhere;
  position: relative;
}

.placeholder { color: #484c48; }
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.1em;
  background: var(--amber);
  animation: blink 1s steps(1) infinite;
}

.hand-value-rail {
  min-height: 27px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 8px 2px 0;
  color: #948b76;
  font-size: 9px;
  letter-spacing: .16em;
  transition: color .2s, transform .2s;
}
.hand-value-rail strong { color: #d9b45c; font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif; font-size: 17px; font-weight: 400; letter-spacing: .08em; }
.hand-value-rail.full strong { color: #f0c765; text-shadow: 0 0 14px rgba(240,199,101,.4); }

.hand {
  min-height: 194px;
  display: grid;
  grid-template-columns: repeat(11, minmax(54px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 18px 0 8px;
}

.slot {
  height: 150px;
  border: 1px dashed rgba(225,202,146,.15);
  border-radius: 7px;
  position: relative;
}

.slot::before {
  content: attr(data-slot);
  position: absolute;
  inset: auto 0 8px;
  text-align: center;
  color: rgba(233, 228, 213, .12);
  font-size: 10px;
}

.card {
  position: absolute;
  inset: -1px;
  padding: 11px 8px;
  border-radius: 7px;
  background: linear-gradient(145deg, #e8dfc9, #c9bea4);
  border: 1px solid #f1e4c8;
  color: var(--paper-ink);
  box-shadow: 0 12px 20px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: deal .14s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: 50% 100%;
}
.card[data-tier="2"] { border-color: #e6d3a5; background: linear-gradient(145deg, #e5ddc7, #c9bfa5); }
.card[data-tier="3"] { border-color: #dfbd72; background: linear-gradient(145deg, #e7d7b7, #c8b28d); box-shadow: 0 12px 21px rgba(213,170,85,.18); }
.card[data-tier="4"] { border-color: #dba752; background: linear-gradient(145deg, #e6cea1, #c5a577); box-shadow: 0 12px 22px rgba(213,151,55,.25); }
.card[data-tier="5"] { border-color: #ce8145; background: linear-gradient(145deg, #e2c18d, #bd8f60); box-shadow: 0 12px 23px rgba(211,105,55,.3); }
.card[data-tier="6"] { border: 2px solid var(--amber); background: linear-gradient(145deg, #ead39a, #bd8d45); box-shadow: 0 0 20px rgba(213,170,85,.42), 0 14px 25px rgba(0,0,0,.42); }
.card.value-card::before { content: "POTENTIAL ↓"; position: absolute; top: -18px; left: 0; right: 0; color: #d77a62; text-align: center; font: 8px Consolas, monospace; letter-spacing: .08em; }
.card.full-hand-card::before { content: "LAST EXIT · 1 K"; color: #f3d58a; }

.card-fragment {
  font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.card-id { color: #57564f; font-size: 10px; }
.card-id b { color: #a72e3c; font-size: 13px; }
.card.exiting { animation: discard .07s ease-in both; }
.card.exiting.splitting { animation: card-split .11s ease-in both; }
.card.retokenized { animation: retokenized .2s cubic-bezier(.15,.85,.25,1) both; }
.card.swept { animation: sweep .17s ease-in both; }
.card.selectable {
  cursor: crosshair;
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  animation: scan-ready .65s ease-in-out infinite alternate;
}

.card.scanned::after {
  content: "CARD CLAIM\A" attr(data-champion);
  white-space: pre;
  position: absolute;
  inset: 45% 5px auto;
  padding: 8px 3px;
  border-top: 1px solid rgba(25,26,24,.3);
  border-bottom: 1px solid rgba(25,26,24,.3);
  background: rgba(215,208,189,.93);
  text-align: center;
  font: 700 9px/1.6 Consolas, monospace;
  letter-spacing: .06em;
}
.card.house-claim { border-color: var(--red); box-shadow: 0 12px 22px rgba(211,79,71,.35); }

.readout {
  height: 42px;
  display: grid;
  place-items: center;
  font-size: clamp(17px, 2.5vw, 25px);
  font-weight: 700;
  letter-spacing: .13em;
}

.readout.narrator { color: var(--red); }
.readout.player { color: var(--green); }
.readout.dead { color: var(--amber); }
.readout.loading { color: var(--muted); animation: pulse .8s infinite alternate; }

.controls { display: flex; justify-content: center; gap: 12px; }

.controls button {
  min-width: 180px;
  min-height: 54px;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.controls button:disabled { opacity: .32; cursor: not-allowed; }
.controls button small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.secondary { background: rgba(5,17,11,.45); color: var(--ink); border: 1px solid #69614d; }
.secondary.active { border-color: var(--amber); color: var(--amber); }
.secondary.sense { border-color: #704044; background: rgba(80,28,31,.12); }
.secondary.tips-button { min-width: 130px; border-color: #8a7147; color: #e2c47e; }
.primary { background: linear-gradient(180deg, #f0e7d3, #d1c3a3); color: #171c16; border: 1px solid #f5ecd9; font-weight: 700; box-shadow: 0 5px 16px rgba(0,0,0,.22); }

.tips-shade { position: fixed; inset: 0; z-index: 75; background: rgba(3,6,5,.52); backdrop-filter: blur(2px); animation: tips-fade .22s ease-out both; }
.tips-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(470px, 94vw);
  padding: 28px 30px 18px;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(18,41,28,.99), rgba(5,17,10,.995));
  border-left: 1px solid rgba(213,170,85,.5);
  box-shadow: -25px 0 80px rgba(0,0,0,.65);
  animation: tips-open .3s cubic-bezier(.18,.82,.25,1) both;
}
.tips-panel > header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tips-panel > header span, .tip-reading section span { color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.tips-panel h2 { margin: 2px 0 0; font: 400 46px Georgia, serif; }
.tips-panel > header button { border: 0; background: transparent; color: var(--muted); font-size: 28px; cursor: pointer; }
.tips-intro { margin: 14px 0; color: #b1aea5; font: italic 15px Georgia, serif; }
.tips-list { display: grid; gap: 8px; }
.tip-item { width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.018); color: var(--ink); text-align: left; cursor: pointer; }
.tip-item.selected { border-color: var(--amber); background: rgba(213,170,85,.08); transform: translateX(-4px); }
.tip-item:disabled { cursor: not-allowed; opacity: .48; }
.tip-item header { display: flex; justify-content: space-between; gap: 12px; }
.tip-item strong { font: 400 19px Georgia, serif; }
.tip-item b { color: var(--amber); font-size: 11px; font-weight: 400; }
.tip-item p { margin: 5px 0 0; color: #8f8d86; font-size: 10px; line-height: 1.4; }
.tip-item.owned b { color: var(--green); }
.tip-item.partial { border-color: rgba(213,170,85,.32); }
.tip-item.partial b { color: #d8bc78; }
.tip-item.unaffordable { opacity: .5; }
.tip-reading { animation: tip-reveal .28s ease-out both; }
.tip-reading > button { margin: 13px 0 20px; border: 0; background: transparent; color: var(--amber); font: 9px Consolas, monospace; letter-spacing: .12em; cursor: pointer; }
.tip-reading h3 { margin: 0 0 22px; font: 400 34px Georgia, serif; }
.tip-reading section { margin: 0 0 22px; padding: 15px 16px; border-left: 2px solid var(--line); background: rgba(255,255,255,.018); }
.tip-reading section:last-of-type { border-left-color: var(--amber); }
.tip-reading p { margin: 8px 0 0; color: #cbc7bc; font: 16px/1.55 Georgia, serif; }
.tip-reading .tip-felt-buy { display: block; width: 100%; margin: 14px 0 0; padding: 11px; border: 1px solid var(--amber); background: rgba(213,170,85,.08); color: var(--amber); font: 10px Consolas, monospace; letter-spacing: .12em; cursor: pointer; }
.tips-panel > footer { margin-top: 18px; color: #666861; font-size: 8px; letter-spacing: .1em; text-align: center; }

.soft-max {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3,10,6,.84);
  backdrop-filter: blur(7px);
  animation: tips-fade .28s ease-out both;
}
.soft-max-card {
  width: min(430px, 94vw);
  padding: 28px 34px 30px;
  border: 1px solid rgba(207,168,85,.62);
  background: radial-gradient(circle at 50% 20%, rgba(66,104,70,.2), transparent 42%), linear-gradient(145deg, #10271a, #07120c);
  box-shadow: 0 30px 100px rgba(0,0,0,.72), inset 0 1px rgba(244,224,179,.1);
  text-align: center;
  animation: soft-max-enter .4s cubic-bezier(.18,.82,.25,1) both;
}
.soft-max-office { color: #8e8778; font-size: 8px; letter-spacing: .22em; }
.soft-max-card h2 { margin: 3px 0 12px; color: #eee4cc; font: 400 38px Baskerville, "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: .03em; }
.soft-max-mask {
  width: 66px;
  height: 58px;
  margin: 0 auto 18px;
  position: relative;
  border: 1px solid #b99a5d;
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(145deg, #d9cba8, #756846);
  box-shadow: 0 10px 25px rgba(0,0,0,.45), inset 0 1px rgba(255,249,225,.5);
}
.soft-max-mask::before, .soft-max-mask::after { content: ""; position: absolute; top: 23px; width: 13px; height: 5px; border-bottom: 2px solid #4cc58a; filter: drop-shadow(0 0 4px rgba(76,197,138,.55)); }
.soft-max-mask::before { left: 13px; transform: rotate(5deg); }
.soft-max-mask::after { right: 13px; transform: rotate(-5deg); }
.soft-max-mask i { position: absolute; left: 25px; bottom: 13px; width: 16px; height: 5px; border-bottom: 1px solid #514b39; border-radius: 50%; }
.soft-max-card blockquote { min-height: 52px; margin: 0 auto 18px; color: #d7d0bd; font: italic 18px/1.45 Baskerville, "Palatino Linotype", Palatino, Georgia, serif; }
.soft-max-offer { margin: 0 auto 18px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.soft-max-offer span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.soft-max-offer strong { display: block; margin-top: 4px; color: #dfb960; font: 400 26px Baskerville, "Palatino Linotype", Palatino, Georgia, serif; }
.soft-max-offer b { font-weight: 400; }
.soft-max-card button { width: 100%; padding: 13px 16px; border: 1px solid #e5d7ba; background: linear-gradient(180deg, #eee5d2, #ccb995); color: #152018; font: 700 11px Consolas, monospace; letter-spacing: .12em; cursor: pointer; }
.soft-max-card small { display: block; margin-top: 11px; color: #777468; font-size: 8px; letter-spacing: .12em; }

.result {
  text-align: center;
  margin: 24px auto 0;
  padding: 22px 50px;
  min-width: min(430px, 100%);
  border-top: 1px solid var(--line);
}

.result h2 { margin: 5px 0; font-family: Georgia, serif; font-size: 40px; font-weight: 400; animation: settle-number .4s cubic-bezier(.2,.8,.2,1); }
#payout { margin: 0; color: var(--amber); }
.cashout {
  width: min(330px, 100%);
  margin: 15px auto 0;
  font-size: 11px;
  line-height: 1.8;
  color: #aaa79d;
}
.cash-line { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line); }
.cash-enter { animation: cash-enter .3s cubic-bezier(.2,.8,.2,1) both; }
.cash-line.total { margin-top: 5px; color: var(--amber); font-weight: 700; }
.cash-line.net { margin-top: 4px; color: #d4d0c5; border-top: 1px solid var(--line); font-weight: 700; }
.bank-pop { animation: bank-pop .55s ease-out; }
.footer-note { margin: auto 0 0; padding-top: 12px; text-align: center; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.table.shake { animation: shake .18s linear; }
.reward-float-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.reward-float { position: absolute; min-width: 170px; text-align: center; transform: translate(-50%, -50%); text-shadow: 0 3px 12px #000; animation: reward-float 1.2s cubic-bezier(.15,.75,.2,1) both; }
.reward-float strong { display: block; color: var(--amber); font: 700 18px Consolas, monospace; letter-spacing: .07em; }
.reward-float span { display: block; margin-top: 3px; color: #b9b7ae; font-size: 8px; letter-spacing: .16em; }
.reward-float.gain strong { color: #69e2ad; text-shadow: 0 0 15px rgba(105,226,173,.45), 0 3px 12px #000; }
.reward-float.gain span { color: #9ccdb7; }
.reward-float.full strong { color: #f0c765; text-shadow: 0 0 18px rgba(240,199,101,.5), 0 3px 12px #000; }
.reward-float.full span { color: #d8c18b; }
.reward-float.loss strong { color: #a36d67; }

@keyframes deal {
  from { opacity: 0; transform: translateY(-70px) rotate(-4deg) scale(.92); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes discard {
  to { opacity: 0; transform: translateY(28px) rotate(8deg) scale(.85); }
}
@keyframes card-split { to { opacity: 0; transform: translateY(20px) scaleX(1.22) scaleY(.78); filter: blur(4px); } }
@keyframes retokenized { from { opacity: 0; transform: translateY(-48px) rotate(-3deg) scale(.9); } }
@keyframes sweep { to { opacity: 0; transform: translateX(90px) rotate(12deg); } }
@keyframes reward-float { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.75); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -145%); } }
@keyframes meter-pulse { 40% { color: var(--amber); transform: scale(1.28); text-shadow: 0 0 18px var(--amber); } }
@keyframes meter-loss { 40% { color: #a36d67; transform: translateY(3px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { to { opacity: .45; } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes scan-ready { to { transform: translateY(-7px); box-shadow: 0 18px 25px rgba(0,0,0,.48); } }
@keyframes bank-pop { 40% { transform: scale(1.28); color: #f3d58a; } }
@keyframes settle-number { from { opacity: 0; transform: scale(1.35); filter: blur(8px); } }
@keyframes text-collapse { to { opacity: 0; transform: scale(.05); filter: blur(8px); } }
@keyframes roulette-open { from { opacity: 0; transform: scale(1.025); } }
@keyframes roulette-close { to { opacity: 0; transform: scale(.98); } }
@keyframes arrival { from { opacity: 0; transform: translate(-50%, -50%) scale(1.5); filter: blur(7px); } }
@keyframes cash-enter { from { opacity: 0; transform: translateY(-8px); color: var(--amber); } }
@keyframes settlement-open { from { opacity: 0; } }
@keyframes payment-open { from { opacity: 0; transform: scale(1.35); filter: blur(6px); } }
@keyframes tips-fade { from { opacity: 0; } }
@keyframes tips-open { from { opacity: 0; transform: translateX(100%); } }
@keyframes tip-reveal { from { opacity: 0; transform: translateX(18px); } }
@keyframes soft-max-enter { from { opacity: 0; transform: translateY(28px) scale(.96); } }

@media (max-width: 820px) {
  .hand { grid-template-columns: repeat(6, 1fr); min-height: 390px; }
  .slot { height: 145px; }
  .masthead { align-items: start; }
  .meters { flex-direction: column; gap: 3px; }
  .house { gap: 14px; }
  .house-centre { min-width: 130px; }
  .economy { gap: 55px; }
  .house-rail > span { display: none; }
  .house-rail b { padding: 6px 7px; }
}