/* No Blackouts. All classes use the nb- prefix. */

.nb-screen { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: clamp(640px, calc(100vh - 176px), 760px); min-height: 0; }
.nb-board-wrap { position: relative; min-width: 0; min-height: 0; padding: 16px 18px; display: flex; }
.nb-board { position: relative; flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 16px; border-radius: 18px; background: #0f1015; border: 1px solid var(--s-line); }
.nb-marquee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nb-marquee rect { fill: none; stroke: #ffd875; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 0 15; opacity: .28; animation: nbMq 2.4s linear infinite; }
.nb-board.running .nb-marquee rect { opacity: .95; animation-duration: .45s; }
.nb-board.won .nb-marquee rect { opacity: 1; stroke: #ffe7a8; animation-duration: .25s; }
.nb-board.dark .nb-marquee rect { stroke: var(--hot); opacity: .9; animation: none; }
@keyframes nbMq { to { stroke-dashoffset: -30; } }

/* squares */
.nb-sq { position: relative; min-width: 0; min-height: 0; border-radius: 11px; background: linear-gradient(180deg, #1a1d27, #12141b); border: 2px solid #262b38; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; overflow: hidden; transition: background .42s ease-out, border-color .42s ease-out, transform .25s, filter .4s, box-shadow .42s; }
.nb-sq .v { font: 800 clamp(15px, 1.65vw, 25px) Inter, sans-serif; letter-spacing: -.02em; color: var(--s-text); line-height: 1.05; white-space: nowrap; transition: color .42s; }
.nb-sq .t { font: 600 clamp(8px, .7vw, 10px) 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--s-dim); white-space: nowrap; transition: color .42s; }
.nb-sq.cashspin .t, .nb-sq.spin .t { color: var(--up); }
.nb-sq.spin .v { color: var(--up); }
.nb-sq.prize { background: linear-gradient(180deg, #221c10, #15120b); border-color: #3d3218; }
.nb-sq.prize .v { color: #ffd27a; }
.nb-sq.prize .t { color: #b89a5c; }
.nb-sq.black { background: #07070a; border-color: #3b161b; }
.nb-sq.black .v { color: var(--hot); font-size: clamp(11px, 1.05vw, 16px); letter-spacing: .1em; }
.nb-no { width: clamp(16px, 1.6vw, 24px); height: clamp(16px, 1.6vw, 24px); fill: none; stroke: var(--hot); stroke-width: 2.4; transition: stroke .42s; }
.nb-sq.lit { transition: none; background: var(--you); border-color: #ffe7a8; transform: scale(1.035); box-shadow: 0 0 0 3px rgba(255,178,30,.25); z-index: 2; }
.nb-sq.lit .v, .nb-sq.lit .t { color: #15120a; transition: none; }
.nb-sq.black.lit { background: var(--hot); border-color: #ffb3b3; box-shadow: 0 0 0 3px rgba(255,69,69,.3); }
.nb-sq.black.lit .v, .nb-sq.black.lit .t { color: #fff; }
.nb-sq.black.lit .nb-no { stroke: #fff; transition: none; }
.nb-sq.hit { animation: nbBlink .2s steps(1) 5; }
@keyframes nbBlink { 50% { filter: brightness(.35); } }
.nb-sq.flip .v, .nb-sq.flip .t, .nb-sq.flip .nb-no { animation: nbFlip .32s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: var(--d, 0ms); }
@keyframes nbFlip { from { opacity: 0; transform: translateY(-7px); } }
.nb-board.dark .nb-sq:not(.lit) { filter: grayscale(1) brightness(.4); }

/* center console */
.nb-mid { position: relative; grid-row: 2 / 5; grid-column: 2 / 6; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, #1a1d26 0%, #0e1015 70%); border: 1px solid var(--s-line); transition: border-color .3s, box-shadow .3s; overflow: hidden; }
.nb-board.dark .nb-mid { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); }
.nb-bank-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; }
.nb-bank-v { font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 4px; transition: color .3s; }
.nb-bank-v.up { color: var(--you); }
.nb-bank-v.down { color: var(--hot); }
.nb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 0; border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.nb-stats > div { min-width: 0; }
.nb-stats small { display: block; font-size: 11px; color: var(--s-dim); margin-bottom: 3px; }
.nb-stats b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-right: 8px; }
.nb-stats em { display: block; font: 500 10.5px 'IBM Plex Mono', monospace; font-style: normal; color: var(--s-faint); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-pips { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; max-width: 120px; }
.nb-pips i { width: 7px; height: 14px; border-radius: 2px; background: var(--up); }
.nb-marks { display: inline-flex; gap: 6px; height: 24px; align-items: center; }
.nb-marks i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #3a3f4d; position: relative; }
.nb-marks i.on { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 22%, transparent); }
.nb-marks i.on::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--hot); transform: translateX(-50%) rotate(45deg); }
.nb-msg { font-size: 14px; color: var(--s-dim); line-height: 1.45; min-height: 40px; }
.nb-msg b { color: var(--s-text); }
.nb-msg .up { color: var(--up); font-weight: 700; } .nb-msg .bad { color: var(--hot); font-weight: 800; } .nb-msg .gold { color: var(--you); font-weight: 700; }
.nb-acts { display: flex; gap: 10px; margin-top: auto; }
.nb-acts .s-btn { padding: 14px 18px; font-size: 15px; border-radius: 11px; }
.nb-go { flex: 1.4; }
.nb-go.stop { background: var(--hot); color: #fff; }
#pass { flex: 1; }
.nb-hint { font-size: 11px; color: var(--s-faint); text-align: center; margin-top: -4px; }
.nb-mini { display: none; }
.nb-ban { position: absolute; left: 0; right: 0; top: 18px; height: 0; z-index: 5; pointer-events: none; }
#pass[hidden] { display: none; }
.nb-over-h { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--you); }

/* side column */
.nb-side { border-left: 1px solid var(--s-line); padding: 16px 18px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.nb-h { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-dim); margin-bottom: 10px; }
.nb-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.nb-lr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; background: var(--s-panel); border: 1px solid var(--s-line); font-size: 12.5px; animation: nbIn .4s cubic-bezier(.2,.9,.3,1.1); }
.nb-lr span { font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.nb-lr b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-lr em { font: 600 11.5px 'IBM Plex Mono', monospace; font-style: normal; color: var(--s-dim); }
.nb-lr.up b { color: var(--up); }
.nb-lr.gold b { color: #ffd27a; }
.nb-lr.bad { border-color: #4a1c22; background: #1a0e11; }
.nb-lr.bad b, .nb-lr.bad em { color: var(--hot); }
.nb-lr.pass { border-color: color-mix(in srgb, var(--you) 50%, transparent); }
.nb-empty { font-size: 12px; color: var(--s-faint); padding: 8px 2px; }
@keyframes nbIn { from { opacity: 0; transform: translateY(-8px); } }
.nb-odds { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-line); }
.nb-od { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--s-dim); padding: 4px 0; }
.nb-od b { color: var(--s-text); font-size: 13px; }
.nb-odds p { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--s-faint); }

/* TV wall */
.nb-stage:fullscreen .nb-screen { height: calc(100vh - 98px); }
body.dk-embed .nb-screen { height: calc(100vh - 98px); max-height: none; }

@media (max-width: 1180px) {
  .nb-screen { grid-template-columns: minmax(0, 1fr); height: auto; }
  .nb-board { aspect-ratio: 1.55; }
  .nb-side { border-left: 0; border-top: 1px solid var(--s-line); display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .nb-side > .nb-h { grid-column: 1; grid-row: 1; }
  .nb-log { grid-column: 1; grid-row: 2; max-height: 260px; }
  .nb-odds { grid-column: 2; grid-row: 1 / 3; margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 760px) {
  .nb-board-wrap { padding: 12px 10px 0; flex-direction: column; }
  .nb-board { aspect-ratio: auto; height: 340px; flex: none; gap: 5px; padding: 10px; border-radius: 14px; }
  .nb-sq { border-radius: 7px; border-width: 1.5px; gap: 1px; }
  .nb-sq .v { font-size: 11.5px; }
  .nb-sq .t { font-size: 7px; letter-spacing: .06em; }
  .nb-sq.black .v { font-size: 8px; letter-spacing: .04em; }
  .nb-no { width: 13px; height: 13px; }
  .nb-mid { position: relative; grid-row: auto; grid-column: auto; margin-top: 12px; padding: 14px; }
  .nb-board > .nb-mid { display: none; }
  .nb-mini { display: flex; grid-row: 2 / 5; grid-column: 2 / 6; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: #0e1015; border: 1px solid var(--s-line); text-align: center; }
  .nb-mini small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-dim); font-weight: 700; }
  .nb-mini b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .nb-mini span { font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--s-dim); margin-top: 2px; }
  .nb-stats b { font-size: 20px; }
  .nb-side { display: flex; }
  .nb-log { max-height: 220px; }
  .nb-odds { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-line); }
}