/* (c) 2026 Spooky Digital Ltd⁠‌‌‌​​‌‌​​​​‌‌​‌‌​‌‌‌‌‌‌​​​‌​​​‌‌​‌‌​‌‌​​‌​‌‌​​‌‌​‌​‌​​‌‌​​‌‌​‌​​⁠ - spookydigital.io - licensed to Dart Gear Ltd for The Oche Banker. Not for reuse in other products. Build e61b7e236cb35334. */
@font-face { font-family: Anton; src: url(assets/fonts/anton-400.woff2) format("woff2"); font-display: block; }
@font-face { font-family: Manrope; src: url(assets/fonts/manrope-700.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: Manrope; src: url(assets/fonts/manrope-800.woff2) format("woff2"); font-weight: 800; font-display: block; }
:root { --green: #2fa52f; --red: #e3202a; --gold: #f4c542; --blue: #2a6fd6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: Manrope, system-ui, sans-serif; color: #fff; }
#wrap { position: fixed; inset: 0; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #16161c, #030304 70%); }
#gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
#top { position: absolute; left: 0; top: 0; right: 0; height: 140px; display: flex; align-items: center; gap: 24px; padding: 0 40px; background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0)); z-index: 5; }
#top .logo { height: 84px; width: auto; }
#top .ttl { flex: 1; display: flex; flex-direction: column; align-items: center; }
#top .ttl b { font: 400 66px/1 Anton, Impact, sans-serif; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 24px rgba(244,197,66,.45); }
#top .ttl span { font-size: 32px; font-weight: 800; color: #ddd; white-space: nowrap; }
#top .rt { min-width: 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#top .rt #who { font-size: 32px; font-weight: 800; color: #ddd; white-space: nowrap; }
#top .rt #round { font-size: 34px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.col { position: absolute; top: 150px; width: 250px; margin: 0; padding: 0; list-style: none; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
#lo { left: 28px; } #hi { right: 28px; }
.col li { height: 68px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 400 40px Anton, Impact, sans-serif; letter-spacing: 1px; box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: opacity .4s, filter .4s; }
.col li.lo { background: linear-gradient(180deg, #2f78e0, #133a7a); border: 2px solid #79a9ff; }
.col li.hi { background: linear-gradient(180deg, #d42830, #6e0a0e); border: 2px solid #ff8a8f; }
.col li.gone { opacity: .16; filter: grayscale(1); }
#cases { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.case { position: absolute; left: 0; top: 0; width: 140px; height: 124px; border: 0; background: transparent; color: transparent; cursor: pointer; pointer-events: auto; border-radius: 14px; }
.case:disabled { cursor: default; pointer-events: none; }
.case:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
.case .n, .case .p { display: none; }
body:not(.flat) .case:not(:disabled):hover { box-shadow: 0 0 0 4px rgba(244,197,66,.8); }
#top .ttl #say { font: 400 44px/1.1 Anton, Impact, sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 0 3px 12px #000; max-width: 1000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#offer, #swap { position: absolute; left: 310px; right: 310px; bottom: 112px; z-index: 8; display: flex; align-items: center; gap: 24px; padding: 22px 30px; border-radius: 22px;
  background: rgba(6,6,8,.93); border: 3px solid var(--gold); box-shadow: 0 0 60px rgba(244,197,66,.35), 0 20px 50px rgba(0,0,0,.7); }
#offer .ob, #swap .ob { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#offer .ob span, #swap .ob span { font-size: 34px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; }
#offer .ob b { font: 400 120px/1 Anton, Impact, sans-serif; color: #fff; text-shadow: 0 0 30px rgba(244,197,66,.6); }
#offer .ob i { font-style: normal; font-size: 32px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#swap .ob span { font-size: 44px; color: #fff; text-transform: none; letter-spacing: 0; }
.btns { display: flex; gap: 18px; }
.btns button, .go { font: 400 54px Anton, Impact, sans-serif; letter-spacing: 2px; text-transform: uppercase; border: 0; border-radius: 16px; padding: 18px 40px; cursor: pointer; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.deal { background: linear-gradient(180deg, #34b534, #1b6e1b); } .nodeal { background: linear-gradient(180deg, #e3202a, #7d0d12); } .go { background: linear-gradient(180deg, #34b534, #1b6e1b); }
.btns button:focus-visible, .go:focus-visible, #setup input:focus-visible, #setup select:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
#setup, #end { position: absolute; left: 460px; right: 460px; top: 190px; z-index: 9; padding: 34px 40px; border-radius: 24px; background: rgba(6,6,8,.95); border: 3px solid var(--green); box-shadow: 0 24px 70px rgba(0,0,0,.8); text-align: center; }
#setup h1 { margin: 0; font: 400 64px/1 Anton, Impact, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
#setup p { font-size: 32px; margin: 6px 0 16px; }
#setup .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
#setup .grid label:first-child { grid-column: 1 / -1; }
#setup label { font-size: 32px; font-weight: 800; display: flex; flex-direction: column; gap: 6px; }
#setup input, #setup select { font: 800 32px Manrope, system-ui, sans-serif; padding: 12px 16px; border-radius: 10px; border: 2px solid #444; background: #000; color: #fff; }
#setup .go { margin-top: 18px; }
#setup .fine { font-size: 24px; color: #aaa; margin: 16px 0 0; }
#end .k { display: block; font-size: 40px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; }
#end b { display: block; font: 400 200px/1 Anton, Impact, sans-serif; text-shadow: 0 0 40px rgba(47,165,47,.8); }
#end > span:not(.k) { display: block; font-size: 34px; color: #ddd; margin-bottom: 14px; }
#end .go { margin-top: 18px; }
#seal { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(0,0,0,.85); border-top: 3px solid var(--green); font-size: 32px; font-weight: 700; white-space: nowrap; }
#seal b { color: var(--gold); } #seal code { font-family: Consolas, monospace; font-size: 32px; color: #9fe39f; }
#seal .lock { width: 28px; height: 34px; border: 5px solid var(--gold); border-radius: 6px; position: relative; top: 6px; }
#seal .lock::before { content: ""; position: absolute; left: 2px; top: -19px; width: 14px; height: 17px; border: 5px solid var(--gold); border-bottom: 0; border-radius: 10px 10px 0 0; }
#sound { position: fixed; right: 14px; bottom: 14px; z-index: 50; font: 800 16px Manrope, system-ui, sans-serif; border-radius: 999px; padding: 10px 18px; border: 0; background: #247424; color: #fff; cursor: pointer; }
body.flat #cases { left: 300px; right: 300px; top: 170px; bottom: 220px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; pointer-events: auto; position: absolute; inset: auto; }
body.flat .case { position: relative; width: auto; height: auto; transform: none !important; background: linear-gradient(180deg, #d5d8de, #8b8f97); color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
body.flat .case .n { display: block; font: 400 60px Anton, Impact, sans-serif; }
body.flat .case .p { display: block; font: 400 34px Anton, Impact, sans-serif; }
body.flat .case.mine { outline: 5px solid var(--gold); }
body.flat .case.open, body.flat .case.shown { background: #222; color: #fff; }
body.flat .case.shown { opacity: .45; }
#skip { position: fixed; right: 14px; bottom: 64px; z-index: 50; font: 800 18px Manrope, system-ui, sans-serif; border-radius: 999px; padding: 12px 22px; border: 2px solid #f4c542; background: rgba(0,0,0,.8); color: #f4c542; cursor: pointer; }
#skip:focus-visible, #sound:focus-visible { outline: 3px solid #f4c542; outline-offset: 2px; }