/* Stormcrown Roulette HTML controls, shared by all three engines. Portrait first. */
:root {
  --gold: #e9c46a; --gold-hi: #fff1c1; --gold-lo: #8a6424; --ink: #05060d; --panel: rgba(6, 9, 22, .78);
  --cyan: #61d9ff; --red: #c81b2a; --green: #0f9a55; --text: #f5f0e6; --muted: #a79f90;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #030306; color: var(--text);
  font: 500 14px/1.3 "Rubik", system-ui, sans-serif; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.hud button, .hud a, .hud .chip { pointer-events: auto; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.serif { font-family: "Cinzel", Georgia, serif; }

/* top bar */
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px; background: linear-gradient(#000c, #0000); }
.topbar .back { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); text-decoration: none;
  border: 1px solid #e9c46a55; background: #0008; font-size: 18px; }
.topbar .title { font-family: "Cinzel", serif; font-weight: 900; letter-spacing: .06em; color: var(--gold); font-size: 15px; white-space: nowrap; }
.topbar .engine { font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--cyan); color: var(--cyan); white-space: nowrap; }
.topbar .spacer { flex: 1; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #e9c46a55; background: #0008; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.on { background: #e9c46a33; }

.perf { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 50px); left: 10px; font: 11px/1.45 ui-monospace, Menlo, monospace;
  background: #000b; border: 1px solid #ffffff22; border-radius: 8px; padding: 6px 8px; color: #cfe; min-width: 190px; }
.perf b { color: #fff; } .perf span { color: #8ab; }

/* history of results */
.history { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 50px); right: 8px; display: flex; flex-direction: column; gap: 4px; }
.history i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 12px "Cinzel", serif;
  border: 1.5px solid #ffffff30; box-shadow: 0 2px 6px #0008; animation: histIn .5s cubic-bezier(.2, 1.6, .4, 1); }
.history i.red { background: #a3141f; } .history i.black { background: #121216; } .history i.green { background: #0b7a45; }
.history i.hit { border-color: var(--gold); box-shadow: 0 0 10px #ffd46b, 0 0 2px #fff inset; }
.history i:nth-child(n+2) { opacity: .75; transform: scale(.88); }
@keyframes histIn { from { transform: scale(0); } }

/* banners and results */
.banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none; opacity: 0; }
.banner .t { display: inline-block; padding: 10px 26px; font: 900 22px "Cinzel", serif; letter-spacing: .12em; color: var(--gold-hi);
  background: linear-gradient(90deg, #0000, #05081ccc 20%, #05081ccc 80%, #0000); text-shadow: 0 0 18px #61d9ff88, 0 2px 0 #000;
  border-top: 1px solid #e9c46a88; border-bottom: 1px solid #e9c46a88; }
.result { position: absolute; left: 50%; top: 42%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; display: grid; place-items: center;
  font: 900 72px "Cinzel", serif; color: #fff; border: 5px solid var(--gold); box-shadow: 0 0 0 3px #0008, 0 0 40px #ffd46b88, inset 0 0 30px #0009;
  text-shadow: 0 3px 0 #000; opacity: 0; }
.result.red { background: radial-gradient(#e0303c, #7a0a12); } .result.black { background: radial-gradient(#3a3a44, #050507); } .result.green { background: radial-gradient(#23c070, #06542d); }
.result small { position: absolute; bottom: -34px; font: 900 18px "Cinzel", serif; color: var(--gold-hi); white-space: nowrap; letter-spacing: .1em; }
.winline { position: absolute; left: 0; right: 0; top: 50%; text-align: center; opacity: 0; }
.winline .lbl { font: 700 14px "Cinzel", serif; letter-spacing: .3em; color: var(--gold); }
.winline .amt { font: 900 44px "Cinzel", serif; color: var(--gold-hi); text-shadow: 0 0 20px #ffcf5a, 0 3px 0 #000; }

.bigwin { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(#0a1440cc, #000e 70%); opacity: 0; pointer-events: none; }
.bigwin .box { text-align: center; }
.bigwin .tier { font: 900 54px/1 "Cinzel", serif; letter-spacing: .06em; background: linear-gradient(#fff8d8, #f0c35a 50%, #a4701c 52%, #ffe39a);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px #61d9ffaa) drop-shadow(0 4px 0 #000); }
.bigwin .amt { margin-top: 14px; font: 900 48px "Cinzel", serif; color: #fff; text-shadow: 0 0 24px #ffcf5a, 0 3px 0 #000; }
.bigwin .sub { margin-top: 8px; color: var(--cyan); font: 700 16px "Cinzel", serif; letter-spacing: .2em; }

/* bottom controls */
.bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: linear-gradient(#0000, #000d 28%, #000f); }
.readouts, .chips, .actions { max-width: 460px; margin-left: auto; margin-right: auto; }
.readouts { display: flex; justify-content: space-between; padding: 14px 6px 4px; }
.readouts div { text-align: center; flex: 1; }
.readouts label { display: block; font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.readouts b { font: 700 17px "Rubik", sans-serif; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.readouts .win b { color: #7dffa8; }
.chips { display: flex; justify-content: center; gap: 6px; padding: 4px 0 6px; }
.chip { width: 46px; height: 46px; border-radius: 50%; position: relative; transition: transform .18s cubic-bezier(.2, 1.6, .4, 1); display: grid; place-items: center; }
.chip canvas { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 3px 6px #000a; }
.chip.sel { transform: translateY(-7px) scale(1.12); }
.chip.sel::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold-hi); box-shadow: 0 0 12px #ffd46b; }
.chip.off { opacity: .35; }
.actions { display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center; gap: 4px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.act .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #e9c46a66; background: #0a0d1c; }
.act svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act:disabled { opacity: .35; }
.spin { width: 84px; height: 84px; margin-top: -26px; justify-self: center; position: relative; border-radius: 50%; }
.spin img { width: 100%; height: 100%; display: block; }
.spin span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 15px "Cinzel", serif; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 4px #000; }
.spin:disabled { filter: grayscale(.8) brightness(.6); }
.spin:not(:disabled) { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 12px #61d9ff); } }
.hud.locked .bottom .chips, .hud.locked .bottom .actions { opacity: .45; }

.toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); padding: 7px 14px; border-radius: 99px; background: #000c; border: 1px solid #e9c46a66;
  color: var(--gold-hi); font-size: 13px; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }
.betlbl { position: absolute; padding: 3px 9px; border-radius: 6px; background: #000d; color: #fff; font-size: 12px; white-space: nowrap; transform: translate(-50%, -150%); pointer-events: none; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: #030306 center / cover no-repeat; transition: opacity .6s; }
.loader::before { content: ""; position: absolute; inset: 0; background: radial-gradient(#0000 30%, #000c); }
.loader .in { position: relative; width: min(84vw, 380px); text-align: center; }
.loader img { width: 100%; filter: drop-shadow(0 8px 30px #000); }
.loader .bar { height: 6px; margin: 18px 30px 8px; border-radius: 4px; background: #ffffff1a; overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width .2s; }
.loader .msg { color: var(--muted); font-size: 12px; letter-spacing: .15em; }
.loader .go { margin-top: 18px; padding: 14px 34px; border-radius: 99px; font: 900 17px "Cinzel", serif; letter-spacing: .12em; color: #1a1204;
  background: linear-gradient(#fff1c1, #e9c46a 50%, #b0842e); box-shadow: 0 0 30px #ffd46b66; display: none; }
.loader .eng { margin-top: 14px; color: var(--cyan); font-size: 12px; }

.card { position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 360px); background: #0a0d1ef2; border: 1px solid var(--gold);
  border-radius: 14px; padding: 16px 18px; box-shadow: 0 20px 60px #000; }
.card h3 { margin: 0 0 10px; font: 900 18px "Cinzel", serif; color: var(--gold); }
.card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.card td { padding: 4px 0; border-bottom: 1px solid #ffffff14; } .card td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.card p { color: var(--muted); font-size: 12px; margin: 10px 0; }
.card button { margin-top: 6px; width: 100%; padding: 10px; border-radius: 8px; background: var(--gold); color: #1a1204; font-weight: 700; }

@media (min-aspect-ratio: 4/5) { .history { flex-direction: row; top: auto; bottom: 170px; right: 12px; } }