/* Nine Lives: the city's licensed casino, its own sub-brand inside the civic site. A patterned casino
   carpet, baize felt under a pendant light, oxblood leather rails, brass, ivory cards, one neon sign.
   Chip amounts stay sodium amber, like money everywhere on the site. Loaded on casino pages only. */
:root {
  --nl-carpet: #1b1020;
  --nl-wall: #140b17;
  --nl-felt: #0f5b45;
  --nl-felt-hi: #1d8564;
  --nl-felt-lo: #073528;
  --nl-rail: #43121c;
  --nl-rail-hi: #6e2131;
  --nl-rail-lo: #22070d;
  --nl-brass: #d2a94f;
  --nl-brass-hi: #f6e1a0;
  --nl-brass-lo: #7d5a1e;
  --nl-ivory: #f5efe0;
  --nl-ink: #16121a;
  --nl-red: #b81d2c;
  --nl-neon: #ff4a5e;
  --nl-amber: var(--sodium);
  --nl-sign: "Limelight", "Big Shoulders Display", Georgia, serif;
  --nl-brass-grad: linear-gradient(180deg, var(--nl-brass-hi) 0%, var(--nl-brass) 48%, var(--nl-brass-lo) 100%);
}

/* The floor: carpet under everything between the site header and footer. */
main {
  background:
    radial-gradient(ellipse 70% 420px at 50% 0, rgba(255, 196, 110, .13), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, .55), transparent 60%),
    url(/img/casino/carpet.svg) 0 0 / 112px 112px, var(--nl-carpet);
}
main > .wrap { position: relative; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.nl { color: var(--text); }
.nl h1, .nl h2, .nl h3 { font-family: var(--nl-sign); font-weight: 400; letter-spacing: .01em; }
.nl a { text-underline-offset: 3px; }
.nl a:not([class]) { color: var(--nl-brass-hi); }
.nl :focus-visible { outline: 3px solid var(--nl-amber); outline-offset: 3px; }
.nl-hash { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; word-break: break-all; color: var(--muted); }
.cage-note, .nl .muted { color: var(--muted); font-size: .9rem; }

/* ---- buttons --------------------------------------------------------------------------------------- */
.nl-btn, .nl-pill, .nl-tool, .nl-sound, .nl-buy, .nl-lobbylink {
  font: 700 .95rem/1 var(--body); color: var(--text); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.nl-btn {
  min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(210, 169, 79, .45);
  background: linear-gradient(180deg, #2b1a2f, #1c1020); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nl-btn:hover { border-color: var(--nl-brass); }
.nl-btn.gold { background: var(--nl-brass-grad); color: #2a1a04; border-color: #fbe7a6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 18px -8px rgba(242, 178, 60, .7); }
.nl-btn.gold:hover { filter: brightness(1.06); }
.nl-btn[disabled], .nl-tool[disabled] { opacity: .45; cursor: not-allowed; }
.nl-pill { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(210, 169, 79, .4); background: rgba(20, 11, 23, .7); font-size: .88rem; }
.nl-pill:hover { border-color: var(--nl-brass); }
.nl input, .nl select { background: #120a15; border-color: #3b2742; }
.nl input:focus-visible, .nl select:focus-visible { outline-offset: 1px; }

.nl-notice { border-left: 4px solid var(--nl-amber); background: rgba(20, 11, 23, .85); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 0 0 18px; max-width: none; }

/* ---- the house mark --------------------------------------------------------------------------------- */
.nl-mark { display: block; flex: none; overflow: visible; }
.nl-mark .tube { stroke: #ffd36b; }
.nl-mark .tube-glow { stroke: rgba(255, 74, 94, .55); }
.nl-mark .eyes { fill: #ffd36b; }
.nl-mark .pupils { stroke: #1b1020; }
.nl-mark.sign { filter: drop-shadow(0 0 6px rgba(255, 170, 70, .75)) drop-shadow(0 0 20px rgba(255, 74, 94, .45)); }
.nl-mark.tiny .tube-glow { display: none; }

/* ---- lobby: the entrance --------------------------------------------------------------------------- */
.nl-entrance { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 24px; align-items: stretch; margin-bottom: 26px; }
.nl-sign {
  position: relative; border-radius: 22px; padding: 30px; isolation: isolate;
  background:
    repeating-conic-gradient(from -90deg at 50% 118%, rgba(255, 206, 130, .07) 0 3deg, transparent 3deg 8deg),
    radial-gradient(ellipse at 30% 40%, #3a1322, #1a0810 75%);
  box-shadow: inset 0 0 0 2px var(--nl-brass-lo), inset 0 0 0 6px #12060b, inset 0 0 0 8px rgba(210, 169, 79, .5), 0 30px 60px -30px #000;
  display: grid; align-items: center; min-height: 280px;
}
/* marquee bulbs around the sign */
.nl-sign::before {
  content: ""; position: absolute; inset: 8px; border-radius: 16px; padding: 16px; z-index: -1;
  background: radial-gradient(circle, #fff6d6 0 2.2px, #f6c45a 2.8px, rgba(242, 178, 60, .35) 4px, transparent 7px) 0 0 / 22px 22px round;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nl-sign-face { display: flex; gap: 26px; align-items: center; padding: 18px 22px; }
.nl-sign h1 {
  margin: 0; font-size: clamp(3.2rem, 7.4vw, 6.4rem); line-height: .92; color: #fff1d8;
  text-shadow: 0 0 2px #fff, 0 0 10px rgba(255, 110, 120, .9), 0 0 28px rgba(255, 74, 94, .6), 0 0 60px rgba(255, 74, 94, .35);
}
.nl-sign p { margin: 14px 0 0; color: #e9d9c4; max-width: 44ch; }
.nl-sign-sub { display: block; margin-top: .2em; font-size: .3em; letter-spacing: .2em; color: var(--nl-brass-hi); text-shadow: 0 0 14px rgba(242, 178, 60, .35); }
.nl-open {
  position: absolute; right: 34px; bottom: 30px; margin: 0; padding: 4px 14px 5px; border-radius: 10px;
  font: 400 1.25rem/1 var(--nl-sign); color: #c9ffe6; border: 2px solid #8ff0c4;
  text-shadow: 0 0 4px #52d49d, 0 0 14px #52d49d; box-shadow: 0 0 10px rgba(82, 212, 157, .7), inset 0 0 8px rgba(82, 212, 157, .45);
}
.nl-open.closed { color: #ffb3bb; border-color: #ff8a96; text-shadow: 0 0 6px var(--nl-neon); box-shadow: 0 0 10px rgba(255, 74, 94, .6), inset 0 0 8px rgba(255, 74, 94, .4); }
@media (prefers-reduced-motion: no-preference) {
  .nl-sign h1, .nl-mark.sign { animation: nl-neon-on 1.7s ease-out 1 both; }
  .nl-mark.sign { animation-delay: .25s; }
}
@keyframes nl-neon-on {
  0% { opacity: .15; filter: brightness(.4); } 6% { opacity: 1; filter: none; } 9% { opacity: .25; }
  13% { opacity: 1; } 22% { opacity: .55; } 26%, 100% { opacity: 1; filter: none; }
}

/* the cashier window */
.nl-cage {
  position: relative; border-radius: 18px; padding: 50px 24px 22px; overflow: hidden;
  background: linear-gradient(180deg, #2c150d, #1a0b07); border: 1px solid #5c3a1a;
  box-shadow: inset 0 0 0 1px rgba(210, 169, 79, .25), 0 30px 60px -30px #000;
}
.nl-cage::before { /* the teller grille */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(210, 169, 79, .75) 14px 17px), linear-gradient(#3a2210, #24130a);
  border-bottom: 2px solid var(--nl-brass);
}
.nl-cage h2 { font-size: 1.6rem; margin: 0 0 12px; color: var(--nl-brass-hi); }
.cage-balance { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cage-balance b { display: block; font: 900 3.1rem/1 var(--display); color: var(--nl-amber); text-shadow: 0 0 22px rgba(242, 178, 60, .25); }
.cage-balance span:not(.chipdot) { color: var(--muted); font-size: .9rem; }
.cage-balance .nl-pending { display: block; color: var(--nl-brass-hi); }
.cage-form { border-top: 1px solid rgba(210, 169, 79, .2); padding-top: 12px; margin-top: 12px; }
.cage-form label { font-weight: 700; margin-bottom: 8px; }
.cage-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cage-row input { width: 130px; }
.cage-row.grow input { flex: 1; min-width: 160px; }
.cage-quick { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cage-note { margin: 6px 0 0; }
.result { min-height: 1.3em; margin: 6px 0 0; font-weight: 700; font-size: .92rem; }
.result.win { color: var(--go); }
.result.lose { color: #ffb0b0; }

/* a chip used as an icon */
.chipdot {
  --c: var(--nl-red); width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-block;
  background: radial-gradient(circle, var(--c) 0 42%, var(--nl-ivory) 43% 47%, var(--c) 48% 62%, transparent 63%),
    repeating-conic-gradient(from -11.25deg, var(--nl-ivory) 0 22.5deg, var(--c) 0 45deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.chipdot.big { width: 54px; height: 54px; }

/* ---- the big-wins board ------------------------------------------------------------------------- */
.nl-board { display: flex; align-items: stretch; gap: 0; margin: 0 0 34px; border-radius: 12px; overflow: hidden; border: 1px solid #3a2a12; box-shadow: 0 16px 30px -20px #000; }
.nl-board h2 {
  flex: none; margin: 0; padding: 0 18px; display: grid; place-items: center; font-size: 1.15rem;
  background: var(--nl-brass-grad); color: #2a1a04; white-space: nowrap;
}
.nl-led { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #0b0608; display: flex; min-height: 52px; }
.nl-led::after { /* LED pixels */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 0 .9px, rgba(11, 6, 8, .62) 1.25px) 0 0 / 3px 3px;
}
.nl-led-track { list-style: none; margin: 0; padding: 0 0 0 26px; display: flex; gap: 46px; align-items: center; flex: none; white-space: nowrap; }
.nl-led-track li, .nl-led-empty { font: 800 1.12rem/1 var(--display); letter-spacing: .03em; color: #ffc14f; text-shadow: 0 0 8px rgba(255, 170, 40, .75); }
.nl-led-track li b { color: #fff0c2; font-weight: 800; }
.nl-led-track li .amt { color: #ffdf7a; }
.nl-led-empty { margin: 0; padding: 0 22px; align-self: center; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .nl-led.moving .nl-led-track { animation: nl-led 46s linear infinite; padding-right: 46px; }
  .nl-led.moving:hover .nl-led-track, .nl-led.moving:focus .nl-led-track, .nl-led.moving:focus-within .nl-led-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .nl-led { overflow-x: auto; } .nl-led-track[aria-hidden] { display: none; } }
@keyframes nl-led { to { transform: translateX(-100%); } }

/* ---- the tables on the floor --------------------------------------------------------------------- */
.nl-floor > h2 { font-size: 2rem; margin: 0 0 6px; color: var(--nl-brass-hi); }
.nl-tables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.nl-table {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center;
  padding: 26px 18px 20px; border-radius: 26px; text-decoration: none; height: 100%;
  background: radial-gradient(ellipse 80% 62% at 50% 34%, rgba(255, 206, 130, .17), rgba(255, 206, 130, .04) 60%, transparent 76%);
  transition: background-color .25s;
}
.nl-table::before { /* the pendant lamp above each table */
  content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px;
  background: var(--nl-brass-grad); box-shadow: 0 6px 30px 6px rgba(255, 206, 130, .28);
}
.nl-table:hover, .nl-table:focus-visible { background-color: rgba(255, 206, 130, .06); }
.nl-table:hover .nl-table-art, .nl-table:focus-visible .nl-table-art { transform: translateY(-3px); filter: brightness(1.12); }
.nl-table-art { display: block; width: min(100%, 230px); aspect-ratio: 1.2; transition: transform .25s, filter .25s; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.nl-table-art > svg { width: 100%; height: 100%; display: block; }
.nl-table-name { font: 400 2rem/1 var(--nl-sign); color: #fff1d8; margin-top: 14px; }
.nl-table-blurb { color: var(--muted); font-size: .94rem; margin: 8px 0 14px; max-width: 30ch; }
.nl-plaque-row {
  display: inline-flex; border-radius: 6px; overflow: hidden; font: 700 .82rem/1 var(--body); color: #2a1a04;
  background: var(--nl-brass-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px -4px #000;
}
.nl-plaque-row span { padding: 8px 10px; }
.nl-plaque-row span + span { border-left: 1px solid rgba(42, 26, 4, .35); }

/* ---- lobby: your play ------------------------------------------------------------------------------ */
.nl-house { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.nl-panel { background: rgba(20, 11, 23, .88); border: 1px solid #36233d; border-radius: 16px; padding: 20px 22px; }
.nl-panel h2 { font-size: 1.45rem; margin: 0 0 10px; color: var(--nl-brass-hi); }
.nl-panel p { font-size: .95rem; }
.nl-meter { height: 8px; border-radius: 999px; background: #2b1a30; overflow: hidden; margin: -4px 0 14px; }
.nl-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--go), var(--nl-amber)); border-radius: inherit; }
.nl-check { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.nl-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--nl-brass); }
.nl-rounds { margin-top: 40px; }
.nl-rounds h2 { font-size: 1.6rem; color: var(--nl-brass-hi); margin: 0 0 8px; }
.nl-rounds .table { background: rgba(20, 11, 23, .8); border-radius: 12px; }
.nl-rounds .table th, .nl-rounds .table td { border-color: #36233d; }

/* ---- rooms: the bar ----------------------------------------------------------------------------- */
.nl-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: -12px 0 18px; }
.nl-lobbylink { min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid rgba(210, 169, 79, .35); background: rgba(20, 11, 23, .7); }
.nl-lobbylink:hover { border-color: var(--nl-brass); }
.nl-roomname {
  margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1;
  background: var(--nl-brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.nl-bar-end { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nl-wallet { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 999px; background: rgba(11, 6, 8, .82); border: 1px solid #3a2a12; }
.nl-wallet b { font: 900 1.7rem/1 var(--display); color: var(--nl-amber); }
.nl-wallet-n { color: var(--muted); font-size: .9rem; }
.nl-wallet .nl-pending { color: var(--nl-brass-hi); font-size: .82rem; }
.nl-buy { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(210, 169, 79, .45); background: rgba(20, 11, 23, .7); }
.nl-sound { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #3b2742; background: rgba(20, 11, 23, .7); color: var(--muted); }
.nl-sound::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10L5 10H2z'/%3E%3Cpath d='M11 5.5l4 5M15 5.5l-4 5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10L5 10H2z'/%3E%3Cpath d='M11 5.5l4 5M15 5.5l-4 5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.nl-sound[aria-pressed="true"] { color: var(--nl-brass-hi); border-color: rgba(210, 169, 79, .6); }
.nl-sound[aria-pressed="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10L5 10H2z'/%3E%3Cpath d='M11 5.5q2 2.5 0 5M12.8 3.8q3.6 4.2 0 8.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10L5 10H2z'/%3E%3Cpath d='M11 5.5q2 2.5 0 5M12.8 3.8q3.6 4.2 0 8.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- rooms: the table ------------------------------------------------------------------------------ */
.nl-table-wrap { position: relative; }
.nl-stage { position: relative; }
.felt, .rl-felt, .bj-felt {
  border: 16px solid transparent; border-radius: 34px;
  background:
    url(/img/casino/felt.svg) 0 0 / 180px 180px padding-box,
    radial-gradient(ellipse 75% 70% at 50% 18%, var(--nl-felt-hi), var(--nl-felt) 48%, var(--nl-felt-lo)) padding-box,
    linear-gradient(180deg, var(--nl-rail-hi), var(--nl-rail) 40%, var(--nl-rail-lo)) border-box;
  box-shadow: inset 0 0 0 2px rgba(210, 169, 79, .55), inset 0 24px 60px rgba(0, 0, 0, .35), 0 34px 60px -30px #000;
}

/* the player's rail with the chip tray */
.nl-rail {
  position: relative; z-index: 3; margin: 14px auto 0; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 22px;
  background: linear-gradient(180deg, #6a2030, #43121c 45%, #2a0a12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 18px 30px -18px #000;
}
.nl-rail::before { content: ""; position: absolute; inset: 5px; border-radius: 18px; border: 1px dashed rgba(246, 225, 160, .22); pointer-events: none; }
.nl-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.nl-tool { gap: 0; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(246, 225, 160, .25); background: rgba(20, 6, 10, .45); font-size: .88rem; }
.nl-tool:hover:not([disabled]) { border-color: var(--nl-brass); }
.nl-betbox { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.nl-betbox span { font-size: .78rem; color: #e7c9b0; margin-bottom: 4px; }
.nl-betbox output { font: 900 1.9rem/1 var(--display); color: var(--nl-amber); min-width: 3ch; text-align: right; }
.nl-go {
  min-height: 58px; min-width: 128px; padding: 0 26px; border-radius: 999px; cursor: pointer;
  font: 400 1.5rem/1 var(--nl-sign); color: #fff; border: 2px solid #ffb3bb;
  background: radial-gradient(circle at 50% 30%, #ff6b7b, #c81d33 60%, #8a0d1f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 22px -4px rgba(255, 74, 94, .75);
}
.nl-go:hover:not([disabled]) { filter: brightness(1.08); }
.nl-go:active:not([disabled]) { transform: translateY(1px); }
.nl-go[disabled] { cursor: not-allowed; filter: grayscale(.75) brightness(.7); box-shadow: none; }

/* chips */
.chip {
  --c: var(--nl-ivory); --e: #2f5fb3; --t: var(--nl-ink);
  position: relative; width: 56px; height: 56px; border-radius: 50%; padding: 0; cursor: pointer; flex: none;
  border: 0; display: grid; place-items: center; font: 900 .98rem/1 var(--display); color: var(--t);
  background:
    radial-gradient(circle, var(--c) 0 44%, var(--e) 45% 48%, var(--c) 49% 61%, transparent 62%),
    repeating-conic-gradient(from -11.25deg, var(--e) 0 22.5deg, var(--c) 0 45deg);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .22), 0 3px 0 rgba(0, 0, 0, .55), 0 6px 10px -4px rgba(0, 0, 0, .7);
  transition: transform .12s;
}
.chip span { position: relative; }
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--nl-brass-hi), 0 0 18px 2px rgba(246, 225, 160, .55), 0 8px 10px -4px rgba(0, 0, 0, .7); }
.chip[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.c-10 { --c: #f2ece0; --e: #2f5fb3; --t: #16121a; }
.c-50 { --c: #c0202f; --e: #f5efe0; --t: #fff; }
.c-100 { --c: #1a1520; --e: #f5efe0; --t: #f6e1a0; }
.c-500 { --c: #6a3fa0; --e: #f5efe0; --t: #fff; }
.c-1000 { --c: #f2b23c; --e: #16121a; --t: #2a1a04; }
.c-5000 { --c: #6b3418; --e: #f6e1a0; --t: #f6e1a0; }
.c-x { --c: #1f6f86; --e: #f5efe0; --t: #fff; }

/* a stack of chips on the felt */
.stack { position: relative; width: 46px; height: 46px; }
.stack .chip { position: absolute; left: 0; width: 46px; height: 46px; font-size: .8rem; cursor: default; pointer-events: none; }
.stack .chip span { display: none; }
.stack .chip:last-child span { display: block; }
.stack .total { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); font: 800 .95rem/1 var(--display); color: var(--nl-amber); background: rgba(8, 4, 6, .78); padding: 3px 7px; border-radius: 6px; white-space: nowrap; }

.nl-status { min-height: 1.6em; margin: 14px 2px 0; font-weight: 700; max-width: none; }
.nl-status.win { color: var(--go); }
.nl-status.even { color: var(--nl-brass-hi); }
.nl-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(210, 169, 79, .18); color: var(--muted); font-size: .9rem; }
.nl-foot p { margin: 0 0 6px; max-width: none; }

/* ---- win banner ------------------------------------------------------------------------------------ */
.nl-banner { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; }
.nl-banner .nl-plaque { pointer-events: auto; cursor: pointer; }
.nl-banner[hidden] { display: none !important; }
.nl-plaque {
  position: relative; z-index: 2; text-align: center; padding: 20px 46px 18px; border-radius: 18px; min-width: 240px;
  background: radial-gradient(ellipse at 50% 0, #3a1322, #12060b 80%);
  box-shadow: inset 0 0 0 2px var(--nl-brass), inset 0 0 0 6px #12060b, inset 0 0 0 7px rgba(210, 169, 79, .5), 0 30px 60px -10px rgba(0, 0, 0, .85);
}
.nl-plaque p { margin: 0; max-width: none; }
.nl-b-title { font: 400 1.35rem/1.1 var(--nl-sign); color: #fff1d8; }
.nl-b-amt { font: 400 clamp(2.6rem, 7vw, 4.2rem)/1.05 var(--nl-sign); color: var(--nl-amber); text-shadow: 0 0 24px rgba(242, 178, 60, .45); font-variant-numeric: tabular-nums; }
.nl-b-sub { color: #e7c9b0; font-weight: 600; margin-top: 4px !important; }
.nl-banner.even .nl-b-amt { color: var(--nl-ivory); text-shadow: none; font-size: 2.2rem; }
.nl-banner.big .nl-plaque { padding: 28px 60px 24px; box-shadow: inset 0 0 0 2px var(--nl-brass-hi), inset 0 0 0 6px #12060b, inset 0 0 0 7px rgba(246, 225, 160, .7), 0 0 60px 10px rgba(255, 74, 94, .35), 0 30px 60px -10px #000; }
.nl-banner.big .nl-b-title { font-size: 2rem; color: #fff1d8; text-shadow: 0 0 2px #fff, 0 0 12px rgba(255, 110, 120, .9), 0 0 30px rgba(255, 74, 94, .6); }
.nl-banner.big .nl-b-amt { font-size: clamp(3.2rem, 9vw, 5.6rem); }
.nl-burst { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nl-banner.show .nl-plaque { animation: nl-pop .38s cubic-bezier(.2, 1.4, .4, 1) both; }
  .nl-banner.big.show .nl-b-title { animation: nl-neon-on 1.4s ease-out both; }
}
@keyframes nl-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- slots -------------------------------------------------------------------------------------------- */
.sl-stage {
  display: grid; grid-template-columns: minmax(0, auto) minmax(220px, 300px); justify-content: center; gap: 56px; align-items: center;
  padding: 34px 30px; border-radius: 30px;
  background: radial-gradient(ellipse 46% 70% at 42% 34%, rgba(255, 206, 130, .2), transparent 72%);
}
.sl-machine {
  --cell: clamp(76px, 10vw, 136px);
  justify-self: center; width: min(100%, calc(var(--cell) * 3 + 120px)); border-radius: 30px 30px 18px 18px; padding: 0 22px 22px;
  background: linear-gradient(180deg, #6e2131, #43121c 30%, #2a0a12);
  box-shadow: inset 0 0 0 3px var(--nl-brass), inset 0 0 0 8px #2a0a12, inset 0 0 0 9px rgba(210, 169, 79, .45), 0 40px 60px -26px #000;
}
.sl-topper {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 -22px 20px; padding: 18px 10px 14px;
  border-radius: 30px 30px 0 0; background: radial-gradient(ellipse at 50% 100%, #3a1322, #12060b 80%);
  border-bottom: 3px solid var(--nl-brass);
}
.sl-topper span { font: 400 clamp(1.6rem, 3.4vw, 2.4rem)/1 var(--nl-sign); color: #fff1d8; text-shadow: 0 0 10px rgba(255, 110, 120, .9), 0 0 26px rgba(255, 74, 94, .55); }
.sl-topper .nl-mark { filter: drop-shadow(0 0 5px rgba(255, 170, 70, .8)); }
.sl-window {
  position: relative; display: grid; grid-template-columns: repeat(3, var(--cell)); justify-content: center; gap: 10px;
  padding: 12px; border-radius: 14px; background: #0b0608;
  box-shadow: inset 0 0 0 2px var(--nl-brass-lo), inset 0 10px 24px rgba(0, 0, 0, .8);
}
.reel {
  position: relative; height: calc(var(--cell) * 3); overflow: hidden; border-radius: 8px;
  background: linear-gradient(180deg, #cfc6b2, #fbf7ee 22%, #fbf7ee 78%, #cfc6b2);
}
.reel::after { /* the curve of the drum */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 28%, transparent 72%, rgba(0, 0, 0, .55));
}
.strip { --pos: 0; transform: translateY(calc(var(--pos) * var(--cell) * -1)); will-change: transform; }
.cell { height: var(--cell); display: grid; place-items: center; }
.cell .sym { width: 74%; height: 74%; }
.reel.spinning .cell .sym { filter: blur(1.2px); }
.reel .cell.hit .sym { filter: drop-shadow(0 0 8px rgba(255, 206, 80, .95)); }
@media (prefers-reduced-motion: no-preference) { .reel .cell.hit { animation: nl-hit .9s ease-in-out 2; } }
@keyframes nl-hit { 50% { background: rgba(255, 214, 120, .45); } }
.payline { position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; transform: translateY(-50%); background: var(--nl-neon); box-shadow: 0 0 10px var(--nl-neon); opacity: .8; border-radius: 2px; pointer-events: none; }
.payline::before, .payline::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 9px solid transparent; transform: translateY(-50%); }
.payline::before { left: -8px; border-left-color: var(--nl-neon); }
.payline::after { right: -8px; border-right-color: var(--nl-neon); }
.sl-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sl-meter { background: #0b0608; border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: baseline; box-shadow: inset 0 0 0 1px #3a2a12; }
.sl-meter span { font-size: .8rem; color: #e7c9b0; }
.sl-meter output { font: 800 1.5rem/1 var(--display); color: #ffc14f; text-shadow: 0 0 8px rgba(255, 170, 40, .6); }
.sl-pays { background: rgba(20, 11, 23, .9); border: 1px solid #3a2a12; border-radius: 16px; padding: 18px 18px 14px; }
.sl-pays h2 { font-size: 1.5rem; margin: 0 0 8px; color: var(--nl-brass-hi); }
.sl-pays table { width: 100%; border-collapse: collapse; }
.sl-pays th, .sl-pays td { padding: 5px 0; border-bottom: 1px solid #2d1d33; font-weight: 400; }
.sl-pays th { text-align: left; }
.sl-pays td { text-align: right; font: 800 1.3rem/1 var(--display); color: var(--nl-amber); }
.pt-syms { display: inline-flex; gap: 2px; vertical-align: middle; }
.sym { display: block; }
.sym.sm { width: 30px; height: 30px; }
.sl-pays p { font-size: .86rem; color: var(--muted); margin: 10px 0 0; }

/* ---- roulette ------------------------------------------------------------------------------------------- */
.rl-stage { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 30px; align-items: center; }
.rl-wheelcol { display: grid; gap: 18px; justify-items: center; }
.rl-tablecol { min-width: 0; }
.rl-wheelbox { position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .6)); }
.rwheel { width: 100%; height: 100%; display: block; }
/* rotor, ball and flapper move through their SVG transform attributes, around (0, 0) */
.rwheel .rotor, .mwheel .rotor, .mwheel .flapper { transform-origin: 0 0; }
.lobby-art.rwheel, .nl-table-art .rwheel, .nl-table-art .mwheel { width: 100%; height: 100%; }
.rl-last {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); border-radius: 50%;
  display: grid; place-items: center; font: 900 clamp(2rem, 5vw, 3.2rem)/1 var(--display); color: #fff; opacity: 0; transition: opacity .3s, transform .3s;
  border: 3px solid var(--nl-brass-hi); box-shadow: 0 0 0 4px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .6);
}
.rl-last.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rl-last.red { background: var(--nl-red); } .rl-last.black { background: var(--nl-ink); } .rl-last.green { background: #0f7a4f; }
.rl-history { width: 100%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rl-history h2 { font-size: 1.05rem; margin: 0; color: var(--nl-brass-hi); }
.rl-hist { list-style: none; margin: 0; padding: 8px; display: flex; gap: 5px; flex-wrap: wrap; background: rgba(8, 4, 6, .82); border-radius: 12px; box-shadow: inset 0 0 0 1px #3a2a12; min-height: 52px; align-content: flex-start; }
.rl-hist li { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; font: 800 1.2rem/1 var(--display); color: #fff; }
.rl-hist li.red { background: var(--nl-red); } .rl-hist li.black { background: #2a2430; } .rl-hist li.green { background: #0f7a4f; }
.rl-hist li:first-child:not(.none) { box-shadow: 0 0 0 2px var(--nl-brass-hi); }
.rl-hist li.none { width: auto; padding: 0 8px; color: var(--muted); font: 600 .9rem var(--body); }
.rl-odds { background: rgba(8, 4, 6, .55); border: 1px solid rgba(246, 225, 160, .25); border-radius: 12px; padding: 10px 14px; margin-top: 14px; }
.rl-odds summary { cursor: pointer; font-weight: 700; color: var(--nl-brass-hi); }
.rl-odds table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .9rem; }
.rl-odds th { text-align: left; font-weight: 600; padding: 4px 0; } .rl-odds th small { display: block; color: var(--muted); font-weight: 400; }
.rl-odds td { text-align: right; font: 800 1.05rem var(--display); color: var(--nl-amber); white-space: nowrap; }
.rl-odds p { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }

.rl-felt { padding: 26px 26px 20px; }
.rl-layout { position: relative; width: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.rl-spot {
  position: absolute; display: grid; place-items: center; padding: 0; margin: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--nl-ivory); font: 800 1.15rem/1 var(--display); border-radius: 0;
}
.rl-spot.cell { box-shadow: inset 0 0 0 1px rgba(245, 239, 224, .7); }
.rl-spot.cell.red .n { background: var(--nl-red); } .rl-spot.cell.black .n { background: #16121a; }
.rl-spot .n { display: grid; place-items: center; width: 74%; height: 74%; border-radius: 50%; }
.rl-spot.cell.zero { border-radius: 50% 0 0 50% / 18% 0 0 18%; }
.rl-layout.v .rl-spot.cell.zero { border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.rl-layout.v .rl-spot.cell.zero .n { width: 40%; height: 64%; }
.rl-spot.cell.zero .n { background: #0f7a4f; border-radius: 10px; width: 64%; height: 50%; }
.rl-spot.out { font: 800 1.1rem/1 var(--display); letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(245, 239, 224, .7); }
.rl-spot .diamond { position: relative; width: 42%; height: 64%; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rl-spot .diamond.red { background: var(--nl-red); }
.rl-spot .diamond.black { background: var(--nl-ivory); }
.rl-spot .diamond.black::before { content: ""; position: absolute; inset: 4px 6px; background: #16121a; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rl-spot:hover, .rl-spot.hl { background-color: rgba(245, 239, 224, .14); }
.rl-spot.hot { z-index: 2; border-radius: 50%; }
.rl-spot.hot:hover, .rl-spot.hot:focus-visible { background: rgba(246, 225, 160, .35); }
.rl-spot:focus-visible { outline: 3px solid var(--nl-amber); outline-offset: -3px; z-index: 4; }
.rl-spot.hot:focus-visible { outline-offset: 3px; z-index: 5; }
.rl-spot.won { background-color: rgba(246, 225, 160, .32); box-shadow: inset 0 0 0 2px var(--nl-brass-hi); }
.rl-spot.cell.winner .n { box-shadow: 0 0 0 3px var(--nl-brass-hi), 0 0 18px 4px rgba(246, 225, 160, .7); }
.rl-chip { position: absolute; z-index: 3; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; font-size: .74rem; }
.rl-chip.chip { cursor: default; }
.rl-chip.won { box-shadow: 0 0 0 3px var(--nl-brass-hi), 0 0 16px rgba(246, 225, 160, .8); }
.rl-chip.lost { opacity: 0; transform: scale(.4); transition: opacity .5s .2s, transform .5s .2s; }
.rl-layout.v .rl-spot.out.text span { writing-mode: vertical-rl; transform: rotate(180deg); }
.rl-hint { font-size: .86rem; color: rgba(245, 239, 224, .7); margin: 12px 0 0; text-align: center; max-width: none; }

/* ---- blackjack -------------------------------------------------------------------------------------- */
.bj-felt {
  --cw: clamp(64px, 8vw, 92px);
  max-width: 1080px; margin: 0 auto;
  position: relative; min-height: 520px; padding: 28px 24px 34px; display: grid; grid-template-rows: auto auto 1fr; justify-items: center;
  border-radius: 34px 34px 50% 50% / 34px 34px 30% 30%;
}
.bj-shoe {
  position: absolute; right: 26px; top: 20px; width: 82px; height: 64px; border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #2a1d2e, #120a15); box-shadow: inset 0 0 0 2px #3b2742, 0 10px 18px -8px #000; transform: rotate(8deg);
}
.bj-shoe span { position: absolute; left: 10px; right: 10px; top: -10px; height: 46px; border-radius: 4px; background: url(/img/casino/card-back.svg) center / cover; transform: rotate(-4deg); }
.bj-dealer, .bj-player { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: calc(var(--cw) * 1.4 + 40px); }
.bj-cards { display: flex; min-height: calc(var(--cw) * 1.4); }
.bj-cards .card + .card { margin-left: calc(var(--cw) * -.52); }
.bj-total, .bj-hand .bj-total { margin: 0; min-height: 30px; }
.bj-total span { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(8, 4, 6, .72); font: 800 1.05rem/1 var(--display); color: var(--nl-ivory); }
.bj-total span.bust { color: #ffb0b0; }
.bj-peek { margin: 0; font-size: .88rem; color: var(--nl-brass-hi); background: rgba(8, 4, 6, .6); padding: 4px 10px; border-radius: 999px; }
.bj-print { text-align: center; margin: 4px 0 6px; width: min(100%, 700px); color: rgba(245, 239, 224, .8); }
.bj-arc { width: 100%; height: auto; display: block; overflow: visible; }
.bj-arc text { font: 400 40px var(--nl-sign); fill: var(--nl-brass-hi); letter-spacing: .03em; }
.bj-print p { margin: -18px auto 0; font: 700 .95rem var(--body); max-width: none; color: rgba(245, 239, 224, .72); }
.bj-player { align-self: end; justify-content: end; }
.bj-hands { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 16px; transition: background-color .2s; }
.bj-hand.active { background: rgba(246, 225, 160, .1); box-shadow: inset 0 0 0 2px rgba(246, 225, 160, .5); }
.bj-hand .stack { margin-top: 4px; }
.bj-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 .85rem/1 var(--body); margin-left: 6px; vertical-align: 1px; }
.bj-tag.win { background: var(--go); color: #062b1c; } .bj-tag.even { background: var(--nl-brass-hi); color: #2a1a04; } .bj-tag.lose { background: rgba(8, 4, 6, .72); color: #e7c9b0; }
.bj-spot { display: grid; place-items: center; }
.bj-circle { position: relative; width: 108px; height: 108px; border-radius: 50%; border: 3px solid rgba(245, 239, 224, .7); display: grid; place-items: center; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .12); }
.bj-circle-print { position: absolute; font: 400 1.1rem var(--nl-sign); color: rgba(245, 239, 224, .35); }
.nl-room[data-game="blackjack"] .nl-rail, .bj-actions { max-width: 1080px; }
.bj-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.nl-act {
  min-height: 54px; min-width: 112px; padding: 0 22px; border-radius: 999px; cursor: pointer; font: 400 1.25rem/1 var(--nl-sign);
  color: #2a1a04; border: 1px solid #fbe7a6; background: var(--nl-brass-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -10px #000;
}
.nl-act[data-act="hit"] { background: radial-gradient(circle at 50% 30%, #ff6b7b, #c81d33 60%, #8a0d1f); color: #fff; border-color: #ffb3bb; }
.nl-act[disabled] { opacity: .4; cursor: not-allowed; }
.nl-act:hover:not([disabled]) { filter: brightness(1.07); }

/* cards (the site's older .card and .reel rules are reset inside the casino) */
.nl .card { height: auto; display: block; background: none; border-radius: 0; font: inherit; color: inherit; }
.nl .reel { width: auto; display: block; font: inherit; color: inherit; }
.card { position: relative; width: var(--cw, 80px); aspect-ratio: 5 / 7; flex: none; perspective: 700px; }
.card .face, .card .back {
  position: absolute; inset: 0; border-radius: calc(var(--cw, 80px) * .09); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15), -4px 8px 14px -6px rgba(0, 0, 0, .7); transition: transform .45s;
}
.card .face { background: linear-gradient(160deg, #fffdf6, var(--nl-ivory)); color: var(--nl-ink); border: 1px solid #d8d0bf; }
.card .back { background: url(/img/casino/card-back.svg) center / 100% 100%; transform: rotateY(180deg); }
.card.down .face { transform: rotateY(-180deg); }
.card.down .back { transform: rotateY(0); }
.card.red .face { color: #b81d2c; }
.card .idx { position: absolute; left: 7%; top: 5%; display: flex; flex-direction: column; align-items: center; font: 800 calc(var(--cw, 80px) * .25)/.9 var(--display); }
.card .idx i { font-style: normal; font-size: .82em; margin-top: 2px; font-family: var(--body); }
.card .idx.b { left: auto; top: auto; right: 7%; bottom: 5%; transform: rotate(180deg); }
.card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw, 80px) * .5); line-height: 1; }
.card .court { position: absolute; inset: 22% 20%; border: 1.5px solid currentColor; border-radius: 4px; display: grid; place-items: center; opacity: .9;
  font: 400 calc(var(--cw, 80px) * .42)/1 var(--nl-sign); background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(210, 169, 79, .16) 5px 6px); }
.card .court small { display: block; font: 400 .5em var(--body); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .card.peeking .back { animation: nl-peek .9s ease-in-out; transform-origin: 50% 100%; }
}
@keyframes nl-peek { 40%, 60% { transform: rotateY(0) rotateX(26deg); } }

/* ---- the wheel ------------------------------------------------------------------------------------- */
.mw-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); gap: 28px; align-items: center; padding: 30px; border-radius: 30px;
  background: radial-gradient(ellipse 46% 74% at 40% 44%, rgba(255, 206, 130, .2), transparent 72%);
}
.mw-box { justify-self: center; width: min(100%, 560px); filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .7)); }
.mwheel { width: 100%; height: auto; display: block; }
.mwheel .rotor path.landed { filter: brightness(1.5); }
.mw-legend { background: rgba(20, 11, 23, .9); border: 1px solid #3a2a12; border-radius: 16px; padding: 18px; }
.mw-legend h2 { font-size: 1.5rem; margin: 0 0 8px; color: var(--nl-brass-hi); }
.mw-legend table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mw-legend th, .mw-legend td { padding: 6px 0; border-bottom: 1px solid #2d1d33; text-align: left; font-weight: 400; }
.mw-legend th { font: 800 1.15rem var(--display); white-space: nowrap; }
.mw-legend td { color: var(--muted); padding-left: 8px; }
.mw-legend td + td { color: var(--text); }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mw-legend p { font-size: .86rem; color: var(--muted); margin: 10px 0 0; }

/* ---- fair play ------------------------------------------------------------------------------------ */
.fair-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fair-how ol { margin: 0 0 18px; padding-left: 1.4em; }
.fair-how li { margin-bottom: 10px; max-width: 66ch; }
.fair-how li::marker { font: 400 1.1rem var(--nl-sign); color: var(--nl-brass-hi); }
.fair-how h3 { font-size: 1.2rem; color: var(--nl-brass-hi); margin: 18px 0 8px; }
.fair-rules { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .94rem; }
.fair-rules dt { font-weight: 700; } .fair-rules dd { margin: 0; color: var(--muted); max-width: 60ch; }
.fair-side { display: grid; gap: 20px; }
.fair-seeds { display: grid; gap: 2px; margin: 0 0 14px; }
.fair-seeds dt { font-size: .85rem; color: var(--muted); margin-top: 8px; } .fair-seeds dd { margin: 0; color: var(--text); }
.verifier .field { margin-bottom: 12px; }
.verifier input, .verifier select { width: 100%; }
.fair-out { margin-top: 14px; }
.fair-out .ok { color: var(--go); font-weight: 700; } .fair-out .bad { color: #ffb0b0; font-weight: 700; }
.fair-out dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: .92rem; }
.fair-out dt { color: var(--muted); } .fair-out dd { margin: 0; word-break: break-word; }
.fair-out .syms { display: flex; gap: 6px; } .fair-out .syms .sym { width: 42px; height: 42px; }
.fair-out .fcards { display: flex; gap: 6px; flex-wrap: wrap; }
.fair-out .fcards span { padding: 3px 7px; border-radius: 6px; background: var(--nl-ivory); color: var(--nl-ink); font: 800 1rem var(--display); }
.fair-out .fcards span.r { color: #b81d2c; }
tr:target { background: rgba(246, 225, 160, .12); }

/* ---- small screens -------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nl-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-stage { grid-template-columns: 1fr; }
  .rl-wheelcol { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); align-items: center; width: 100%; gap: 24px; }
  .nl-house { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nl-entrance, .fair-grid { grid-template-columns: 1fr; }
  .sl-stage, .mw-stage { grid-template-columns: 1fr; padding: 22px 14px; }
  /* machine, then the tray, then the pay table: the Spin button stays next to the reels */
  .nl-room[data-game="slots"], .nl-room[data-game="wheel"] { display: flex; flex-direction: column; }
  .nl-room[data-game="slots"] .nl-table-wrap, .nl-room[data-game="slots"] .sl-stage,
  .nl-room[data-game="wheel"] .nl-table-wrap, .nl-room[data-game="wheel"] .mw-stage { display: contents; }
  .sl-machine, .mw-box { align-self: center; }
  .sl-pays, .mw-legend { order: 1; margin-top: 22px; }
  .nl-room .nl-foot { order: 2; }
  .nl-house { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main { padding-top: 22px; }
  .rl-wheelcol { grid-template-columns: 1fr; justify-items: center; }
  .nl-sign { padding: 20px; min-height: 0; }
  .nl-sign-face { gap: 14px; padding: 14px 10px; align-items: flex-start; }
  .nl-sign .nl-mark.sign { width: 58px; height: 72px; }
  .nl-board { flex-direction: column; }
  .nl-board h2 { padding: 8px 14px; place-items: start; }
  .nl-tables { grid-template-columns: 1fr; gap: 8px; }
  .nl-table { grid-template-columns: 120px 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 14px; padding: 16px 10px; }
  .nl-table::before { display: none; }
  .nl-table-art { grid-row: 1 / 4; width: 120px; align-self: center; }
  .nl-table-name { margin-top: 0; font-size: 1.6rem; }
  .nl-table-blurb { margin: 4px 0 8px; font-size: .88rem; }
  .nl-plaque-row { font-size: .74rem; }
  .nl-plaque-row span { padding: 6px 7px; white-space: nowrap; }
  .nl-open { position: static; justify-self: end; margin: 2px 14px 16px; font-size: 1rem; }
  .nl-sign h1 { font-size: 3rem; }
  .nl-bar { gap: 10px; margin-top: -6px; }
  .nl-bar-end { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 8px; }
  .nl-wallet { padding: 5px 12px 5px 6px; }
  .nl-wallet b { font-size: 1.45rem; }
  .nl-buy { padding: 0 12px; }
  .nl-sound { margin-left: auto; font-size: 0; gap: 0; width: 44px; padding: 0; flex: none; }
  .nl-sound::before { width: 18px; height: 18px; }
  .rl-wheelbox { width: min(70vw, 280px); }
  .rl-felt { padding: 14px 10px 10px; border-width: 10px; border-radius: 24px; }
  .bj-felt { min-height: 460px; padding: 20px 8px 26px; border-width: 10px; border-radius: 24px 24px 50% 50% / 24px 24px 22% 22%; }
  .bj-shoe { width: 58px; height: 46px; right: 12px; top: 12px; } .bj-shoe span { height: 32px; }
  .bj-hands { gap: 8px; }
  .bj-arc text { font-size: 38px; }
  .nl-act { min-width: 0; flex: 1; padding: 0 10px; font-size: 1.1rem; }
  .bj-actions { flex-wrap: nowrap; }
  .bj-print p { margin-top: -2px; font-size: .85rem; }
  .bj-felt { --cw: 58px; min-height: 410px; }
  .nl-rail { padding: 10px 12px; gap: 10px; border-radius: 18px; }
  .nl-room[data-game="roulette"] .nl-rail { position: sticky; bottom: 8px; }
  .nl-betbox span { font-size: .72rem; }
  .mw-box { width: min(100%, 330px); }
  .mw-legend { padding: 12px 14px; }
  .mw-legend td:last-child { display: none; }
  .mw-legend th, .mw-legend td { padding: 4px 0; }
  .mw-legend td { padding-left: 10px; }
  .nl-chips { gap: 6px; width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .nl-chips .chip { width: 48px; height: 48px; font-size: .9rem; }
  .nl-tools { gap: 4px; }
  .nl-tool { min-height: 40px; padding: 0 8px; font-size: .8rem; }
  .nl-tool .long { display: none; }
  .nl-betbox output { font-size: 1.5rem; }
  .nl-go { min-width: 92px; min-height: 50px; padding: 0 16px; font-size: 1.25rem; }
  .sl-machine { --cell: min(23vw, 86px); padding: 0 12px 14px; }
  .sl-topper { margin: 0 -12px 14px; }
  .sl-window { gap: 6px; padding: 8px; }
}
@media (pointer: coarse) { .rl-layout { --hs: .46; } }