:root {
  color-scheme: dark;
  --bg: #101019;
  --panel: #191923;
  --panel-light: #20202c;
  --border: rgba(255,255,255,.075);
  --text: #f4f3f8;
  --muted: #92919f;
  --purple: #9b77ff;
  --pink: #f06acb;
  --green: #66e2b1;
  --gold: #f5c96a;
  --red: #ff7186;
  font-family: "DM Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 78% -20%, rgba(118,76,191,.12), transparent 45%), var(--bg); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.sidebar { width: 246px; position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; flex-direction: column; padding: 27px 16px 18px; background: #14141d; border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px; text-decoration: none; color: var(--text); }
.brand-mark { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; position: relative; font: 700 20px "Space Grotesk",sans-serif; color: white; background: linear-gradient(145deg,#aa7cff,#7650ea); box-shadow: 0 4px 20px #865bea55; }
.brand-mark > span { position: absolute; color: #ffb8e9; font-size: 10px; top: 3px; right: 5px; }
.brand-copy { font: 700 15px "Space Grotesk",sans-serif; letter-spacing: 1.5px; line-height: 1.05; }
.brand-copy > span { display: block; font-size: 10px; letter-spacing: 3px; color: #aaa5b8; margin-top: 4px; }
.side-label { margin: 48px 12px 13px; color: #73717f; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 13px; border: 0; border-radius: 10px; padding: 12px 13px; color: #a7a5b2; background: transparent; text-align: left; cursor: pointer; font-size: 13px; font-weight: 600; transition: .2s; }
.nav-item:hover { background: #ffffff09; color: white; }
.nav-item.active { color: white; background: linear-gradient(90deg,#8e69eb26,#8e69eb08); box-shadow: inset 2px 0 #a57eff; }
.nav-icon { width: 18px; text-align: center; color: #aaa5b8; font-size: 19px; }
.nav-item.active .nav-icon { color: #bd9eff; }
.nav-new { margin-left: auto; color: #70e3bc; font-size: 8px; letter-spacing: .7px; padding: 3px 5px; border: 1px solid #70e3bc40; border-radius: 5px; }
.sidebar-spacer { flex: 1; min-height: 20px; }
.sidebar-event { padding: 17px 15px 14px; position: relative; border: 1px solid #9e7aff26; border-radius: 13px; background: linear-gradient(145deg,#8a65e819,#3a2b5330); overflow: hidden; }
.event-orb { position: absolute; right: 12px; top: 11px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #a177ff23; color: #c8aaff; }
.side-event-label { font-size: 9px; letter-spacing: 1.2px; font-weight: 800; color: #a894cf; }
.sidebar-event strong { display: block; margin-top: 10px; font-size: 13px; }
.sidebar-event > span { display: block; margin-top: 4px; color: #a5a1b1; font-size: 10px; }
.event-progress { height: 3px; margin-top: 13px; border-radius: 9px; background: #ffffff18; overflow: hidden; }
.event-progress i { width: 100%; height: 100%; display: block; background: linear-gradient(90deg,#b28dff,#f27ed5); transition: width 1s linear; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; color: #81808c; font-size: 10px; padding: 18px 7px 0; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px #66e2b1; }
.main-area { margin-left: 246px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 78px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--border); background: #101019cc; }
.breadcrumb { color: #777583; font-size: 12px; }
.breadcrumb strong { color: #f3f1f8; font-weight: 600; }
.crumb-slash { padding: 0 10px; color: #484652; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.balance-pill { min-width: 166px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 11px; background: #1a1a25; }
.coin-icon { font-size: 22px; color: var(--gold); text-shadow: 0 0 12px #f5c96a55; }
.balance-pill small { display: block; color: #777583; font-size: 8px; letter-spacing: 1.1px; font-weight: 800; }
.balance-pill strong { display: block; margin-top: 2px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: #f5f3fa; font: 700 14px "Space Grotesk",sans-serif; }
.credit-unit { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .7px; color: #a6a1b4; }
.avatar-button { width: 37px; height: 37px; border: 1px solid #ffffff16; border-radius: 11px; position: relative; background: linear-gradient(140deg,#403459,#272238); color: #e2ccff; font-weight: 800; cursor: pointer; }
.avatar-button i { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 50%; background: #343140; font-size: 9px; font-style: normal; color: white; }
.page-content { width: min(1240px,100%); margin: 0 auto; padding: 34px 42px 56px; flex: 1; }
.page-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding: 16px 42px; color: #666572; font-size: 10px; }
.page-footer span:first-child { letter-spacing: 1.5px; font-weight: 800; }
.hero { min-height: 240px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 36px 42px; border: 1px solid #a482ff24; border-radius: 18px; background: radial-gradient(ellipse at 76% 45%,#995dcb31,transparent 40%), linear-gradient(110deg,#211b31,#211a2b 55%,#251a35); }
.hero::before,.hero::after { content: ""; position: absolute; border: 1px solid #c6a9ff16; border-radius: 50%; width: 270px; height: 270px; right: 70px; top: -20px; box-shadow: 0 0 0 22px #c6a9ff08,0 0 0 45px #c6a9ff05; }
.hero::after { width: 175px; height: 175px; right: 117px; top: 27px; background: radial-gradient(circle,#bb86ff17,transparent 68%); }
.hero-content { position: relative; z-index: 1; max-width: 530px; }
.eyebrow { color: #c19dff; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.hero h1 { margin: 12px 0 9px; font: 700 clamp(28px,4vw,40px)/1.1 "Space Grotesk",sans-serif; letter-spacing: -1.7px; }
.gradient-text { color: #c2a3ff; background: linear-gradient(90deg,#c3a6ff,#f197d8); background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { margin: 0; max-width: 425px; color: #b1adbb; font-size: 13px; line-height: 1.7; }
.hero-actions { display: flex; gap: 10px; margin-top: 22px; }
.primary-button,.secondary-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 0; border-radius: 9px; background: linear-gradient(100deg,#a17aff,#845fea); color: white; font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: 0 5px 18px #8e69eb36; transition: .18s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px #8e69eb50; }
.secondary-button { color: #d4c0ff; background: #a17aff18; border: 1px solid #a17aff39; box-shadow: none; }
.secondary-button:hover { background: #a17aff28; }
.full-width { width: 100%; margin-top: 9px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 31px 0 15px; }
.section-heading h2 { margin: 0; font: 700 19px "Space Grotesk",sans-serif; letter-spacing: -.4px; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.text-link { color: #c2a3ff; font-size: 11px; font-weight: 700; border: 0; background: none; cursor: pointer; }
.game-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.game-card { min-height: 174px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,#1b1b26,#181820); text-align: left; cursor: pointer; transition: .2s; }
.game-card:hover { border-color: #a17aff68; transform: translateY(-3px); background: linear-gradient(145deg,#23202f,#1a1924); }
.game-card::after { content: ""; width: 100px; height: 100px; position: absolute; top: -25px; right: -22px; border-radius: 50%; filter: blur(2px); opacity: .14; background: var(--glow,#a17aff); }
.game-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; background: color-mix(in srgb,var(--glow,#a17aff) 18%,transparent); color: var(--glow,#a17aff); }
.game-card h3 { margin: 17px 0 5px; font: 700 14px "Space Grotesk",sans-serif; }
.game-card p { margin: 0; color: #8d8b99; font-size: 10px; line-height: 1.5; }
.game-card .card-arrow { position: absolute; right: 15px; bottom: 15px; color: #868292; font-size: 15px; }
.dashboard-bottom { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; margin-top: 23px; }
.panel { border: 1px solid var(--border); border-radius: 13px; background: #191922; }
.event-panel { display: flex; align-items: center; gap: 17px; padding: 18px; background: radial-gradient(ellipse at right,#8959be19,transparent 55%),#191922; }
.event-panel-icon { width: 47px; height: 47px; flex: none; display: grid; place-items: center; border-radius: 13px; background: #a17aff1d; color: #d4a5ff; font-size: 22px; }
.event-panel h3 { margin: 0 0 5px; font: 700 13px "Space Grotesk",sans-serif; }
.event-panel p { margin: 0; color: #a09dab; font-size: 10px; line-height: 1.5; }
.event-tag { margin-left: auto; align-self: flex-start; border-radius: 5px; padding: 5px 7px; background: #a17aff18; color: #c19dff; font-size: 8px; font-weight: 800; white-space: nowrap; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.mini-stat small { display: block; color: #83818f; font-size: 9px; letter-spacing: .5px; }
.mini-stat strong { display: block; margin-top: 6px; font: 700 18px "Space Grotesk",sans-serif; }
.recent-list { margin-top: 13px; overflow: hidden; }
.recent-header,.history-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 10px; align-items: center; padding: 12px 15px; }
.recent-header { color: #81808d; border-bottom: 1px solid var(--border); font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.history-row { font-size: 11px; border-bottom: 1px solid #ffffff08; }
.history-row:last-child { border-bottom: 0; }
.history-game { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.history-time { color: #868491; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.neutral { color: #a8a5b3; }
.empty-state { padding: 25px 15px; color: #858390; font-size: 11px; text-align: center; }
.game-page-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 22px; }
.game-page-head h1 { margin: 8px 0 5px; font: 700 29px "Space Grotesk",sans-serif; letter-spacing: -.8px; }
.game-page-head p { margin: 0; color: #9996a4; font-size: 12px; }
.game-badge { padding: 8px 10px; border: 1px solid #70e3bc36; border-radius: 7px; color: #77e2bc; background: #70e3bc0d; font-size: 9px; letter-spacing: .8px; font-weight: 800; }
.game-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(230px,.7fr); gap: 15px; align-items: start; }
.game-stage { padding: 25px; min-height: 390px; overflow: hidden; position: relative; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(ellipse at 50% 20%,#9764d81a,transparent 58%),#191922; }
.game-stage::after { content:""; position:absolute; width:250px; height:250px; border:1px solid #b393ff0b; border-radius:50%; right:-120px; bottom:-150px; box-shadow:0 0 0 25px #b393ff05,0 0 0 50px #b393ff04; pointer-events:none; }
.stage-label { color: #858290; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-align: center; }
.bet-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 20px 0; }
.bet-row label { color: #aaa7b4; font-size: 10px; font-weight: 600; }
.bet-input-wrap { display: flex; align-items: center; width: 155px; gap: 7px; border: 1px solid #ffffff15; background: #111119; border-radius: 8px; padding: 0 10px; }
.bet-input-wrap span { color: var(--gold); }
.bet-input { width: 100%; height: 37px; border: 0; outline: 0; background: transparent; color: white; font-weight: 700; font-size: 12px; }
.quick-bets { display: flex; gap: 5px; }
.quick-bet { padding: 7px 8px; border: 1px solid #ffffff13; border-radius: 6px; background: #ffffff08; color: #aaa7b4; font-size: 9px; font-weight: 700; cursor: pointer; }
.quick-bet:hover { color: white; border-color: #ac8aff70; }
.result-box { min-height: 57px; display: grid; place-items: center; margin: 17px auto 14px; color: #aaa7b4; font-size: 12px; text-align: center; }
.result-box strong { display: block; margin-top: 3px; font: 700 16px "Space Grotesk",sans-serif; color: var(--text); }
.game-button { min-width: 185px; display: flex; margin: 0 auto; }
.game-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.rules-panel { padding: 18px; }
.rules-panel h3 { margin: 0 0 14px; font: 700 13px "Space Grotesk",sans-serif; }
.rule-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid #ffffff0b; color: #a09daa; font-size: 10px; }
.rule-row:last-child { border: 0; }
.rule-row strong { color: #d3d1dc; text-align: right; }
.event-hint { padding: 11px; margin-top: 14px; border-radius: 8px; background: #a17aff11; color: #bda4ec; font-size: 10px; line-height: 1.5; }
.roulette-wheel { width: 176px; height: 176px; position: relative; display: grid; place-items: center; margin: 17px auto 0; border: 6px solid #d4b374; border-radius: 50%; background: conic-gradient(#a93144 0 10%,#192620 10% 20%,#a93144 20% 30%,#192620 30% 40%,#a93144 40% 50%,#192620 50% 60%,#a93144 60% 70%,#192620 70% 80%,#a93144 80% 90%,#138358 90%); box-shadow: 0 0 0 7px #28212a,0 0 28px #d4b37421; transition: transform 1s cubic-bezier(.12,.62,.12,1); }
.wheel-center { width: 53px; height: 53px; display: grid; place-items: center; border: 3px solid #d4b374; border-radius: 50%; background: #26212a; color: #fff; font: 700 20px "Space Grotesk",sans-serif; }
.roulette-bets { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
.roulette-choice { min-width: 92px; padding: 10px 12px; border: 1px solid #ffffff16; border-radius: 8px; background: #ffffff08; cursor: pointer; font-weight: 700; font-size: 11px; transition: .15s; }
.roulette-choice:hover,.roulette-choice.selected { border-color: #d9c1ff; box-shadow: 0 0 0 2px #b48aff20; }
.roulette-choice.red { background: #da506b24; color: #ff94a5; }
.roulette-choice.black { background: #55536532; color: #d0ced8; }
.roulette-choice.green { background: #51d19c20; color: #81e5bb; }
.reels { min-height: 126px; display: flex; justify-content: center; align-items: center; gap: 9px; margin: 20px auto 8px; }
.reel { width: 82px; height: 94px; display: grid; place-items: center; border: 1px solid #ffffff18; border-radius: 12px; background: linear-gradient(180deg,#24232e,#111119); font-size: 42px; box-shadow: inset 0 0 18px #0006,0 8px 19px #0002; }
.reel.spinning { animation: reelShake .12s linear infinite alternate; }
@keyframes reelShake { to { transform: translateY(3px); filter: blur(1px); } }
.slot-lever { color: #f2bf74; }
.case-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 24px auto 17px; max-width: 510px; }
.case-option { min-height: 110px; padding: 13px 8px; border: 1px solid #ffffff13; border-radius: 10px; background: #ffffff07; cursor: pointer; transition: .15s; }
.case-option:hover,.case-option.selected { border-color: #b18bff; background: #a17aff16; }
.case-box { display: block; font-size: 28px; margin-bottom: 8px; }
.case-option strong { display: block; font-size: 10px; }
.case-option small { display: block; margin-top: 4px; color: #9996a4; font-size: 9px; }
.case-reveal { width: min(420px,100%); margin: 0 auto; padding: 15px; border: 1px solid #ffffff12; border-radius: 10px; background: #111119; text-align: center; }
.case-reveal .loot { font-size: 34px; }
.case-reveal strong { display: block; margin: 6px 0 2px; font: 700 13px "Space Grotesk",sans-serif; }
.case-reveal small { color: #9996a4; font-size: 10px; }
.clicker-stage { text-align: center; }
.clicker-total { margin: 17px 0 3px; font: 700 28px "Space Grotesk",sans-serif; color: #f2edff; }
.clicker-subtitle { color: #918e9d; font-size: 10px; }
.clicker-button { width: 152px; height: 152px; display: grid; place-items: center; margin: 20px auto 12px; border: 1px solid #d2b5ff80; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#d0afff,#8d61eb 48%,#603cc3); box-shadow: 0 0 0 9px #a17aff14,0 0 45px #9e72ff4c,inset 0 -8px 15px #321a7080; color: white; font-size: 49px; cursor: pointer; transition: transform .09s,box-shadow .2s; }
.clicker-button:hover { box-shadow: 0 0 0 12px #a17aff1c,0 0 55px #9e72ff77,inset 0 -8px 15px #321a7080; }
.clicker-button:active { transform: scale(.94); }
.clicker-upgrade { max-width: 400px; display: flex; align-items: center; gap: 12px; padding: 13px; margin: 20px auto 0; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff06; text-align: left; }
.upgrade-icon { width: 37px; height: 37px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #f5c96a19; color: var(--gold); font-size: 19px; }
.upgrade-info { flex: 1; }
.upgrade-info strong { display: block; font-size: 11px; }
.upgrade-info small { display: block; margin-top: 3px; color: #9996a4; font-size: 9px; }
.upgrade-button { padding: 8px 10px; border: 1px solid #f5c96a3b; border-radius: 7px; background: #f5c96a10; color: #f5d486; font-size: 9px; font-weight: 800; cursor: pointer; }
.upgrade-button:disabled { opacity: .4; cursor: not-allowed; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: #08080dbb; backdrop-filter: blur(7px); }
.modal-backdrop[hidden] { display: none; }
.settings-modal { width: min(430px,100%); position: relative; padding: 30px; border: 1px solid #ffffff18; border-radius: 16px; background: #1a1923; box-shadow: 0 25px 90px #0008; }
.modal-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: 0; border-radius: 8px; color: #aaa7b4; background: #ffffff0a; cursor: pointer; font-size: 21px; }
.settings-modal h2 { margin: 8px 0 6px; font: 700 25px "Space Grotesk",sans-serif; }
.modal-intro { margin: 0 0 22px; color: #9996a4; font-size: 11px; line-height: 1.6; }
.settings-modal label { display: block; margin: 15px 0 7px; color: #d3d0dc; font-size: 10px; font-weight: 700; }
.settings-modal input { width: 100%; height: 41px; outline: 0; border: 1px solid #ffffff16; border-radius: 8px; background: #111119; color: white; padding: 0 12px; font-size: 12px; }
.settings-modal input:focus,.bet-input-wrap:focus-within { border-color: #a17aff9c; }
.amount-field { display: flex; align-items: center; gap: 9px; padding-left: 12px; border: 1px solid #ffffff16; border-radius: 8px; background: #111119; color: var(--gold); }
.amount-field input { border: 0; padding-left: 0; }
.field-note { margin: 7px 0 10px; color: #81808d; font-size: 9px; }
.privacy-note { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--border); color: #7f7d89; font-size: 9px; }
.privacy-note button { float: right; padding: 0; border: 0; background: none; color: #c18d9c; font-size: 9px; cursor: pointer; }
.toast { position: fixed; z-index: 40; bottom: 24px; left: 50%; transform: translate(-50%,20px); opacity: 0; pointer-events: none; padding: 11px 16px; border: 1px solid #ffffff17; border-radius: 9px; background: #25232f; box-shadow: 0 10px 35px #0007; color: #f2eef9; font-size: 11px; transition: .2s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.mobile-brand,.mobile-nav-wrap { display: none; }
@media (max-width: 1050px) {
  .sidebar { width: 215px; }
  .main-area { margin-left: 215px; }
  .topbar { padding: 0 26px; }
  .page-content { padding: 28px 26px 45px; }
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-bottom { grid-template-columns: 1fr; }
  .page-footer { padding: 15px 26px; }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0; padding-bottom: 63px; }
  .topbar { height: 66px; padding: 0 17px; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; font-size: 17px; border-radius: 9px; }
  .mobile-brand .brand-copy { font-size: 11px; }
  .mobile-brand .brand-copy > span { font-size: 8px; letter-spacing: 2px; margin-top: 2px; }
  .breadcrumb { display: none; }
  .topbar-actions { gap: 9px; }
  .balance-pill { min-width: 0; gap: 7px; padding: 6px 8px; }
  .balance-pill small { font-size: 7px; }
  .balance-pill strong { font-size: 12px; max-width: 105px; }
  .coin-icon { font-size: 18px; }
  .credit-unit { font-size: 8px; }
  .avatar-button { width: 34px; height: 34px; }
  .mobile-nav-wrap { display: block; position: fixed; z-index: 8; inset: auto 0 0; border-top: 1px solid #ffffff12; background: #15151ff2; backdrop-filter: blur(12px); }
  .mobile-nav { display: grid; grid-template-columns: repeat(5,1fr); padding: 5px 6px max(5px,env(safe-area-inset-bottom)); }
  .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: #898795; padding: 5px 0; font-size: 17px; cursor: pointer; }
  .mobile-nav-item span { font-size: 8px; }
  .mobile-nav-item.active { color: #c1a1ff; }
  .page-content { padding: 19px 15px 28px; }
  .page-footer { gap: 10px; padding: 12px 15px 15px; font-size: 8px; }
  .page-footer span:last-child { text-align: right; }
  .hero { min-height: 255px; padding: 25px 20px; }
  .hero::before { right: -110px; }
  .hero::after { right: -65px; }
  .hero h1 { font-size: 31px; max-width: 290px; }
  .hero p { max-width: 280px; font-size: 11px; }
  .hero-actions { margin-top: 18px; }
  .primary-button,.secondary-button { min-height: 39px; padding: 0 13px; font-size: 10px; }
  .section-heading { margin-top: 25px; }
  .section-heading h2 { font-size: 17px; }
  .game-grid { gap: 9px; }
  .game-card { min-height: 150px; padding: 13px; }
  .game-icon { width: 37px; height: 37px; border-radius: 10px; font-size: 19px; }
  .game-card h3 { margin-top: 12px; font-size: 12px; }
  .game-card p { max-width: 130px; font-size: 9px; }
  .dashboard-bottom { gap: 10px; margin-top: 14px; }
  .event-panel { padding: 14px; gap: 11px; }
  .event-tag { display: none; }
  .mini-stats { padding: 13px; }
  .game-page-head h1 { font-size: 25px; }
  .game-page-head p { max-width: 270px; font-size: 10px; line-height: 1.5; }
  .game-badge { font-size: 8px; padding: 7px; }
  .game-layout { grid-template-columns: 1fr; gap: 10px; }
  .game-stage { min-height: 355px; padding: 20px 13px; }
  .rules-panel { padding: 14px; }
  .rules-panel .rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }
  .rules-panel .event-hint { grid-column: 1/-1; }
  .bet-row { flex-wrap: wrap; margin: 14px 0; }
  .bet-row label { width: 100%; text-align: center; }
  .quick-bets { width: 100%; justify-content: center; }
  .bet-input-wrap { width: min(190px,60%); }
  .roulette-wheel { width: 150px; height: 150px; }
  .roulette-choice { min-width: 82px; padding: 9px 6px; font-size: 10px; }
  .reel { width: 72px; height: 85px; font-size: 37px; }
  .settings-modal { padding: 25px 21px; }
}
@media (max-width: 380px) {
  .credit-unit { display: none; }
  .game-card { min-height: 143px; padding: 11px; }
  .case-options { gap: 5px; }
  .case-option { padding-inline: 4px; }
  .roulette-bets { gap: 5px; }
}

/* Classic casino palette */
:root {
  --bg: #101a16;
  --panel: #19231d;
  --panel-light: #243329;
  --border: rgba(218, 185, 112, .17);
  --text: #f3ead6;
  --muted: #b0aa99;
  --purple: #c6a45d;
  --pink: #a54e4c;
  --green: #80b488;
  --gold: #e2c478;
  --red: #c96e62;
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
}
body { background: radial-gradient(ellipse at 52% -20%, #9b773222, transparent 52%), #101a16; }
.sidebar { background: #111a16; border-right-color: #d6b66a23; }
.sidebar { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8d7647 transparent; }
.brand-mark { border-radius: 50%; color: #271e11; background: linear-gradient(145deg,#f2d992,#b58a3e); box-shadow: 0 3px 18px #bd984242; font-family: "Playfair Display", Georgia, serif; }
.brand-mark > span { color: #664b1d; }
.brand-copy { font-family: "Playfair Display", Georgia, serif; letter-spacing: 1.7px; }
.brand-copy > span { color: #c5b78f; letter-spacing: 2.5px; }
.side-label,.sidebar-foot,.nav-item,.nav-icon { color: #a8a18f; }
.nav-item { border-radius: 5px; }
.nav-item.active { color: #f0d995; background: linear-gradient(90deg,#ad88452e,#ad884507); box-shadow: inset 2px 0 #d8b862; }
.nav-item.active .nav-icon { color: #e4c675; }
.nav-new { color: #d9c57b; border-color: #d9c57b55; }
.sidebar-event { border-color: #d6b66a32; border-radius: 7px; background: linear-gradient(145deg,#a2823b1b,#17332556); }
.event-orb,.event-panel-icon { border-radius: 50%; background: #d1ad5b20; color: #e0c478; }
.side-event-label { color: #d0b872; }
.event-progress i { background: linear-gradient(90deg,#729b69,#e0c478); }
.online-dot { background: #82b883; box-shadow: 0 0 8px #82b88377; }
.topbar { background: #101a16eF; border-bottom-color: #d6b66a1c; }
.balance-pill,.avatar-button { border-color: #d8bb7133; border-radius: 7px; background: #1c2921; }
.avatar-button { color: #f0d995; }
.avatar-button i { border-color: var(--bg); background: #384538; }
.page-footer { border-top-color: #d6b66a1c; color: #948c77; }
.hero { border-color: #c6a45d55; border-radius: 8px; background: radial-gradient(ellipse at 80% 42%,#54725349,transparent 45%), linear-gradient(110deg,#1c3024,#17261e 55%,#273225); }
.hero::before,.hero::after { border-color: #e3c77b22; box-shadow: 0 0 0 22px #e3c77b0b,0 0 0 45px #e3c77b07; }
.hero h1,.game-page-head h1,.section-heading h2,.settings-modal h2 { font-family: "Playfair Display", Georgia, serif; letter-spacing: -.3px; }
.eyebrow { color: #dec67c; }
.gradient-text { color: #f0d993; background: linear-gradient(90deg,#f2dfaa,#cfaa5b); background-clip: text; }
.hero p { color: #d0c8b4; }
.primary-button { border-radius: 6px; background: linear-gradient(105deg,#dfc779,#b18b45); color: #251d0f; box-shadow: 0 4px 14px #bb98423b; }
.primary-button:hover { box-shadow: 0 7px 18px #bb984255; }
.secondary-button { border-radius: 6px; color: #e8d498; background: #ddc57612; border-color: #ddc57654; }
.secondary-button:hover { background: #ddc57622; }
.text-link { color: #e0c478; }
.game-card { border-color: #d6b66a20; border-radius: 7px; background: linear-gradient(145deg,#1d2b22,#17231c); }
.game-card:hover { border-color: #d6b66a78; background: linear-gradient(145deg,#25382a,#1b2a20); }
.game-card::after { opacity: .08; }
.game-icon { border-radius: 50%; background: #d6b66a1c; color: #e0c478; }
.game-card h3,.event-panel h3,.rules-panel h3 { font-family: "Playfair Display", Georgia, serif; }
.game-card p,.event-panel p { color: #b6b09f; }
.dashboard-bottom { grid-template-columns: 1fr; }
.event-panel { border-radius: 7px; background: linear-gradient(100deg,#1c3024,#1c261e); }
.event-tag { border-radius: 4px; color: #e1ca82; background: #ddc57618; }
.stats-heading { margin-top: 27px; }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.stat-card { min-height: 111px; padding: 15px; border-radius: 7px; background: linear-gradient(145deg,#1b2921,#17231c); }
.stat-card small { display: block; color: #b5a981; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.stat-card strong { display: block; overflow-wrap: anywhere; margin-top: 9px; color: #f0e4c5; font: 700 18px "Playfair Display",Georgia,serif; }
.stat-card span { display: block; margin-top: 5px; color: #aaa594; font-size: 9px; line-height: 1.4; }
.gold-text { color: #e2c478 !important; }
.recent-list,.panel { border-radius: 7px; background: #19241d; }
.recent-header,.history-row { border-bottom-color: #d6b66a12; }
.recent-header,.history-time { color: #aaa28e; }
.history-row { color: #e4dcc8; }
.game-page-head p { color: #b4ae9d; }
.game-badge { border-color: #8ab58a55; border-radius: 4px; color: #a8c9a3; background: #789f7213; }
.game-stage { border-color: #d6b66a24; border-radius: 9px; background: radial-gradient(ellipse at 50% 20%,#7d995b1c,transparent 58%),#19251d; }
.stage-label { color: #b1a986; }
.bet-input-wrap,.settings-modal input { border-color: #d6b66a38; border-radius: 5px; background: #111a15; }
.quick-bet { border-color: #d6b66a2c; border-radius: 4px; color: #c7bea8; background: #ddc5760b; }
.quick-bet:hover { border-color: #d6b66a8a; }
.result-box { color: #c2baa7; }
.result-box strong { font-family: "Playfair Display", Georgia, serif; }
.rules-panel { border-radius: 7px; }
.rule-row { color: #c1b9a6; border-bottom-color: #d6b66a14; }
.rule-row strong { color: #ead9aa; }
.event-hint { border: 1px solid #d6b66a23; border-radius: 5px; background: #d6b66a0c; color: #d6c68f; }
.roulette-wheel { box-shadow: 0 0 0 7px #372b1a,0 0 26px #d4b37431; }
.wheel-center { background: #17231c; color: #f3e4b3; }
.roulette-choice { border-radius: 5px; }
.roulette-choice:hover,.roulette-choice.selected { border-color: #e0c478; box-shadow: 0 0 0 2px #e0c47820; }
.reel { border-color: #d6b66a3b; border-radius: 6px; background: linear-gradient(180deg,#26382b,#111a15); }
.case-option { border-color: #d6b66a29; border-radius: 6px; background: #ffffff06; }
.case-option:hover,.case-option.selected { border-color: #d6b66a; background: #d6b66a12; }
.case-reveal { border-color: #d6b66a30; border-radius: 6px; background: #111a15; }
.clicker-button { border-color: #f0dc9c; background: radial-gradient(circle at 35% 30%,#f3dfa2,#bf963f 50%,#765b2b); box-shadow: 0 0 0 8px #dfc77919,0 0 34px #d1ad5b3b,inset 0 -8px 15px #4b351c80; color: #3b2b11; }
.clicker-button:hover { box-shadow: 0 0 0 11px #dfc77920,0 0 45px #d1ad5b55,inset 0 -8px 15px #4b351c80; }
.clicker-upgrade { border-color: #d6b66a22; border-radius: 6px; background: #ffffff06; }
.upgrade-icon { border-radius: 50%; background: #dfc77918; color: #e2c478; }
.upgrade-button { border-color: #d6b66a4b; border-radius: 4px; background: #dfc77912; color: #e7d393; }
.modal-backdrop { background: #070d0ae0; }
.settings-modal { border-color: #d6b66a45; border-radius: 9px; background: #1a281f; }
.modal-close { border-radius: 4px; color: #e5d39c; background: #d6b66a12; }
.modal-intro,.field-note { color: #b0a995; }
.settings-modal input { color: #f3ead6; }
.settings-modal select { width: 100%; height: 41px; padding: 0 11px; border: 1px solid #d6b66a38; border-radius: 5px; outline: 0; background: #111a15; color: #f3ead6; font-size: 12px; }
.settings-modal select:focus { border-color: #dfc779; }
.privacy-note { border-top-color: #d6b66a22; color: #a8a18f; }
.privacy-note button { color: #d4ab78; }
.toast { border-color: #d6b66a44; border-radius: 5px; background: #243329; color: #f4e8c9; }
.mobile-nav-wrap { border-top-color: #d6b66a2c; background: #111b16f5; }
.mobile-nav-item { color: #a8a18f; }
.mobile-nav-item.active { color: #e0c478; }

.page-content > * { animation: page-enter .42s ease both; }
.page-content > *:nth-child(2) { animation-delay: .04s; }
.page-content > *:nth-child(3) { animation-delay: .08s; }
.page-content > *:nth-child(4) { animation-delay: .12s; }
.page-content > *:nth-child(5) { animation-delay: .16s; }
.page-content > *:nth-child(6) { animation-delay: .2s; }
@keyframes page-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.wheel-spinning { animation: wheel-glow 1.5s ease-in-out; }
@keyframes wheel-glow { 50% { filter: brightness(1.55) drop-shadow(0 0 13px #f1d27b99); } }
.reels.spinning .reel { animation: reel-spin .13s linear infinite alternate; }
.reels.spinning .reel:nth-child(2) { animation-delay: .04s; }
.reels.spinning .reel:nth-child(3) { animation-delay: .08s; }
@keyframes reel-spin { from { transform: translateY(-4px); filter: blur(1px); } to { transform: translateY(4px); filter: blur(2px); } }
.case-open-animation { animation: case-reveal .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes case-reveal { from { opacity: 0; transform: scale(.88) translateY(9px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.case-open-animation .loot { animation: loot-pop .6s .12s both; }
@keyframes loot-pop { 0% { transform: scale(.3) rotate(-20deg); } 70% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.clicker-button { position: relative; overflow: visible; }
.click-pop { animation: click-pop .25s ease; }
@keyframes click-pop { 50% { transform: scale(.91); filter: brightness(1.22); } }
.click-float { position: absolute; left: 50%; top: 12%; z-index: 2; color: #fff0b2; font: 700 15px "Playfair Display",Georgia,serif; text-shadow: 0 2px 8px #4c3211; pointer-events: none; animation: float-credit .85s ease-out forwards; }
@keyframes float-credit { from { opacity: 1; transform: translate(-50%,0) scale(.8); } to { opacity: 0; transform: translate(-50%,-55px) scale(1.1); } }
.blackjack-table,.baccarat-table { padding: 15px; border: 1px solid #d6b66a42; border-radius: 90px; background: radial-gradient(ellipse at center,#315338,#183323 72%); box-shadow: inset 0 0 24px #07160eaa,0 5px 15px #0003; }
.table-hand,.baccarat-side { min-height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.hand-label { display: flex; gap: 8px; align-items: center; color: #e5d49e; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.hand-label span { color: #f7e7bd; font-size: 13px; }
.playing-cards,.poker-cards { min-height: 90px; display: flex; justify-content: center; align-items: center; gap: 7px; }
.playing-card { width: 52px; height: 73px; position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: none; border: 1px solid #d6cfbe; border-radius: 5px; background: linear-gradient(135deg,#fffef9,#e9e3d5); box-shadow: 0 4px 8px #0004; font: 700 20px "Playfair Display",Georgia,serif; }
.playing-card > span:last-of-type { font-size: 19px; }
.card-red { color: #ad3834; }
.card-black { color: #202520; }
.card-back { border: 2px solid #e3c579; background: repeating-linear-gradient(45deg,#31533a 0 5px,#24442e 5px 10px); color: #e4cf8b; }
.table-divider { margin: 5px 0; padding: 8px 0; border-top: 1px solid #e2c47849; border-bottom: 1px solid #e2c47849; color: #c9b576; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.game-actions { display: flex; justify-content: center; gap: 8px; }
.game-actions button { min-width: 102px; }
.game-actions .secondary-button { color: #ead79c; border-color: #d6b66a4a; background: #d6b66a10; }
.poker-cards { gap: 8px; margin: 20px 0 10px; }
.poker-card { padding: 0; cursor: pointer; transition: transform .16s,box-shadow .16s; }
.poker-card:hover { transform: translateY(-4px); }
.poker-card.held { transform: translateY(-9px); border-color: #d5b956; box-shadow: 0 0 0 2px #e0c47870,0 8px 14px #0005; }
.poker-card small { position: absolute; bottom: -17px; color: #e4c878; font: 800 7px "DM Sans",sans-serif; letter-spacing: .5px; }
.poker-card:disabled { cursor: default; }
.baccarat-table { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 12px; }
.baccarat-vs { color: #ddc879; font: 700 13px "Playfair Display",Georgia,serif; }
.baccarat-side .playing-cards { gap: 3px; }
.baccarat-side .playing-card { width: 36px; height: 52px; font-size: 15px; }
.baccarat-side .playing-card > span:last-of-type { font-size: 14px; }
.baccarat-choice.player { color: #98c7ee; background: #4577a51c; }
.baccarat-choice.banker { color: #ee9a8e; background: #ac48441d; }
.baccarat-choice.tie { color: #86ca99; background: #42724f22; }
.dice-table { min-height: 143px; display: flex; justify-content: center; align-items: center; gap: 12px; margin: 14px auto 5px; }
.die { width: 63px; height: 63px; display: grid; place-items: center; border: 2px solid #cdb977; border-radius: 10px; background: linear-gradient(145deg,#fffdf4,#e4dcc7); color: #29342a; font: 700 34px "Playfair Display",Georgia,serif; box-shadow: 0 5px 12px #0005; }
.dice-total { min-width: 30px; color: #edda9a; font: 700 19px "Playfair Display",Georgia,serif; }
.dice-roll .die { animation: dice-jostle .17s ease-in-out infinite alternate; }
@keyframes dice-jostle { to { transform: translateY(-6px) rotate(6deg); } }
@media (max-width: 760px) {
  .mobile-nav { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav-item { min-width: 63px; flex: 1 0 63px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .stat-card { min-height: 101px; padding: 12px; }
  .stat-card strong { font-size: 16px; }
  .stats-heading { margin-top: 23px; }
  .blackjack-table { padding: 11px; border-radius: 45px; }
  .playing-card { width: 43px; height: 62px; font-size: 17px; }
  .playing-card > span:last-of-type { font-size: 16px; }
  .poker-cards { gap: 4px; }
  .game-actions { flex-wrap: wrap; gap: 6px; }
  .game-actions button { min-width: 0; flex: 1; padding-inline: 8px; }
  .baccarat-table { padding: 7px 5px; }
  .baccarat-side .playing-card { width: 30px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.bet-mode-toggle { display: inline-flex; padding: 3px; border: 1px solid #d6b66a38; border-radius: 5px; background: #101a15; }
.bet-mode-toggle button { min-width: 34px; border: 0; border-radius: 3px; padding: 5px 7px; background: transparent; color: #ada58e; font-size: 9px; font-weight: 800; cursor: pointer; }
.bet-mode-toggle button.active { background: #d6b66a; color: #211a0f; }
.bet-suffix { color: #b3aa92; font-size: 8px; font-weight: 800; }
.bet-preview { width: 100%; color: #c4b991; font-size: 9px; text-align: center; }
.roulette-wheel { overflow: visible; background: radial-gradient(circle at center,#1c2d20 0 28%,transparent 29%), conic-gradient(from -4.86deg,#198058 0deg 9.73deg,#20211a 9.73deg 19.46deg,#a63537 19.46deg 29.19deg,#20211a 29.19deg 38.92deg,#a63537 38.92deg 48.65deg,#20211a 48.65deg 58.38deg,#a63537 58.38deg 68.11deg,#20211a 68.11deg 77.84deg,#a63537 77.84deg 87.57deg,#20211a 87.57deg 97.3deg,#a63537 97.3deg 107.03deg,#20211a 107.03deg 116.76deg,#a63537 116.76deg 126.49deg,#20211a 126.49deg 136.22deg,#a63537 136.22deg 145.95deg,#20211a 145.95deg 155.68deg,#a63537 155.68deg 165.41deg,#20211a 165.41deg 175.14deg,#a63537 175.14deg 184.87deg,#20211a 184.87deg 194.6deg,#a63537 194.6deg 204.33deg,#20211a 204.33deg 214.06deg,#a63537 214.06deg 223.79deg,#20211a 223.79deg 233.52deg,#a63537 233.52deg 243.25deg,#20211a 243.25deg 252.98deg,#a63537 252.98deg 262.71deg,#20211a 262.71deg 272.44deg,#a63537 272.44deg 282.17deg,#20211a 282.17deg 291.9deg,#a63537 291.9deg 301.63deg,#20211a 301.63deg 311.36deg,#a63537 311.36deg 321.09deg,#20211a 321.09deg 330.82deg,#a63537 330.82deg 340.55deg,#20211a 340.55deg 350.28deg,#a63537 350.28deg 360deg); }
.roulette-wheel-wrap { width: 176px; height: 176px; position: relative; margin: 17px auto 0; }
.roulette-wheel-wrap .roulette-wheel { margin: 0; }
.wheel-pocket { position: absolute; z-index: 1; top: 50%; left: 50%; width: 19px; height: 15px; display: grid; place-items: center; margin: -7px 0 0 -9.5px; border-radius: 2px; color: #f6ebc8; font: 700 8px "DM Sans",sans-serif; box-shadow: 0 1px 3px #0008; transform: rotate(var(--pocket-angle)) translateY(-68px) rotate(calc(-1 * var(--pocket-angle))); transform-origin: center; }
.wheel-pocket.red { background: #a63537; }
.wheel-pocket.black { background: #171c18; }
.wheel-pocket.green { background: #168257; }
.wheel-pointer { position: absolute; z-index: 4; left: 50%; top: -10px; color: #f3d77f; transform: translateX(-50%); text-shadow: 0 1px 2px #16100a; font-size: 15px; }
.wheel-center { position: relative; z-index: 2; border-color: #dec77d; box-shadow: 0 0 0 5px #19271f; }
.roulette-table { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 3px; width: min(590px,100%); margin: 15px auto 0; padding: 7px; border: 1px solid #d5bd764a; border-radius: 5px; background: linear-gradient(135deg,#27553a,#173c2a); box-shadow: inset 0 0 16px #071c0d88; }
.roulette-number-grid { display: grid; grid-template-columns: repeat(12,minmax(19px,1fr)); grid-template-rows: repeat(3,31px); gap: 3px; }
.roulette-number { min-width: 0; min-height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #d8c99555; border-radius: 2px; color: #fff8e6; font-size: 10px; font-weight: 700; cursor: pointer; }
.roulette-number.red-number { background: #a93137; }
.roulette-number.black-number { background: #1c211c; }
.roulette-number.green-number { background: #168257; }
.roulette-number:hover,.roulette-number.selected { outline: 2px solid #f1d886; outline-offset: 1px; filter: brightness(1.22); z-index: 1; }
.roulette-outside-bets { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; width: min(590px,100%); margin: 5px auto 0; }
.roulette-outside { min-height: 29px; padding: 4px 5px; border: 1px solid #d6bf7950; border-radius: 3px; background: #213b29; color: #e3d9ba; font-size: 8px; font-weight: 700; cursor: pointer; }
.roulette-outside[data-roulette-value="red"] { background: #7f302d; }
.roulette-outside[data-roulette-value="black"] { background: #181d19; }
.roulette-outside.selected { outline: 2px solid #f1d886; outline-offset: 0; color: white; filter: brightness(1.2); }
.roulette-selection { margin-top: 10px; color: #c0b693; font-size: 10px; text-align: center; }
.roulette-selection strong { color: #f0d993; }
.slot-machine-cabinet { width: min(395px,calc(100% - 52px)); position: relative; margin: 19px auto 0; }
.slot-machine-shell { width: 100%; position: relative; padding: 18px 21px 15px; border: 3px solid #f0d789; border-radius: 26px 26px 12px 12px; background: linear-gradient(120deg,#a33831,#6f211f 24%,#bd4932 49%,#78231e 76%,#4c1b18); box-shadow: inset 0 0 0 4px #75231e,inset 0 0 20px #3c1514,0 12px 25px #0007; }
.slot-machine-marquee { height: 43px; display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 14px; border: 2px solid #e4c678; border-radius: 50% / 35%; background: linear-gradient(#f3e1a4,#bf9141 48%,#e5c571); box-shadow: 0 0 15px #f3dc8a88,inset 0 2px 5px #fff8bd; color: #69251d; font: 700 20px "Playfair Display",Georgia,serif; letter-spacing: 4px; text-shadow: 0 1px #fff3bd; }
.slot-machine-marquee span { color: #a5312b; font-size: 15px; }
.slot-machine-face { padding: 9px; border: 3px solid #e3c77c; border-radius: 14px; background: linear-gradient(135deg,#e9d48e,#9e7635 24%,#ebd694 48%,#92703a 78%,#d2b366); box-shadow: inset 0 0 0 2px #fff1b6,0 3px 9px #341410; }
.slot-machine-shell .reels { min-height: 0; display: flex; gap: 5px; margin: 0; padding: 4px; border: 2px solid #34251b; border-radius: 4px; background: #f6f0df; box-shadow: inset 0 0 10px #573c1f66; }
.reel-window { height: 234px; min-width: 0; position: relative; flex: 1; overflow: hidden; border: 1px solid #b7ab92; border-radius: 14px; background: #fffdf5; box-shadow: inset 7px 0 10px -9px #45351f99,inset -7px 0 10px -9px #45351f99,inset 0 0 8px #84765c66; }
.reel-window::after { content: ""; position: absolute; inset: 78px 0 auto; height: 78px; border-top: 2px solid #c59b42; border-bottom: 2px solid #c59b42; background: #e5c97720; box-shadow: 0 0 7px #9b752a38; pointer-events: none; }
.reel-strip { display: flex; flex-direction: column; will-change: transform; }
.reel-symbol { width: 100%; height: 78px; flex: 0 0 78px; display: grid; place-items: center; color: #3c2916; font-size: 39px; text-shadow: 0 1px 0 #fff; }
.strip-spinning { animation: slot-reel-spin .48s linear infinite; }
@keyframes slot-reel-spin { to { transform: translateY(-3900px); } }
.slot-machine-brand { margin-top: 12px; color: #f5e6aa; text-align: center; font: 700 10px "Playfair Display",Georgia,serif; letter-spacing: 3px; text-shadow: 0 1px 3px #38100e; }
.slot-lever-area { position: absolute; z-index: 3; top: 92px; right: -44px; width: 63px; height: 155px; pointer-events: none; }
.slot-lever-button { width: 63px; height: 155px; position: relative; z-index: 2; border: 0; background: transparent; cursor: pointer; pointer-events: auto; transform-origin: 50% 88%; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.slot-lever-button:hover { transform: rotate(5deg); }
.slot-lever-button:active,.slot-lever-button.lever-pulled { transform: rotate(31deg); }
.lever-rod { position: absolute; right: 19px; top: 27px; width: 10px; height: 102px; border: 2px solid #ddc77e; border-radius: 8px; background: linear-gradient(90deg,#65502c,#f6e5a4 48%,#8b6e38); box-shadow: 2px 3px 5px #0007; }
.lever-ball { position: absolute; z-index: 2; top: 5px; right: 8px; width: 34px; height: 34px; border: 2px solid #f8e7a1; border-radius: 50%; background: radial-gradient(circle at 32% 26%,#ed8970,#b93329 54%,#671b19); box-shadow: 0 3px 8px #0008,inset 0 -4px 7px #4f0d0d; }
.lever-base { position: absolute; right: 7px; bottom: 9px; width: 36px; height: 18px; border: 2px solid #e2cb7b; border-radius: 50%; background: linear-gradient(#d0ae61,#725228); box-shadow: 0 3px 5px #0008; }
.slot-machine-shell.machine-spinning { animation: cabinet-rattle .12s linear infinite alternate; }
@keyframes cabinet-rattle { to { transform: translateX(1px) rotate(.18deg); } }
@media (max-width: 760px) {
  .roulette-number-grid { grid-template-rows: repeat(3,27px); gap: 2px; }
  .roulette-number { min-height: 26px; font-size: 8px; }
  .roulette-table { grid-template-columns: 26px minmax(0,1fr); gap: 2px; padding: 5px; }
  .roulette-outside-bets { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .roulette-outside { font-size: 8px; }
  .roulette-wheel-wrap { width: 150px; height: 150px; }
  .roulette-wheel-wrap .roulette-wheel { width: 150px; height: 150px; }
  .wheel-pocket { width: 16px; font-size: 7px; transform: rotate(var(--pocket-angle)) translateY(-58px) rotate(calc(-1 * var(--pocket-angle))); }
  .slot-machine-cabinet { width: calc(100% - 44px); }
  .slot-machine-shell { padding-inline: 10px; }
  .slot-lever-area { right: -41px; }
  .bet-row { gap: 7px; }
  .quick-bets { flex-wrap: wrap; justify-content: center; }
}

.slot-machine-shell { padding: 18px 21px 15px; border: 1px solid #8b794b; border-radius: 30px 30px 22px 22px; background: linear-gradient(125deg,#304236,#17231c 30%,#293a2e 57%,#111a14 83%); box-shadow: inset 0 0 0 1px #ffffff0c,inset 0 -20px 35px #060d09a8,0 14px 35px #020805a8,0 0 24px #c3a45b12; }
.slot-machine-shell::before { content: ""; position: absolute; inset: 5px; border: 1px solid #d6b66a24; border-radius: 26px 26px 18px 18px; pointer-events: none; }
.slot-machine-marquee { height: 40px; border: 1px solid #d6b66a70; border-radius: 14px; background: linear-gradient(110deg,#1d2b20,#344b35 48%,#1b291f); box-shadow: inset 0 1px 0 #ffffff18,0 0 18px #d6b66a18; color: #ead9a6; font: 800 17px "DM Sans",sans-serif; letter-spacing: 7px; text-shadow: 0 1px 10px #d6b66a44; }
.slot-machine-marquee span { color: #dfc779; font-size: 13px; text-shadow: 0 0 10px #d6b66a66; }
.slot-machine-face { padding: 8px; border: 1px solid #c0a961; border-radius: 19px; background: linear-gradient(145deg,#7e785d,#374535 24%,#5d684c 50%,#303d31 78%,#827653); box-shadow: inset 0 0 0 1px #f2e2ad44,0 0 17px #d6b66a18,0 4px 13px #050a07bb; }
.slot-machine-shell .reels { gap: 6px; padding: 5px; border: 1px solid #84734a; border-radius: 13px; background: linear-gradient(135deg,#172219,#0b130e); box-shadow: inset 0 0 15px #030804,0 0 12px #d6b66a14; }
.reel-window { height: 234px; perspective: 430px; perspective-origin: center; border: 1px solid #ac9b6c; border-radius: 50% / 13%; background: linear-gradient(90deg,#d3c8a9,#f5f0df 18%,#f3eedc 82%,#c6b994); box-shadow: inset 14px 0 17px -14px #292413a8,inset -14px 0 17px -14px #292413a8,inset 0 0 13px #71634355,0 0 8px #ddc77920; }
.reel-window::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(180deg,#241f1399 0%,#241f132b 13%,transparent 31%,transparent 69%,#241f132b 87%,#241f1399 100%),linear-gradient(90deg,#41372228,transparent 20%,transparent 80%,#41372228); box-shadow: inset 0 12px 15px -13px #fff,inset 0 -12px 15px -13px #fff; pointer-events: none; }
.reel-window::after { z-index: 2; inset: 78px 0 auto; height: 78px; border-top: 1px solid #d6b66ac4; border-bottom: 1px solid #d6b66ac4; background: linear-gradient(90deg,#d6b66a0a,#d6b66a25 50%,#d6b66a0a); box-shadow: 0 0 12px #d6b66a2b,inset 0 0 16px #d6b66a14; }
.reel-symbol { position: relative; z-index: 0; color: #302817; font-size: 38px; filter: drop-shadow(0 3px 2px #342a1733); backface-visibility: hidden; transform-style: preserve-3d; }
.reel-symbol.preview-before { transform: rotateX(34deg) scaleY(.88); opacity: .76; filter: blur(.25px) drop-shadow(0 3px 2px #342a1733); }
.reel-symbol.preview-center { z-index: 1; color: #2b2417; font-size: 43px; filter: drop-shadow(0 0 8px #d6b66a66) drop-shadow(0 3px 2px #342a1755); }
.reel-symbol.preview-after { transform: rotateX(-34deg) scaleY(.88); opacity: .76; filter: blur(.25px) drop-shadow(0 3px 2px #342a1733); }
.slot-machine-brand { color: #d4c18c; font: 700 9px "DM Sans",sans-serif; letter-spacing: 2px; text-shadow: 0 0 10px #d6b66a3d; }
.lever-rod { border-color: #cdb873; background: linear-gradient(90deg,#655a39,#f1e2ad 48%,#8f7a48); box-shadow: 0 0 9px #d6b66a24,2px 3px 5px #0007; }
.lever-ball { border-color: #e0cd8d; background: radial-gradient(circle at 32% 26%,#e5d08d,#af8840 54%,#594321); box-shadow: 0 0 12px #d6b66a44,0 3px 8px #0008,inset 0 -4px 7px #493616; }
.lever-base { border-color: #d2bd80; background: linear-gradient(#d5c383,#6d5a34); box-shadow: 0 0 10px #d6b66a22,0 3px 5px #0008; }
@media (max-width: 760px) {
  .slot-machine-shell { padding-inline: 10px; }
}