/* Ministry of Chance. A state kiosk running a casino: grey Win98 chrome, black wells, one neon. */
:root {
  --ink: #0C0A0D; --pink: #FF3EA5; --pink-hi: #FFA6D5; --pink-lo: #A01E66;
  --grey: #C0C0C0; --hi: #FFF; --lo: #808080; --dk: #000;
  --deep: #16121A; --dark: #241E29; --dim: #463D4D; --text: #F5F0F2; --quiet: #B4ACB9;
  --red: #D4213D; --green: #0E8A5F; --win: #20E0C0;
  --foot: 30px;
}
* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; padding-bottom: calc(var(--foot) + 16px);
  background: var(--ink); color: var(--text); overflow-x: hidden;
  font: 13px/1.4 Tahoma, "MS Sans Serif", Verdana, "DejaVu Sans", Arial, sans-serif;
}
[hidden] { display: none !important; }
h1, h2, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; border-radius: 0; }
canvas.px { display: block; image-rendering: pixelated; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mini { color: var(--quiet); font-size: 12px; }
.skip { position: absolute; left: -999px; top: 4px; z-index: 20; background: var(--pink); color: var(--ink); padding: 6px 10px; font-weight: 700; }
.skip:focus { left: 4px; }

/* Focus: always a white ring with a black ring round it, so it shows on grey, pink and black alike. */
:focus-visible { outline: 2px solid var(--hi); outline-offset: 1px; box-shadow: 0 0 0 5px var(--dk); }
main:focus, h1:focus, #balance:focus { outline: none; box-shadow: none; }

/* ---------- buttons ---------- */
.btn, .seg-btn, .link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 12px; color: #000; text-decoration: none; font-weight: 700; cursor: pointer;
  background: var(--grey); border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: 1px 1px 0 var(--dk); user-select: none; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #D4D4D4; }
.btn:active:not(:disabled):not([aria-disabled="true"]) { border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: none; transform: translate(1px, 1px); }
.btn:disabled, .seg-btn:disabled { color: var(--lo); text-shadow: 1px 1px 0 var(--hi); cursor: not-allowed; }
.btn[aria-disabled="true"] { cursor: progress; filter: saturate(.3) brightness(.75); }
.btn.primary { background: var(--pink); color: var(--ink); border-color: var(--pink-hi) var(--pink-lo) var(--pink-lo) var(--pink-hi); }
.btn.primary:hover:not(:disabled) { background: #FF66B8; }
.btn.primary:disabled { background: #6B5B66; color: #2A2329; text-shadow: none; border-color: #8B7A85 #40353C #40353C #8B7A85; }
.btn.primary.hot { background: var(--win); border-color: #A5FFEF #0F8F7A #0F8F7A #A5FFEF; }
.btn.primary.hot:hover { background: #5CF0D6; }
.btn.big { min-height: 48px; font-size: 16px; width: 100%; }
.btn.small { min-height: 30px; padding: 0 8px; font-size: 12px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; }
.row > .btn { flex: 1 1 0; }
.row.tight { flex-wrap: nowrap; gap: 3px; }
.row.tight > .btn { flex: 0 0 auto; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.seg { display: flex; gap: 0; flex-wrap: wrap; }
.seg-btn { flex: 1 1 auto; min-height: 34px; padding: 0 8px; box-shadow: none; }
.seg-btn[aria-checked="true"] { background: var(--pink); color: var(--ink); border-color: var(--pink-lo) var(--pink-hi) var(--pink-hi) var(--pink-lo); }

.field {
  width: 100%; min-height: 34px; padding: 4px 8px; background: #000; color: var(--text);
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); font-variant-numeric: tabular-nums; font-weight: 700;
}
.field:disabled { color: var(--lo); background: var(--deep); }
.field.bad { border-color: var(--pink); }
input.field { flex: 1 1 60px; min-width: 56px; font-size: 16px; }
select.field { font-size: 14px; }
.lab { display: block; font-size: 12px; font-weight: 700; color: var(--quiet); margin-bottom: 3px; }
.err { color: var(--pink-hi); font-size: 12px; font-weight: 700; margin-top: 4px; min-height: 0; }
.err:empty { display: none; }

/* ---------- top bar ---------- */
#top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: stretch; gap: 3px; padding: 3px;
  background: var(--grey); border-bottom: 2px solid var(--dk); box-shadow: inset 0 2px 0 var(--hi); min-height: 46px; color: #000;
}
#brand {
  display: flex; align-items: center; padding: 0 10px; background: var(--pink); color: var(--ink);
  font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid; border-color: var(--pink-lo) var(--pink-hi) var(--pink-hi) var(--pink-lo);
}
#brand .short { display: none; }
#back { min-height: 0; }
#balance {
  margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 2px 10px; background: #000; color: var(--text);
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); min-width: 0;
}
.units { display: flex; flex-direction: column; font-size: 10px; line-height: 1.15; color: var(--quiet); white-space: nowrap; }
.units .play { color: var(--pink-hi); }
#grant { display: flex; align-items: stretch; }
#grant .btn { min-height: 0; }
.next {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.15; padding: 0 8px; min-width: 76px; text-align: center;
  border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); font-weight: 700;
}
.next small { font-size: 10px; font-weight: 400; }

