/* Casino Empire: Las Vegas 1962. Walnut, brass, baize and ledger paper. */
:root {
  --walnut: #2b1810; --walnut-dk: #190d08; --walnut-lt: #4a2c1b;
  --brass: #c9a24b; --brass-lt: #f0d78c; --brass-dk: #7a5c26;
  --oxblood: #5c1320; --baize: #114a39; --ivory: #f3e7cf; --paper: #efe2c6; --ink: #2b1a10;
  --money: #a6ecbd; --ledger-green: #1c6b45; --ledger-red: #a32a20; --loss: #ff9d8c;
  --display: 'Limelight', Georgia, serif;
  --text: 'Barlow Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --rail-h: 58px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: #0a0504; color: var(--ivory); font: 500 15px/1.3 var(--text); user-select: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
svg { display: block; fill: currentColor; }
.hidden { display: none !important; }

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#game.can-pick { cursor: pointer; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, transparent 55%, rgba(6, 2, 1, .62) 100%); }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * , #left-col > *, #right-col > *, #bottom > * { pointer-events: auto; }
#left-col, #right-col, #bottom { pointer-events: none !important; }

/* ---- top rail: a walnut bar with one lit object in the middle ---- */
#rail { position: absolute; top: 0; left: 0; right: 0; height: var(--rail-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 12px;
  background: linear-gradient(#3b2316, var(--walnut) 45%, var(--walnut-dk)); border-bottom: 2px solid var(--brass-dk); box-shadow: 0 1px 0 var(--brass), 0 6px 18px rgba(0,0,0,.55); }
.rail-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail-group.end { justify-content: flex-end; }
.plate { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 3px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(10, 4, 2, .5); box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,220,160,.1); }
.glyph { width: 14px; height: 14px; color: var(--brass); }
.speeds { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,220,160,.12), 0 1px 3px rgba(0,0,0,.6); }
.speeds button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brass-lt); background: linear-gradient(#54351f, #311c10); border-right: 1px solid rgba(0,0,0,.45); }
.speeds button:last-child { border-right: 0; }
.speeds button svg { width: 14px; height: 14px; }
.speeds button:hover { background: linear-gradient(#6a4427, #40261a); }
.speeds button.active { color: #2b1508; background: linear-gradient(var(--brass-lt), var(--brass)); box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 3px; color: var(--brass-lt); background: rgba(10,4,2,.5); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: rgba(70,40,20,.7); }
.icon-btn.off { color: rgba(240,215,140,.32); }
.icon-btn.off .wave { display: none; }
.stars { font-size: 17px; letter-spacing: 1px; background: linear-gradient(90deg, var(--brass-lt) var(--fill, 60%), #4b3626 var(--fill, 60%)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the bankroll: reel digits inside a bulb-lit marquee */
#marquee { position: relative; height: 50px; padding: 9px 15px; border-radius: 6px; background: linear-gradient(#7c1826, #4c0d18); box-shadow: 0 0 0 1px var(--brass-dk), 0 0 0 2px var(--brass), 0 3px 12px rgba(0,0,0,.7); }
#marquee::before { content: ''; position: absolute; inset: 2px 3px; border-radius: 4px; pointer-events: none;
  --b: radial-gradient(circle, #fff3cf 0 1.700px, #e6b95c 2.300px, rgba(230,160,60,.3) 3.200px, transparent 4px);
  background: var(--b) 0 0 / 11px 7px repeat-x, var(--b) 0 100% / 11px 7px repeat-x, var(--b) 0 0 / 7px 11px repeat-y, var(--b) 100% 0 / 7px 11px repeat-y; }
#marquee.chase::before { animation: chase .28s steps(2) infinite; }
@keyframes chase { to { background-position: 11px 0, -11px 100%, 0 -11px, 100% 11px; filter: brightness(1.4); } }
.reels { display: flex; height: 32px; align-items: stretch; gap: 1px; font: 400 22px/32px var(--display); color: #24110a; }
.reel { width: 17px; height: 32px; overflow: hidden; border-radius: 2px; text-align: center; background: linear-gradient(#b8a88a, var(--ivory) 22%, #fff8e8 50%, var(--ivory) 78%, #b8a88a); box-shadow: inset 0 0 2px rgba(0,0,0,.5); }
.strip { display: block; transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.strip i { display: block; height: 32px; font-style: normal; }
.sep { width: 12px; text-align: center; color: var(--brass-lt); }
.neg .reel { color: #a11d12; }

/* ---- left column: goal plaque ---- */
#left-col { position: absolute; top: calc(var(--rail-h) + 12px); left: 12px; width: 232px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#goal { display: grid; gap: 1px; width: 100%; padding: 9px 12px 11px; text-align: left; border-radius: 3px;
  background: linear-gradient(#352012, #21130b); box-shadow: 0 0 0 1px var(--brass-dk), 0 4px 14px rgba(0,0,0,.5); }
#goal:hover { background: linear-gradient(#452a18, #2a1810); }
#goal-license { font-size: 12.500px; color: var(--brass); }
#goal-name { font: 400 19px/1.2 var(--display); color: var(--brass-lt); }
#goal-text { font-size: 13.500px; font-variant-numeric: tabular-nums; }
.meter { display: block; height: 5px; margin-top: 6px; border-radius: 1px; background: rgba(0,0,0,.55); overflow: hidden; }
.meter > * { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-lt)); transition: width .4s; }
#event, #toolchip { padding: 6px 12px; border-radius: 3px; font-weight: 600; font-size: 14px; background: rgba(25, 13, 8, .92); box-shadow: 0 0 0 1px var(--brass-dk); }
#event { color: var(--brass-lt); }
#expand { width: 100%; padding: 8px 12px; border-radius: 3px; text-align: left; font-weight: 600; font-size: 14px; color: var(--brass-lt); background: rgba(25, 13, 8, .92); box-shadow: 0 0 0 1px var(--brass-dk); }
#expand:hover { background: rgba(48, 28, 16, .95); }
#expand.poor { opacity: .6; }
#expand small { display: block; font-weight: 500; font-size: 12.500px; opacity: .8; }
#hint { width: 100%; padding: 8px 12px; border-radius: 3px; font-size: 13.500px; line-height: 1.35; color: var(--brass-lt); background: rgba(25, 13, 8, .92); box-shadow: 0 0 0 1px var(--brass); }

/* ---- right column ---- */
#right-col { position: absolute; top: calc(var(--rail-h) + 12px); right: 12px; width: 272px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#alert { padding: 7px 13px; border-radius: 3px; font-weight: 700; color: #fff0e4; background: linear-gradient(#b4291e, #7f1a13); box-shadow: 0 0 0 1px #e8786a, 0 3px 12px rgba(160,30,20,.6); }
#alert.money { background: linear-gradient(#7a1730, #4e0d1f); }
#inspector { width: 100%; padding: 12px; border-radius: 4px; background: linear-gradient(#2f1c11, #1e110a); box-shadow: 0 0 0 1px var(--brass-dk), 0 6px 20px rgba(0,0,0,.55); }
.insp-head { display: flex; align-items: center; gap: 10px; }
.insp-head img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.insp-head b { display: block; font: 400 19px/1.15 var(--display); color: var(--brass-lt); }
.insp-head small { display: block; margin-top: 2px; font-size: 13px; opacity: .78; }
.close { flex: none; margin-left: auto; align-self: flex-start; width: 24px; height: 24px; opacity: .7; }
.close:hover { opacity: 1; }
.close svg { width: 14px; height: 14px; margin: auto; stroke: currentColor; stroke-width: 1.800; }
#insp-stats { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-top: 10px; font-size: 14.500px; font-variant-numeric: tabular-nums; }
#insp-stats span:nth-child(odd) { opacity: .68; }
.slider { display: block; margin-top: 12px; font-size: 14.500px; }
.slider > span { display: flex; justify-content: space-between; margin-bottom: 3px; }
.slider b { color: var(--brass-lt); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--brass); }
#insp-hint { margin-top: 8px; font-size: 13.500px; line-height: 1.3; opacity: .78; }
#insp-sell { width: 100%; margin-top: 12px; padding: 7px; border-radius: 3px; font-weight: 600; color: #ffc6ba; background: rgba(160, 42, 30, .28); box-shadow: inset 0 0 0 1px rgba(232,120,106,.45); }
#insp-sell:hover { background: rgba(160, 42, 30, .5); }

/* ---- toasts ---- */
#toast { position: absolute; left: 50%; top: calc(var(--rail-h) + 12px); transform: translate(-50%, -8px); max-width: min(460px, 44vw); z-index: 60; padding: 8px 15px; border-radius: 3px; text-align: center; font-weight: 600; opacity: 0; pointer-events: none !important; transition: opacity .2s, transform .2s;
  background: rgba(25, 13, 8, .95); box-shadow: 0 0 0 1px var(--brass-dk), 0 6px 18px rgba(0,0,0,.6); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.goal { color: #2b1508; background: linear-gradient(var(--brass-lt), var(--brass)); }
#toast.bad { color: #fff0e4; background: linear-gradient(#8f2018, #651510); box-shadow: 0 0 0 1px #e8786a; }

/* ---- dock: a row of poker chips ---- */
#bottom { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#dock { display: flex; gap: 6px; padding: 0 10px; }
.chip { --c: #7b1a22; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 76px; font-size: 13.500px; font-weight: 600; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.chip .disc { position: relative; width: 60px; height: 60px; border-radius: 50%; transition: transform .12s;
  background: repeating-conic-gradient(var(--ivory) 0 15deg, var(--c) 15deg 45deg); box-shadow: 0 3px 0 rgba(0,0,0,.55), 0 6px 12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35); }
.chip .disc::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--c) 72%, white), var(--c) 55%, color-mix(in srgb, var(--c) 72%, black)); box-shadow: 0 0 0 1.500px var(--brass-lt), inset 0 1px 3px rgba(0,0,0,.5); }
.chip img { position: absolute; z-index: 1; inset: 8px; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.chip:hover .disc { transform: translateY(-3px); }
.chip.active .disc { transform: translateY(-6px); box-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 0 2px var(--brass-lt), 0 10px 16px rgba(0,0,0,.6); }
.chip.active span { color: var(--brass-lt); }

/* ---- flyout: the tray a chip opens ---- */
#flyout { width: min(620px, 94vw); max-height: min(330px, 46vh); overflow-y: auto; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; border-radius: 4px; background: linear-gradient(#2f1c11, #1e110a); box-shadow: 0 0 0 1px var(--brass-dk), 0 10px 26px rgba(0,0,0,.65); scrollbar-color: var(--brass-dk) transparent; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: 2px; text-align: left; }
.row img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.row div { flex: 1; min-width: 0; }
.row b { display: block; font-size: 15.500px; font-weight: 700; }
.row small { display: block; font-size: 13px; line-height: 1.2; opacity: .72; }
.row .price { flex: none; font-weight: 700; color: var(--money); font-variant-numeric: tabular-nums; }
.row:hover { background: rgba(240, 215, 140, .1); }
.row.active { background: rgba(240, 215, 140, .17); box-shadow: inset 0 0 0 1px var(--brass); }
.row.poor .price { color: var(--loss); }
.row.locked { opacity: .52; }
.row.locked img { filter: grayscale(.9) brightness(.7); }
.staff-roster { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(201,162,75,.3); font-size: 14.500px; }
.staff-roster > p { grid-column: 1 / -1; margin: 0 0 2px; padding: 0 8px; opacity: .65; }
.staff-roster .who { display: flex; align-items: center; gap: 8px; padding: 2px 8px; }
.who span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { opacity: .65; }
.fire { flex: none; padding: 1px 9px; border-radius: 2px; font-size: 13px; color: #ffc6ba; background: rgba(160,42,30,.3); }
.fire:hover { background: rgba(160,42,30,.55); }

/* ---- the office: finance, research, goals and help on ledger paper ---- */
#modal { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 3, 2, .62); backdrop-filter: blur(2px); }
#modal-box { position: relative; width: min(820px, 96vw); max-height: 92vh; overflow-y: auto; padding: 12px; border-radius: 5px; background: linear-gradient(#3b2316, var(--walnut)); box-shadow: 0 0 0 1px var(--brass-dk), 0 0 0 2px var(--brass), 0 18px 50px rgba(0,0,0,.75); scrollbar-color: var(--brass-dk) transparent; }
.tabs { display: flex; align-items: flex-end; gap: 3px; padding: 2px 4px 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; white-space: nowrap; padding: 7px 14px 8px; border-radius: 3px 3px 0 0; font-weight: 600; color: var(--ivory); background: rgba(10,4,2,.45); }
.tab:hover { background: rgba(10,4,2,.25); }
.tab.active { color: var(--ink); background: var(--paper); }
.tabs .close { margin-left: auto; align-self: center; color: var(--brass-lt); }
.paper { padding: 16px 18px; border-radius: 2px; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 32px rgba(120, 84, 40, .22); }
.paper h2 { margin: 0 0 2px; font: 400 26px/1.15 var(--display); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dotted rgba(43,26,16,.32); font-weight: 600; }
.setting span { white-space: nowrap; }
.setting input[type=range] { flex: 0 1 260px; accent-color: var(--ledger-red); }
#save-text { width: 100%; box-sizing: border-box; padding: 8px; font: 12px/1.3 ui-monospace, Menlo, monospace; color: var(--ink); background: rgba(255,255,255,.35); border: 1px solid rgba(43,26,16,.4); border-radius: 2px; resize: vertical; }
.paper .lede { margin: 0 0 12px; opacity: .72; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--ink); }
.figures small { display: block; font-size: 13.500px; opacity: .7; }
.figures b { font: 400 25px/1.2 var(--display); }
.up { color: var(--ledger-green); } .down { color: var(--ledger-red); }
#fin-chart { display: block; width: 100%; }
.chart-cap { margin: 0 0 4px; font-size: 13.500px; opacity: .7; }
#fin-kinds, #fin-exits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 10px; font-variant-numeric: tabular-nums; }
#fin-advice { margin: 8px 0 0; font-weight: 600; }
#fin-kinds div, #fin-exits div { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted rgba(43,26,16,.32); }
.foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; }
.foot span { flex: 1; opacity: .72; }
.ghost-btn { flex: none; padding: 4px 11px; border-radius: 2px; color: var(--ledger-red); box-shadow: inset 0 0 0 1px var(--ledger-red); font-weight: 600; }
.ghost-btn:hover { color: #fff; background: var(--ledger-red); }
.line { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px dotted rgba(43,26,16,.36); }
.line:last-child { border-bottom: 0; }
.line > div:first-child { flex: 1; min-width: 0; }
.line b { display: block; font-size: 16.500px; font-weight: 700; }
.line small { display: block; font-size: 14px; opacity: .74; }
.ink-btn { flex: none; min-width: 74px; padding: 5px 12px; border-radius: 2px; font-weight: 700; color: var(--paper); background: var(--ink); }
.ink-btn:hover:not(:disabled) { background: var(--oxblood); }
.ink-btn:disabled { opacity: .3; cursor: not-allowed; }
.rs-status { flex: none; width: 96px; font-size: 14px; text-align: right; opacity: .78; }
.ink-meter { display: block; height: 7px; margin-top: 5px; background: rgba(43,26,16,.16); }
.ink-meter i { display: block; height: 100%; background: var(--oxblood); }
.goal-line.todo { opacity: .46; }
.goal-line.now { margin: 0 -10px; padding: 10px; background: rgba(201, 162, 75, .24); box-shadow: inset 0 0 0 1px rgba(122,92,38,.6); border-bottom: 0; }
.reward { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ledger-green); }
.stamp { flex: none; padding: 1px 8px; border: 2px solid var(--ledger-red); border-radius: 3px; font: 400 15px/1.3 var(--display); color: var(--ledger-red); transform: rotate(-7deg); opacity: .82; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; }
.keys dt { font-weight: 700; }
.keys dd { margin: 0; }
.wardrobe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wardrobe-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 3px; background: rgba(43,26,16,.08); border: 1px solid rgba(43,26,16,.18); }
.wardrobe-card.active { background: rgba(201, 162, 75, .28); border-color: rgba(122,92,38,.8); box-shadow: inset 0 0 0 1px rgba(122,92,38,.6); }
.wardrobe-card canvas { width: 64px; height: 80px; flex: none; background: rgba(0,0,0,.08); border-radius: 2px; }
.wardrobe-card .w-info { flex: 1; min-width: 0; }
.wardrobe-card b { display: block; font-size: 16px; font-weight: 700; }
.wardrobe-card small { display: block; font-size: 13px; opacity: .76; line-height: 1.25; margin-top: 2px; }
.wardrobe-card .w-role { font-size: 11px; color: var(--ledger-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.paper h3 { margin: 16px 0 6px; font: 400 19px/1.2 var(--display); }
.paper ul { margin: 0; padding-left: 18px; }
.paper li { margin-bottom: 4px; }
.finale { padding: 26px 22px; text-align: center; }
.finale h2 { font-size: 36px; margin-bottom: 8px; }
.finale p { max-width: 46ch; margin: 0 auto 18px; }
.finale .ink-btn { padding: 9px 18px; margin: 0 4px; }

/* ---- title screen ---- */
#title { position: absolute; inset: 0; z-index: 100; display: flex; align-items: flex-end; overflow: hidden; background: #0a0504; transition: opacity .55s; }
#title.leaving { opacity: 0; pointer-events: none; }
#title-art { position: absolute; inset: 0; background: url(assets/hero.webp) center / cover no-repeat; }
#title-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,3,2,.9), rgba(8,3,2,.55) 42%, transparent 72%), linear-gradient(0deg, rgba(8,3,2,.7), transparent 40%); }
#title-body { position: relative; padding: 0 0 clamp(28px, 8vh, 80px) clamp(24px, 7vw, 96px); max-width: 620px; }
#title h1 { margin: 0; font: 400 clamp(60px, 11.500vw, 148px)/.92 var(--display); color: var(--brass-lt); text-shadow: 0 0 34px rgba(255,190,90,.42), 0 3px 0 #6b3d10, 0 6px 22px rgba(0,0,0,.8); }
#title p { max-width: 34ch; margin: 18px 0 22px; font-size: clamp(17px, 2vw, 21px); line-height: 1.35; text-shadow: 0 1px 6px #000; }
#title-menu { display: flex; flex-wrap: wrap; gap: 10px; }
.big { padding: 12px 24px; border-radius: 3px; font-size: 19px; font-weight: 700; color: #2b1508; background: linear-gradient(var(--brass-lt), var(--brass)); box-shadow: 0 3px 0 var(--brass-dk), 0 8px 18px rgba(0,0,0,.6); }
.big:hover { background: linear-gradient(#fff0b8, #d9b45a); }
.big:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brass-dk); }
.big.alt { color: var(--ivory); background: rgba(35,18,10,.85); box-shadow: inset 0 0 0 1px var(--brass); }
.big.alt:hover { background: rgba(60,32,18,.9); }
#title-load { width: min(320px, 70vw); height: 6px; border-radius: 1px; overflow: hidden; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px var(--brass-dk); }
#title-bar { display: block; width: 0; height: 100%; background: var(--brass-lt); transition: width .25s; }
#title-error { margin-top: 12px; color: var(--loss); font-weight: 600; }

@media (max-width: 880px) {
  #crowd, #date { font-size: 13.500px; padding: 0 7px; }
  #btn-music, #crowd { display: none; }
  .chip { width: 58px; font-size: 12.500px; }
  .chip .disc { width: 48px; height: 48px; }
  .chip img { inset: 6px; width: 36px; height: 36px; }
  #flyout { grid-template-columns: 1fr; }
  #left-col { width: 190px; }
  #goal-name { font-size: 16px; }
  #right-col { width: 236px; }
}
@media (max-width: 620px) {
  #rail { grid-template-columns: auto auto; justify-content: space-between; }
  .rail-group.end, #date { display: none; }
  #left-col { display: none; }
  #fin-kinds, .figures { grid-template-columns: 1fr 1fr; }
  #dock { gap: 0; padding: 0 2px; }
  .chip { width: 52px; font-size: 11.500px; }
  .chip .disc { width: 42px; height: 42px; }
  .chip .disc::after { inset: 5px; }
  .chip img { inset: 5px; width: 32px; height: 32px; }
  #right-col { width: min(272px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  #marquee.chase::before { animation: none; }
  .strip, .meter > *, #toast, #title { transition: none; }
}

.jackpot span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.jackpot strong { color: #ffd86a; text-shadow: 0 0 8px rgba(255, 190, 70, .45); }
@media (max-width: 1100px) { .jackpot span { display: none; } .jackpot strong::before { content: "JP "; color: var(--brass); font-size: 11px; letter-spacing: .1em; } }