/* ==========================================================================
   Casino, part two: Coinflip, War, Dice, Mines, Moles, Tower and the bits they share.
   Same rules as everything else: flat colour, 1.5px ink borders, hard shadows, no gradients.
   ========================================================================== */

/* ---------- shared bits ---------- */
.pays { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--text-3); text-transform: none; font-weight: 500; margin-left: 4px; }
.gm-field label b { color: var(--text); margin-left: 6px; }
.seg.stretch { display: flex; } .seg.stretch button { flex: 1; padding: 0 4px; }
.seg.locked { opacity: .5; pointer-events: none; }

.gm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0; }
.gm-range:disabled { opacity: .45; cursor: not-allowed; }
.gm-range::-webkit-slider-runnable-track { height: 10px; background: var(--bg-2); border: var(--bw) solid var(--line-input); border-radius: 2px; }
.gm-range::-moz-range-track { height: 7px; background: var(--bg-2); border: var(--bw) solid var(--line-input); border-radius: 2px; }
.gm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 26px; margin-top: -10px; background: var(--paper); border: var(--bw) solid #0E0C0A; border-radius: 2px; box-shadow: 2px 2px 0 var(--shadow-c); }
.gm-range::-moz-range-thumb { width: 18px; height: 24px; background: var(--paper); border: var(--bw) solid #0E0C0A; border-radius: 2px; box-shadow: 2px 2px 0 var(--shadow-c); }
.gm-range:focus-visible { outline-offset: 2px; }

/* current profit > next */
.gm-prog { border: var(--bw) solid var(--line-soft); border-radius: var(--r-1); background: var(--bg-2); overflow: hidden; }
.pr-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 14px; }
.pr-top small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.pr-top b { font-size: 17px; letter-spacing: -.04em; display: block; }
.pr-top > div:last-child { text-align: right; }
.pr-arrow { color: var(--text-3); line-height: 0; }
.pr-bot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1.5px dashed var(--line-soft); font-size: 13px; font-weight: 700; }
.pr-bot span { padding: 9px 14px; color: var(--pos); } .pr-bot span + span { text-align: right; color: var(--text); border-left: 1.5px dashed var(--line-soft); }