/* ---------- footer, always visible ---------- */
#foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; min-height: var(--foot); display: flex; align-items: center; gap: 3px;
  padding: 2px 3px; background: var(--grey); color: #000; border-top: 2px solid var(--hi); font-size: 12px;
}
#foot p { flex: 1 1 auto; min-width: 0; padding: 2px 8px; background: #FFF8E8; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
#foot a, #foot .link { flex: 0 0 auto; min-height: 24px; padding: 0 8px; font-weight: 700; font-size: 12px; box-shadow: none; display: inline-flex; align-items: center; white-space: nowrap; }
#foot a { color: #000; }
#foot .link { background: none; border: 1px solid transparent; }
#foot .link[aria-pressed="true"] { background: var(--pink); }

#notices { max-width: 1120px; margin: 0 auto; }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 8px 0; padding: 6px 6px 6px 10px; background: #FFF8E8; color: #000; border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); }

/* ---------- windows ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.window {
  background: var(--grey); color: #000; padding: 3px;
  border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); box-shadow: 1px 1px 0 var(--dk);
}
.titlebar {
  display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 2px 3px 2px 8px;
  background: var(--pink); color: var(--ink); font-weight: 700;
}
.titlebar h1, .titlebar h2 { font-size: 14px; white-space: nowrap; }
.titlebar .tag { font-weight: 400; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.close {
  margin-left: auto; flex: none; width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #000;
  background: var(--grey); text-decoration: none; border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi);
}
.window > .body { background: var(--ink); color: var(--text); margin-top: 3px; padding: 12px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); display: flex; flex-direction: column; gap: 8px; }

/* ---------- lobby ---------- */
.hero { display: grid; grid-template-columns: 1fr 280px; gap: 8px; align-items: stretch; }
.hero-main { position: relative; background: var(--ink); overflow: hidden; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); min-height: 360px; }
.hero-art { position: absolute; inset: 0; overflow: hidden; }
.hero-text { position: relative; z-index: 1; padding: 20px; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.brand-title { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.brand-title canvas { max-width: 100%; }
.sub { color: var(--quiet); }
.slogan { color: var(--pink-hi); font-weight: 700; min-height: 2.8em; }
.allot { display: flex; flex-direction: column; }
.allot .body { flex: 1; justify-content: center; gap: 12px; }
.grant-big { font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--pink); font-variant-numeric: tabular-nums; }
.grant-state { color: var(--win); font-weight: 700; }

.floor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cab {
  display: grid; grid-template-columns: auto 1fr; gap: 0; background: var(--grey); color: #000; text-decoration: none; padding: 3px;
  border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); box-shadow: 1px 1px 0 var(--dk);
}
.cab-art { display: block; background: var(--ink); border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.cab-art canvas { width: 144px; height: 108px; }
.cab-text { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; min-width: 0; }
.cab-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 16px; }
.cab-how { font-size: 12px; }
.cab-rtp { margin-top: auto; font-size: 12px; color: #333; }
.cab:hover { background: #D4D4D4; }
.cab:hover .cab-name { color: var(--pink-lo); }
.live { font-size: 11px; font-weight: 700; padding: 0 5px; background: var(--ink); color: var(--pink); }

.ledger li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--dark); }
.ledger li.none { display: block; color: var(--quiet); border: 0; }
.ledger .when { color: var(--quiet); }
.ledger small { color: var(--quiet); font-size: 12px; }
.delta { font-weight: 700; }
.delta.up { color: var(--win); }
.delta.down { color: var(--pink-hi); }

