:root {
  color-scheme: dark;
  --bg: #111318;
  --surface: #181b21;
  --surface-2: #20242c;
  --surface-3: #282d36;
  --line: #303640;
  --line-soft: rgba(255,255,255,.07);
  --text: #f4f5f7;
  --muted: #969da8;
  --accent: #d4b36a;
  --accent-strong: #e5c77f;
  --green: #55b987;
  --red: #d66670;
  --blue: #6f9fd4;
  --purple: #9a7bc5;
  --shadow: 0 14px 34px rgba(0,0,0,.28);
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -15%, rgba(212,179,106,.08), transparent 34%),
    var(--bg);
  color: var(--text);
  font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:disabled { opacity: .48; cursor: not-allowed !important; }

.app-shell { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; background: rgba(17,19,24,.95); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(17,19,24,.94);
  backdrop-filter: blur(18px);
}
.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}
.icon-button.is-hidden { display: none; }
.brand-block { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(212,179,106,.55);
  border-radius: 11px;
  background: #202026;
  color: var(--accent-strong);
  font-family: Georgia, serif;
  font-weight: 700;
}
.brand-block strong, .brand-block small { display: block; white-space: nowrap; }
.brand-block strong { font-size: 14px; letter-spacing: .01em; }
.brand-block small { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.balance-pill {
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.coin-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 4px #8f7033; }
.balance-pill small, .balance-pill strong { display: block; text-align: right; }
.balance-pill small { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.balance-pill strong { margin-top: 1px; font-size: 14px; }

.main-content { padding: 16px 14px calc(92px + var(--safe-bottom)); animation: fadeIn .2s ease; }
.bottom-nav {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: 0;
  width: min(100%, 760px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px var(--safe-bottom);
  border-top: 1px solid var(--line-soft);
  background: rgba(20,22,27,.96);
  backdrop-filter: blur(20px);
}
.bottom-nav.is-hidden { display: none; }
.nav-button {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.nav-button span, .nav-button small { display: block; }
.nav-button span { font-size: 20px; line-height: 1; }
.nav-button small { margin-top: 5px; font-size: 10px; }
.nav-button.is-active { color: var(--accent-strong); background: rgba(212,179,106,.08); }

h1, h2, p { margin: 0; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
h2 { font-size: 17px; }
p { color: var(--muted); line-height: 1.55; }

.lobby-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.lobby-summary small, .page-heading small, .game-heading small { color: var(--accent); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.lobby-summary h1 { margin-top: 6px; }
.lobby-summary p { margin-top: 7px; font-size: 12px; }
.daily-button {
  min-width: 76px;
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(212,179,106,.42);
  border-radius: 16px;
  background: #242118;
  cursor: pointer;
}
.daily-button span { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.daily-button strong { margin-top: 4px; color: var(--accent-strong); font-size: 20px; }
.notice-bar, .probability-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #15181e;
}
.notice-dot, .probability-note span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.notice-bar p, .probability-note p { font-size: 11px; }
.section-title, .page-heading, .game-heading, .amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-title { margin: 22px 2px 10px; }
.section-title p { margin-top: 3px; font-size: 11px; }
.text-button { border: 0; background: transparent; color: var(--accent-strong); cursor: pointer; font-size: 12px; }

.game-list { display: grid; gap: 9px; }
.game-card {
  position: relative;
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 104px 1fr 22px;
  align-items: center;
  gap: 13px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.game-card:active { transform: scale(.992); }
.game-card:hover { border-color: #424955; background: #1b1f26; }
.game-meta { min-width: 0; }
.game-meta small, .game-meta strong, .game-meta span { display: block; }
.game-meta small { color: var(--accent); font-size: 9px; letter-spacing: .08em; }
.game-meta strong { margin-top: 5px; font-size: 15px; }
.game-meta span { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-arrow { color: #69717e; font-size: 25px; }
.game-thumb {
  height: 70px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #11151b;
  border: 1px solid rgba(255,255,255,.05);
}
.thumb-cards { position: relative; width: 60px; height: 54px; }
.thumb-cards i { position: absolute; width: 36px; height: 50px; display: grid; place-items: center; border-radius: 6px; background: #f4efe4; color: #22252b; font-style: normal; font-weight: 800; box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.thumb-cards i:first-child { left: 4px; top: 3px; transform: rotate(-8deg); color: #b8434e; }
.thumb-cards i:last-child { right: 4px; top: 0; transform: rotate(7deg); }
.thumb-dice { display: flex; gap: 5px; }
.thumb-dice i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: #e9e6df; color: #262a31; font-style: normal; font-weight: 800; }
.thumb-cups { display: flex; align-items: flex-end; gap: 6px; }
.thumb-cups i { width: 24px; height: 34px; display: block; border: 2px solid #98805a; border-radius: 4px 4px 9px 9px; background: #262d37; }
.thumb-table { width: 82px; height: 48px; display: flex; align-items: center; justify-content: space-around; border-radius: 50%; background: #183b2e; border: 1px solid #406d5b; color: #dfeee7; }
.thumb-table b { width: 28px; height: 36px; display: grid; place-items: center; border-radius: 4px; background: #f5f0e6; color: #21252b; }
.thumb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 84px; padding: 7px; border-radius: 10px; background: #382532; border: 1px solid #6d4e61; }
.thumb-slots i { height: 38px; display: grid; place-items: center; border-radius: 4px; background: #f0ede5; color: #252831; font-style: normal; font-weight: 800; }
.thumb-ticket { width: 83px; height: 48px; padding: 8px; border-radius: 6px; background: #b58c46; color: #17191e; text-align: center; }
.thumb-ticket span, .thumb-ticket i { display: block; font-style: normal; }
.thumb-ticket span { font-size: 7px; letter-spacing: .12em; }
.thumb-ticket i { margin-top: 7px; font-size: 13px; }
.thumb-wheel { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#a5454e 0 20deg,#20242b 20deg 40deg,#a5454e 40deg 60deg,#20242b 60deg 80deg,#327052 80deg 100deg,#20242b 100deg 120deg,#a5454e 120deg 140deg,#20242b 140deg 160deg,#a5454e 160deg 180deg,#20242b 180deg 200deg,#a5454e 200deg 220deg,#20242b 220deg 240deg,#a5454e 240deg 260deg,#20242b 260deg 280deg,#a5454e 280deg 300deg,#20242b 300deg 320deg,#a5454e 320deg 340deg,#20242b 340deg 360deg); border: 4px solid #806d48; }
.thumb-wheel i { width: 18px; height: 18px; display: block; margin: 14px; border-radius: 50%; background: #b49354; }
.thumb-race { width: 88px; display: grid; gap: 7px; }
.thumb-race i { position: relative; display: block; height: 5px; border-radius: 10px; background: #313741; }
.thumb-race i::after { content: ""; position: absolute; top: -4px; width: 20px; height: 9px; border-radius: 4px; background: #8295ae; }
.thumb-race i:nth-child(1)::after { left: 40px; }
.thumb-race i:nth-child(2)::after { left: 18px; background: #b88187; }
.thumb-race i:nth-child(3)::after { left: 56px; background: #8ea879; }

.lobby-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.lobby-footer-grid div { padding: 13px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.lobby-footer-grid small, .lobby-footer-grid strong { display: block; }
.lobby-footer-grid small { color: var(--muted); font-size: 9px; }
.lobby-footer-grid strong { margin-top: 5px; font-size: 15px; }

.page-heading { margin-bottom: 14px; }
.page-heading h1 { margin-top: 4px; }
.page-heading > span, .mode-chip {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
}
.phase-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.phase-tab {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.phase-tab.is-active { border-color: rgba(212,179,106,.55); background: #282317; color: var(--accent-strong); }

.game-heading { align-items: flex-start; margin-bottom: 10px; }
.game-heading h1 { margin-top: 3px; }
.game-heading p { margin-top: 5px; font-size: 12px; }
.mode-chip { flex: 0 0 auto; border-color: rgba(212,179,106,.34); color: var(--accent-strong); background: #242117; }
.probability-note { margin: 0 0 10px; }
.game-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.primary-button, .secondary-button, .choice-button, .chip-button, .racer-pick, .number-button {
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.primary-button:active, .secondary-button:active, .choice-button:active, .chip-button:active, .racer-pick:active, .number-button:active { transform: scale(.985); }
.primary-button {
  min-height: 48px;
  border-color: #c7a45d;
  border-radius: 13px;
  background: #d4b36a;
  color: #17191e;
  font-weight: 800;
}
.secondary-button { min-height: 44px; border-radius: 12px; background: var(--surface-2); }
.full-button { width: 100%; margin-top: 14px; }
.game-action { width: 100%; margin-top: 12px; }
.choice-grid { display: grid; gap: 8px; }
.choice-grid.three { grid-template-columns: repeat(3, 1fr); }
.choice-button {
  min-height: 58px;
  padding: 9px 7px;
  border-radius: 12px;
  background: var(--surface-2);
  text-align: center;
}
.choice-button strong, .choice-button small { display: block; }
.choice-button strong { font-size: 13px; }
.choice-button small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.choice-button.is-selected { border-color: rgba(212,179,106,.72); background: #29251c; }
.choice-positive.is-selected, .choice-positive:hover { border-color: rgba(85,185,135,.72); background: #17271f; }
.choice-negative.is-selected, .choice-negative:hover { border-color: rgba(214,102,112,.72); background: #2a191c; }
.bet-control { margin-top: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: #14171c; }
.amount-row small { color: var(--muted); font-size: 10px; }
.amount-row strong { font-size: 15px; }
.bet-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.chip-button { min-height: 36px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.chip-button.is-active { border-color: rgba(212,179,106,.68); background: #2b261c; color: var(--accent-strong); }
.result-line {
  min-height: 44px;
  display: grid;
  place-items: center;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #14171c;
  color: #d9dce1;
  font-size: 12px;
  text-align: center;
}

/* Cards and High-Low */
.card-table-panel { background: linear-gradient(180deg, #1a1e24, #171a20); }
.highlow-stage { display: grid; place-items: center; min-height: 250px; border-radius: 16px; background: #13342a; border: 1px solid #285847; }
.card-caption { width: 100%; display: flex; justify-content: space-between; padding: 12px 14px 0; color: #aac5ba; font-size: 9px; letter-spacing: .1em; }
.card-caption b { color: #fff; font-size: 12px; }
.highlow-card { min-height: 214px; display: grid; place-items: center; transition: opacity .2s ease, transform .2s ease; }
.highlow-card.is-dealing { opacity: 0; transform: translateY(-10px) rotate(-2deg); }
.playing-card {
  position: relative;
  width: 138px;
  height: 194px;
  padding: 12px;
  border-radius: 11px;
  background: #f4f1e9;
  color: #22252b;
  box-shadow: 0 13px 25px rgba(0,0,0,.3);
}
.playing-card.red { color: #b63f49; }
.playing-card strong { display: flex; flex-direction: column; align-items: flex-start; font-size: 23px; line-height: 1; }
.playing-card strong span { margin-top: 2px; font-size: 18px; }
.playing-card > i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 58px; font-style: normal; }
.playing-card .bottom-rank { position: absolute; right: 12px; bottom: 12px; transform: rotate(180deg); }
.playing-card.compact { width: 56px; height: 82px; padding: 7px; border-radius: 7px; }
.playing-card.compact strong { font-size: 13px; }
.playing-card.compact strong span { font-size: 10px; }
.playing-card.compact > i { font-size: 24px; }
.playing-card.compact .bottom-rank { right: 7px; bottom: 7px; }
.high-low-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.history-block { margin-top: 12px; }
.history-block > small { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.history-cards { display: flex; gap: 6px; overflow-x: auto; padding: 8px 1px 1px; scrollbar-width: none; }
.history-cards::-webkit-scrollbar { display: none; }
.history-mini { min-width: 43px; height: 57px; display: grid; place-items: center; border-radius: 7px; background: #f4f1e9; color: #25282f; font-size: 12px; font-weight: 800; }
.history-mini.red { color: #b63f49; }
.history-mini span { margin-left: 2px; }

/* Dice */
.dice-panel { background: linear-gradient(180deg, #1b1d24, #17191f); }
.dice-stage { min-height: 245px; display: grid; place-items: center; align-content: center; border-radius: 16px; background: #222630; border: 1px solid #363c47; }
.dice-cup { position: relative; width: 98px; height: 86px; margin-bottom: -14px; transform: rotate(-7deg); border: 2px solid #8f7852; border-radius: 17px 17px 36px 36px; background: linear-gradient(90deg, #171b22, #39404a 50%, #15191f); box-shadow: 0 18px 24px rgba(0,0,0,.34); }
.dice-cup span { position: absolute; inset: 0; display: grid; place-items: center; }
.dice-cup span::after { content: "N"; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #99825d; border-radius: 50%; color: #bca575; font-family: Georgia, serif; }
.dice-cup.shake { animation: shake .65s ease; }
.dice-row { position: relative; z-index: 2; display: flex; justify-content: center; gap: 9px; }
.die { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 12px; background: #f0ede6; color: #252931; font-size: 23px; font-weight: 800; box-shadow: 0 10px 17px rgba(0,0,0,.25); }
.dice-total { margin-top: 12px; text-align: center; }
.dice-total small, .dice-total strong { display: block; }
.dice-total small { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.dice-total strong { margin-top: 2px; font-size: 34px; color: var(--accent-strong); }

/* Shell game */
.shell-panel { overflow: hidden; }
.shell-instruction { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.shell-instruction span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #29251b; color: var(--accent-strong); font-weight: 800; }
.shell-instruction p { font-size: 12px; }
.cup-board {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 5px;
  padding: 18px 4px 8px;
  border-radius: 16px;
  background: #20242b;
  border: 1px solid #343a44;
  overflow: hidden;
}
.cup-slot { position: relative; height: 145px; transition: transform .35s ease; }
.shell-ball {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 1;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) scale(.7);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff5c2, #d2a44e 52%, #765a27);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.shell-ball.is-visible { opacity: 1; transform: translateX(-50%) scale(1); }
.shell-cup {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: min(62px, 92%);
  height: 94px;
  transform: translateX(-50%);
  border: 2px solid #8d7651;
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(90deg, #151a22, #343b46 50%, #141820);
  box-shadow: 0 13px 17px rgba(0,0,0,.3);
  cursor: pointer;
  transition: bottom .35s ease, border-color .2s ease;
}
.shell-cup::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -4px; height: 12px; border-radius: 50%; background: #8e7650; }
.shell-cup span { position: absolute; inset: 0; display: grid; place-items: center; color: #b9a171; font-size: 11px; }
.cup-slot.is-lifted .shell-cup { bottom: 58px; }
.shell-cup.is-picked { border-color: var(--accent-strong); }
.cup-board.is-shuffling .cup-slot:nth-child(1) { animation: cupShift1 1.45s ease; }
.cup-board.is-shuffling .cup-slot:nth-child(2) { animation: cupShift2 1.45s ease; }
.cup-board.is-shuffling .cup-slot:nth-child(3) { animation: cupShift3 1.45s ease; }
.cup-board.is-shuffling .cup-slot:nth-child(4) { animation: cupShift4 1.45s ease; }
.cup-board.is-shuffling .cup-slot:nth-child(5) { animation: cupShift5 1.45s ease; }

/* Baccarat */
.baccarat-table { padding: 13px; border-radius: 16px; background: #15372c; border: 1px solid #2e6552; }
.hands { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hand-block { min-width: 0; }
.hand-title { display: flex; justify-content: space-between; margin-bottom: 9px; color: #c1d7ce; font-size: 10px; letter-spacing: .08em; }
.hand-title b { width: 24px; height: 24px; display: grid; place-items: center; margin-top: -5px; border-radius: 50%; background: #e7e4dc; color: #1f242b; }
.cards-row { min-height: 84px; display: flex; justify-content: center; gap: 5px; }
.card-back { width: 56px; height: 82px; border: 3px solid #d8d3c7; border-radius: 7px; background: repeating-linear-gradient(45deg,#2c3541 0 5px,#3e4957 5px 10px); box-shadow: 0 7px 13px rgba(0,0,0,.25); }
.card-back.is-dealing { animation: deal .5s ease infinite alternate; }
.roadmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 14px; padding: 7px; border-radius: 8px; background: #f0eee8; }
.road-dot { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #d3d0c7; border-radius: 50%; color: transparent; font-size: 7px; font-weight: 800; }
.road-dot.P { border-color: #4c83bc; color: #4c83bc; }
.road-dot.B { border-color: #c55761; color: #c55761; }
.road-dot.T { border-color: #4a986a; color: #4a986a; }
.baccarat-choices { margin-top: 10px; }
.choice-button.player.is-selected { border-color: rgba(111,159,212,.75); background: #172330; }
.choice-button.banker.is-selected { border-color: rgba(214,102,112,.75); background: #2b1b1e; }
.choice-button.tie.is-selected { border-color: rgba(85,185,135,.75); background: #17271f; }

/* Slots */
.slot-machine { padding: 12px; border: 1px solid #59495a; border-radius: 18px; background: #2b202a; }
.slot-top { text-align: center; }
.slot-top small, .slot-top strong, .slot-top span { display: block; }
.slot-top small { color: #a9959e; font-size: 8px; letter-spacing: .12em; }
.slot-top strong { margin-top: 2px; color: #e9d5bb; font-family: Georgia, serif; font-size: 21px; letter-spacing: .08em; }
.slot-top span { margin-top: 4px; color: #a9959e; font-size: 9px; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.reel { height: 116px; display: grid; place-items: center; overflow: hidden; border: 1px solid #b8b0a2; border-radius: 9px; background: linear-gradient(180deg, #dedad0, #f5f1e8 50%, #d6d1c6); color: #20242b; box-shadow: inset 0 10px 18px rgba(255,255,255,.5), inset 0 -10px 18px rgba(0,0,0,.1); }
.reel.spinning .slot-symbol { animation: slotRoll .17s linear infinite; filter: blur(1px); }
.slot-symbol { display: grid; place-items: center; min-width: 52px; min-height: 52px; font-size: 39px; font-weight: 900; font-style: normal; }
.slot-symbol--cherry { color: #b4444f; font-size: 27px; letter-spacing: -7px; }
.slot-symbol--lemon { color: #c7a344; }
.slot-symbol--bell { color: #9c782b; }
.slot-symbol--diamond { color: #487f9d; }
.slot-symbol--seven { color: #b13e49; font-family: Georgia, serif; }
.slot-symbol--star { color: #997f34; }
.slot-payline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 9px; color: #b9a8b2; font-size: 8px; letter-spacing: .13em; }
.slot-payline span { height: 1px; background: #6a5764; }
.spin-button { letter-spacing: .12em; }

/* Scratch */
.scratch-ticket { position: relative; width: min(100%, 430px); aspect-ratio: 1.5; margin: 0 auto; overflow: hidden; border: 1px solid #9f7e45; border-radius: 15px; background: #24252a; }
.scratch-ticket::before, .scratch-ticket::after { content: ""; position: absolute; top: 50%; z-index: 3; width: 18px; height: 18px; transform: translateY(-50%); border-radius: 50%; background: var(--surface); }
.scratch-ticket::before { left: -9px; }
.scratch-ticket::after { right: -9px; }
.scratch-ticket-head { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 12px 16px; color: #ddc48c; }
.scratch-ticket-head small { font-size: 8px; letter-spacing: .12em; }
.scratch-ticket-head strong { font-size: 11px; letter-spacing: .08em; }
.scratch-underlay { position: absolute; inset: 42px 14px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scratch-symbol { display: grid; place-items: center; border: 1px solid #484b53; border-radius: 8px; background: #ece8dd; color: #24272d; font-size: 29px; font-weight: 800; }
#scratchCanvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.scratch-progress { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #101217; }
.scratch-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s ease; }

/* Roulette */
.roulette-stage { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto 12px; display: grid; place-items: center; }
.roulette-rotor { width: 92%; height: 92%; transition: transform 3.15s cubic-bezier(.12,.72,.14,1); filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.roulette-rotor svg { width: 100%; height: 100%; display: block; }
.wheel-segment { stroke: #d2c6ac; stroke-width: .55; }
.wheel-segment.red { fill: #9f3f49; }
.wheel-segment.black { fill: #22262d; }
.wheel-segment.green { fill: #397656; }
.wheel-number { fill: #f4efe4; font-size: 8px; text-anchor: middle; dominant-baseline: middle; font-weight: 700; }
.wheel-inner { fill: #6e5a33; stroke: #cab175; stroke-width: 4; }
.wheel-hub { fill: #20242b; stroke: #a78b53; stroke-width: 3; }
.wheel-center { position: absolute; z-index: 2; left: 50%; top: 50%; width: 72px; height: 72px; display: grid; place-items: center; align-content: center; transform: translate(-50%,-50%); border: 2px solid #a78b53; border-radius: 50%; background: #20242b; pointer-events: none; }
.wheel-center small, .wheel-center strong { display: block; text-align: center; }
.wheel-center small { color: #9f9b91; font-size: 7px; letter-spacing: .1em; }
.wheel-center strong { margin-top: 2px; color: #f3e2b8; font-size: 22px; }
.roulette-pointer { position: absolute; z-index: 4; top: 0; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid var(--accent-strong); }
.roulette-ball { position: absolute; z-index: 3; top: 18px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: #f4f3ef; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.roulette-ball.is-spinning { animation: ballPulse .42s ease infinite alternate; }
.roulette-red { background: #2a1b1e; }
.roulette-black { background: #1d2026; }
.number-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 9px; }
.number-button { min-height: 32px; border-radius: 7px; background: #252930; font-size: 10px; }
.number-button.red { background: #6f3037; }
.number-button.black { background: #252930; }
.number-button.green { background: #2f664a; }
.number-button.is-selected { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

/* Race */
.race-track { position: relative; overflow: hidden; border: 1px solid #39414b; border-radius: 15px; background: #20252d; }
.race-lane { position: relative; height: 49px; border-bottom: 1px dashed #3b424d; }
.race-lane:last-child { border-bottom: 0; }
.lane-number { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: #7e8794; font-size: 9px; }
.racer-car { position: absolute; left: 25px; top: 15px; width: 34px; height: 17px; border-radius: 5px 8px 4px 4px; transition: transform 2.7s cubic-bezier(.16,.72,.17,1); }
.racer-car::before, .racer-car::after { content: ""; position: absolute; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #0f1115; border: 2px solid #78818d; }
.racer-car::before { left: 4px; }
.racer-car::after { right: 4px; }
.racer-car i { position: absolute; right: 5px; top: -5px; width: 14px; height: 7px; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.3); }
.racer-1 { background: #708cad; }
.racer-2 { background: #b06e76; }
.racer-3 { background: #8c9865; }
.racer-4 { background: #927bb1; }
.racer-5 { background: #b58958; }
.finish-line { position: absolute; right: 20px; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(180deg,#e9e9e9 0 7px,#20242b 7px 14px); }
.race-picks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.racer-pick { min-height: 54px; padding: 6px 3px; border-radius: 10px; background: var(--surface-2); }
.racer-pick b, .racer-pick span { display: block; }
.racer-pick b { font-size: 14px; }
.racer-pick span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.racer-pick.is-selected { border-color: rgba(212,179,106,.72); background: #29251c; }

/* Records and profile */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.stat-card small, .stat-card strong { display: block; }
.stat-card small { color: var(--muted); font-size: 10px; }
.stat-card strong { margin-top: 6px; font-size: 22px; }
.record-list { display: grid; gap: 7px; }
.record-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.record-item strong, .record-item small { display: block; }
.record-item small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.record-item b { color: #c7ccd3; }
.record-item.is-win b { color: #79c79c; }
.empty-state { padding: 30px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: 12px; }
.profile-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: center; }
.avatar { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto; border: 1px solid rgba(212,179,106,.55); border-radius: 50%; background: #242118; color: var(--accent-strong); font-size: 24px; }
.profile-card h2 { margin-top: 12px; }
.profile-card > p { margin-top: 5px; font-size: 11px; }
.profile-balance { margin-top: 16px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 13px; background: #14171c; }
.profile-balance small, .profile-balance strong { display: block; }
.profile-balance small { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.profile-balance strong { margin-top: 5px; font-size: 24px; }
.rules-box { margin-top: 12px; padding: 13px; border: 1px solid #3a3f48; border-radius: 13px; background: #191c22; text-align: left; }
.rules-box strong { font-size: 12px; }
.rules-box p { margin-top: 5px; font-size: 10px; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(84px + var(--safe-bottom)); max-width: calc(100vw - 28px); padding: 10px 14px; overflow: hidden; transform: translate(-50%, 16px); border: 1px solid var(--line); border-radius: 999px; background: #23272e; color: var(--text); box-shadow: var(--shadow); opacity: 0; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast[data-type="error"] { border-color: rgba(214,102,112,.55); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%,100% { transform: rotate(-7deg); } 25% { transform: translateX(-11px) rotate(-13deg); } 50% { transform: translateX(10px) rotate(1deg); } 75% { transform: translateX(-6px) rotate(-10deg); } }
@keyframes deal { from { transform: translateY(-6px); opacity: .72; } to { transform: translateY(4px); opacity: 1; } }
@keyframes slotRoll { from { transform: translateY(-21px); } to { transform: translateY(21px); } }
@keyframes ballPulse { from { transform: translateX(-50%) scale(.85); opacity: .6; } to { transform: translateX(-50%) scale(1.15); opacity: 1; } }
@keyframes cupShift1 { 0%,100% { transform: none; } 35% { transform: translateX(180%); } 70% { transform: translateX(360%); } }
@keyframes cupShift2 { 0%,100% { transform: none; } 35% { transform: translateX(-90%); } 70% { transform: translateX(180%); } }
@keyframes cupShift3 { 0%,100% { transform: none; } 35% { transform: translateX(90%); } 70% { transform: translateX(-180%); } }
@keyframes cupShift4 { 0%,100% { transform: none; } 35% { transform: translateX(-180%); } 70% { transform: translateX(90%); } }
@keyframes cupShift5 { 0%,100% { transform: none; } 35% { transform: translateX(-360%); } 70% { transform: translateX(-90%); } }

@media (max-width: 520px) {
  .main-content { padding-left: 11px; padding-right: 11px; }
  .topbar { padding-left: 11px; padding-right: 11px; }
  .brand-block small { display: none; }
  .balance-pill { min-width: 97px; padding: 7px 8px; }
  .lobby-summary { padding: 16px; }
  .lobby-summary h1 { font-size: 21px; }
  .game-card { grid-template-columns: 92px 1fr 18px; }
  .game-thumb { height: 66px; }
  .choice-grid.three { gap: 6px; }
  .choice-button { min-height: 57px; padding: 7px 4px; }
  .choice-button strong { font-size: 11px; }
  .number-grid { grid-template-columns: repeat(7, 1fr); }
  .cup-board { gap: 2px; padding-left: 1px; padding-right: 1px; }
  .shell-cup { width: min(57px, 95%); height: 87px; }
  .playing-card { width: 126px; height: 178px; }
  .playing-card.compact { width: 49px; height: 73px; }
  .cards-row { gap: 3px; }
  .roadmap { grid-template-columns: repeat(8, 1fr); }
  .reel { height: 102px; }
  .slot-symbol { font-size: 34px; }
  .race-pick span { font-size: 7px; }
}

@media (max-width: 360px) {
  .brand-block strong { font-size: 12px; }
  .balance-pill { min-width: 88px; }
  .game-card { grid-template-columns: 82px 1fr 16px; }
  .lobby-footer-grid { grid-template-columns: 1fr; }
  .choice-grid.three { grid-template-columns: repeat(2, 1fr); }
  .cup-slot { height: 132px; }
  .shell-cup { height: 80px; }
  .race-picks { grid-template-columns: repeat(5, minmax(0,1fr)); }
}