:root {
  color-scheme: dark;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #05090f;
  color: #e9faff;
  font-synthesis: none;
  --accent: #8cf9e2;
  --accent-blue: #80c6ff;
  --muted: #a4c0cc;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; min-width: 280px; width: 100%; height: 100%; min-height: 100%; }
body { overflow: auto; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:disabled { opacity: .33; cursor: not-allowed; }
button:focus { outline: 0; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#app { display: flex; align-items: center; justify-content: center; }
.stage {
  width: min(100vw, 600px);
  height: min(100dvh, 600px);
  min-height: min(100vw, 540px);
  padding: 23px 28px 18px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 50% 45%, rgba(49, 101, 113, .10), transparent 50%),
    linear-gradient(160deg, #07101b, #060a11 70%);
}
.stage::before { content:""; position:absolute; inset:0; border: 1px solid rgba(150,234,244,.07); pointer-events:none; }
.topbar { height: 49px; flex-shrink:0; display:flex; align-items:flex-start; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:850; letter-spacing: -.07em; }
.brand-icon { font-size:18px; color:var(--accent); }
.brand-separator { color:var(--accent); padding:0 2px; }
.wallet { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.wallet-label, .small-title, .eyebrow, .stat>span { font-size:12px; letter-spacing:.17em; font-weight:800; color:var(--muted); }
.wallet-value { font-size:17px; font-weight:780; font-variant-numeric: tabular-nums; }
.coin, .coin-big, .stat i { color:#ffd783; font-style:normal; }
.stake-view, .result-view { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:38px; }
.eyebrow { color:var(--accent); font-size:12px; letter-spacing:.23em; }
h1 { margin:16px 0 0; font-size:27px; line-height:1.2; letter-spacing:-.045em; max-width: 470px; }
.desc, .result-view p { margin:13px 0 0; color:#afc9d6; font-size:15px; line-height:1.35; }
.stake-panel { margin-top:33px; width:100%; border-radius:26px; padding:20px; border:1px solid #284550; background:rgba(28,50,63,.5); }
.stake-amount { margin: 7px 0 18px; font-size:66px; font-weight:850; letter-spacing:-.07em; line-height:1.06; font-variant-numeric:tabular-nums; }
.coin-big { font-size:22px; vertical-align:middle; }
.stepper { display:flex; justify-content:center; align-items:center; gap:28px; }
.stepper-caption { font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--muted); }
.round-button { border:1px solid #527780; border-radius:13px; background:rgba(33,66,78,.65); width:55px; height:44px; font-size:29px; line-height:1; font-weight:400; }
.primary-button {
  flex-shrink:0; display:flex; justify-content:space-between; align-items:center;
  height:69px; width:100%; padding:0 23px; margin-top:auto;
  border:2px solid var(--accent); border-radius:19px; background:#94f8e6; color:#092322;
  font-size:20px; font-weight:850; letter-spacing:.025em; text-align:left;
  box-shadow:0 0 22px rgba(70,255,222,.13);
}
.primary-button span { font-size:27px; }
.primary-button:focus-visible { outline-color:#ffffff; }
.guide { margin-top:15px; margin-bottom:1px; color:#9cb6c3; font-size:12px; font-weight:650; letter-spacing:.06em; }
.guide b { color:#e1f8ff; }
.dot-separator { margin:0 10px; color:#527b89; }
.play-view { display:flex; flex-direction:column; flex:1; min-height:0; }
.round-stats { display:flex; justify-content:space-between; align-items:start; padding-top:11px; }
.stat { display:flex; flex-direction:column; gap:7px; }
.stat-right { text-align:right; }
.stat strong { font-size:26px; font-weight:850; font-variant-numeric:tabular-nums; line-height:1; }
.stat em { font-size:18px; font-style:normal; font-weight:500; color:#98b6c0; }
.card-area { flex:1; min-height:161px; display:flex; align-items:center; justify-content:center; gap:19px; padding:5px 0 0; }
.card-detail { min-width:101px; max-width:110px; font-size:11px; letter-spacing:.09em; font-weight:850; line-height:1.6; color:#a6bec9; }
.left-detail { text-align:right; }
.right-detail { text-align:left; }
.playing-card { position:relative; flex-shrink:0; width:126px; height:163px; border-radius:17px; border:2px solid #c4f7f4; background:linear-gradient(155deg,#1c3643,#0c1c2b); box-shadow:0 0 27px rgba(101,231,231,.14); }
.playing-card.red { color:#ff9f9f; border-color:#ffc6c2; background:linear-gradient(155deg,#3b2631,#181724); }
.playing-card.black { color:#a9fff0; }
.card-corner { position:absolute; display:flex; flex-direction:column; gap:0; font-size:25px; font-weight:900; line-height:.9; text-align:center; }
.card-corner small { font-size:18px; }
.card-corner.top { left:11px; top:10px; }
.card-corner.bottom { right:11px; bottom:10px; transform:rotate(180deg); }
.card-big-suit { position:absolute; inset:0; display:grid; place-items:center; font-size:59px; font-weight:400; }
.history { height:31px; display:flex; justify-content:center; align-items:center; gap:13px; color:#89a8b4; min-height:0; }
.history span { font-size:10px; letter-spacing:.1em; font-weight:800; }
.history strong { font-size:15px; letter-spacing:.08em; color:#d4e7f0; font-weight:700; }
.choices { display:flex; flex-direction:column; gap:7px; }
.option { border:1px solid #284a57; background:rgba(20,44,55,.73); border-radius:14px; height:62px; width:100%; flex-shrink:0; display:flex; align-items:center; gap:16px; padding:0 15px; text-align:left; }
.option.is-selected { border:2px solid var(--accent); background:rgba(59,111,115,.53); box-shadow:inset 0 0 14px rgba(118,255,223,.09); padding-left:14px; }
.option-symbol { font-size:31px; color:var(--accent); line-height:1; width:34px; text-align:center; }
.option-name { font-size:19px; letter-spacing:.02em; font-weight:830; white-space:nowrap; flex:1; }
.option-meta { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.option-meta strong { color:#e7faff; font-size:16px; }
.option-meta small { color:#a6cad4; font-size:13px; }
.option-selected { font-size:16px; color:var(--accent); width:18px; text-align:center; }
.option.cashout { margin-top:3px; background:rgba(50,42,28,.58); border-color: #736044; }
.option.cashout.is-selected { border-color:#ffdc92; background:rgba(100,75,30,.5); }
.cashout .option-symbol, .cashout .option-selected { color:#ffdc92; }
.cashout-amount { font-size:17px; font-weight:800; color:#ffdc92; }
.play-guide { text-align:center; margin-top:11px; }
.result-view { padding-top:33px; }
.result-symbol { display:grid; place-items:center; border:2px solid #7adbc8; width:90px; height:90px; margin-top:30px; border-radius:50%; color:#8efbe2; font-size:45px; }
.result-loss .result-symbol { color:#ffb5ae; border-color:#e18e91; }
.result-view h1 { font-size:33px; }
.result-card { display:grid; grid-template-columns:1fr auto; text-align:left; gap:21px 28px; align-items:center; width:100%; padding:24px; margin-top:26px; border:1px solid #30515b; background:rgba(22,47,57,.43); border-radius:19px; }
.result-card>span { font-size:12px; font-weight:800; letter-spacing:.1em; color:#a3bfca; }
.result-card>strong { font-size:23px; }
.empty-state { justify-content:flex-start; }
.empty-state .empty-illustration { font-size:115px; margin-top:25px; color:var(--accent); line-height:1; }
.empty-state p { color:#bad4dd; font-size:16px; }
@media (max-width:430px), (max-height:540px) {
  .stage { padding:14px 17px 13px; }
  .stake-view { padding-top:15px; }
  h1 { font-size:24px; }
  .stake-panel { margin-top:19px; padding:14px; }
  .stake-amount { font-size:48px; margin-bottom:8px; }
  .primary-button { height:54px; font-size:17px; }
  .card-area { min-height:124px; }
  .playing-card { width:99px; height:126px; }
  .card-big-suit { font-size:45px; }
  .card-corner { font-size:20px; }
  .card-detail { min-width:55px; font-size:9px; }
  .option { height:49px; }
  .option-name { font-size:15px; }
  .round-stats { padding-top:4px; }
  .guide { margin-top:10px; }
  .result-view { padding-top:12px; }
  .result-symbol { margin-top:13px; height:66px; width:66px; }
  .result-card { margin-top:12px; padding:14px; gap:9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .option, .primary-button, .round-button { transition:border-color .13s ease, background-color .13s ease; }
}