/* ---------- game frame ---------- */
.game-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3px; margin-top: 3px; }
.stage {
  background: #000; color: var(--text); padding: 12px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.controls {
  background: var(--ink); color: var(--text); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.controls h2.lab { margin: 4px 0 0; }
.say { min-height: 2.8em; width: 100%; text-align: center; font-size: 14px; color: var(--quiet); }
.say[data-mood="win"] { color: var(--win); font-weight: 700; }
.say[data-mood="lose"] { color: var(--pink-hi); }
.broke { background: #FFF8E8; color: #000; padding: 8px; border: 2px solid; border-color: var(--pink-hi) var(--pink-lo) var(--pink-lo) var(--pink-hi); }
.broke .num { font-weight: 700; }
.rules { margin-top: 3px; background: var(--grey); }
.rules summary { cursor: pointer; font-weight: 700; padding: 6px 8px; }
.rules-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #FFF8E8; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.rules-body ul { list-style: square; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
table { border-collapse: collapse; }
.plain td, .plain th { padding: 2px 16px 2px 0; text-align: left; font-weight: 400; }
.plain th { font-weight: 700; text-transform: capitalize; }

/* slots */
.paytable { width: 100%; }
.paytable td { padding: 3px 4px; border-bottom: 1px solid var(--dark); }
.paytable td.num { text-align: right; font-weight: 700; color: var(--pink); }
.paytable .icons { display: flex; gap: 1px; width: 56px; }
.paytable tr.hit td { background: var(--pink); color: var(--ink); }
.paytable tr.hit td.num { color: var(--ink); }

/* blackjack */
.felt { width: 100%; min-height: 330px; padding: 12px; background: #0B1F12; border: 2px solid #17331F; display: flex; flex-direction: column; gap: 14px; }
.felt-line { text-align: center; color: #5C8A6A; font-size: 12px; letter-spacing: .04em; }
.bj-seat, .bj-hands { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 128px; }
.bj-hand { padding: 6px; border: 2px solid transparent; }
.bj-hand.active { border-color: var(--pink); background: rgba(255,62,165,.08); }
.hand-lab { font-size: 12px; color: #B8D4C0; margin-bottom: 4px; }
.hand-lab strong { color: var(--text); font-size: 15px; margin-left: 4px; }
.cards { display: flex; }
.cardwrap { display: block; }
.cardwrap + .cardwrap { margin-left: -38px; }
canvas.card { width: 68px; height: 92px; }
.cardwrap.fresh canvas { animation: deal .16s steps(4); }
@keyframes deal { from { transform: translate(14px, -10px); opacity: .2; } }
.hand-bet { font-size: 12px; color: #B8D4C0; margin-top: 4px; }
.hand-out { font-weight: 700; font-size: 14px; }
.hand-out.win, .hand-out.blackjack { color: var(--win); }
.hand-out.lose, .hand-out.bust { color: var(--pink-hi); }
.hand-out.push { color: var(--text); }
.empty { color: #5C8A6A; align-self: center; }
.bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bj-actions .btn { min-height: 48px; width: 100%; font-size: 15px; }
@media (hover: none) { .keys { display: none; } }

/* roulette */
.wide .game-body { grid-template-columns: minmax(0, 1fr) 300px; }
.rl-top { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.rl-wheel { flex: 0 0 220px; display: flex; justify-content: center; }
.rl-side { display: flex; flex-direction: column; gap: 8px; flex: 0 1 200px; min-width: 0; }
.rl-result { display: flex; flex-direction: column; align-items: center; padding: 8px; background: var(--deep); border: 2px solid var(--dark); text-transform: capitalize; }
.rl-result[data-col="red"] { background: var(--red); }
.rl-result[data-col="black"] { background: #1A1420; border-color: var(--dim); }
.rl-result[data-col="green"] { background: var(--green); }
.rl-num { font-size: 40px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rl-col { font-size: 12px; }
.rl-recent { display: flex; flex-wrap: wrap; gap: 2px; }
.rl-chip { min-width: 24px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 2px; color: #FFF; background: #1A1420; border: 1px solid var(--dim); font-variant-numeric: tabular-nums; }
.rl-chip.red { background: var(--red); border-color: var(--red); }
.rl-chip.green { background: var(--green); border-color: var(--green); }
.rl-board { grid-column: 1 / -1; grid-row: 2; background: var(--ink); padding: 8px; display: flex; flex-direction: column; gap: 4px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); min-width: 0; }
.rl-board .mini { min-height: 1.4em; }
.rl-board .betbox { max-width: 340px; }
.rl-grid { display: grid; grid-template-columns: 44px repeat(12, minmax(0, 1fr)) 44px; grid-template-rows: repeat(3, 48px); gap: 2px; margin-top: 2px; }
.rl-cell, .rl-out {
  position: relative; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #FFF; cursor: pointer;
  background: #1A1420; border: 2px solid; border-color: #6A5F72 #000 #000 #6A5F72; padding: 0; min-height: 36px; font-variant-numeric: tabular-nums;
}
.rl-cell { grid-column: var(--wc); grid-row: var(--wr); }
.rl-cell.red, .rl-out.red { background: var(--red); border-color: #FF7A8F #6E0C1E #6E0C1E #FF7A8F; }
.rl-cell.green { background: var(--green); border-color: #4FD8A8 #064A32 #064A32 #4FD8A8; }
.rl-cell.zero { grid-column: 1; grid-row: 1 / 4; }
.rl-col2 { grid-column: 14; grid-row: var(--wr); }
.rl-cell:hover:not(:disabled), .rl-out:hover:not(:disabled) { filter: brightness(1.3); }
.rl-cell:disabled, .rl-out:disabled { cursor: default; }
.rl-cell.pv { outline: 2px dotted #FFF; outline-offset: -5px; }
.rl-cell.on::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; background: var(--pink); box-shadow: 0 0 0 1px #000; }
.rl-cell.first { outline: 3px solid var(--pink); outline-offset: -5px; }
.rl-cell.near { box-shadow: inset 0 0 0 2px var(--pink-hi); }
.rl-cell.won { background: var(--text) !important; color: #000; }
.rl-cell i { position: absolute; top: 1px; right: 1px; font-style: normal; font-size: 10px; line-height: 1.2; padding: 0 3px; background: var(--pink); color: var(--ink); }
.rl-outs { display: grid; gap: 2px; }
.rl-outs.three { grid-template-columns: repeat(3, 1fr); }
.rl-outs.six { grid-template-columns: repeat(6, 1fr); }
.rl-list { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; }
.rl-list li { display: grid; grid-template-columns: 1fr auto 28px; gap: 8px; align-items: center; padding: 2px 0; border-bottom: 1px solid var(--dark); }
.rl-list li.won { color: var(--win); font-weight: 700; }
.x { width: 28px; height: 26px; background: var(--grey); color: #000; border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); font-weight: 700; cursor: pointer; padding: 0; }
.x:disabled { color: var(--lo); cursor: default; }
.rl-total { font-weight: 700; }

/* crash */
.cr-recent { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 22px; }
.cr-recent span { padding: 1px 5px; font-size: 12px; font-weight: 700; background: var(--deep); border: 1px solid var(--dim); color: var(--quiet); font-variant-numeric: tabular-nums; }
.cr-recent span.hi { color: var(--pink); border-color: var(--pink-lo); }
canvas.shake { animation: shake .35s steps(5); }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-3px, -3px); } 80% { transform: translate(3px, 3px); } }

/* mines */
.mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100%; max-width: 440px; }
.mn-tile {
  aspect-ratio: 1; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--dim);
  border: 3px solid; border-color: #7A6E84 #1B161F #1B161F #7A6E84;
}
.mn-tile:hover:not(:disabled) { background: #5E5268; }
.mn-tile:disabled { cursor: default; }
.mn-tile.open { background: var(--deep); border-color: #000 var(--dark) var(--dark) #000; }
.mn-tile.dim { background: var(--dark); border-color: var(--dim) #000 #000 var(--dim); }
.mn-tile.mine { background: #1F0814; }
.mn-tile.hit { background: var(--pink); border-color: var(--pink-hi); }
.mn-stats { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.mn-stats dt { color: var(--quiet); }
.mn-stats dd { text-align: right; font-weight: 700; }
.game-mines .stage { padding-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .floor { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .game-body, .wide .game-body { grid-template-columns: minmax(0, 1fr); }
  .rl-board { grid-row: auto; }
  .rl-list { max-height: none; overflow: visible; }
}
@media (max-width: 720px) {
  .rl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 36px repeat(12, 34px) 34px; }
  .rl-cell { grid-column: var(--nc); grid-row: var(--nr); }
  .rl-cell.zero { grid-column: 1 / 4; grid-row: 1; }
  .rl-col2 { grid-column: var(--nc); grid-row: 14; }
  .rl-outs.six { grid-template-columns: repeat(3, 1fr); }
  .seg-btn { padding: 0 4px; font-size: 12px; }
  .titlebar .tag { display: none; }
}
@media (max-width: 640px) {
  :root { --foot: 42px; }
  .page { padding: 4px; gap: 6px; }
  .long { display: none; }
  #brand .short { display: inline; }
  #brand.in-game { display: none; }
  #foot { font-size: 11px; }
  #foot p { padding: 2px 4px; }
  #foot a, #foot .link { padding: 0 4px; font-size: 11px; }
  .floor { grid-template-columns: 1fr; gap: 4px; }
  .cab-art canvas { width: 96px; height: 72px; }
  .hero-main { min-height: 0; display: flex; flex-direction: column; }
  .hero-text { padding: 12px; max-width: none; }
  .hero-art { position: relative; inset: auto; height: 150px; }
  .slogan { min-height: 0; }
  .brand-title canvas:first-child { width: 198px !important; height: 21px !important; }
  .brand-title canvas:last-child { width: 216px !important; height: 42px !important; }
  .stage, .controls { padding: 8px; }
  .felt { padding: 8px; min-height: 280px; }
  canvas.card { width: 68px; height: 92px; }
  .bj-seat, .bj-hands { min-height: 110px; gap: 4px; }
  .say { min-height: 3.2em; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}