.cf-stage, .dc-stage, .mn-stage, .ml-stage, .tw-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.cf-stage::before, .dc-stage::before, .mn-stage::before, .ml-stage::before, .tw-stage::before { content: ''; position: absolute; inset: 0; background: var(--halftone-light); opacity: .22; pointer-events: none; clip-path: polygon(100% 0, 55% 0, 100% 45%); }
.cf-stage > *, .dc-stage > *, .mn-stage > *, .ml-stage > *, .tw-stage > * { position: relative; }        /* above the halftone corner; the other games place their own children */
.cf-sub, .mn-msg, .ml-msg, .tw-msg, .wr-msg { color: #BDB19C; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; min-height: 18px; max-width: 90%; }

/* ---------- Coinflip ---------- */
.cf-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cf-sides button { height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: var(--bw) solid var(--line-input); border-radius: var(--r-1); background: var(--bg-2); color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: transform .07s; }
.cf-sides button svg.ph { width: 17px; height: 17px; }
.cf-sides button.on { background: var(--lime); color: var(--lime-ink); border-color: #0E0C0A; box-shadow: 3px 3px 0 var(--lime-shadow); }
.cf-sides button:active { transform: translate(2px, 2px); }
.cf-toss { perspective: 900px; margin-top: 18px; filter: drop-shadow(8px 8px 0 #050403); }        /* the shadow lives out here: a filter on the coin itself flattens its 3D flip, so tails never showed */
.cf-toss.toss { animation: cfToss 1.02s cubic-bezier(.3, .6, .4, 1); }
@keyframes cfToss { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-96px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
.cf-coin { position: relative; width: clamp(150px, calc(var(--stage-h) * .4), 230px); aspect-ratio: 1; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.25, .7, .3, 1); }
.cf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cf-face.back { transform: rotateY(180deg); }
.cf-face .coin-face { width: 100%; height: 100%; }
.cf-trail { display: flex; gap: 8px; min-height: 30px; flex-wrap: wrap; justify-content: center; }
.cf-chip { width: 30px; height: 30px; display: grid; place-items: center; border: var(--bw) solid #0E0C0A; border-radius: 3px; animation: histIn .3s; }
.cf-chip.w { background: var(--lime); color: #10140A; } .cf-chip.l { background: var(--verm); color: #170805; }
.cf-chip svg.ph { width: 15px; height: 15px; }
.cf-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: min(560px, 100%); margin-top: 6px; }
.cf-stats .gm-ro { background: #1C1815; border-color: #5A4E41; } .cf-stats .gm-ro input, .cf-stats .gm-ro span { color: #F2EADB; }
.cf-stats label, .dc-fields label { color: #BDB19C; }

/* ---------- Dice ---------- */
.dc-stage { gap: 26px; }
.dc-hist { position: absolute; top: 14px; right: 14px; left: 14px; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; z-index: 2; }
.dc-hist i { font: 600 11px var(--f-mono); font-style: normal; padding: 3px 8px; border: 1.5px solid #0E0C0A; border-radius: 3px; animation: histIn .3s; }
.dc-hist i.w { background: var(--lime); color: #10140A; } .dc-hist i.l { background: var(--verm); color: #170805; }
.dc-ticket { background: var(--paper); color: var(--paper-ink); border: var(--bw) solid #0E0C0A; border-radius: var(--r-1); box-shadow: 7px 7px 0 #050403; padding: 20px 56px 16px; text-align: center; min-width: min(380px, 92%); position: relative; }
.dc-ticket::before, .dc-ticket::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #141110; border: var(--bw) solid #0E0C0A; }
.dc-ticket::before { left: -10px; } .dc-ticket::after { right: -10px; }
.dc-num { font: 700 clamp(56px, 9vw, 104px) var(--f-mono); letter-spacing: -.07em; line-height: 1; font-variant-numeric: tabular-nums slashed-zero; }
.dc-num.w { color: var(--lime-deep); } .dc-num.l { color: var(--verm-deep); }
.dc-cap { font: 600 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-mute); margin-top: 8px; min-height: 16px; border-top: 1.5px dashed var(--paper-line); padding-top: 8px; }
.dc-rail { width: min(720px, 100%); padding: 0 34px; }      /* room at both ends for the number label that points at the roll (99.99 is as wide as 50.00) */
.dc-scale { display: flex; justify-content: space-between; padding: 0 2px 8px; font: 600 12px var(--f-mono); color: #BDB19C; }
.dc-track { position: relative; height: 22px; border: var(--bw) solid #0E0C0A; background: #0E0C0A; box-shadow: 4px 4px 0 #050403; }
.dc-lose, .dc-win { position: absolute; top: 0; bottom: 0; }
.dc-lose { background: var(--verm); } .dc-win { background: var(--lime); }
.dc-lose::after { content: ''; position: absolute; inset: 0; background: var(--stripes); opacity: .35; }
.dc-slider { -webkit-appearance: none; appearance: none; position: absolute; left: -14px; right: -14px; top: -14px; width: calc(100% + 28px); height: 50px; background: transparent; margin: 0; cursor: grab; z-index: 3; }
.dc-slider:disabled { cursor: not-allowed; }
.dc-slider::-webkit-slider-runnable-track { height: 50px; background: transparent; }
.dc-slider::-moz-range-track { height: 50px; background: transparent; }
.dc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 50px; background: var(--paper); border: var(--bw) solid #0E0C0A; border-radius: 3px; box-shadow: 3px 3px 0 #050403; }
.dc-slider::-moz-range-thumb { width: 26px; height: 48px; background: var(--paper); border: var(--bw) solid #0E0C0A; border-radius: 3px; box-shadow: 3px 3px 0 #050403; }
.dc-pin { position: absolute; top: 34px; transform: translateX(-50%); opacity: 0; transition: left .65s cubic-bezier(.2, .8, .3, 1), opacity .2s; pointer-events: none; z-index: 2; }
.dc-pin.show { opacity: 1; }
.dc-pin::before { content: ''; display: block; width: 0; height: 0; margin: 0 auto; border: 8px solid transparent; border-bottom: 10px solid var(--paper); border-top: 0; }
.dc-pin span { display: block; margin-top: -1px; padding: 3px 9px; background: var(--paper); color: var(--paper-ink); border: var(--bw) solid #0E0C0A; border-radius: 3px; font: 700 13px var(--f-mono); }
.dc-pin.w span { background: var(--lime); color: #10140A; } .dc-pin.l span { background: var(--verm); color: #170805; }
.dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(720px, 100%); margin-top: 22px; }
.gm-input .swap { width: 32px; height: 32px; display: grid; place-items: center; color: #BDB19C; border-radius: 3px; }
.gm-input .swap:hover { color: var(--lime); background: #26211C; }
.gm-input .swap svg.ph { width: 17px; height: 17px; }
.gm-input .x svg.ph { width: 15px; height: 15px; }
@media (max-width: 640px) { .dc-fields { grid-template-columns: minmax(0, 1fr); } .dc-ticket { padding: 18px 34px 14px; } }

/* ---------- War ---------- */
.wr-oval .bj-zone { min-height: 150px; }
.wr-cards { display: flex; justify-content: center; gap: 16px; min-height: 120px; }
.wr-cards .pc { margin-left: 0; }
.wr-cards .pc.lost { opacity: .5; }
.wr-sides { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 28px; }
.wr-side { padding: 3px 12px; border: 2px solid #0E0C0A; border-radius: 999px; font: 700 12px var(--f-mono); letter-spacing: .03em; }
.wr-side.w { background: var(--lime); color: #10140A; } .wr-side.l { background: #EFE6D2; color: #6A5E49; }
.wr-msg { align-self: center; color: #EFE6D2; }

/* ---------- Mines ---------- */
.mn-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mn-count { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: var(--bw) solid var(--line-soft); border-radius: var(--r-1); background: var(--bg-2); font: 700 15px var(--f-mono); }
.mn-count.bomb b { color: var(--neg); }
.mn-ico { width: 22px; height: 22px; line-height: 0; } .mn-ico svg { width: 22px; height: 22px; }
.mn-grid { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 12px); width: min(560px, 94%, max(260px, calc(var(--stage-h) - 110px))); aspect-ratio: 1; }      /* a square board: as big as the screen allows, never smaller than it can be played */
.mn-tile { position: relative; min-height: 0; min-width: 0; background: #3A322A; border: var(--bw) solid #0E0C0A; border-radius: 4px; box-shadow: 4px 4px 0 #050403; display: grid; place-items: center; padding: 14%; transition: transform .07s, box-shadow .07s, background .1s; cursor: default; }
.mn-grid.live .mn-tile:not(:disabled) { cursor: pointer; background: #4A4036; }
.mn-grid.live .mn-tile:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #050403; background: #5A4E41; }
.mn-grid.live .mn-tile:not(:disabled):active { transform: translate(4px, 4px); box-shadow: 0 0 0 #050403; }
.mn-tile svg { width: 100%; height: 100%; }
.mn-tile.gem { background: var(--paper); box-shadow: 4px 4px 0 var(--lime-shadow); }
.mn-tile.bomb { background: var(--verm); box-shadow: 4px 4px 0 var(--verm-shadow); }
.mn-tile.ghost { opacity: .5; box-shadow: none; }
.mn-tile.pop { animation: tilePop .26s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes tilePop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.mn-tile:disabled { cursor: default; }

/* ---------- Moles ---------- */
.ml-stage { background: #17301F; }
.ml-field { position: relative; width: min(540px, 94%, max(260px, calc(var(--stage-h) - 110px))); aspect-ratio: 1; }
.ml-hole { position: absolute; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); background: none; padding: 0; cursor: default; transition: transform .1s; }
.ml-field.live .ml-hole { cursor: pointer; }
.ml-field.live .ml-hole:hover { transform: translate(-50%, calc(-50% - 5px)); }
.ml-art { display: block; width: 100%; height: 100%; transform-origin: 50% 85%; }
.ml-art svg { width: 100%; height: 100%; overflow: visible; }
.ml-hole.up .ml-art { animation: molePop .32s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes molePop { 0% { transform: scale(.82, .55); } 100% { transform: scale(1); } }
.ml-hole.hit::after, .ml-hole.miss::after { content: ''; position: absolute; inset: -6%; border: 4px solid var(--lime); border-radius: 50%; pointer-events: none; }
.ml-hole.miss::after { border-color: var(--verm); border-style: dashed; }

/* ---------- Tower ---------- */
.tw-stage { background: #1B1714; gap: 14px; }
.tw-stage::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 .5h80M0 20.500h80M20 .5v20M60 20.500v20' fill='none' stroke='%23EFE6D2' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E"); pointer-events: none; }
.tw-tower { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; width: min(460px, 94%); padding: 14px; border: var(--bw) solid #5A4E41; border-radius: 4px; background: #141110; box-shadow: 8px 8px 0 #050403; }
.tw-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; opacity: .55; transition: opacity .15s; }
.tw-row.now, .tw-row.done { opacity: 1; }
.tw-mult { font: 700 12.5px var(--f-mono); color: #A09482; text-align: right; letter-spacing: -.02em; }
.tw-row.now .tw-mult { color: var(--lime); } .tw-row.done .tw-mult { color: #EFE6D2; }
.tw-tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; }
.tw-tile { height: clamp(30px, calc((var(--stage-h) - 180px) / 8), 44px); background: #3A322A; border: var(--bw) solid #0E0C0A; border-radius: 3px; box-shadow: 3px 3px 0 #050403; display: grid; place-items: center; padding: 4px; transition: transform .07s, box-shadow .07s, background .1s; cursor: default; }
.tw-tile svg { height: 100%; aspect-ratio: 1; }
.tw-tower.live .tw-row.now .tw-tile:not(:disabled) { background: #5A4E41; cursor: pointer; border-color: var(--lime); }
.tw-tower.live .tw-row.now .tw-tile:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #050403; background: #6B5D4F; }
.tw-tower.live .tw-row.now .tw-tile:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 0 0 0 #050403; }
.tw-tile.safe { background: var(--paper); box-shadow: 3px 3px 0 var(--lime-shadow); }
.tw-tile.trap { background: var(--verm); box-shadow: 3px 3px 0 var(--verm-shadow); }
.tw-tile.ghost { opacity: .45; box-shadow: none; }
.tw-tile.pop { animation: tilePop .26s cubic-bezier(.2, .9, .3, 1.3); }
@media (max-width: 640px) { .tw-row { grid-template-columns: 52px minmax(0, 1fr); } }

/* ---------- demo bets: a lime bar and a switch, so nobody mistakes practice for the real thing ---------- */
.cg-body { position: relative; }
.demo-ctl { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cg-head .fair { margin-left: 14px; }
.demo-switch { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px 0 8px; border: var(--bw) solid var(--line); border-radius: var(--r-1); font: 600 11.5px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.demo-switch:hover:not(:disabled) { color: var(--text); background: var(--card-2); }
.demo-switch:disabled { opacity: .6; cursor: wait; }
.demo-switch i { width: 30px; height: 16px; border: var(--bw) solid var(--line-input); background: var(--bg-2); position: relative; border-radius: 2px; flex: none; }
.demo-switch i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; background: var(--text-3); transition: transform .12s; }
.demo-bal { font: 700 13px var(--f-mono); letter-spacing: -.02em; padding: 5px 10px; background: var(--paper); color: var(--paper-ink); border: var(--bw) solid #0E0C0A; border-radius: var(--r-1); white-space: nowrap; }
.demo-reset { height: 34px; padding: 0 12px; border: var(--bw) solid #0E0C0A; border-radius: var(--r-1); background: #0E0C0A; color: var(--lime); font: 700 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.demo-reset:hover:not(:disabled) { color: #fff; }
.demo-reset:disabled { opacity: .6; cursor: wait; }

.cg.is-demo { border-color: var(--lime); }
.cg.is-demo .cg-head { background: var(--lime); color: #10140A; border-bottom: var(--bw) solid #0E0C0A; }
.cg.is-demo .cg-head button:not(.demo-switch):not(.demo-reset), .cg.is-demo .cg-head .nm { color: #10140A; }
.cg.is-demo .cg-head .fair svg { color: #10140A; }
.cg.is-demo .cg-head .nm::after { content: 'DEMO MODE · NOTHING COUNTS'; margin-left: 12px; padding: 2px 9px; border: 2px dashed #0E0C0A; font: 700 10.5px var(--f-mono); letter-spacing: .12em; transform: rotate(-1.2deg); display: inline-block; vertical-align: 2px; }
.cg.is-demo .demo-switch { background: #0E0C0A; color: var(--lime); border-color: #0E0C0A; box-shadow: 3px 3px 0 var(--lime-shadow); }
.cg.is-demo .demo-switch i { background: var(--lime); border-color: var(--lime); }
.cg.is-demo .demo-switch i::after { background: #0E0C0A; transform: translateX(14px); }
@media (max-width: 720px) {
  .cg-head { height: auto; min-height: 58px; flex-wrap: wrap; padding: 10px 14px; row-gap: 8px; }
  .cg-head .nm { flex: 1; min-width: 0; } .cg-head .fair { margin-left: auto; }
  .cg.is-demo .cg-head .nm::after { display: none; }
  .demo-ctl { order: 5; width: 100%; margin-left: 0; justify-content: space-between; }
  .demo-bal { flex: 1; text-align: center; }
}

/* dice: a pair is thrown along the line and stops on the number that came up */
.dc-lane { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 4; pointer-events: none; }
.dc-lane:not(.on) .dc-throw { opacity: 0; }
.dc-throw { position: absolute; left: 0; top: -20px; width: 40px; height: 40px; filter: drop-shadow(3px 3px 0 #050403); }
.dc-hop { position: absolute; inset: 0; perspective: 420px; }
.dc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-26deg) rotateY(-30deg); }
.dc-die { position: absolute; inset: 0; transform-style: preserve-3d; }
.dc-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px; background: #EFE6D2; border: 2px solid #0E0C0A; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dc-face i { width: 8px; height: 8px; place-self: center; border-radius: 50%; background: #1A1612; }
.dc-face.f1 i { width: 11px; height: 11px; background: var(--verm); }
.dc-face.f1 { transform: translateZ(20px); } .dc-face.f6 { transform: rotateY(180deg) translateZ(20px); }
.dc-face.f2 { transform: rotateY(90deg) translateZ(20px); } .dc-face.f5 { transform: rotateY(-90deg) translateZ(20px); }
.dc-face.f3 { transform: rotateX(90deg) translateZ(20px); } .dc-face.f4 { transform: rotateX(-90deg) translateZ(20px); }

/* ---------- Hi-Lo, Wheel and Rock Paper Scissors ---------- */
.hl-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hl-read > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px; border: 1.5px dashed var(--line-soft); border-radius: var(--r-1); min-width: 0; }
.hl-read small { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.hl-read b { font-size: 15px; letter-spacing: -.03em; overflow-wrap: anywhere; }

.hl-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 22px 18px 28px; }
.hl-trail { display: flex; gap: 6px; min-height: 42px; align-self: flex-start; flex-wrap: wrap; }
.hl-mini { min-width: 30px; height: 40px; padding: 0 6px; display: inline-grid; place-items: center; background: #EFE6D2; color: #1A1612; border: 2px solid #0E0C0A; border-radius: 4px; font: 700 15px var(--f-mono); }
.hl-mini.red { color: #B8200A; } .hl-mini.skipped { opacity: .4; }
.hl-table { display: grid; grid-template-columns: minmax(130px, 190px) 160px minmax(130px, 190px); align-items: center; gap: 24px; }
.hl-card { width: 160px; height: 220px; display: grid; place-items: center; }
.hl-card .pc { margin: 0; transform: scale(1.8); }
.hl-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; background: #1C1815; color: #F2EADB; border: var(--bw) solid #3a332d; border-radius: var(--r-1); cursor: pointer; font-family: var(--f-body); transition: transform .08s, border-color .1s, box-shadow .1s; }
.hl-opt.higher:not(:disabled) { border-color: var(--lime); } .hl-opt.lower:not(:disabled) { border-color: var(--verm); }
.hl-opt:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime-shadow); }
.hl-opt.lower:hover:not(:disabled) { box-shadow: 4px 4px 0 var(--verm-shadow, #8f2a18); }
.hl-opt:disabled { opacity: .45; cursor: not-allowed; }
.hl-opt b { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.hl-opt em { font-style: normal; font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.hl-opt small { color: #A09482; font-size: 13px; }
.hl-opt.sure small { color: #CFC3A8; }          /* (a guess that cannot lose: its small line reads "100% · certain") */
.hl-arrow { font-size: 20px; line-height: 1; }
.hl-opt.higher .hl-arrow { color: var(--lime); } .hl-opt.lower .hl-arrow { color: var(--verm); }
.hl-skip { padding: 10px 22px; border: var(--bw) solid #3a332d; border-radius: var(--r-1); background: transparent; color: #CFC3A8; font: 700 12px var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hl-skip:hover:not(:disabled) { border-color: #CFC3A8; color: #F2EADB; } .hl-skip:disabled { opacity: .4; cursor: not-allowed; }
.hl-msg, .rp-msg { min-height: 24px; text-align: center; color: #CFC3A8; font-size: 15px; max-width: 46ch; }
@media (max-width: 720px) {
  .hl-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: 100%; }
  .hl-card { grid-column: 1 / -1; order: -1; margin: 30px auto 28px; }
  .hl-opt { padding: 14px 6px; } .hl-opt em { font-size: 22px; } .hl-opt b { font-size: 11px; }
}

.wh-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px 16px 28px; }
.wh-hist { display: flex; gap: 6px; min-height: 30px; flex-wrap: wrap; justify-content: center; }
.wh-hist span { padding: 4px 9px; border: 2px solid #0E0C0A; border-radius: 4px; color: #0E0C0A; font: 700 12px var(--f-mono); }
.wh-board { width: min(440px, 92%, max(240px, calc(var(--stage-h) - 190px))); aspect-ratio: 1; }
.wh-svg { width: 100%; height: 100%; display: block; }
.wh-rot { transform-box: fill-box; transform-origin: center; }
.wh-result { text-align: center; min-height: 66px; }
.wh-result b { display: block; font-size: 40px; letter-spacing: -.05em; color: #F2EADB; line-height: 1.1; }
.wh-result small { color: #A09482; font-size: 13px; }
.wh-table { display: grid; gap: 6px; padding-top: 14px; border-top: 1.5px dashed var(--line-soft); }
.wh-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.wh-row i { width: 16px; height: 16px; border: 2px solid #0E0C0A; border-radius: 3px; }
.wh-row span { color: var(--text-2); }

.rp-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 22px 18px 28px; }
.rp-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(640px, 100%); }
.rp-rung { display: flex; flex-direction: column; align-items: center; padding: 7px 4px; background: #1C1815; border: 2px solid #2f2924; border-radius: 6px; color: #8C8171; min-width: 0; }
.rp-rung small { font: 600 10px var(--f-mono); letter-spacing: .1em; } .rp-rung b { font-size: clamp(8px, 2.6vw, 13px); letter-spacing: -.03em; overflow-wrap: anywhere; }
.rp-rung.done { background: var(--lime); color: #10140A; border-color: #0E0C0A; }
.rp-rung.next { border-color: var(--lime); color: #F2EADB; box-shadow: 3px 3px 0 var(--lime-shadow); }
.rp-duel { display: flex; align-items: center; gap: clamp(14px, 5vw, 56px); }
.rp-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rp-side small { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: #A09482; }
.rp-pick { width: 150px; height: 150px; display: grid; place-items: center; background: #1C1815; border: var(--bw) solid #3a332d; border-radius: var(--r-1); transition: border-color .15s, box-shadow .15s; }
.rp-pick svg { width: 96px; height: 96px; } .rp-pick .q { font: 700 64px var(--f-mono); color: #4a423a; }
.rp-pick.win { border-color: var(--lime); box-shadow: 5px 5px 0 var(--lime-shadow); }
.rp-pick.lose { border-color: var(--verm); } .rp-pick.draw { border-color: #F2C230; }
@media (prefers-reduced-motion: no-preference) { .rp-pick.think { animation: rpthink .45s ease-in-out infinite alternate; } }
@keyframes rpthink { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.rp-vs { font: 800 22px var(--f-display); color: #6a6055; }
.rp-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 14px; }
.rp-choice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: #1C1815; color: #F2EADB; border: var(--bw) solid #3a332d; border-radius: var(--r-1); cursor: pointer; font: 700 12px var(--f-body); letter-spacing: .1em; text-transform: uppercase; transition: transform .08s, border-color .1s, box-shadow .1s; }
.rp-choice:hover:not(:disabled) { border-color: var(--lime); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime-shadow); }
.rp-choice:disabled { opacity: .4; cursor: not-allowed; }
.rp-ico svg { width: 56px; height: 56px; display: block; }
@media (max-width: 640px) {
  .rp-pick { width: min(104px, 28vw); height: min(104px, 28vw); } .rp-pick svg { width: 66px; height: 66px; } .rp-pick .q { font-size: 44px; }
  .rp-choices { gap: 8px; } .rp-choice { padding: 10px 4px; font-size: 11px; } .rp-ico svg { width: 44px; height: 44px; }
  .rp-rung { padding-left: 2px; padding-right: 2px; }
}

/* ---------- the hidden extra on Moles, Tower and Roulette (backend/peek.py): a lime dot on what is safe, or on the number that is coming ---------- */
.ml-hole.sure::before { content: ''; position: absolute; left: 50%; top: 4%; z-index: 3; width: 17%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--lime); border: 2px solid #0E0C0A; pointer-events: none; }
.tw-tile.sure::after { content: ''; width: 30%; max-width: 14px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); border: 2px solid #0E0C0A; pointer-events: none; }
.rc.sure { box-shadow: 0 0 0 3px #C6F432; z-index: 3; }

/* Mines (a lime dot on every safe tile) and Chicken (a red dot on the lane the chicken is hit on, a lime one at the far side when the road is clear) */
.mn-tile.sure::after { content: ''; width: 30%; max-width: 14px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); border: 2px solid #0E0C0A; pointer-events: none; }
.ck-lane.sure-hit::after { content: ''; position: absolute; left: 50%; top: 10px; z-index: 4; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: var(--verm); border: 3px solid #0E0C0A; pointer-events: none; }
.ck-end.sure-clear::after { content: ''; display: block; margin: 10px auto 0; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); border: 3px solid #0E0C0A; }

/* Blackjack: the dealer's face-down card and the next cards of the shoe, and nothing else changes on the table */
.bj-peek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; margin-bottom: 8px; background: #141110; border: var(--bw) solid var(--lime); border-radius: var(--r-1); color: #EFE6D2; font: 700 13px var(--f-mono); }
.bj-peek span { color: var(--lime); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.bj-peek b { display: inline-flex; gap: 4px; font-weight: 700; }
.bj-peek i { font-style: normal; padding: 1px 5px; background: #EFE6D2; color: #1A1612; border: 2px solid #0E0C0A; border-radius: 3px; }
.bj-peek i.red { color: #C2301A; }
.bj-peek em { margin-left: auto; font-style: normal; color: #A89B84; font-size: 11px; }
.bj-peek .pk-line { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bj-peek .pk-line b { flex-wrap: wrap; }
.bj-peek i.pick { background: var(--lime); }
.bj-peek i.small { font-size: 11px; padding: 0 4px; }
.pk-then { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font: 700 12px var(--f-mono); color: var(--text-2); }
.pk-then span { font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-right: 2px; }
.pk-then i { font-style: normal; padding: 1px 6px; background: var(--bg-2); color: var(--text); border: var(--bw) solid var(--line-soft); border-radius: 3px; }

/* ---------- which account a round plays with: weekly (vermillion) or accumulated (lime), like everywhere else on the site ---------- */
.acct-switch { display: inline-flex; border: var(--bw) solid var(--line); border-radius: var(--r-1); overflow: hidden; }
.acct-switch button { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: 34px; padding: 0 12px; min-width: 0; color: var(--text-2); background: transparent; line-height: 1.1; }
.acct-switch button + button { border-left: var(--bw) solid var(--line); }
.acct-switch button span { font: 700 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.acct-switch button b { font-size: 12px; letter-spacing: -.03em; white-space: nowrap; }
.acct-switch button:hover { color: var(--text); background: var(--card-2); }
.acct-switch button.weekly.on { background: var(--verm); color: var(--verm-ink); }
.acct-switch button.accum.on { background: var(--lime); color: var(--lime-ink); }
.cg.on-accum { border-color: var(--lime); }
.acct-switch .short { display: none; } .acct-switch i { font-style: normal; }
@media (max-width: 720px) { .acct-switch { flex: 1 1 100%; } .acct-switch button { flex: 1; padding: 0 10px; } }
@media (max-width: 360px) { .acct-switch .full { display: none; } .acct-switch .short { display: inline; } }      /* "Saved" is what the header calls the accumulated account on a small phone */

/* ---------- Plinko ---------- */
.pl-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 16px 28px; }
.pl-hist { display: flex; gap: 6px; min-height: 30px; flex-wrap: wrap; justify-content: center; }
.pl-hist span { padding: 4px 9px; border: 2px solid #0E0C0A; border-radius: 4px; color: #0E0C0A; font: 700 12px var(--f-mono); }
.pl-board { width: min(660px, 100%); }
.pl-svg { display: block; width: 100%; height: auto; max-height: max(260px, calc(var(--stage-h) - 150px)); margin: 0 auto; }
.pl-slot rect { transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.pl-slot.hit rect { stroke: #F2EADB; transform: translateY(5px) scale(1.06); }
.pl-result { text-align: center; min-height: 66px; }
.pl-result b { display: block; font-size: 40px; letter-spacing: -.05em; color: #F2EADB; line-height: 1.1; }
.pl-result small { color: #A09482; font-size: 13px; }
.plinko #rows { width: 100%; accent-color: var(--lime); }
.plinko .gm-field label b { color: var(--text); margin-left: 6px; }

/* ---------- Keno ---------- */
.kn-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px 16px 28px; }
.kn-result { text-align: center; min-height: 62px; }
.kn-result b { display: block; font-size: 36px; letter-spacing: -.05em; color: #F2EADB; line-height: 1.1; }
.kn-result small { color: #A09482; font-size: 13px; }
.kn-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; width: min(620px, 100%); }
.kn-tile { aspect-ratio: 1 / .86; min-width: 0; background: #1C1815; color: #F2EADB; border: 2px solid #3a332d; border-radius: 8px; font: 800 clamp(12px, 2.6vw, 19px) var(--f-mono); cursor: pointer; transition: transform .12s, background .12s, border-color .12s; padding: 0; }
.kn-tile:hover:not(:disabled) { border-color: var(--lime); transform: translateY(-2px); }
.kn-tile:disabled { cursor: default; }
.kn-tile.on { background: var(--lime); color: var(--lime-ink); border-color: #0E0C0A; }
.kn-tile.drawn.miss { background: var(--verm); color: #0E0C0A; border-color: #0E0C0A; }
.kn-tile.drawn.hit { background: var(--paper); color: #0E0C0A; border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime); transform: scale(1.07); }
@media (prefers-reduced-motion: no-preference) { .kn-tile.drawn { animation: knpop .28s ease-out; } }
@keyframes knpop { from { transform: scale(.82); } to { transform: scale(1); } }
.kn-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(620px, 100%); min-height: 56px; }
.kn-pay-empty { color: #A09482; font-size: 13px; align-self: center; }
.kn-p { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 6px 8px; background: #1C1815; border: 2px solid #2f2924; border-radius: 6px; color: #F2EADB; }
.kn-p b { font-size: 13px; letter-spacing: -.03em; } .kn-p small { font: 600 10px var(--f-mono); letter-spacing: .06em; color: #A09482; }
.kn-p.zero { opacity: .55; }
.kn-p.on { background: var(--lime); color: var(--lime-ink); border-color: #0E0C0A; opacity: 1; box-shadow: 3px 3px 0 #0E0C0A; } .kn-p.on small { color: var(--lime-ink); }
.kn-tools { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Baccarat ---------- */
.bc-stage { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 16px 22px; background: #17301F; }
.bc-hist { display: flex; gap: 5px; min-height: 26px; flex-wrap: wrap; justify-content: center; }
.bc-bead { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #0E0C0A; border-radius: 50%; font: 800 11px var(--f-mono); color: #0E0C0A; }
.bc-bead.player { background: #6EC6FF; } .bc-bead.banker { background: var(--verm); } .bc-bead.tie { background: var(--lime); }
.bc-hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 4vw, 48px); width: min(720px, 100%); }
.bc-hand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px 14px; border: 3px solid #EFE6D2; border-radius: 16px; background: #1E3B2C; min-width: 0; transition: box-shadow .2s, border-color .2s; }
.bc-hand header { display: flex; align-items: center; gap: 10px; color: #EFE6D2; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.bc-total { min-width: 30px; padding: 2px 8px; text-align: center; background: #EFE6D2; color: #1A1612; border-radius: 4px; font-weight: 800; letter-spacing: 0; }
.bc-cards { display: flex; justify-content: center; min-height: 122px; padding-left: 34px; }
.bc-hand.won { border-color: var(--lime); box-shadow: 0 0 0 4px #0E0C0A, 6px 6px 0 var(--lime-shadow); }
.bc-msg { min-height: 24px; color: #EFE6D2; font-weight: 600; text-align: center; }
.bc-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(720px, 100%); }
.bc-area { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 6px; background: #1E3B2C; color: #EFE6D2; border: 2px solid #EFE6D2; border-radius: 12px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.bc-area b { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; } .bc-area small { font: 600 11px var(--f-mono); color: #BDB19C; }
.bc-area:hover:not(:disabled) { border-color: var(--lime); transform: translateY(-2px); }
.bc-area:disabled { cursor: default; }
.bc-area.has { background: #0E0C0A; border-color: var(--lime); box-shadow: 4px 4px 0 var(--lime-shadow); }
.bc-amt { min-height: 20px; margin-top: 4px; color: var(--lime); font-weight: 800; }
.bc-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bc-sum small { display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); } .bc-sum b { font-size: 22px; letter-spacing: -.04em; }
.bc-btns { display: flex; gap: 8px; }
@media (max-width: 480px) { .pc { width: 64px; height: 90px; margin-left: -26px; } .bc-cards { min-height: 96px; padding-left: 26px; } .bc-area b { font-size: 12px; } }

/* ---------- Tic-Tac-Toe ---------- */
.tt-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px 16px 28px; }
.tt-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(420px, 100%); text-align: center; }
.tt-info small { display: block; font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #A09482; } .tt-info b { font-size: 16px; color: #F2EADB; letter-spacing: -.03em; overflow-wrap: anywhere; }
.tt-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(380px, 100%, max(220px, calc(var(--stage-h) - 180px))); aspect-ratio: 1; }
.tt-cell { display: grid; place-items: center; min-width: 0; padding: 0; background: #1C1815; border: 2px solid #3a332d; border-radius: 10px; cursor: pointer; transition: border-color .12s, transform .12s, background .12s; }
.tt-cell:hover:not(:disabled) { border-color: var(--lime); transform: translate(-2px, -2px); }
.tt-cell:disabled { cursor: default; }
.tt-cell svg { width: 68%; height: 68%; }
.tt-cell.line { background: #2a2c14; border-color: var(--lime); }
@media (prefers-reduced-motion: no-preference) { .tt-cell.pop svg { animation: ttpop .25s ease-out; } }
@keyframes ttpop { from { transform: scale(.4); } to { transform: scale(1); } }
.tt-msg { min-height: 24px; color: #F2EADB; font-weight: 600; text-align: center; }
.tt-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tt-levels button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; background: var(--bg-2); color: var(--text); border: var(--bw) solid var(--line-input); border-radius: var(--r-1); cursor: pointer; min-width: 0; }
.tt-levels button small { font-size: 11px; color: var(--text-2); }
.tt-levels button.active { background: var(--lime); color: var(--lime-ink); border-color: #0E0C0A; } .tt-levels button.active small { color: var(--lime-ink); }
.tt-levels button:disabled { opacity: .6; cursor: not-allowed; }

/* ---- the lobby of the games you can play against the house or a friend (games/duel.js; Tic-Tac-Toe and Rock Paper Scissors): a banner, then two big tiles ------------- */
.dl { padding: 22px; display: flex; flex-direction: column; gap: 22px; background: var(--card); min-height: var(--stage-h); }
.dl-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 26px; background: var(--lime); color: var(--lime-ink); border: var(--bw) solid #0E0C0A; border-radius: var(--r-2); box-shadow: 6px 6px 0 var(--lime-shadow); }
.dl-hero-text { min-width: 0; } .dl-hero .kicker { color: var(--lime-ink); opacity: .7; }
.dl-hero h2 { margin: 6px 0 8px; font-size: clamp(34px, 5.4vw, 56px); line-height: .94; letter-spacing: -.055em; overflow-wrap: anywhere; }
.dl-hero p { margin: 0; max-width: 40ch; font-size: 16.5px; line-height: 1.4; font-weight: 600; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.dl-chips li { padding: 5px 11px; background: var(--lime-ink); color: var(--lime); border-radius: 99px; font: 700 11px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.dl-hero-art { display: grid; place-items: center; min-height: 170px; min-width: 0; }
.dl-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.dl-mode { display: flex; flex-direction: column; min-width: 0; background: var(--bg-2); border: var(--bw) solid var(--line-soft); border-radius: var(--r-2); overflow: hidden; transition: transform .14s, border-color .14s, box-shadow .14s; }
.dl-mode:hover, .dl-mode:focus-within { transform: translate(-2px, -2px); border-color: var(--lime); box-shadow: 5px 5px 0 var(--lime-shadow); }
.dl-band { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; height: 150px; border-bottom: var(--bw) solid #0E0C0A; overflow: hidden; }
.dl-band-house { background: var(--paper); } .dl-band-friend { background: var(--verm); }
.dl-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 22px 22px; flex: 1; }
.dl-body h3 { margin: 0; font-size: 26px; line-height: 1.05; letter-spacing: -.04em; } .dl-body h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.dl-body p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.dl-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; background: var(--card); border: 1.5px dashed var(--line); border-radius: var(--r-1); }
.dl-big b { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.04em; color: var(--lime); line-height: 1; } .dl-big small { font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.dl-friend .dl-big b { color: var(--text); font-size: clamp(22px, 2.8vw, 28px); }
.dl-small { font-size: 12.5px; color: var(--text-2); }
.dl-why { color: var(--verm, #FF4B2B); }
.dl-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dl-row label { font: 700 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.dl-stakebox { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; background: var(--card); border: var(--bw) solid var(--line-soft); border-radius: var(--r-1); }
.dl-stakebox span { color: var(--text-3); font-weight: 700; } .dl-stakebox input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: 700 18px var(--f-mono); }
.dl-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-presets button { padding: 5px 12px; border: var(--bw) solid var(--line-soft); border-radius: var(--r-pill); background: transparent; color: var(--text); font: 700 12px var(--f-mono); cursor: pointer; }
.dl-presets button:hover:not(:disabled) { border-color: var(--lime); }
.dl-body select, .dl-codebox input { height: 44px; padding: 0 12px; background: var(--card); color: var(--text); border: var(--bw) solid var(--line-soft); border-radius: var(--r-1); font: inherit; min-width: 0; }
.dl-codebox { flex-direction: row; align-items: center; flex-wrap: wrap; } .dl-codebox label { flex-basis: 100%; } .dl-codebox input { flex: 1; text-transform: uppercase; font: 700 15px var(--f-mono); letter-spacing: .12em; }
.dl-alert { padding: 12px 14px; background: var(--card); border: var(--bw) solid var(--lime); border-radius: var(--r-1); }
.dl-list { display: flex; flex-direction: column; gap: 6px; }
.dl-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--bg-2); border: 1.5px dashed var(--line-soft); border-radius: var(--r-1); }
.dl-li span { min-width: 0; overflow-wrap: anywhere; }
.dl-record { font-size: 13px; color: var(--text-2); } .dl-record b { color: var(--text); font-family: var(--f-mono); }
/* the pictures */
.dl-bot { width: 124px; height: 124px; }
.dl-face { display: grid; place-items: center; width: 84px; height: 84px; border: var(--bw) solid #0E0C0A; border-radius: 50%; box-shadow: 4px 4px 0 #0E0C0A; font: 800 38px var(--f-mono); }
.dl-face.you { background: var(--lime); color: var(--lime-ink); } .dl-face.them { background: var(--paper); color: var(--paper-ink); border-style: dashed; }
.dl-vs { padding: 4px 10px; background: #0E0C0A; color: var(--paper); border-radius: 99px; font: 800 13px var(--f-mono); letter-spacing: .1em; }
.dl-ttt { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(210px, 100%); aspect-ratio: 1; padding: 8px; background: #14110D; border: var(--bw) solid #0E0C0A; border-radius: 14px; box-shadow: 5px 5px 0 #0E0C0A; }
.dl-ttt-c { display: grid; place-items: center; background: #1C1815; border-radius: 8px; } .dl-ttt-c img, .dl-ttt-c svg { width: 72%; height: 72%; }
.dl-ttt-line { position: absolute; left: -9%; top: 50%; width: 118%; height: 9px; margin-top: -4.5px; background: var(--lime); border: 2px solid #0E0C0A; border-radius: 6px; transform: rotate(45deg); transform-origin: center; }
.dl-hands { display: flex; align-items: flex-end; justify-content: center; gap: 4%; width: 100%; } .dl-hands img { height: clamp(78px, 9vw, 108px); width: auto; max-width: 31%; object-fit: contain; filter: drop-shadow(4px 4px 0 #0E0C0A); }
.dl-hands img:nth-child(2) { transform: translateY(-12px); }
@media (prefers-reduced-motion: no-preference) {
  .dl-ttt-c { animation: dlPop .35s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--d, 0s); }
  .dl-ttt-line { animation: dlLine .5s ease-out 1.9s both; }
  .dl-hands img { animation: dlBob 2.6s ease-in-out infinite; } .dl-hands img:nth-child(2) { animation-delay: .35s; } .dl-hands img:nth-child(3) { animation-delay: .7s; }
  .dl-bot { animation: dlBob 3s ease-in-out infinite; } .dl-bot-light { animation: dlBlink 1.4s steps(2) infinite; } .dl-bot-eye { animation: dlEye 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .dl-face.you { animation: dlBob 2.4s ease-in-out infinite; } .dl-face.them { animation: dlBob 2.4s ease-in-out .5s infinite; }
}
@keyframes dlPop { from { opacity: 0; transform: scale(.4); } }
@keyframes dlLine { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dlBob { 50% { transform: translateY(-6px); } }
@keyframes dlBlink { 50% { opacity: .25; } }
@keyframes dlEye { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.tt-back { align-self: flex-start; }
.tt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tt-facts small { display: block; font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } .tt-facts b { font-size: 15px; overflow-wrap: anywhere; }
.tt-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1.5px dashed var(--lime); border-radius: var(--r-1); }
.tt-code small { font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } .tt-code b { font-size: 22px; letter-spacing: .14em; }
@media (max-width: 820px) { .dl-modes { grid-template-columns: minmax(0, 1fr); } .dl { padding: 16px; } .dl-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; } .dl-hero-art { min-height: 150px; } }
@media (max-width: 480px) { .tt-facts { grid-template-columns: minmax(0, 1fr); } .dl-li { flex-wrap: wrap; } .dl-band { height: 124px; } }
.tt-back[hidden] { display: none; }

/* Mines: the tile that was just pressed, until the server's answer opens it */
.mn-grid .mn-tile.opening { transform: translate(4px, 4px); box-shadow: 0 0 0 #050403; }
[data-clique-art="v1"] .mn-grid .mn-tile.opening { transform: scale(.94); }

/* Keno's auto pick: each number pops as it lights up */
@media (prefers-reduced-motion: no-preference) { .kn-tile.lit { animation: knpop .3s ease-out; } }

/* ---- Plinko: studs that light up when a ball touches them, multipliers that float up from the slot, a cost line for several balls ---- */
.pl-board { filter: drop-shadow(0 6px 0 rgba(5, 4, 3, .6)); }
.pl-peg { transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out; }
.pl-peg.flash { transform: scale(1.55); } .pl-peg.flash .pl-pm { fill: #D4F65B; }
.pl-ball { will-change: transform; }
.pl-float { font: 800 17px var(--f-mono); paint-order: stroke; stroke: #0E0C0A; stroke-width: 4px; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .pl-float { animation: plFloat 1.05s ease-out forwards; } }
@keyframes plFloat { from { opacity: 1; transform: translateY(2px) scale(.8); } 25% { transform: translateY(-8px) scale(1.15); } to { opacity: 0; transform: translateY(-46px) scale(1); } }
.pl-total { display: block; margin-top: 6px; min-height: 16px; color: var(--text-2); font-size: 12.5px; line-height: 1.35; } .pl-total.bad { color: var(--neg); font-weight: 600; }
.pl-slot.hit rect { filter: brightness(1.12); }
.pl-presets { margin-bottom: 8px; } .pl-presets button { min-width: 0; padding-inline: 4px; } .pl-custom { width: 100%; min-height: 44px; font-family: var(--f-mono); }

/* ---- Rock Paper Scissors against a friend (games/rps.js): the score, the secret picks and the rounds so far ---- */
.rm-score { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; width: min(560px, 100%); padding: 10px 14px; background: #1C1815; border: var(--bw) solid #3a332d; border-radius: var(--r-1); }
.rm-name { min-width: 0; max-width: 28%; overflow-wrap: anywhere; font: 700 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #CFC3A8; }
.rm-sc { font-size: 28px; letter-spacing: -.04em; color: #F2EADB; }
.rm-pips { display: inline-flex; gap: 6px; }
.rm-pips i { width: 16px; height: 16px; border: 2.5px solid #4a423a; border-radius: 50%; background: transparent; transition: background .2s, border-color .2s, transform .2s; }
.rm-pips i.on.me { background: var(--lime); border-color: #0E0C0A; transform: scale(1.12); } .rm-pips i.on.them { background: var(--verm); border-color: #0E0C0A; transform: scale(1.12); }
.rm-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; width: min(560px, 100%); }
.rm-rounds { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.rm-r { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 2px solid #0E0C0A; border-radius: 6px; font: 800 13px var(--f-mono); color: #0E0C0A; background: #CFC3A8; }
.rm-r small { font: 600 10px var(--f-mono); opacity: .65; } .rm-r.w { background: var(--lime); } .rm-r.l { background: var(--verm); } .rm-r.d { background: #F2C230; }
.rm-time { text-align: right; } .rm-time small { display: block; font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #A09482; } .rm-time b { font-size: 20px; color: #F2EADB; }
.rp-pick.locked { border-color: var(--lime); }
@media (max-width: 480px) { .rm-name { max-width: 100%; flex-basis: 40%; } .rm-score { gap: 6px 10px; } }
/* the hidden extra on Tic-Tac-Toe (backend/peek.py): a small tag on each empty square, "→N" for where the house answers, or what that square ends the round with */
.tt-cell[data-peek] { position: relative; }
.tt-cell[data-peek]::after { content: attr(data-peek); position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; font: 700 12px var(--f-mono); background: #141110; color: #EFE6D2; border: 2px solid var(--lime); border-radius: 3px; pointer-events: none; }
.tt-cell.pk-win[data-peek]::after { background: var(--lime); color: #141110; }
.tt-cell.pk-lose[data-peek]::after { border-color: var(--verm); }
.tt-cell.pk-draw[data-peek]::after { border-color: #EFE6D2; }