@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #1a1410;
  --panel: #261e18;
  --panel-2: #30251c;
  --raise: #3a2d23;
  --line: rgba(241,226,203,.11);
  --text: #f5ead8;
  --muted: #ad9b87;
  --caramel: #e7b65e;
  --caramel-2: #f7d994;
  --foam: #fff6e8;
  --steam: #7cc4a8;
  --berry: #d9667a;
  --ink: #2a1706;
  --gold-deep: #b97732;
  --gold-dark: #875020;
  --gold-grad: linear-gradient(180deg,#fbe3a4 0%,#e7b65e 48%,#c98738 100%);
  --r: 14px;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.45; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--caramel-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.app-shell { min-height: 100vh; padding-top: 72px; }
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: 72px; display: flex; align-items: center; gap: 24px; padding: 0 22px; background: rgba(26,20,16,.93); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: inherit; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50% 50% 50% 12px; background: var(--caramel); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 22px; }
.brand-word { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-word span { color: var(--caramel); }
.demo-tag { padding: 2px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; font-weight: 700; }

.main-nav, .top-actions { display: flex; align-items: center; gap: 8px; }
.main-nav { flex: 1; min-width: 0; }
.main-nav button, .top-actions button { border: 0; cursor: pointer; transition: background .15s, color .15s; }
.nav-icon, .nav-button { height: 40px; border-radius: 10px; background: transparent; color: #d9c9b2; }
.nav-icon { width: 42px; font-size: 22px; line-height: 1; }
.nav-icon.active { background: var(--panel-2); color: var(--foam); }
.nav-button { padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav-button span { margin-right: 6px; opacity: .8; }
.nav-button .chevron { margin: 0 0 0 6px; opacity: .6; }
.nav-icon:hover, .nav-button:hover { background: var(--panel-2); color: var(--foam); }
.nav-rewards { color: var(--caramel-2); }
.games-nav-wrap { position: relative; }
.games-dropdown { position: absolute; top: 48px; left: 0; width: max-content; display: flex; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: 0 24px 50px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s ease; }
.games-nav-wrap.open .games-dropdown { opacity: 1; visibility: visible; transform: none; }
.games-dropdown button { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 2px; min-width: 112px; padding: 10px 9px; text-align: left; background: transparent; border-radius: 10px; }
.games-dropdown button:hover { background: var(--raise); }
.games-dropdown button > span { color: var(--caramel); font-size: 17px; }
.games-dropdown button b { font-size: 13px; }
.games-dropdown button small { color: var(--muted); font-size: 11px; }

.top-actions { flex: 0 0 auto; }
.language-toggle { min-width: 42px; height: 36px; padding: 0 10px; border: 1px solid var(--line) !important; border-radius: 9px; background: var(--panel-2); color: var(--foam); font-size: 11px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.chat-edge-toggle { position: fixed; z-index: 11; top: 50%; left: 290px; width: 22px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--panel-2); color: var(--foam); font-size: 18px; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: left .2s ease, background .15s; }
.chat-edge-toggle:hover { background: var(--raise); color: var(--caramel-2); }
body.chat-hidden .chat-edge-toggle { left: 0; border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; }
body.chat-hidden .sidebar { display: none; }
body.chat-hidden .main-content { margin-left: 0; }
.language-toggle:hover { border-color: var(--caramel) !important; color: var(--caramel-2); }
.balance-pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; }
.balance-pill strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.balance-pill small { color: var(--muted); font-size: 10px; font-weight: 700; }
.gem { color: var(--caramel); }
.deposit-button { height: 40px; padding: 0 16px; border-radius: 99px; background: var(--caramel); color: var(--ink); font-weight: 700; font-size: 13px; white-space: nowrap; }
.deposit-button:hover { background: var(--caramel-2); }
.event-badge { display: grid; gap: 1px; padding: 4px 12px; border-radius: 10px; background: transparent; text-align: left; }
.event-badge:hover { background: var(--panel-2); }
.event-gem { color: var(--caramel-2); font-family: var(--display); font-size: 15px; font-weight: 700; }
.event-badge b { color: var(--muted); font-size: 10px; line-height: 1.1; font-weight: 500; }
.withdraw-button { height: 40px; padding: 0 14px; border-radius: 99px; background: var(--panel-2); color: #d9c9b2; font-size: 13px; }
.withdraw-button:hover { background: var(--raise); }
.notification-button { position: relative; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: #d9c9b2; font-size: 20px; }
.notification-button i { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); }
.profile-button { position: relative; width: 42px; height: 42px; border: 2px solid var(--caramel) !important; border-radius: 50%; background: var(--panel-2); font-size: 20px; }
.profile-button b { position: absolute; right: -5px; bottom: -5px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 99px; background: var(--caramel); color: var(--ink); font-size: 11px; }
.guest-account { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 5px 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--muted); font-size: 11px; }
.guest-account button { height: 29px; padding: 0 11px; border-radius: 99px; background: var(--caramel) !important; color: var(--ink); font-size: 11px; font-weight: 800; }
.profile-button { width: auto; min-width: 42px; max-width: 170px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; border-radius: 99px; }
.profile-button > span { font-size: 19px; }
.profile-button b { position: static; display: block; min-width: 0; height: auto; overflow: hidden; background: transparent; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-button[hidden], .guest-account[hidden] { display: none !important; }

.sidebar { position: fixed; z-index: 10; inset: 72px auto 0 0; width: 290px; display: flex; flex-direction: column; padding: 14px; background: var(--panel); border-right: 1px solid var(--line); }
.social-row { display: flex; gap: 8px; margin-bottom: 12px; }
.social-row > button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--panel-2); cursor: pointer; font-size: 16px; }
.social-row .chat-room { display: flex; align-items: center; gap: 8px; width: auto; flex: 1; padding: 0 12px; text-align: left; font-size: 12px; }
.chat-room span { flex: 1; }
.chat-room b { color: var(--muted); }
.rain-card { padding: 14px; border-radius: var(--r); background: linear-gradient(140deg, #422f19, #302319); border: 1px solid rgba(231,182,94,.3); }
.rain-top { display: flex; align-items: center; gap: 10px; }
.rain-top > .gem { font-size: 24px; }
.rain-top > div { display: grid; flex: 1; }
.rain-top small { color: var(--caramel-2); font-size: 11px; font-weight: 700; }
.rain-top strong { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.rain-top button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(0,0,0,.2); color: #e6d6bd; font-size: 11px; cursor: pointer; }
.join-rain { width: 100%; height: 36px; margin-top: 12px; border: 0; border-radius: 10px; background: var(--caramel); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.join-rain:hover { background: var(--caramel-2); }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0; scrollbar-width: thin; scrollbar-color: var(--raise) transparent; }
.chat-auth[hidden], .chat-messages[hidden], .chat-entry[hidden], #chatSignOut[hidden] { display: none !important; }
.chat-auth { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; justify-content: center; padding: 18px 8px; }
.chat-auth-copy { display: grid; gap: 6px; margin-bottom: 8px; text-align: center; }
.chat-auth-copy b { color: var(--foam); font-size: 15px; }
.chat-auth-copy span, .chat-auth-status { color: var(--muted); font-size: 11px; line-height: 1.45; }
.chat-auth input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 12px; }
.chat-auth input::placeholder { color: var(--muted); }
.chat-auth-submit { min-height: 38px; border: 0; border-radius: 9px; background: var(--caramel); color: var(--ink); font-weight: 700; cursor: pointer; }
.chat-auth-submit:disabled { opacity: .55; cursor: not-allowed; }
.chat-auth-toggle, #chatSignOut { border: 0; background: transparent; color: var(--caramel-2); font-size: 11px; cursor: pointer; }
.chat-auth-status { min-height: 28px; margin: 0; text-align: center; }
.account-auth-form { display: grid; gap: 9px; max-width: 460px; margin: 16px auto 0; }
.account-auth-form label { margin-top: 4px; color: var(--muted); font-size: 11px; }
.account-auth-form input { box-sizing: border-box; width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: var(--bg); color: var(--text); font-size: 13px; }
.account-auth-form input:focus { border-color: var(--caramel); }
.account-auth-form input::placeholder { color: var(--muted); }
.account-auth-form .chat-auth-status { margin-top: 4px; }
.chat-empty { padding: 22px 10px; color: var(--muted); font-size: 12px; text-align: center; }
.chat-line { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: start; padding: 7px 0; color: #dccdb7; font-size: 12px; line-height: 1.4; }
.chat-line-body { position: relative; min-width: 0; padding-right: 24px; overflow-wrap: anywhere; }
.chat-delete { position: absolute; top: 0; right: 0; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); cursor: pointer; }
.chat-delete:hover { border-color: var(--berry); color: #ff8c82; }
.chat-delete:disabled { opacity: .5; cursor: wait; }
.chat-line b { color: var(--foam); font-weight: 700; }
.chat-line b em { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 99px; background: var(--raise); color: var(--caramel-2); font-size: 10px; font-style: normal; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--raise); font-size: 18px; }
.chat-system { margin: 4px 0; padding: 9px 10px; border-radius: 10px; background: rgba(231,182,94,.1); color: var(--caramel-2); }
.chat-entry { display: flex; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-entry input { min-width: 0; flex: 1; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--text); font-size: 12px; }
.chat-entry input::placeholder { color: var(--muted); }
.chat-entry input:disabled, .chat-entry button:disabled { opacity: .55; cursor: not-allowed; }
.chat-entry button { width: 40px; border: 0; border-radius: 50%; background: var(--caramel); color: var(--ink); cursor: pointer; }
.chat-footer { display: flex; justify-content: space-between; padding: 10px 4px 0; color: var(--muted); font-size: 11px; }
.online, .online-top { display: flex; align-items: center; gap: 6px; color: var(--steam); }
.online i, .online-top i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--steam); }
.mobile-online-count { display: none; }
.presence-offline .online i, .presence-offline .online-top i, .presence-offline .mobile-online-count i { background: #98928c; box-shadow: none; }
.presence-connected .online i, .presence-connected .online-top i, .presence-connected .mobile-online-count i { box-shadow: 0 0 8px rgba(112,237,136,.65); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.main-content { max-width: 1500px; margin-left: 290px; padding: 28px clamp(22px, 3vw, 56px) 32px; }
.welcome-row { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 20px; }
.welcome-row h1 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.welcome-row h1 span { color: var(--caramel-2); }
.online-top { font-size: 12px; }

.hero-banner { position: relative; min-height: 290px; display: flex; align-items: center; overflow: hidden; border-radius: 20px; background: linear-gradient(115deg, #32251b 0%, #402d1d 55%, #57391a 100%); }
.hero-banner.slide-two { background: linear-gradient(115deg, #2a1d1d, #432a2a 60%, #5a3030); }
.hero-banner.slide-three { background: linear-gradient(115deg, #1f2a26, #2c3f37 60%, #3b5246); }
.hero-copy { position: relative; z-index: 2; width: 58%; padding: 36px 0 40px 52px; }
.eyebrow { color: var(--caramel-2); font-size: 12px; font-weight: 700; }
.hero-copy h2 { margin: 10px 0 10px; font-family: var(--display); font-size: clamp(36px, 4.4vw, 64px); line-height: .98; font-weight: 800; letter-spacing: -.035em; color: var(--foam); }
.hero-copy h2 span { font-style: normal; color: var(--caramel); }
.hero-copy p { margin: 0 0 20px; color: #d9c9b2; font-size: 15px; max-width: 380px; }
.hero-cta { padding: 12px 20px; border: 0; border-radius: 99px; background: var(--foam); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.hero-cta:hover { background: var(--caramel-2); }
.hero-cta span { margin-left: 6px; }
.hero-art { position: absolute; inset: 0 6% 0 52%; overflow: hidden; }
.moon { position: absolute; width: 230px; height: 230px; top: 30px; right: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6c98a, #e8993a 70%); opacity: .9; }
.hero-crate { position: absolute; display: grid; place-items: center; font-weight: 800; }
.crate-back { right: 14%; top: 62px; width: 150px; height: 150px; border-radius: 28px; background: var(--foam); color: var(--caramel); font-size: 56px; transform: rotate(9deg); box-shadow: 0 24px 40px rgba(0,0,0,.35); }
.crate-front { right: 40%; bottom: 30px; width: 130px; height: 110px; border-radius: 22px; background: #5b3c22; border: 3px solid var(--caramel); transform: rotate(-7deg); box-shadow: 0 20px 34px rgba(0,0,0,.35); }
.crate-front span { font-family: var(--display); font-size: 58px; color: var(--caramel-2); }
.hero-spark { position: absolute; color: var(--foam); opacity: .8; }
.spark-a { right: 5%; top: 50px; font-size: 30px; }
.spark-b { right: 44%; top: 52px; font-size: 22px; color: var(--caramel-2); }
.hero-streak { display: none; }
.hero-arrow { position: absolute; z-index: 3; top: 50%; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(22,16,13,.55); color: var(--foam); font-size: 24px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.hero-arrow:hover { background: var(--caramel); color: var(--ink); }
.hero-prev { left: 14px; } .hero-next { right: 14px; }
.hero-dots { position: absolute; z-index: 3; left: 50%; bottom: 14px; display: flex; gap: 6px; transform: translateX(-50%); }
.hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,246,232,.35); cursor: pointer; transition: width .2s; }
.hero-dots button.selected { width: 24px; background: var(--foam); }

.section-block { margin-top: 36px; }
.section-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.section-heading .rule { display: none; }
.section-heading > span:nth-child(2) { font-size: 18px; }
.section-heading h2 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }

.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 160px; gap: 14px; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(231,182,94,.12), rgba(231,182,94,.04)), url(card-towers.webp) center/cover no-repeat; opacity: .22; pointer-events: none; }
.game-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.game-card:hover { transform: translateY(-3px); border-color: rgba(231,182,94,.6); }
.game-card.wide { grid-column: span 2; }
.card-label { position: relative; z-index: 2; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--foam); }
.card-subtitle { position: relative; z-index: 2; margin-top: 2px; color: rgba(245,234,216,.7); font-size: 12px; }
.game-battles { background: linear-gradient(90deg, rgba(20,14,10,.72), rgba(20,14,10,0) 58%), url(card-battles.webp) right center / cover no-repeat, linear-gradient(120deg, #3a2616, #6b3f1a); }
.game-coinflip { background: linear-gradient(90deg, rgba(20,14,10,.72), rgba(20,14,10,0) 58%), url(card-coinflip.webp) right center / cover no-repeat, linear-gradient(130deg, #2b2a22, #5a4a1e); }
.game-bust { background: linear-gradient(180deg, rgba(20,10,8,.25), rgba(20,10,8,.78)), url(bust-rocket.png) center / cover no-repeat, linear-gradient(130deg, #2f1f1c, #6a3328); }
.game-upgrader { background: linear-gradient(90deg, rgba(20,14,10,.72), rgba(20,14,10,0) 58%), url(card-upgrader.webp) right center / cover no-repeat, linear-gradient(130deg, #202a24, #34523f); }
.game-towers { background: linear-gradient(90deg, rgba(20,14,10,.72), rgba(20,14,10,0) 58%), url(card-towers.webp) right center / cover no-repeat, linear-gradient(130deg, #2a2418, #54401f); }
.game-mines { background: linear-gradient(90deg, rgba(20,14,10,.72), rgba(20,14,10,0) 58%), url(card-mines.webp) right center / cover no-repeat, linear-gradient(130deg, #2c2a1f, #4c4a2f); }
.game-cases { background: linear-gradient(90deg, rgba(20,14,10,.78), rgba(20,14,10,.1) 72%), url(cases-bg.png) center / cover no-repeat, linear-gradient(130deg, #1d1612, #2e2118); }
.battle-art, .coin-art, .bust-art, .upgrade-art, .tower-art, .mine-art, .case-art { position: absolute; pointer-events: none; color: rgba(255,246,232,.9); }
.battle-art { inset: 0; }
.battle-art::before, .battle-art::after { content: ''; position: absolute; bottom: -30px; width: 110px; height: 120px; border-radius: 40px 40px 14px 14px; background: rgba(255,246,232,.14); transform: rotate(-12deg); }
.battle-art::before { right: 28%; } .battle-art::after { right: 8%; transform: rotate(12deg); }
.battle-art i { position: absolute; bottom: 22px; right: 38%; width: 6px; height: 64px; border-radius: 3px; background: var(--caramel-2); transform: rotate(36deg); }
.battle-art i:nth-child(2) { right: 18%; height: 50px; transform: rotate(-22deg); }
.battle-art b { position: absolute; right: 16%; bottom: 30px; font-size: 28px; color: var(--foam); }
.coin-art { inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 40px 16px 0 0; }
.coin-art i, .coin-art b { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,246,232,.16); font-size: 16px; font-style: normal; }
.coin-art b { width: 72px; height: 72px; background: var(--caramel); color: var(--ink); font-size: 26px; }
.bust-art { inset: 0; display: grid; place-items: center; }
.bust-art i { position: absolute; right: 36px; bottom: 18px; font-size: 58px; font-style: normal; color: var(--caramel-2); }
.bust-art b { position: absolute; right: 22px; top: 62px; font-family: var(--display); font-size: 20px; color: var(--foam); }
.upgrade-art { inset: 0; }
.upgrade-art i { position: absolute; right: 26%; bottom: 4px; font-size: 70px; font-style: normal; color: var(--steam); }
.upgrade-art b { position: absolute; right: 14px; top: 70px; font-size: 11px; }
.tower-art { right: 34px; bottom: 10px; font-size: 70px; transform: rotate(-20deg); color: var(--caramel-2); }
.mine-art { right: 34px; bottom: 10px; font-size: 70px; transform: rotate(-20deg); color: var(--steam); }
.case-art { right: 32px; bottom: 12px; width: 84px; height: 62px; display: grid; place-items: center; border-radius: 12px; background: var(--caramel); color: var(--ink); font-size: 34px; }

.reward-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.reward-card { position: relative; min-height: 150px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-align: left; cursor: pointer; transition: border-color .16s, transform .16s; }
.reward-card:hover { border-color: rgba(231,182,94,.6); transform: translateY(-2px); }
.reward-stamp { position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--raise); color: var(--caramel-2); font-size: 20px; }
.reward-card b { font-family: var(--display); font-size: 17px; }
.reward-card small { margin-top: 4px; max-width: 150px; color: var(--muted); font-size: 12px; }
.reward-button { margin-top: auto; color: var(--caramel-2); font-size: 12px; font-weight: 700; }
.page-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* Ruby Case opening view */
.modal.cases-modal { width:min(1120px,96vw); max-height:94vh; overflow-y:auto; padding:0; border-color:rgba(231,182,94,.23); border-radius:12px; background:#221b17; }
.cases-modal .modal-close { display:none; }
.ruby-case-shell { color:#f4ede9; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 200px)); justify-content: start; gap: 14px; }
.case-tile { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #1d1713, #120e0b); text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease; }
.case-tile:hover { transform: translateY(-3px); border-color: rgba(231,182,94,.55); box-shadow: 0 0 24px rgba(231,182,94,.16), inset 0 0 0 1px rgba(231,182,94,.1); }
.case-tile-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 70%, rgba(231,182,94,.14), transparent 65%), #0c0907; }
.case-tile-art img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.case-tile:hover .case-tile-art img { transform: scale(1.04); }
.case-tile-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; }
.case-tile-name { font-family: var(--display); font-size: 14px; color: var(--foam); }
.case-tile-price { color: var(--caramel-2); font-size: 13px; white-space: nowrap; }
.case-detail-hero { display: flex; justify-content: center; margin: 14px 18px 0; }
.case-detail-hero img { display: block; width: min(100%, 460px); max-height: 220px; object-fit: contain; }
@media (max-width: 540px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .case-tile-info { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; }
  .case-tile-name { font-size: 13px; }
}
.ruby-case-top { height:54px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:0 18px; border-bottom:1px solid rgba(241,226,203,.08); }
.ruby-case-top h2 { margin:0; color:#f4f3ef; font-size:16px; font-weight:800; }
.ruby-back,.ruby-fairness { display:inline-flex; align-items:center; gap:7px; justify-self:start; padding:7px 10px; border:1px solid rgba(241,226,203,.09); border-radius:5px; background:#332a25; color:#d8cec9; font-size:11px; font-weight:700; cursor:pointer; }
.ruby-fairness { justify-self:end; border-color:transparent; background:transparent; }
.ruby-back:hover,.ruby-fairness:hover { color:#f6d184; }
.ruby-reel-area { position:relative; display:flex; min-height:226px; align-items:center; margin:16px 18px 0; overflow:hidden; border:1px solid rgba(234,190,99,.2); border-radius:7px; background:radial-gradient(ellipse at 50% 42%,rgba(120,91,47,.14),transparent 60%),linear-gradient(115deg,#231c17,#302620 50%,#231c17); }
.ruby-reel-window { width:100%; overflow:hidden; padding:34px 0; }
.ruby-reel-track { display:flex; width:max-content; gap:12px; padding:0 18px; transform:translateX(0); }
.ruby-reel-card { position:relative; display:grid; flex:0 0 126px; height:138px; place-items:center; overflow:hidden; border:1px solid rgba(241,226,203,.08); border-radius:7px; background:linear-gradient(155deg,#3a302a,#2d2520); }
.ruby-reel-card::before { position:absolute; inset:12% 15%; border-radius:50%; background:radial-gradient(ellipse,var(--case-glow),transparent 70%); opacity:.82; content:''; filter:blur(12px); }
.ruby-reel-card { container-type:size; }
.ruby-reel-card .skin-art { position:absolute; z-index:1; left:50%; top:50%; display:block; width:calc(min(100cqw,100cqh) - 2*var(--art-pad,10px)); height:auto; aspect-ratio:1/1; min-width:0; min-height:0; transform:translate(-50%,-50%); }
.ruby-reel-card .skin-art img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; object-position:center; transform:scale(var(--art-scale,1)) translate(var(--art-x,0%),var(--art-y,0%)); filter:drop-shadow(0 5px 10px #0008); }
.ruby-reel-card.is-winner { border-color:#e5b54f; box-shadow:inset 0 0 22px rgba(231,182,94,.18),0 0 18px rgba(231,182,94,.18); }
.case-reel-grid { display:grid; grid-template-columns:repeat(var(--spin-count,1),minmax(0,1fr)); align-items:stretch; }
.case-reel-lane { position:relative; display:flex; min-width:0; flex-direction:column; justify-content:center; }
.case-reel-lane + .case-reel-lane { border-left:1px solid rgba(234,190,99,.14); }
/* Two to four spin columns run top to bottom, all in one row. Each column shows exactly three items: 3 cards plus 2 gaps. */
.case-reel-grid.is-vertical { --card-h:96px; --gap:8px; --art-pad:8px; height:auto; min-height:0; gap:12px; padding:0 4px; }
.case-reel-grid.is-vertical.is-triple { --card-h:80px; --gap:8px; --art-pad:6px; gap:8px; }
.case-reel-grid.is-vertical.is-quad { --card-h:64px; --gap:6px; --art-pad:4px; gap:8px; padding:0 2px; }
.case-reel-grid.is-vertical .case-reel-lane { height:calc(3 * var(--card-h) + 2 * var(--gap)); justify-content:stretch; border-left:0; }
.case-reel-grid.is-vertical .ruby-reel-window { position:relative; flex:1 1 auto; min-height:0; padding:0; }
.case-reel-grid.is-vertical .ruby-reel-track { flex-direction:column; gap:var(--gap); width:100%; padding:0 10px; }
.case-reel-grid.is-vertical .ruby-reel-card { flex:0 0 auto; width:100%; height:var(--card-h); }
.case-reel-grid.is-vertical .ruby-pointer { top:50%; right:auto; left:-1px; transform:translateY(-50%); border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:9px solid #e7b65e; border-right:0; }
.case-reel-grid.is-vertical .ruby-pointer-bottom { top:50%; bottom:auto; left:auto; right:-1px; transform:translateY(-50%); border-left:0; border-right:9px solid #e7b65e; }
.case-count { display:flex; gap:6px; }
.case-count button { min-width:42px; min-height:36px; padding:0 10px; border:1px solid rgba(234,190,99,.3); border-radius:6px; background:#231c17; color:#e8d3a4; font-weight:700; cursor:pointer; }
.case-count button.active { border-color:transparent; background:linear-gradient(180deg,#f4ca70,#dc9e3b); color:#23190c; }
.ruby-pointer { position:absolute; z-index:3; top:-1px; left:50%; width:0; height:0; transform:translateX(-50%); border-top:9px solid #e7b65e; border-right:8px solid transparent; border-left:8px solid transparent; filter:drop-shadow(0 2px 3px #0009); }
.ruby-pointer-bottom { top:auto; bottom:-1px; transform:translateX(-50%) rotate(180deg); }
.ruby-case-controls { display:flex; min-height:64px; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; padding:12px 18px; }
.ruby-case-controls .primary-action { width:auto; min-width:178px; min-height:42px; padding:0 22px; background:linear-gradient(180deg,#f4ca70,#dc9e3b); color:#23190c; box-shadow:0 4px 15px rgba(225,166,66,.2); }
.ruby-case-controls .primary-action b { font-variant-numeric:tabular-nums; }
.ruby-result { min-height:18px; color:#b6a69c; font-size:12px; font-weight:650; }
.ruby-result.won { color:#f2cd77; }
.ruby-contents { margin:0 18px 12px; padding:0 10px 6px; border:1px solid rgba(241,226,203,.08); border-radius:7px; background:#29211c; }
.ruby-contents > header { display:flex; min-height:30px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(241,226,203,.07); }
.ruby-contents h3 { margin:0; color:#c9bfb8; font-size:12px; font-weight:800; }
.ruby-contents > header span { color:#8f8279; font-size:9px; }
/* One compact row: cards keep a fixed width and a fixed height, and longer lists scroll sideways instead of growing the page. */
.ruby-contents-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(96px,1fr); gap:6px; overflow-x:auto; padding:8px 0 8px; scrollbar-width:thin; }
.ruby-content-card { --case-glow:rgba(210,200,190,.25); position:relative; display:flex; min-width:0; height:104px; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; overflow:hidden; padding:6px 5px 6px; border:1px solid rgba(241,226,203,.07); border-radius:5px; background:linear-gradient(150deg,#39302a,#322924 65%,color-mix(in srgb,var(--case-glow) 20%,#322924)); text-align:center; }
.ruby-content-card .skin-art { position:relative; isolation:isolate; display:grid; flex:0 0 auto; width:100%; height:52px; min-height:0; place-items:center; }
.ruby-content-card .skin-art::before { position:absolute; z-index:-1; inset:14% 22%; border-radius:50%; background:radial-gradient(ellipse,var(--case-glow),transparent 72%); content:''; filter:blur(10px); }
.ruby-content-card .skin-art img { display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px #0008); }
.ruby-content-card b { display:-webkit-box; flex:0 0 auto; max-height:2.3em; overflow:hidden; color:#d8cec8; font-size:9px; font-weight:750; line-height:1.15; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ruby-content-card small { flex:0 0 auto; color:#f3d483; font-size:9px; font-weight:800; white-space:nowrap; }
.ruby-chance { position:absolute; top:4px; right:5px; z-index:2; color:#d3cbc6; font-size:9px; font-weight:800; }
.ruby-content-card.rare .ruby-chance { color:#48b6ee; }
.ruby-content-card.epic .ruby-chance { color:#ec7184; }
.ruby-content-card.gold .ruby-chance, .ruby-content-card.legendary .ruby-chance { color:#f7d994; }
.ruby-content-card.dark .ruby-chance { color:#8c8c8c; }
.ruby-content-card.scrap .ruby-chance { color:#c4c9ce; }
.ruby-demo-note { margin:4px 0 0; color:#8b7c72; font-size:8px; text-align:center; }
@media(max-width:760px) {
  .modal.cases-modal { width:min(96vw,680px); }
  .ruby-reel-area { min-height:188px; margin:12px 12px 0; }
  .ruby-reel-card { flex-basis:104px; height:116px; }
  .ruby-contents { margin:0 12px 10px; padding:0 8px 4px; }
  .ruby-contents-grid { grid-auto-columns:minmax(92px,1fr); }
}
@media(max-width:480px) {
  .modal.cases-modal { width:100%; max-height:96vh; border-radius:9px; }
  .ruby-case-top { height:48px; padding:0 9px; }
  .ruby-case-top h2 { font-size:14px; }
  .ruby-back,.ruby-fairness { padding:6px 7px; font-size:10px; }
  .ruby-reel-area { min-height:154px; margin:9px 8px 0; }
  .ruby-reel-window { padding:25px 0; }
  .ruby-reel-card { flex-basis:82px; height:96px; }
  .ruby-case-controls { min-height:58px; gap:8px; padding:10px; }
  .ruby-case-controls .primary-action { min-width:145px; min-height:38px; padding:0 13px; }
  .ruby-result { flex-basis:100%; text-align:center; }
  .ruby-contents { margin:0 8px 8px; }
  .ruby-contents-grid { grid-auto-columns:minmax(80px,1fr); gap:5px; }
  .ruby-content-card { height:96px; }
  .ruby-content-card .skin-art { height:46px; }
}
.battle-label { display:block; margin:18px 0 8px; color:#a8988e; font-size:9px; font-weight:850; letter-spacing:.12em; }
.battle-choice-row { display:flex; flex-wrap:wrap; gap:8px; }
.battle-choice { min-width:72px; padding:10px 14px; border:1px solid rgba(241,226,203,.09); border-radius:5px; background:#352b25; color:#cec3bb; font-size:12px; font-weight:750; cursor:pointer; }
.battle-choice.active { border-color:#e7b65e; background:rgba(231,182,94,.13); color:#f2cd77; box-shadow:inset 0 0 14px rgba(231,182,94,.08); }
.battle-start { width:100%; min-height:42px; background:linear-gradient(180deg,#f4ca70,#dc9e3b); color:#23190c; }
.battle-arena { margin:18px; padding:14px; border:1px solid rgba(241,226,203,.08); border-radius:8px; background:#29211c; }
.battle-score { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:12px; border-radius:6px; background:linear-gradient(90deg,rgba(231,182,94,.14),rgba(231,182,94,.04)); }
.battle-score b { color:#f2cc74; font-size:12px; letter-spacing:.04em; }
.battle-score span { color:#f4f0ed; font-size:13px; font-weight:850; }
.battle-score i { padding:0 6px; color:#a3958c; font-size:10px; font-style:normal; }
.battle-teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.battle-team { min-width:0; padding:10px; border:1px solid rgba(241,226,203,.07); border-radius:6px; background:#302620; }
.battle-team h4 { margin:0 0 8px; color:#b3a69d; font-size:9px; letter-spacing:.12em; }
.battle-player { margin-top:7px; padding:9px; border:1px solid rgba(241,226,203,.06); border-radius:5px; background:#352b25; }
.battle-player header { display:flex; align-items:center; gap:7px; }
.battle-avatar { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:#473b34; font-size:13px; }
.battle-player header b { overflow:hidden; color:#e8e1dc; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.battle-player header strong { margin-left:auto; color:#f1cf7c; font-size:11px; white-space:nowrap; }
.battle-drops { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.battle-drop { display:grid; width:46px; height:43px; place-items:center; overflow:hidden; border-radius:4px; background:radial-gradient(circle,var(--case-glow),#392f29 72%); }
.battle-drop .skin-art { display:grid; width:100%; height:100%; place-items:center; }
.battle-drop .skin-art img { width:90%; height:90%; object-fit:contain; }
.battle-again { display:block; margin:14px auto 0; }
.battle-spin-status { margin:0 0 12px; color:#edc96f; font-size:12px; font-weight:800; text-align:center; }
.battle-drop-spin { perspective:360px; animation:battleDropReveal .72s cubic-bezier(.2,.85,.25,1) both; animation-delay:var(--drop-delay,0ms); }
.battle-drop-spin .skin-art { animation:battleCardSpin .72s cubic-bezier(.18,.72,.2,1) both; animation-delay:var(--drop-delay,0ms); backface-visibility:hidden; }
.battle-drop-static { animation:none; }
@keyframes battleDropReveal { from { opacity:0; transform:translateY(-10px) scale(.8); filter:brightness(1.8); } to { opacity:1; transform:translateY(0) scale(1); filter:brightness(1); } }
@keyframes battleCardSpin { from { transform:rotateY(720deg) scale(.78); } to { transform:rotateY(0) scale(1); } }
@media(max-width:540px) { .battle-setup { margin:10px; padding:14px; } .battle-choice { flex:1 1 54px; min-width:0; padding:9px 7px; } .battle-teams { grid-template-columns:1fr; } .battle-arena { margin:10px; padding:9px; } .battle-score { align-items:flex-start; flex-direction:column; } }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(10,6,4,.78); backdrop-filter: blur(8px); animation: fadeIn .18s ease; }
.modal-backdrop.hidden { display: none; }
.hidden { display: none !important; }
.modal { position: relative; width: min(700px, 100%); max-height: min(90vh, 860px); overflow-y: auto; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: riseIn .2s ease; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--raise); color: #d9c9b2; font-size: 22px; line-height: 1; cursor: pointer; }
.modal-head { display: flex; align-items: center; gap: 14px; margin: 0 40px 22px 0; }
.modal-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(231,182,94,.16); color: var(--caramel-2); font-size: 22px; }
.modal-head h2 { margin: 0; font-family: var(--display); font-size: 24px; }
.modal-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.profile-bg-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.picture-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar, .profile-orbit { position: relative; overflow: hidden; }
.profile-button > .face { position: relative; width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.profile-coin { display: block; width: 100%; height: 100%; object-fit: contain; }
.profile-preview { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.profile-orbit { flex: 0 0 62px; width: 62px; height: 62px; display: grid; place-items: center; padding: 7px; border: 1px solid rgba(231,182,94,.38); border-radius: 50%; background: rgba(231,182,94,.08); }
.profile-orbit .profile-coin { width: 100%; height: 100%; }
.profile-preview h3 { margin: 0 0 4px; }
.profile-preview p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-avatar-options { display: grid; grid-template-columns: repeat(2, minmax(70px, 92px)) 1fr; align-items: stretch; gap: 9px; margin-top: 12px; }
.profile-avatar-choice { min-height: 78px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--foam); font-size: 11px; font-weight: 700; cursor: pointer; }
.profile-avatar-choice img { width: 42px; height: 42px; object-fit: contain; }
.profile-avatar-choice.selected { border-color: var(--caramel); box-shadow: inset 0 0 0 1px rgba(231,182,94,.25); }
.profile-avatar-options > .secondary-action { align-self: center; }
.leaderboard-table { display:grid; gap:6px; max-width:900px; margin:0 auto; }
.leader-row { display:grid; grid-template-columns:72px minmax(0,1fr) minmax(150px,220px); align-items:center; gap:14px; min-height:52px; padding:9px 15px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.leader-row > b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leader-row > strong { color:var(--caramel-2); text-align:right; font-variant-numeric:tabular-nums; }
.leader-row.leader-heading { min-height:38px; border:0; background:transparent; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.leader-row.leader-heading > :last-child { text-align:right; }
.leader-row.your-row { border-color:rgba(231,182,94,.5); background:rgba(231,182,94,.08); }
.rank-medal { color:var(--caramel-2); font-weight:800; }
.leaderboard-note { max-width:900px; margin:14px auto 0; color:var(--muted); font-size:12px; text-align:center; }
.leaderboard-gate, .leaderboard-setup, .leaderboard-empty { max-width:650px; margin:10px auto; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--muted); text-align:center; }
.leaderboard-gate b, .leaderboard-setup b { color:var(--foam); }
.leaderboard-gate p, .leaderboard-setup p { margin:8px 0; }
.leaderboard-gate .primary-action { max-width:240px; }
.leaderboard-more { display:block; margin:16px auto 0; }
.game-panel { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.bet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.bet-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.bet-control { display: flex; align-items: center; gap: 6px; }
.bet-control input { width: 100px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--foam); font-weight: 700; text-align: right; }
.bet-adjust { height: 34px; padding: 0 11px; border: 0; border-radius: 99px; background: var(--raise); color: #e6d6bd; font-size: 12px; font-weight: 700; cursor: pointer; }
.bet-adjust:hover { background: #46352a; }
.bet-adjust:disabled, .bet-control input:disabled { cursor: default; opacity: .62; }
.virtual-note { color: var(--muted); font-size: 12px; }
.primary-action { width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 12px; background: var(--caramel); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.primary-action:hover:not(:disabled) { background: var(--caramel-2); }
.primary-action:disabled { opacity: .4; cursor: not-allowed; }
.secondary-action { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); color: #e6d6bd; font-size: 13px; font-weight: 700; cursor: pointer; }
.game-message { min-height: 20px; margin-top: 12px; color: #cbbba3; text-align: center; font-size: 13px; }
.game-message.win { color: var(--steam); }
.game-message.lose { color: var(--berry); }
.coin-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coin-choice button { min-height: 135px; display: grid; place-items: center; gap: 6px; border: 2px solid transparent; border-radius: 16px; background: var(--panel); cursor: pointer; }
.coin-choice button.selected { border-color: var(--caramel); background: var(--panel-2); }
.coin-choice button span:first-child { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--caramel); color: var(--ink); font-size: 24px; }
.coin-choice button:nth-child(2) span:first-child { background: var(--steam); }
.coin-choice b { font-size: 13px; }
.coin-result { min-height: 116px; display: grid; place-items: center; text-align: center; }
.coin-result .big-coin { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--caramel); color: var(--ink); font-size: 28px; animation: coinFlip .75s ease; }
.coin-result .big-coin.blue { background: var(--steam); }
.mine-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 390px; margin: 18px auto; }
.mine-cell { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--raise); color: #cbbba3; font-size: 20px; cursor: pointer; transition: transform .12s, background .12s; }
.mine-cell:hover:not(:disabled) { background: #46352a; transform: translateY(-2px); }
.mine-cell:disabled { cursor: default; }
.mine-cell.safe { background: rgba(124,196,168,.22); color: var(--steam); }
.mine-cell.bomb { background: rgba(217,102,122,.24); color: var(--berry); }
.mine-stats { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.mine-stats b { color: var(--foam); }
.mine-settings { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; color: var(--muted); font-size: 12px; }
.mine-settings select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.bust-stage { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(20,14,10,.5), rgba(20,14,10,.82)), url(bust-rocket.png) center / cover no-repeat, var(--panel); }
.bust-stage::before { content: ''; position: absolute; inset: 24px 28px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 33px, rgba(241,226,203,.05) 34px 35px); }
.bust-multiplier { z-index: 1; font-family: var(--display); color: var(--steam); font-size: 64px; font-weight: 800; }
.bust-rocket { position: absolute; z-index: 1; left: 18%; bottom: 15%; font-size: 30px; transform: rotate(-30deg); transition: left .15s, bottom .15s; }
.bust-stage.crashed .bust-multiplier { color: var(--berry); }
.bust-note { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.info-panel { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.info-panel h3 { margin: 0 0 8px; font-family: var(--display); font-size: 16px; }
.info-panel p { margin: 0; color: #cbbba3; font-size: 13px; line-height: 1.6; }
.info-list { display: grid; gap: 8px; margin-top: 16px; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--panel); color: #cbbba3; font-size: 13px; }
.info-row b { color: var(--foam); }
.refill-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.refill-option { min-height: 88px; display: grid; place-items: center; padding: 10px; border: 2px solid transparent; border-radius: 14px; background: var(--panel-2); cursor: pointer; }
.refill-option:hover { border-color: var(--caramel); }
.refill-option b { color: var(--caramel-2); font-family: var(--display); font-size: 18px; }
.refill-option small { color: var(--muted); font-size: 11px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 26px; max-width: min(90vw, 440px); padding: 13px 18px; border-radius: 99px; background: var(--foam); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: 0 15px 35px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes coinFlip { 0% { transform: rotateY(0) scale(.75); } 45% { transform: rotateY(540deg) scale(1.14); } 100% { transform: rotateY(1080deg) scale(1); } }
@keyframes spin { to { transform: rotate(1440deg); } }

@media (max-width: 1300px) { .event-badge, .leaderboard-link { display: none; } .topbar { gap: 14px; } }
@media (max-width: 1100px) {
  .demo-tag { display: none; } .sidebar { width: 250px; } .main-content { margin-left: 250px; }
  .game-grid { grid-auto-rows: 145px; } .hero-copy { padding-left: 38px; } .withdraw-button span { display: none; }
}
@media (max-width: 900px) {
  .game-grid, .reward-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .game-card.wide { grid-column: span 2; } .hero-copy { width: 70%; } .hero-art { opacity: .6; left: 50%; }
  .nav-rewards, .notification-button { display: none; }
}
@media (max-width: 720px) {
  .app-shell { padding-top: 64px; padding-bottom: 54px; }
  .topbar { height: 64px; padding: 0 12px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; font-size: 18px; } .brand-word { font-size: 20px; }
  .main-nav { margin-left: auto; flex: 0 1 auto; } .main-nav .nav-icon, .main-nav .nav-button { display: none; }
  .main-nav .games-nav-wrap > .nav-button { display: block; height: 38px; padding: 0 12px; background: var(--panel-2); }
  .games-dropdown { left: auto; right: -100px; max-width: calc(100vw - 24px); overflow-x: auto; }
  .balance-pill { height: 38px; padding: 0 10px; } .balance-pill small, .withdraw-button { display: none; }
  .deposit-button { width: 38px; height: 38px; padding: 0; font-size: 0; } .deposit-button span { font-size: 20px; }
  .profile-button { max-width: 118px; width: auto; height: 38px; font-size: 17px; padding-right: 9px; }
  .guest-account { height: 36px; gap: 4px; padding-left: 8px; font-size: 10px; }
  .guest-account button { height: 28px; padding: 0 8px; font-size: 10px; }
  .sidebar { inset: auto 0 0; width: auto; height: 52px; flex-direction: row; align-items: center; padding: 6px 14px; border-right: 0; border-top: 1px solid var(--line); }
  .social-row, .rain-card, .chat-auth, .chat-messages, .chat-entry, .chat-footer, .chat-edge-toggle { display: none; }
  .sidebar::before { content: '💬 English Chat'; flex: 1; color: #d9c9b2; font-size: 13px; }
  .sidebar::after { content: none; }
  .mobile-online-count { position: fixed; z-index: 32; right: 14px; bottom: 67px; display: flex; align-items: center; gap: 6px; color: var(--steam); font-size: 12px; }
  .mobile-online-count i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--steam); }
  .main-content { margin-left: 0; padding: 18px 14px 28px; }
  .welcome-row h1 { font-size: 20px; } .hero-banner { min-height: 250px; }
  .hero-copy { width: 86%; padding: 28px 0 34px 24px; } .hero-copy p { font-size: 13px; max-width: 230px; }
  .hero-art { opacity: .3; } .section-block { margin-top: 28px; }
  .game-grid { gap: 10px; grid-auto-rows: 130px; } .reward-grid { gap: 10px; } .game-card { padding: 12px; }
  .card-label { font-size: 15px; } .card-subtitle { font-size: 11px; }
  .modal { padding: 22px 16px 18px; } .bet-row { align-items: flex-start; flex-direction: column; }
  .bet-control { width: 100%; } .bet-control input { flex: 1; } .page-footer { flex-direction: column; }
}

/* ===== Gold-Veredelung ===== */
body { background: radial-gradient(ellipse at 70% -10%, rgba(231,182,94,.12), transparent 50%), var(--bg); }
.brand-mark { width: 42px; height: 42px; display: block; border-radius: 0; background: none; filter: drop-shadow(0 3px 8px rgba(231,182,94,.4)); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.brand:hover .brand-mark { transform: rotate(-14deg) scale(1.1); }
.brand-word span { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Gold-Buttons mit Glanz-Effekt */
.deposit-button, .join-rain, .primary-action, .chat-entry button, .hero-cta {
  position: relative; overflow: hidden; border: 0; background: var(--gold-grad); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,70,20,.35), 0 6px 18px rgba(231,182,94,.22);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.deposit-button::after, .join-rain::after, .primary-action::after, .chat-entry button::after, .hero-cta::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-130%); transition: transform .65s;
}
.deposit-button:hover, .join-rain:hover, .primary-action:hover:not(:disabled), .chat-entry button:hover, .hero-cta:hover {
  background: var(--gold-grad); filter: brightness(1.05); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(120,70,20,.35), 0 10px 26px rgba(231,182,94,.4);
}
.deposit-button:hover::after, .join-rain:hover::after, .primary-action:hover::after, .chat-entry button:hover::after, .hero-cta:hover::after { transform: translateX(130%); }
.deposit-button:active, .join-rain:active, .primary-action:active, .chat-entry button:active, .hero-cta:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(120,70,20,.4); }
.primary-action { min-height: 52px; font-size: 15px; letter-spacing: .01em; }
.hero-cta { padding: 14px 24px; }

/* dunkle Buttons mit Gold-Kante */
.withdraw-button, .bet-adjust, .secondary-action, .modal-close, .rain-top button, .social-row > button {
  background: linear-gradient(180deg, #43342a, #2e231b); border: 1px solid rgba(231,182,94,.2);
  box-shadow: inset 0 1px 0 rgba(241,226,203,.07); transition: border-color .15s, box-shadow .2s, transform .15s, color .15s;
}
.withdraw-button:hover, .bet-adjust:hover, .secondary-action:hover, .modal-close:hover, .rain-top button:hover, .social-row > button:hover {
  background: linear-gradient(180deg, #4e3d31, #34281f); border-color: rgba(231,182,94,.7); color: var(--caramel-2); box-shadow: 0 0 16px rgba(231,182,94,.18); transform: translateY(-1px);
}
.nav-rewards { color: var(--caramel-2); }
.nav-icon.active { box-shadow: inset 0 -2px 0 var(--caramel); }
.balance-pill { border-color: rgba(231,182,94,.3); background: linear-gradient(180deg, #2d2118, #211812); box-shadow: 0 0 18px rgba(231,182,94,.08); }
.gem { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.profile-button { background: var(--gold-grad); }

/* Hero */
.hero-banner { background: radial-gradient(ellipse at 78% 50%, rgba(231,182,94,.35), transparent 55%), linear-gradient(115deg, #2a1c12 0%, #3b2915 60%, #4f3417 100%); box-shadow: inset 0 0 0 1px rgba(231,182,94,.2); }
.hero-copy h2 span { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.moon { background: radial-gradient(circle at 35% 30%, #fff0c5, #e7b65e 55%, #b97732); box-shadow: 0 0 80px rgba(231,182,94,.45); }
.crate-back { background: var(--gold-grad); color: var(--ink); box-shadow: 0 24px 40px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6); }
.crate-front { background: linear-gradient(145deg, #6a4524, #3f2814); border-color: var(--caramel); }
.crate-front span { width: 72px; height: 72px; font-size: 0; background: url(coin-gold.svg) center/contain no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.hero-spark { color: #fff0c5; text-shadow: 0 0 16px rgba(231,182,94,.8); }

/* Karten */
.game-card, .reward-card { box-shadow: inset 0 1px 0 rgba(241,226,203,.06); }
.game-card::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(247,217,148,.22) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s; }
.game-card:hover::after { transform: translateX(120%); }
.game-card:hover, .reward-card:hover { border-color: rgba(231,182,94,.7); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 26px rgba(231,182,94,.16); }
.game-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 85% 100%, rgba(231,182,94,.22), transparent 55%); }
.coin-art i, .coin-art b { font-size: 0; background: url(coin-silver.svg) center/contain no-repeat; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.coin-art b { background-image: url(coin-gold.svg); }
.reward-stamp { background: var(--gold-grad); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.modal { border-color: rgba(231,182,94,.25); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(231,182,94,.08); }
.modal-icon { background: var(--gold-grad); color: var(--ink); }
.refill-option:hover { box-shadow: 0 0 20px rgba(231,182,94,.25); }
.toast { background: var(--gold-grad); }

/* Coinflip: klare Draufsicht mit sichtbarem Hochwurf und federnder Landung. */
.coin-stage { position: relative; height: 290px; display: grid; place-items: center; perspective: 900px; perspective-origin: 50% 42%; margin: 0 0 4px; }
.coin-table { position: relative; width: 160px; height: 160px; transform-style: preserve-3d; }
.coin-shadow, .coin-ring { position: absolute; border-radius: 50%; transform: translateZ(-5px); }
.coin-shadow { inset: 14px; background: radial-gradient(ellipse, rgba(0,0,0,.72) 38%, rgba(0,0,0,.35) 57%, transparent 74%); filter: blur(2px); }
.coin-ring { inset: 0; border: 2px solid rgba(231,182,94,.72); opacity: 0; }
.coin-stage.landed .coin-ring { animation: landRing .72s cubic-bezier(.15,.7,.28,1) both; }
.coin-toss { position: absolute; inset: 15px; transform-style: preserve-3d; will-change: transform; }
.coin-stage.tossing .coin-toss { animation: coinLift 2.2s cubic-bezier(.18,.68,.22,1) both; }
.coin-stage.tossing .coin-shadow { animation: coinShadow 2.2s cubic-bezier(.18,.68,.22,1) both; }
.coin3d { position: absolute; inset: 0; transform: rotateX(0deg); transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(.12,.72,.2,1); will-change: transform; }
.coin-face, .coin-edge { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.coin-face { backface-visibility: hidden; }
.coin-face.front { transform: translateZ(5px); }
.coin-face.back { transform: rotateX(180deg) translateZ(5px); }
.coin-edge { inset: 4%; width: 92%; height: 92%; }
.coin-edge.g { background: repeating-conic-gradient(#f3cb74 0 2.5deg, #a8692a 2.5deg 5deg); }
.coin-edge.s { background: repeating-conic-gradient(#efebe6 0 2.5deg, #91897d 2.5deg 5deg); }
.coin-edge.m { background: #5a3d1c; }
.coin-choice button span:first-child, .coin-choice button:nth-child(2) span:first-child { width: 72px; height: 72px; background: none; border-radius: 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.coin-choice button span:first-child img { width: 100%; height: 100%; display: block; }
.coin-choice button { background: linear-gradient(180deg, #2f241b, #211812); transition: border-color .2s, box-shadow .2s, transform .15s; }
.coin-choice button:hover:not(:disabled) { transform: translateY(-2px); }
.coin-choice button:hover:not(:disabled) span:first-child { transform: rotate(-10deg) scale(1.08); }
.coin-choice button.selected { border-color: var(--caramel); background: linear-gradient(180deg, #3a2b1d, #261b12); box-shadow: 0 0 26px rgba(231,182,94,.25), inset 0 0 0 1px rgba(247,217,148,.15); }
.coin-choice button:disabled { cursor: default; opacity: .75; }
.coin-result { min-height: 0; }
.coin-result b { font-size: 15px; }
@keyframes coinLift {
  0% { transform: translate3d(0,0,0) scale(1); }
  12% { transform: translate3d(0,-5px,18px) scale(1.04); }
  38% { transform: translate3d(0,-29px,74px) scale(1.1); }
  60% { transform: translate3d(0,-25px,63px) scale(1.08); }
  81% { transform: translate3d(0,-3px,10px) scale(1.01); }
  88% { transform: translate3d(0,0,0) scale(.98); }
  94% { transform: translate3d(0,-6px,10px) scale(1.01); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes coinShadow {
  0%, 100% { transform: translateZ(-5px) scale(1); opacity: .92; }
  38%, 60% { transform: translateZ(-5px) scale(.55); opacity: .34; }
  88% { transform: translateZ(-5px) scale(1.08,.84); opacity: 1; }
  94% { transform: translateZ(-5px) scale(.82,.72); opacity: .72; }
}
@keyframes landRing { 0% { transform: translateZ(-5px) scale(.72); opacity: .7; } 100% { transform: translateZ(-5px) scale(1.62); opacity: 0; } }

/* Detaillierte Münzseiten mit der Draufsicht aus dem Coinflip. */
.coin-choice button span:first-child, .coin-choice button:nth-child(2) span:first-child { filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.coin-choice button.selected { box-shadow: 0 0 15px rgba(231,182,94,.14), inset 0 0 0 1px rgba(247,217,148,.12); }
.modal.coinflip-modal { width: min(720px, 100%); padding: 0; border-color: rgba(208,202,193,.16); border-radius: 10px; background: #211b17; }
.modal.coinflip-modal .modal-close { display: none; }
.coinflip-modal .game-panel { padding: 15px; }
.cf-result-view { margin: 2px 0 14px; border: 1px solid rgba(208,202,193,.14); border-radius: 14px; overflow: hidden; background: #211b17; }
.cf-result-top { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid rgba(208,202,193,.1); color: #bcb2a9; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.cf-entry-note { padding: 10px 15px; color: #c6bdb2; font-size: 11px; }
.cf-entry-intro { margin: -4px 0 12px; border: 1px solid rgba(208,202,193,.09); border-radius: 10px; background: rgba(241,226,203,.025); }
.cf-result-top b { letter-spacing: .04em; }
.cf-win { color: #f2ca72; }
.cf-loss { color: #d78b8b; }
.cf-arena { min-height: 196px; display: grid; grid-template-columns: minmax(0,1fr) 176px minmax(0,1fr); align-items: center; gap: 15px; padding: 20px 24px; background: radial-gradient(ellipse at 50% 45%, rgba(219,174,80,.07), transparent 44%), linear-gradient(105deg,#27201c,#2b2420 50%,#27201c); }
.cf-player { min-width: 0; display: flex; align-items: center; gap: 10px; color: #e1dcd7; }
.cf-player-right { justify-content: flex-end; text-align: right; }
.cf-player-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #372f29; font-size: 22px; }
.cf-player > div { min-width: 0; display: grid; gap: 3px; }
.cf-player small, .cf-winner > small, .cf-eyebrow { color: #a89d92; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.cf-player strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cf-player > div > span { color: #c8c0b8; font-size: 10px; }
.cf-player.is-winner .cf-player-avatar { outline: 1px solid rgba(238,191,89,.6); background: #3a3122; }
.cf-player.is-winner > div > span { color: #f0c76d; }
.cf-winner { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.cf-winner-ring { position: relative; width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid #b98b36; border-radius: 50%; background: #2b2420; box-shadow: 0 0 0 5px rgba(185,139,54,.1); font-size: 46px; }
.cf-winner-ring i { position: absolute; right: 1px; bottom: 0; width: 31px; height: 31px; display: block; border-radius: 50%; background: #302824; }
.cf-winner-ring img { width: 100%; height: 100%; display: block; }
.cf-winner > strong { color: #f2f3f5; font-size: 13px; }
.cf-winner > span { color: #afa69d; font-size: 10px; }
.cf-winner > b { color: #f0c76d; font-size: 11px; }
.cf-inventory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border-top: 1px solid rgba(208,202,193,.1); background: rgba(208,202,193,.1); }
.cf-inventory { min-width: 0; padding: 12px 14px 10px; background: #261f1b; }
.cf-inventory.is-winner { background: #1e211f; }
.cf-inventory-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cf-inventory-head > div:first-child { display: grid; gap: 3px; }
.cf-inventory-head strong { color: #eae6e2; font-size: 11px; }
.cf-total { display: grid; gap: 2px; text-align: right; }
.cf-total small { color: #a89d92; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.cf-total b { color: #f2ca72; font-size: 11px; }
.cf-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.cf-item { min-width: 0; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; border: 1px solid rgba(224,217,206,.08); border-radius: 7px; background: linear-gradient(145deg,#332b25,#2c2520); text-align: center; }
.cf-item:nth-child(3n+2) { background: linear-gradient(145deg,#3a3129,#302822); }
.skin-art { width: 48px; height: 40px; display: grid; place-items: center; color: var(--skin-color); }
.skin-art svg { width: 100%; height: 100%; overflow: visible; }
.skin-shape { fill: color-mix(in srgb,var(--skin-color) 70%,#433830); stroke: var(--skin-color); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cf-item small { width: 100%; overflow: hidden; color: #c0b7ae; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cf-item b { color: #e3c980; font-size: 9px; }
.cf-item i { color: #8d8379; font-size: 7px; font-style: normal; letter-spacing: .05em; }
.cf-inventory-foot { display: flex; justify-content: space-between; margin-top: 8px; color: #a49a90; font-size: 9px; }
@media (max-width: 680px) {
  .modal.coinflip-modal { padding: 14px; }
  .cf-arena { grid-template-columns: 1fr 116px 1fr; gap: 7px; padding: 15px 9px; }
  .cf-player { gap: 6px; }
  .cf-player-avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 18px; }
  .cf-player small { font-size: 7px; }
  .cf-player strong { font-size: 11px; }
  .cf-player > div > span { font-size: 8px; }
  .cf-winner-ring { width: 76px; height: 76px; font-size: 36px; }
  .cf-inventory-grid { grid-template-columns: 1fr; }
  .cf-items { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Coinflip room: room chrome and inventory layout based on the in-game reference. */
.cf-room { overflow: hidden; border: 1px solid rgba(208,202,193,.13); border-radius: 12px; background: #211b17; }
.cf-room-topbar { min-height: 42px; display: flex; align-items: center; gap: 15px; padding: 0 13px; border-bottom: 1px solid rgba(208,202,193,.12); background: #261f1b; color: #c0b6ae; font-size: 9px; font-weight: 750; }
.cf-room-back { padding: 0; border: 0; background: none; color: #d2cbc4; font: inherit; cursor: pointer; white-space: nowrap; }
.cf-room-back:hover { color: #fff; }
.cf-room-viewers { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cf-room-viewers i { width: 7px; height: 7px; border-radius: 50%; background: #e5ba5f; box-shadow: 0 0 7px rgba(229,186,95,.4); }
.cf-room-id { margin-left: auto; color: #a4998f; font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.cf-room-links { display: flex; gap: 12px; color: #c9c0b7; white-space: nowrap; }
.cf-live-arena { min-height: 216px; grid-template-columns: minmax(0,1fr) 190px minmax(0,1fr); padding: 15px 22px; background: radial-gradient(ellipse at 50% 48%, rgba(219,174,80,.075), transparent 48%), linear-gradient(105deg,#27201b,#2c2520 50%,#27201b); }
.cf-live-player { position: relative; }
.cf-live-center { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.cf-live-vs { color: #887f77; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.cf-live-center #cfStageMount { width: 100%; }
.cf-live-center .coin-stage { width: 100%; height: 155px; margin: 0; }
.cf-live-center .coin-table { width: 126px; height: 126px; }
.cf-live-center .coin-toss { inset: 12px; }
.cf-choice-dock { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-top: 1px solid rgba(208,202,193,.1); border-bottom: 1px solid rgba(208,202,193,.1); background: #261f1b; }
.cf-choice-status { color: #c1b7ae; font-size: 9px; font-weight: 850; letter-spacing: .1em; white-space: nowrap; }
.cf-live-choice { display: flex; grid-template-columns: none; gap: 8px; margin: 0; }
.cf-live-choice button { min-height: 38px; display: flex; grid-template-columns: none; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px; border: 1px solid rgba(208,202,193,.15); border-radius: 7px; background: #322a24; }
.cf-live-choice button span:first-child, .cf-live-choice button:nth-child(2) span:first-child { width: 25px; height: 25px; filter: none; }
.cf-live-choice button b { color: #ddd7d1; font-size: 9px; }
.cf-live-choice button.selected { border-color: rgba(231,182,94,.6); background: #332a1e; box-shadow: inset 0 0 0 1px rgba(247,217,148,.08); }
.cf-room .cf-inventory-grid { border-top: 0; }
.cf-room .cf-inventory { padding: 11px 12px 9px; }
.cf-room .cf-item { min-height: 88px; }
.cf-room-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid rgba(208,202,193,.1); background: #261f1b; }
.cf-room-footer .game-message { margin: 0; font-size: 10px; text-align: left; }
.cf-room-footer .primary-action { width: auto; min-width: 190px; margin: 0; padding: 11px 16px; }
.cf-result-center { gap: 5px; }
.cf-result-label { color: #e4bb61; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.cf-result-center .cf-winner-ring { width: 104px; height: 104px; font-size: 47px; }
.cf-final-arena .cf-winner-ring { animation: winnerReveal .46s cubic-bezier(.2,.85,.28,1.25) both; }
.cf-final-arena .cf-winner-ring i { animation: badgeReveal .38s cubic-bezier(.2,.85,.28,1.25) .08s both; }
.cf-result-center > strong { color: #f2f3f5; font-size: 13px; }
.cf-result-center > span:not(.cf-result-label) { color: #afa69d; font-size: 9px; }
.cf-result-center > b { color: #f0c76d; font-size: 10px; }

@media (min-width: 541px) and (max-width: 680px) {
  .cf-room .cf-inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cf-room .cf-items { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cf-live-arena { grid-template-columns: minmax(0,1fr) 116px minmax(0,1fr); gap: 7px; padding: 13px 9px; }
  .cf-live-center .coin-stage { height: 128px; }
  .cf-live-center .coin-table { width: 108px; height: 108px; }
}
@media (max-width: 540px) {
  .cf-room-topbar { gap: 8px; padding: 0 9px; }
  .cf-room-viewers { display: none; }
  .cf-room-links { gap: 7px; }
  .cf-room-links span:first-child { display: none; }
  .cf-live-arena { grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr); gap: 4px; padding: 12px 7px; }
  .cf-live-player { gap: 4px; }
  .cf-live-player .cf-player-avatar { flex-basis: 26px; width: 26px; height: 26px; font-size: 15px; }
  .cf-live-player small { font-size: 6px; }
  .cf-live-player strong { font-size: 9px; }
  .cf-live-player > div > span { font-size: 7px; }
  .cf-live-center .coin-stage { height: 100px; }
  .cf-live-center .coin-table { width: 84px; height: 84px; }
  .cf-live-center .coin-toss { inset: 8px; }
  .cf-choice-dock { align-items: flex-start; flex-direction: column; gap: 7px; }
  .cf-room .cf-inventory-grid { grid-template-columns: 1fr; }
  .cf-room-footer { grid-template-columns: 1fr; gap: 8px; }
  .cf-room-footer .primary-action { width: 100%; }
}

/* Coinflip hub and create flow from the supplied in-game reference. */
main.coinflip-lobby { min-height: calc(100vh - 72px); padding-top: 22px; }
.cf-lobby-page { min-height: calc(100vh - 120px); overflow: hidden; border: 1px solid rgba(216,204,194,.08); border-radius: 14px; background: radial-gradient(ellipse at 50% 35%, rgba(108,86,65,.15), transparent 53%), linear-gradient(180deg, rgba(27,20,15,.93), rgba(37,29,24,.98)); }
.cf-lobby-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px; border-bottom: 1px solid rgba(220,212,202,.1); }
.cf-lobby-title h1 { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; color: #f0eae5; font-size: 18px; font-weight: 850; }
.cf-lobby-title h1 span { color: #c4b8ae; font-size: 19px; }
.cf-lobby-title small { color: #a2968b; font-size: 9px; }
.cf-lobby-actions { display: flex; align-items: center; gap: 10px; }
.cf-back-home, .cf-backpack-button, .cf-create-button { min-height: 34px; padding: 0 13px; border: 1px solid rgba(217,207,196,.13); border-radius: 6px; background: #342b25; color: #dad3cb; font-size: 10px; font-weight: 800; cursor: pointer; }
.cf-back-home { margin-right: 5px; padding: 0; border: 0; background: none; color: #beb4aa; }
.cf-create-button { border-color: #63b879; background: #50ae69; color: #13251a; }
.cf-create-button:hover { background: #62c17b; }
.cf-history-row { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid rgba(220,212,202,.08); }
.cf-history-row > b { flex: 0 0 auto; color: #ada196; font-size: 9px; }
.cf-history-list { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.cf-history-coin { flex: 0 0 16px; width: 16px; height: 16px; opacity: .9; }
.cf-history-coin.is-gold { filter: saturate(1.2); }
.cf-active-flips { min-height: 310px; padding: 22px 20px; }
.cf-active-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 12px; border-bottom: 1px solid rgba(220,212,202,.08); }
.cf-active-head > div { display: grid; gap: 4px; }
.cf-active-head small { color: #a5998d; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.cf-active-head h2 { margin: 0; color: #e6dfd8; font-size: 14px; }
.cf-live-indicator { display: flex; align-items: center; gap: 6px; color: #ada196; font-size: 9px; }
.cf-live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #70c284; box-shadow: 0 0 8px rgba(112,194,132,.5); }
.cf-lobby-empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #a3988d; text-align: center; }
.cf-empty-coin { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 3px; border: 1px solid rgba(207,193,178,.16); border-radius: 50%; background: rgba(168,152,136,.06); color: #a09387; font-size: 27px; }
.cf-lobby-empty strong { color: #d6cec6; font-size: 12px; }
.cf-lobby-empty span { font-size: 10px; }
.cf-lobby-empty .cf-create-button { margin-top: 5px; }
.modal.coinflip-create-modal { width: min(650px, 100%); padding: 18px; border-color: rgba(215,202,190,.12); border-radius: 8px; background: #28211c; }
.coinflip-create-modal .modal-close { z-index: 2; top: 10px; right: 11px; width: 26px; height: 26px; border-radius: 5px; background: #38302a; color: #cac0b6; font-size: 17px; }
.cf-create-dialog { position: relative; min-height: 465px; padding: 6px 0 40px; color: #e2dcd6; }
.cf-create-title { margin: 0 0 8px; color: #d9d2cb; font-size: 10px; font-weight: 850; }
.cf-source-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.cf-source-tabs button { min-height: 34px; padding: 0 8px; border: 1px solid rgba(210,198,186,.11); border-radius: 5px; background: #26201b; color: #c2b7ae; font-size: 9px; font-weight: 750; cursor: pointer; }
.cf-source-tabs button.selected { border-color: rgba(227,219,210,.26); background: #504a44; color: #f1f3f5; }
.cf-create-body { min-height: 318px; }
.cf-create-body.is-gems { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 38px; }
.cf-create-balance { min-width: 210px; display: flex; justify-content: space-between; gap: 20px; padding: 10px 13px; border-radius: 4px; background: #372e29; color: #c0b6ae; font-size: 9px; font-weight: 750; }
.cf-create-balance b { color: #f5f2ee; }
.cf-create-balance i { color: #68e986; font-style: normal; }
.cf-big-gem { position: relative; width: 112px; height: 90px; display: grid; place-items: center; margin: 16px 0 20px; color: #58e879; filter: drop-shadow(0 7px 9px rgba(41,220,89,.18)); }
.cf-big-gem span { z-index: 1; font-size: 76px; line-height: 1; color: #57ed77; text-shadow: 0 2px 0 #a0ff9e, 0 0 12px rgba(69,255,105,.3); }
.cf-big-gem::before { position: absolute; inset: 7px 15px 6px; content: ''; clip-path: polygon(15% 0,85% 0,100% 25%,50% 100%,0 25%); background: linear-gradient(145deg,#b5ff96 0 22%,#62f56a 22% 48%,#18c34e 48% 70%,#7dff86 70%); }
.cf-big-gem i { position: absolute; width: 23px; height: 21px; background: #3fbb56; opacity: .75; clip-path: polygon(0 20%,70% 0,100% 65%,40% 100%); }
.cf-big-gem i:first-child { top: 20px; left: 3px; transform: rotate(25deg); }
.cf-big-gem i:last-child { right: 4px; bottom: 8px; transform: rotate(180deg); }
.cf-bet-label { align-self: flex-start; margin: 0 0 -1px max(calc((100% - 210px) / 2), 0px); padding: 3px 6px; border-radius: 3px 3px 0 0; background: #433933; color: #bdb3ab; font-size: 8px; font-weight: 750; }
.cf-bet-line { width: 210px; min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 3px 5px; border: 1px solid rgba(220,211,201,.17); border-radius: 6px; background: #241e19; }
.cf-gem-small { color: #60e97b; font-size: 15px; }
.cf-bet-line input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #efebe5; font-size: 11px; font-weight: 800; }
.cf-bet-line button { min-width: 30px; height: 23px; padding: 0 5px; border: 1px solid rgba(214,204,194,.12); border-radius: 4px; background: #322a24; color: #cac1b8; font-size: 8px; font-weight: 800; cursor: pointer; }
.cf-bet-slider { width: 210px; height: 12px; margin-top: 12px; accent-color: #f5f2ef; cursor: pointer; }
.cf-side-picks { position: absolute; right: 154px; bottom: 12px; display: flex; gap: 10px; }
.cf-side-picks button { width: 32px; height: 32px; padding: 2px; border: 1px solid transparent; border-radius: 50%; background: transparent; opacity: .7; cursor: pointer; }
.cf-side-picks button.selected { border-color: rgba(231,182,94,.55); background: #342e2a; opacity: 1; }
.cf-side-picks img { width: 100%; height: 100%; display: block; }
.cf-create-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.cf-create-total { display: inline-flex; align-items: center; gap: 5px; padding: 9px 11px; border-radius: 4px; background: #38302b; color: #bcb2aa; font-size: 9px; font-weight: 800; }
.cf-create-total b { color: #f5f2ee; }
.cf-create-total b:first-letter { color: #67ed81; }
.cf-create-submit { min-width: 108px; min-height: 36px; padding: 0 17px; border: 0; border-radius: 4px; background: #50b467; color: #102719; font-size: 10px; font-weight: 900; cursor: pointer; }
.cf-create-submit:hover:not(:disabled) { background: #64c77a; }
.cf-create-submit:disabled { opacity: .4; cursor: not-allowed; }
.cf-create-note { position: absolute; left: 0; bottom: 0; margin: 0; color: #897e72; font-size: 8px; }
.cf-inventory-picker-head { display: flex; justify-content: space-between; margin: 20px 0 10px; color: #beb4aa; font-size: 9px; }
.cf-inventory-picker-head b { color: #d6bf78; }
.cf-select-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.cf-select-item { min-width: 0; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border: 1px solid rgba(215,202,190,.12); border-radius: 6px; background: #332b25; cursor: pointer; }
.cf-select-item.selected { border-color: #d8b55a; background: #332e20; box-shadow: 0 0 0 1px rgba(216,181,90,.17); }
.cf-select-item .skin-art { width: 45px; height: 42px; }
.cf-select-item small { width: 100%; overflow: hidden; color: #c8beb4; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.cf-select-item b { color: #ead58e; font-size: 8px; }
.cf-backpack-empty { min-height: 318px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #958a7f; text-align: center; }
.cf-backpack-empty > span { color: #928578; font-size: 34px; }
.cf-backpack-empty strong { color: #ded7d0; font-size: 13px; }
.cf-backpack-empty small { font-size: 9px; }
.cf-backpack-empty + .cf-create-submit { display: block; margin: 0 auto 10px; }
.cf-call-panel { width: 170px; display: grid; justify-items: end; gap: 7px; color: #c0b6ae; text-align: right; font-size: 9px; }
.cf-call-panel strong { display: flex; gap: 6px; color: #78e58a; font-size: 11px; }
.cf-call-panel strong span { color: #9f9489; }
.cf-call-panel button { width: 100%; min-height: 35px; border: 0; border-radius: 5px; background: #e9b942; color: #3a2a0e; font-size: 11px; font-weight: 900; cursor: pointer; }
.cf-call-panel button:hover { background: #f4cc64; }
.cf-room #modalClose { display: none; }
.cf-waiting-arena { min-height: 226px; }
.cf-empty-inventory { min-height: 192px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #261f1b; color: #9c9187; font-size: 9px; }
.cf-wait-bars { display: flex; align-items: center; gap: 4px; height: 18px; }
.cf-wait-bars i { width: 3px; height: 8px; border-radius: 2px; background: #c3b8ae; animation: waitPulse .8s ease-in-out infinite alternate; }
.cf-wait-bars i:nth-child(2) { height: 15px; animation-delay: .2s; }
.cf-wait-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes waitPulse { to { opacity: .35; transform: scaleY(.55); } }
@keyframes winnerReveal { 0% { opacity: 0; transform: scale(.68); box-shadow: 0 0 0 0 rgba(185,139,54,0); } 72% { opacity: 1; transform: scale(1.07); box-shadow: 0 0 0 9px rgba(185,139,54,.16); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px rgba(185,139,54,.1); } }
@keyframes badgeReveal { 0% { opacity: 0; transform: rotate(-55deg) scale(.55); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
.cf-active-arena .cf-live-center .coin-stage { height: 190px; }
.cf-flip-status { color: #cac1b8; font-size: 9px; }
.cf-room-mini-items { position: absolute; left: 15px; bottom: -3px; display: flex; gap: 8px; }
.cf-room-mini-items span { width: 27px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(221,210,198,.12); border-radius: 4px; background: #322a23; color: #78b9d9; }
.cf-room-mini-items svg { width: 19px; height: 19px; }
.cf-final-arena { min-height: 220px; }
.cf-result-center .cf-winner-ring { width: 104px; height: 104px; }
.cf-room .cf-result-top { min-height: 34px; }

@media (max-width: 760px) {
  main.coinflip-lobby { padding-top: 12px; }
  .cf-lobby-head { align-items: flex-start; flex-direction: column; }
  .cf-lobby-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .cf-back-home { margin-right: auto; }
  .cf-history-row { align-items: flex-start; flex-direction: column; gap: 7px; padding: 10px 14px; }
  .cf-history-list { width: 100%; }
  .cf-room-topbar { flex-wrap: wrap; }
  .cf-room-id { display: none; }
}
@media (max-width: 540px) {
  .cf-lobby-actions { gap: 6px; }
  .cf-backpack-button, .cf-create-button { padding: 0 9px; }
  .cf-create-dialog { min-height: 440px; }
  .cf-create-body { min-height: 290px; }
  .cf-select-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cf-create-body.is-gems { padding-top: 27px; }
  .cf-side-picks { position: static; justify-content: center; margin: -5px 0 8px; }
  .cf-live-arena { grid-template-columns: minmax(0,1fr) 84px minmax(0,1fr); }
  .cf-call-panel { width: auto; grid-column: 1 / -1; justify-self: center; justify-items: center; }
  .cf-call-panel button { width: 180px; }
}

/* Keep the Coinflip surfaces in Latte.gg's warm gold palette. */
main.coinflip-lobby {
  border-color: rgba(231,182,94,.18);
  background: radial-gradient(ellipse at 50% 35%, rgba(143,93,35,.15), transparent 55%), linear-gradient(180deg,#19150f,#211910 68%,#19150f);
}
.cf-lobby-page {
  border-color: rgba(231,182,94,.18);
  background: radial-gradient(ellipse at 50% 28%, rgba(127,82,30,.16), transparent 57%), linear-gradient(180deg,#17130e 0%,#20190f 56%,#1a150f 100%);
}
.cf-active-flips { background: linear-gradient(180deg,rgba(121,80,33,.07),rgba(26,21,15,.08)); }
.cf-lobby-head, .cf-history-row { background: rgba(31,24,16,.48); }
.cf-lobby-title small, .cf-live-indicator { color: #b09c79; }
.cf-history-row { border-bottom-color: rgba(231,182,94,.15); }
.cf-active-head { border-bottom-color: rgba(231,182,94,.17); }
.cf-lobby-empty { color: #b3a181; }
.cf-lobby-head, .cf-history-row, .cf-active-head { border-color: rgba(231,182,94,.13); }
.cf-lobby-title h1 { color: #f3ead9; }
.cf-lobby-title h1 span { color: var(--caramel); }
.cf-back-home, .cf-backpack-button { color: #d7c6a9; }
.cf-backpack-button, .cf-back-home:not(:hover) { border-color: rgba(231,182,94,.18); }
.cf-backpack-button { background: #2b2218; }
.cf-backpack-button:hover { background: #382a1b; }
.cf-create-button, .cf-create-submit {
  border-color: #c38b3a;
  background: linear-gradient(180deg,#f6d98c,#e7b65e 55%,#c7893c);
  color: #2c1a08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 10px rgba(176,117,42,.14);
}
.cf-create-button:hover:not(:disabled), .cf-create-submit:hover:not(:disabled) { background: linear-gradient(180deg,#ffe5a2,#f0c76f 55%,#d39649); }
.cf-history-row > b, .cf-active-head small { color: #b7a381; }
.cf-active-head h2, .cf-lobby-empty strong { color: #eee3ce; }
.cf-live-indicator i { background: var(--caramel); box-shadow: 0 0 8px rgba(231,182,94,.5); }
.cf-empty-coin { border-color: rgba(231,182,94,.28); background: rgba(231,182,94,.07); color: var(--caramel-2); }
.modal.coinflip-modal, .cf-room { border-color: rgba(231,182,94,.18); background: #19150f; }
.modal.coinflip-create-modal { border-color: rgba(231,182,94,.18); background: #1d1812; }
.cf-room-topbar, .cf-room-footer { border-color: rgba(231,182,94,.13); background: #211a12; }
.cf-room-back:hover, .cf-room-links { color: var(--caramel-2); }
.cf-arena { background: radial-gradient(ellipse at 50% 45%, rgba(219,174,80,.13), transparent 46%), linear-gradient(105deg,#211a13,#2a2117 50%,#211a13); }
.cf-player-avatar { border: 1px solid rgba(231,182,94,.12); background: #30251a; }
.cf-player.is-winner .cf-player-avatar { outline-color: rgba(238,191,89,.75); background: #47351d; }
.cf-inventory, .cf-empty-inventory { background: #1d1812; }
.cf-inventory-grid { border-color: rgba(231,182,94,.13); background: rgba(231,182,94,.13); }
.cf-item { border-color: rgba(231,182,94,.14); background: linear-gradient(145deg,#2d251c,#211b14); }
.cf-item:hover { border-color: rgba(231,182,94,.42); }
.cf-result-top { border-color: rgba(231,182,94,.13); }
.cf-room-mini-items span { border-color: rgba(231,182,94,.2); background: #2c2217; color: var(--caramel-2); }
.cf-create-title, .cf-inventory-picker-head { color: #e0d1b6; }
.cf-source-tabs button { border-color: rgba(231,182,94,.16); background: #211a13; color: #c9b99b; }
.cf-source-tabs button.selected { border-color: rgba(231,182,94,.62); background: linear-gradient(180deg,#4a3820,#342716); color: #ffe9b8; box-shadow: inset 0 0 0 1px rgba(231,182,94,.12); }
.cf-create-balance, .cf-create-total { border: 1px solid rgba(231,182,94,.1); background: #30251a; }
.cf-bet-label { background: #49351e; color: #e4d0ab; }
.cf-bet-line { border-color: rgba(231,182,94,.24); background: #18140f; }
.cf-bet-line button { border-color: rgba(231,182,94,.18); background: #30251a; color: #ead8b6; }
.cf-bet-slider { accent-color: var(--caramel); }
.cf-side-picks button.selected { border-color: rgba(231,182,94,.75); background: #382a1b; }
.cf-select-item { border-color: rgba(231,182,94,.15); background: #2a2118; }
.cf-select-item.selected { border-color: #e7b65e; background: #3a2c1b; box-shadow: 0 0 12px rgba(231,182,94,.14); }
.cf-backpack-empty { color: #b6a587; }
.cf-backpack-empty strong { color: #eee3ce; }
.cf-call-panel button { background: linear-gradient(180deg,#f6d98c,#e7b65e 55%,#c7893c); color: #2c1a08; }
.cf-call-panel button:hover { background: linear-gradient(180deg,#ffe5a2,#f0c76f 55%,#d39649); }
.cf-room-footer .primary-action { background: linear-gradient(180deg,#f6d98c,#e7b65e 55%,#c7893c); color: #2c1a08; }

/* Mines: compact casino board with Latte.gg's gold palette. */
.modal.mines-modal { width: min(980px, 100%); padding: 24px; border-color: rgba(231,182,94,.24); background: #17150f; }
.mines-modal .modal-head { margin-bottom: 14px; }
.mine-game { padding: 15px; border: 1px solid rgba(231,182,94,.14); border-radius: 15px; background: radial-gradient(ellipse at 48% 22%,rgba(153,111,43,.10),transparent 55%),linear-gradient(145deg,#1d1b16,#171713 62%,#1d1911); }
.mine-topline { display:flex; align-items:center; justify-content:space-between; padding:0 2px 12px; border-bottom:1px solid rgba(231,182,94,.14); color:#bca980; font-size:11px; }
.mine-topline span { display:flex; align-items:center; gap:7px; letter-spacing:.12em; font-weight:800; }
.mine-topline span i { width:7px;height:7px;border-radius:50%;background:#e5b858;box-shadow:0 0 9px #c7933d; }
.mine-topline b { color:#e9d9b9; font-weight:600; }
.mine-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:20px; align-items:center; padding:17px 0 15px; }
.mine-rewards { align-self:stretch; display:flex; flex-direction:column; min-width:0; padding:11px 10px; border:1px solid rgba(231,182,94,.15); border-radius:12px; background:rgba(30,27,21,.78); }
.mine-rewards-title { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:0 0 10px; color:#ab9875; font-size:9px; letter-spacing:.08em; }
.mine-rewards-title b { color:#f0cf82; font-size:13px; letter-spacing:0; }
.mine-reward-list { position:relative; display:grid; gap:5px; padding:4px 0; }
.mine-reward-row { position:relative; display:grid; grid-template-columns:1fr auto; gap:3px 5px; padding:8px; border:1px solid rgba(231,182,94,.08); border-radius:7px; background:#222019; color:#968c79; font-size:9px; }
.mine-reward-row { animation: mineRewardEnter .34s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--row-index,0) * 32ms); }
.mine-reward-row span { display:flex; align-items:center; gap:5px; letter-spacing:.045em; }
.mine-reward-row span i { min-width:17px; color:#8f805f; font-size:8px; font-style:normal; }
.mine-reward-row b { color:#d9c69e; font-size:11px; }
.mine-reward-row em { grid-column:2; color:#ac8b4c; font-size:9px; font-style:normal; text-align:right; }
.mine-reward-row.is-next { position:relative; overflow:hidden; border-color:rgba(231,182,94,.62); background:linear-gradient(100deg,#60471f,#392d1c); color:#f2d895; box-shadow:0 0 16px rgba(231,182,94,.09),inset 0 0 0 1px rgba(231,182,94,.08); }
.mine-reward-row.is-reached { border-color:rgba(231,182,94,.58); background:linear-gradient(100deg,#55421f,#302819); color:#f0d48f; box-shadow:0 0 12px rgba(231,182,94,.12),inset 0 0 14px rgba(231,182,94,.08); }
.mine-reward-row.is-reached b,.mine-reward-row.is-reached em { color:#f1ce78; }
.mine-reward-row.is-reached::before { border-color:#d2a64c; }
.mine-reward-row.is-reached span i { color:#edc76e; }
.mine-reward-row.is-lost { border-color:rgba(206,84,69,.58); background:linear-gradient(100deg,#542923,#30201b); color:#f0a092; box-shadow:inset 0 0 14px rgba(193,70,53,.09); }
.mine-reward-row.is-lost::before { border-color:#c6604f; }
.mine-reward-row.is-lost span i,.mine-reward-row.is-lost b,.mine-reward-row.is-lost em { color:#eb9587; }
.mine-reward-row.is-next::after { content:''; position:absolute; inset:0 auto 0 -55%; width:38%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,232,172,.12),transparent); animation:mineRewardShine 2.8s ease-in-out infinite; pointer-events:none; }
.mine-reward-row.is-next b,.mine-reward-row.is-next em { color:#f4d887; }
.mine-rewards > p { margin:auto 0 0; padding-top:12px; color:#827966; font-size:9px; }
.mine-board { --mine-columns:5; display:grid; grid-template-columns:repeat(var(--mine-columns),minmax(0,1fr)); gap:8px; width:min(100%,530px); margin:0 auto; }
.mine-cell { aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(231,182,94,.09); border-radius:10px; background:linear-gradient(145deg,#302b21,#25231e); color:#a58443; font-family:var(--display); font-size:clamp(15px,2vw,24px); font-weight:900; text-shadow:0 1px 8px rgba(236,194,104,.12); cursor:pointer; transition:transform .13s,border-color .13s,background .13s,box-shadow .13s; }
.mine-cell:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(231,182,94,.48); background:linear-gradient(145deg,#40351f,#2d281d); box-shadow:0 5px 16px rgba(0,0,0,.22); }
.mine-cell:disabled { cursor:default; }
.mine-cell.safe { border-color:rgba(231,182,94,.45); background:linear-gradient(145deg,#65502b,#3e321e); color:#ffe39b; }
.mine-cell.bomb { border-color:rgba(174,80,59,.45); background:linear-gradient(145deg,#49271e,#2c1d19); color:#e89a74; }
.mine-cell.mine-hit-pop { position:relative; z-index:1; animation:mineHitPop .42s cubic-bezier(.18,.8,.3,1); box-shadow:0 0 0 2px rgba(222,111,79,.2),0 0 18px rgba(214,103,67,.24); }
.mine-cell.mine-hit-pop::after { content:''; position:absolute; inset:-7px; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(255,221,144,.8) 0 2px,transparent 3px),radial-gradient(circle at 18% 28%,rgba(231,144,91,.8) 0 1.5px,transparent 2.5px),radial-gradient(circle at 82% 24%,rgba(255,203,110,.8) 0 1.5px,transparent 2.5px),radial-gradient(circle at 24% 78%,rgba(210,103,70,.75) 0 1.5px,transparent 2.5px),radial-gradient(circle at 78% 76%,rgba(255,188,93,.75) 0 1.5px,transparent 2.5px); animation:mineHitSparks .48s ease-out both; }
.mine-stats { display:flex; justify-content:space-between; gap:12px; padding-top:11px; color:#a89b80; font-size:11px; }
.mine-stats b { color:#ecd8ad; font-weight:700; }
.mine-stats i { color:#f2d17b; font-style:normal; }
.mine-controls { display:grid; grid-template-columns:minmax(220px,1fr) 140px minmax(260px,1.2fr); gap:10px; padding-top:12px; border-top:1px solid rgba(231,182,94,.14); }
.mine-control-block { min-width:0; display:flex; flex-direction:column; gap:7px; padding:8px 9px; border:1px solid rgba(231,182,94,.12); border-radius:9px; background:#201d17; }
.mine-control-label { color:#a99775; font-size:9px; font-weight:800; letter-spacing:.1em; }
.mine-bet-block .bet-row { margin:0; display:block; }
.mine-bet-block .bet-label { display:none; }
.mine-bet-block .bet-control { width:100%; gap:4px; }
.mine-bet-block .bet-control input { width:72px; height:31px; padding:0 6px; border-color:rgba(231,182,94,.2); background:#17150f; color:#f1deb7; font-size:11px; }
.mine-bet-block .bet-adjust { height:28px; padding:0 8px; border:1px solid rgba(231,182,94,.12); background:#30271b; color:#d7c49e; font-size:10px; }
.mine-stepper { display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:8px; }
.mine-stepper button,.mine-size-options button { min-height:29px; border:1px solid rgba(231,182,94,.18); border-radius:7px; background:#2a241a; color:#e2cc9e; cursor:pointer; }
.mine-stepper button:hover,.mine-size-options button:hover,.mine-size-options button.selected { border-color:#c99849; background:linear-gradient(180deg,#594323,#392d1b); color:#ffdf95; }
.mine-stepper b { color:#f1d691; text-align:center; font-size:13px; }
.mine-size-options { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.mine-size-options button { padding:0 4px; font-size:10px; }
.mine-controls button:disabled,.mine-controls input:disabled { opacity:.55; cursor:default; }
.mine-actions { display:grid; grid-template-columns:1fr; gap:8px; }
.mine-actions .primary-action { min-height:38px; margin-top:10px; border:1px solid #c58a35; border-radius:8px; background:linear-gradient(180deg,#f3d488,#dfa947 56%,#bc792b); color:#2b1b09; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 12px rgba(193,137,51,.12); }
.mine-actions .primary-action:hover:not(:disabled) { filter:brightness(1.08); }
.mine-game .game-message { min-height:18px; margin:8px 0 0; color:#b9a77f; font-size:11px; text-align:center; }
.mine-game .game-message.win { color:#e4c36f; }
.mine-game .game-message.lose { color:#d98b6c; }
.mine-note { margin-top:8px; color:#827966; text-align:center; font-size:10px; }
.mine-board-cleared { padding:14px 8px; color:#dfc47f; font-size:11px; }
.cf-create-body:not(.is-gems) { max-height:min(58vh,560px); overflow:auto; padding-right:5px; }
.cf-inventory-filters { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:8px; padding:6px 0; background:#1c1812; }
.cf-inventory-filters input,.cf-inventory-filters select { min-width:0; height:34px; padding:0 10px; border:1px solid rgba(231,182,94,.2); border-radius:6px; outline:none; background:#211c15; color:#ead9b8; font-size:11px; }
.cf-inventory-filters input:focus,.cf-inventory-filters select:focus { border-color:rgba(231,182,94,.58); box-shadow:0 0 0 2px rgba(231,182,94,.08); }
.skin-art img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
.cf-select-item i { color:#bda46f; font-size:7px; font-style:normal; font-weight:750; }
.cf-select-item .skin-art { height:48px; }
.cf-select-item small { font-size:8px; }
.cf-select-item img,.cf-room-mini-items img { width:100%; height:100%; object-fit:contain; }
.cf-select-item b { color:#f1d183; font-size:9px; }
.cf-room-mini-items span { overflow:hidden; }
@media (max-width:540px) { .cf-inventory-filters { grid-template-columns:1fr; } }
@keyframes mineRewardEnter { from { opacity:0; transform:translateY(7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes mineRewardShine { 0%,55% { left:-55%; } 100% { left:125%; } }
@keyframes mineHitPop { 0% { transform:scale(.84); filter:brightness(1.7); } 45% { transform:scale(1.08); } 100% { transform:scale(1); filter:brightness(1); } }
@keyframes mineHitSparks { 0% { opacity:0; transform:scale(.45); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .mine-reward-row,.mine-reward-row.is-next::after,.mine-cell.mine-hit-pop,.mine-cell.mine-hit-pop::after { animation:none; } }

/* Upgrader: gold selection panel and a probability-sized win segment. */
.modal.upgrader-modal { width:min(1240px,100%); max-height:min(92vh,920px); padding:22px; border-color:rgba(231,182,94,.24); background:#17150f; }
.upgrader-modal .modal-head { margin-bottom:16px; }
.upgrader-layout { display:grid; grid-template-columns:minmax(330px,.88fr) minmax(420px,1.12fr); gap:15px; }
.upgrader-wheel-panel,.upgrade-picker { min-width:0; border:1px solid rgba(231,182,94,.14); border-radius:12px; background:linear-gradient(150deg,#211d16,#191712 62%,#211a11); }
.upgrader-wheel-panel { display:flex; flex-direction:column; align-items:stretch; padding:16px; }
.upgrade-round-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:12px; border-bottom:1px solid rgba(231,182,94,.12); color:#c1ac82; font-size:9px; }
.upgrade-round-head span { display:flex; align-items:center; gap:7px; letter-spacing:.12em; font-weight:850; }
.upgrade-round-head span i { width:7px;height:7px;border-radius:50%;background:#dfb457;box-shadow:0 0 9px #c38c3c; }
.upgrade-round-head b { color:#988b72; font-size:9px; font-weight:600; }
.upgrade-values { display:grid; grid-template-columns:1fr 22px 1fr; align-items:center; gap:7px; padding:19px 7px 5px; }
.upgrade-values > div { display:grid; gap:5px; }
.upgrade-values small { color:#93866e; font-size:8px; font-weight:800; letter-spacing:.1em; }
.upgrade-values b { color:#eee1c7; font-size:20px; }
.upgrade-values .is-target { text-align:right; }
.upgrade-values .is-target b { color:#f2d07c; }
.upgrade-value-arrow { color:#ae9870; font-size:19px; text-align:center; }
.upgrade-wheel-wrap { position:relative; display:grid; place-items:center; width:min(100%,340px); aspect-ratio:1; margin:10px auto 8px; }
.upgrade-wheel { --upgrade-chance:45%; position:relative; display:grid; place-items:center; width:86%; height:86%; border:8px solid #34291a; border-radius:50%; background:conic-gradient(from 0deg,#5bc56d 0 var(--upgrade-chance),#4c2921 var(--upgrade-chance) 100%); box-shadow:0 0 0 1px rgba(231,182,94,.42),0 12px 34px rgba(0,0,0,.42),inset 0 0 25px rgba(0,0,0,.34); transform:rotate(0deg); }
.upgrade-wheel::before { content:''; position:absolute; inset:8px; border:1px solid rgba(255,235,180,.18); border-radius:50%; }
.upgrade-wheel::after { content:''; position:absolute; inset:25px; border:1px dashed rgba(255,239,198,.13); border-radius:50%; }
.upgrade-wheel.spinning { transition:transform 3.45s cubic-bezier(.12,.78,.12,1); }
.upgrade-wheel.is-win { filter:drop-shadow(0 0 12px rgba(102,221,118,.24)); }
.upgrade-wheel.is-loss { filter:drop-shadow(0 0 12px rgba(220,95,70,.18)); }
.upgrade-pointer { position:absolute; z-index:3; top:1%; left:50%; width:0;height:0; border-left:13px solid transparent;border-right:13px solid transparent;border-top:23px solid #f5d27e; filter:drop-shadow(0 2px 4px #000); transform:translateX(-50%); }
.upgrade-wheel-core { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:38%; height:38%; border:1px solid rgba(231,182,94,.33); border-radius:50%; background:radial-gradient(circle at 40% 30%,#3b3020,#1b1812 72%); box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 0 16px rgba(231,182,94,.08); }
.upgrade-wheel-core b { color:#f1ce76; font-size:25px; }
.upgrade-wheel-core small { margin-top:2px; color:#f4e4bf; font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; }
.upgrade-wheel-core span { margin-top:2px; color:#9e8d6d; font-size:8px; font-weight:800; letter-spacing:.15em; }
.upgrade-result { display:grid; place-items:center; min-height:39px; margin:4px 0 9px; padding:8px 10px; border:1px solid rgba(231,182,94,.13); border-radius:7px; background:#211c14; color:#c4b18c; font-size:10px; font-weight:700; text-align:center; }
.upgrade-result.is-spinning { color:#f0d185; animation:upgradePulse .9s ease-in-out infinite alternate; }
.upgrade-result.win { border-color:rgba(111,205,114,.32); background:rgba(62,115,55,.18); color:#aadf91; }
.upgrade-result.lose { border-color:rgba(213,100,75,.3); background:rgba(112,48,35,.18); color:#e29a83; }
.upgrade-play { min-height:43px; border:1px solid #c58a35; border-radius:7px; background:linear-gradient(180deg,#f6d98c,#e7b65e 55%,#c7893c); color:#2c1a08; font-size:12px; font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 12px rgba(193,137,51,.12); }
.upgrade-play:hover:not(:disabled) { filter:brightness(1.08); }
.upgrade-play:disabled { opacity:.46; cursor:not-allowed; }
.upgrade-demo-note { margin:9px 0 0; color:#857a65; font-size:9px; text-align:center; }
.upgrade-picker { display:flex; flex-direction:column; padding:13px; }
.upgrade-controls-head { padding-bottom:12px; border-bottom:1px solid rgba(231,182,94,.12); }
.upgrade-bet-label { display:block; margin-bottom:6px; color:#a99775; font-size:9px; font-weight:800; letter-spacing:.1em; }
.upgrade-bet-line { display:grid; grid-template-columns:12px minmax(55px,1fr) auto auto auto auto minmax(72px,1.05fr); align-items:center; gap:5px; }
.upgrade-bet-line > span { color:#71d66d; font-weight:900; }
.upgrade-bet-line input.bet-input { width:100%; min-width:0; height:31px; padding:0 6px; border:1px solid rgba(231,182,94,.2); border-radius:6px; outline:none; background:#17150f; color:#f1deb7; font-size:11px; }
.upgrade-bet-line input:focus { border-color:rgba(231,182,94,.6); }
.upgrade-bet-line button { height:29px; padding:0 7px; border:1px solid rgba(231,182,94,.14); border-radius:5px; background:#30271b; color:#d7c49e; font-size:9px; font-weight:800; cursor:pointer; }
.upgrade-bet-line button:hover { border-color:#c99849; background:#49381f; color:#ffe19a; }
.upgrade-bet-slider { width:100%; min-width:0; accent-color:#d8ab4f; }
.upgrade-skins-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 1px 9px; }
.upgrade-skins-head div { display:grid; gap:3px; }
.upgrade-skins-head b { color:#ead8b6; font-size:12px; }
.upgrade-skins-head small { color:#90836b; font-size:8px; }
.upgrade-skins-head > span { color:#ae986e; font-size:8px; font-weight:800; letter-spacing:.09em; }
.upgrade-filters { display:grid; grid-template-columns:145px minmax(0,1fr); gap:7px; padding-bottom:8px; }
.upgrade-filters select,.upgrade-filters input { width:100%; min-width:0; height:31px; padding:0 8px; border:1px solid rgba(231,182,94,.16); border-radius:5px; outline:none; background:#201b14; color:#d9c8a6; font-size:9px; }
.upgrade-filters input:focus,.upgrade-filters select:focus { border-color:rgba(231,182,94,.55); }
.upgrade-skin-grid { flex:1; min-height:170px; max-height:clamp(190px,34vh,330px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:6px; overflow:auto; padding:1px 3px 8px 0; scrollbar-color:#6c512c #211b13; scrollbar-width:thin; }
.upgrade-skin-card { min-width:0; min-height:126px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding:7px 5px; border:1px solid rgba(231,182,94,.1); border-radius:6px; background:linear-gradient(145deg,#2b261f,#211c16); color:#c4b18c; text-align:center; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; }
.upgrade-skin-card:hover { transform:translateY(-2px); border-color:rgba(231,182,94,.4); }
.upgrade-skin-card.selected { border-color:#d7a749; background:linear-gradient(155deg,#49371e,#302517); box-shadow:inset 0 0 0 1px rgba(231,182,94,.13),0 0 12px rgba(204,152,63,.1); }
.upgrade-skin-card .skin-art { width:100%; height:61px; }
.upgrade-skin-card small { display:-webkit-box; width:100%; overflow:hidden; color:#c5b797; font-size:8px; line-height:1.25; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.upgrade-skin-card b { margin-top:auto; color:#f0cf82; font-size:9px; }
.upgrade-skin-card i { color:#968568; font-size:7px; font-style:normal; }
.upgrade-no-skins { grid-column:1/-1; padding:22px 8px; color:#9c8c6c; font-size:10px; text-align:center; }
.upgrade-inventory-foot { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; padding:9px 0 0; border-top:1px solid rgba(231,182,94,.12); }
.upgrade-inventory-foot > span { color:#9c8b69; font-size:7px; font-weight:800; letter-spacing:.1em; }
.upgrade-inventory-foot > b { overflow:hidden; color:#dfcda7; font-size:8px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.upgrade-inventory-foot > strong { color:#f1cd75; font-size:9px; white-space:nowrap; }
@keyframes upgradePulse { to { opacity:.65; } }
@media (max-width:900px) { .modal.upgrader-modal { width:min(700px,100%); } .upgrader-layout { grid-template-columns:1fr; } .upgrader-wheel-panel { order:0; } .upgrade-picker { order:1; } .upgrade-wheel-wrap { width:min(80vw,300px); } .upgrade-skin-grid { max-height:260px; } }
@media (max-width:540px) { .modal.upgrader-modal { padding:14px 11px; } .upgrader-modal .modal-head { margin-right:34px; } .upgrader-modal .modal-head h2 { font-size:20px; } .upgrader-wheel-panel,.upgrade-picker { padding:10px; } .upgrade-bet-line { grid-template-columns:10px minmax(48px,1fr) auto auto auto auto; } .upgrade-bet-slider { grid-column:1/-1; } .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .upgrade-filters { grid-template-columns:115px minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .upgrade-wheel.spinning { transition:none; } .upgrade-result.is-spinning { animation:none; } }
.upgrade-skin-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.upgrade-skin-card { min-height:105px; gap:3px; padding:5px 4px; }
.upgrade-skin-card .skin-art { height:39px; }
.upgrade-skin-card small { min-height:20px; font-size:7px; }
.upgrade-skin-card b { font-size:9px; line-height:1.15; white-space:nowrap; }
.upgrade-skin-card i { font-size:6px; }
@media (max-width:900px) { .upgrade-skin-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:540px) { .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Give the Upgrader more room so target names and values stay readable. */
.modal.upgrader-modal { width:min(1480px,96vw); max-height:96vh; padding:26px; }
.upgrader-layout { grid-template-columns:minmax(390px,.8fr) minmax(600px,1.2fr); gap:19px; }
.upgrader-wheel-panel { padding:20px; }
.upgrade-picker { padding:17px; }
.upgrade-wheel-wrap { width:min(100%,390px); }
.upgrade-skin-grid { grid-template-columns:repeat(5,minmax(0,1fr)); max-height:clamp(290px,48vh,520px); gap:8px; }
.upgrade-skin-card { min-height:144px; gap:5px; padding:8px 7px; }
.upgrade-skin-card .skin-art { height:62px; }
.upgrade-skin-card small { min-height:28px; font-size:9px; line-height:1.3; }
.upgrade-skin-card b { font-size:11px; }
.upgrade-skin-card i { font-size:7px; }
.upgrade-skins-head b { font-size:14px; }
.upgrade-skins-head small,.upgrade-filters select,.upgrade-filters input { font-size:10px; }
.upgrade-filters select,.upgrade-filters input { height:36px; }
@media (max-width:1100px) {
  .modal.upgrader-modal { width:min(980px,96vw); }
  .upgrader-layout { grid-template-columns:minmax(300px,.82fr) minmax(440px,1.18fr); gap:12px; }
  .upgrade-skin-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .modal.upgrader-modal { width:min(760px,96vw); max-height:94vh; }
  .upgrader-layout { grid-template-columns:1fr; }
  .upgrade-wheel-wrap { width:min(80vw,330px); }
  .upgrade-skin-grid { grid-template-columns:repeat(5,minmax(0,1fr)); max-height:380px; }
}
@media (max-width:540px) {
  .modal.upgrader-modal { width:100%; max-height:96vh; padding:13px 10px; }
  .upgrader-wheel-panel,.upgrade-picker { padding:10px; }
  .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:340px; gap:6px; }
  .upgrade-skin-card { min-height:123px; padding:6px 4px; }
  .upgrade-skin-card .skin-art { height:48px; }
  .upgrade-skin-card small { min-height:25px; font-size:8px; }
  .upgrade-skin-card b { font-size:10px; }
}
/* Wider cards improve the Rust item artwork, names, and prices at a glance. */
.upgrade-skin-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.upgrade-skin-card { min-height:158px; align-items:stretch; gap:6px; padding:9px; text-align:left; }
.upgrade-skin-card .skin-art { width:100%; height:78px; }
.upgrade-skin-card .skin-art img { filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.upgrade-skin-card small { min-height:30px; font-size:11px; line-height:1.3; text-align:left; }
.upgrade-skin-card b { margin-top:auto; font-size:13px; text-align:left; }
.upgrade-skin-card i { font-size:8px; text-align:left; }
@media (max-width:1100px) { .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .upgrade-skin-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:540px) {
  .upgrade-skin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .upgrade-skin-card { min-height:148px; padding:8px; }
  .upgrade-skin-card .skin-art { height:68px; }
  .upgrade-skin-card small { font-size:10px; }
  .upgrade-skin-card b { font-size:12px; }
}
/* Fixed card rows keep artwork in its own area, away from item text. */
.upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.upgrade-skin-card { display:grid; grid-template-rows:88px minmax(2.6em,auto) auto auto; align-content:start; justify-items:stretch; min-height:182px; overflow:hidden; gap:5px; padding:10px; }
.upgrade-skin-card .skin-art { display:grid; place-items:center; width:100%; height:88px; min-width:0; overflow:hidden; }
.upgrade-skin-card .skin-art img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.upgrade-skin-card small { display:-webkit-box; min-height:2.6em; max-height:2.6em; overflow:hidden; align-self:start; color:#d3c4a4; font-size:12px; font-weight:600; line-height:1.3; text-align:left; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.upgrade-skin-card b { align-self:center; margin:0; color:#f3d17b; font-size:14px; font-variant-numeric:tabular-nums; text-align:left; }
.upgrade-skin-card i { align-self:center; color:#a99775; font-size:9px; text-align:left; }
@media (max-width:1100px) { .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:540px) {
  .upgrade-skin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .upgrade-skin-card { grid-template-rows:74px minmax(2.6em,auto) auto auto; min-height:166px; padding:8px; }
  .upgrade-skin-card .skin-art { height:74px; }
  .upgrade-skin-card small { font-size:11px; }
  .upgrade-skin-card b { font-size:13px; }
}
/* Slightly smaller previews and more breathing room for the labels. */
.upgrade-skin-card { grid-template-rows:88px minmax(2.6em,auto) auto auto; min-height:194px; gap:9px; padding:10px 10px 13px; }
.upgrade-skin-card .skin-art { height:88px; }
.upgrade-skin-card .skin-art img { transform:scale(.88); }
@media (max-width:540px) {
  .upgrade-skin-card { grid-template-rows:74px minmax(2.6em,auto) auto auto; min-height:178px; gap:8px; padding:8px 8px 11px; }
  .upgrade-skin-card .skin-art { height:74px; }
}
@media (max-width:700px) {
  .modal.mines-modal { padding:16px 12px; }
  .mine-game { padding:10px; }
  .mine-layout { grid-template-columns:1fr; gap:10px; padding:12px 0; }
  .mine-rewards { order:2; }
  .mine-reward-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mine-rewards > p { margin-top:8px; }
  .mine-controls { grid-template-columns:1fr 112px; }
  .mine-size-block { grid-column:1/-1; }
  .mine-board { gap:5px; }
  .mine-cell { border-radius:7px; }
}

/* Upgrader cards: reserve a fixed art row, then readable text rows. */
.modal.upgrader-modal { width:min(1480px,96vw); max-height:96vh; padding:26px; }
.modal.upgrader-modal .upgrader-layout { grid-template-columns:minmax(390px,.8fr) minmax(600px,1.2fr); gap:19px; }
.modal.upgrader-modal .upgrade-skin-grid { flex:1; min-height:200px; max-height:clamp(250px,50vh,450px); grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; align-content:start; }
.modal.upgrader-modal .upgrade-skin-card { display:flex; min-width:0; min-height:168px; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px; overflow:hidden; padding:10px 9px; text-align:left; }
.modal.upgrader-modal .upgrade-skin-card .skin-art { display:grid; flex:0 0 76px; place-items:center; width:100%; height:76px; min-width:0; overflow:hidden; }
.modal.upgrader-modal .upgrade-skin-card .skin-art img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; transform:scale(.92); }
.modal.upgrader-modal .upgrade-skin-card small { display:-webkit-box; flex:0 0 auto; width:100%; min-height:2.6em; max-height:2.6em; overflow:hidden; color:#d4c9a8; font-size:11px; font-weight:550; line-height:1.3; text-align:left; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.modal.upgrader-modal .upgrade-skin-card b { flex:0 0 auto; margin:0; color:#f0cf82; font-size:12px; font-variant-numeric:tabular-nums; text-align:left; }
.modal.upgrader-modal .upgrade-skin-card i { flex:0 0 auto; margin-top:auto; color:#a99775; font-size:8px; text-align:left; }
@media (max-width:1100px) {
  .modal.upgrader-modal { width:min(980px,96vw); }
  .modal.upgrader-modal .upgrader-layout { grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:12px; }
  .modal.upgrader-modal .upgrade-skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:clamp(250px,48vh,400px); }
  .modal.upgrader-modal .upgrade-skin-card { min-height:158px; padding:9px 7px; }
  .modal.upgrader-modal .upgrade-skin-card .skin-art { flex-basis:68px; height:68px; }
}
@media (max-width:900px) {
  .modal.upgrader-modal { width:min(760px,96vw); max-height:94vh; }
  .modal.upgrader-modal .upgrader-layout { grid-template-columns:1fr; }
  .modal.upgrader-modal .upgrade-skin-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:380px; }
}
@media (max-width:540px) {
  .modal.upgrader-modal { width:100%; max-height:96vh; padding:13px 10px; }
  .modal.upgrader-modal .upgrade-skin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:360px; gap:7px; }
  .modal.upgrader-modal .upgrade-skin-card { min-height:148px; padding:8px 7px; }
  .modal.upgrader-modal .upgrade-skin-card .skin-art { flex-basis:60px; height:60px; }
  .modal.upgrader-modal .upgrade-skin-card small { font-size:10px; }
  .modal.upgrader-modal .upgrade-skin-card b { font-size:11px; }
}
/* Center compact labels beneath each item preview. */
.modal.upgrader-modal .upgrade-skin-card { align-items:center; text-align:center; }
.modal.upgrader-modal .upgrade-skin-card .skin-art { flex-basis:84px; height:84px; }
.modal.upgrader-modal .upgrade-skin-card .skin-art img { transform:scale(.86); }
.modal.upgrader-modal .upgrade-skin-card small { font-size:9px; line-height:1.25; text-align:center; }
.modal.upgrader-modal .upgrade-skin-card b { font-size:11px; text-align:center; }
.modal.upgrader-modal .upgrade-skin-card i { font-size:7px; text-align:center; }
@media (max-width:1100px) {
  .modal.upgrader-modal .upgrade-skin-card .skin-art { flex-basis:74px; height:74px; }
}
@media (max-width:540px) {
  .modal.upgrader-modal .upgrade-skin-card .skin-art { flex-basis:64px; height:64px; }
  .modal.upgrader-modal .upgrade-skin-card small { font-size:9px; }
}
/* Pin the text block to the bottom and reserve a taller, contained image area. */
.modal.upgrader-modal .upgrade-skin-card { display:grid; grid-template-rows:95px minmax(2.5em,auto) auto auto; align-content:stretch; height:194px; min-height:194px; gap:4px; padding:9px 10px 11px; }
.modal.upgrader-modal .upgrade-skin-card .skin-art { flex:none; width:100%; height:95px; min-height:0; }
.modal.upgrader-modal .upgrade-skin-card .skin-art img { transform:scale(.82); }
.modal.upgrader-modal .upgrade-skin-card small { align-self:end; min-height:2.5em; max-height:2.5em; }
.modal.upgrader-modal .upgrade-skin-card b { align-self:center; }
.modal.upgrader-modal .upgrade-skin-card i { align-self:center; margin-top:0; }
@media (max-width:540px) {
  .modal.upgrader-modal .upgrade-skin-card { grid-template-rows:75px minmax(2.5em,auto) auto auto; height:170px; min-height:170px; padding:8px 8px 10px; }
  .modal.upgrader-modal .upgrade-skin-card .skin-art { height:75px; }
  .modal.upgrader-modal .upgrade-skin-card .skin-art img { transform:scale(.82); }
}
/* Compact, bold item labels like the supplied reference. */
.modal.upgrader-modal .upgrade-skin-card { grid-template-rows:minmax(64px,1fr) auto auto auto; align-content:normal; gap:3px; }
.modal.upgrader-modal .upgrade-skin-card .skin-art { height:100%; min-height:0; }
.modal.upgrader-modal .upgrade-skin-card small { min-height:2.5em; max-height:2.5em; align-self:center; color:#ead8b6; font-size:10px; font-weight:750; line-height:1.25; text-align:center; }
.modal.upgrader-modal .upgrade-skin-card b { align-self:center; margin:0; color:#f4d27e; font-size:12px; font-weight:850; line-height:1.1; text-align:center; }
.modal.upgrader-modal .upgrade-skin-card i { align-self:center; margin:0; color:#ab9875; font-size:8px; line-height:1.1; text-align:center; }
@media (max-width:540px) {
  .modal.upgrader-modal .upgrade-skin-card { grid-template-rows:minmax(54px,1fr) auto auto auto; }
  .modal.upgrader-modal .upgrade-skin-card small { font-size:9px; }
}
/* Rarity is shown as a colored glow behind the item instead of a text row. */
.modal.upgrader-modal .upgrade-skin-card { grid-template-rows:minmax(64px,1fr) auto auto; gap:5px; }
.modal.upgrader-modal .upgrade-skin-card .skin-art { position:relative; isolation:isolate; }
.modal.upgrader-modal .upgrade-skin-card .skin-art::before { content:''; position:absolute; z-index:0; inset:20% 22%; border-radius:50%; background:radial-gradient(ellipse, var(--rarity-glow) 0%, transparent 72%); filter:blur(11px); opacity:.82; pointer-events:none; }
.modal.upgrader-modal .upgrade-skin-card .skin-art img { position:relative; z-index:1; }
.modal.upgrader-modal .upgrade-skin-card.rarity-legendary { --rarity-glow:rgba(245,194,56,.86); }
.modal.upgrader-modal .upgrade-skin-card.rarity-mythic { --rarity-glow:rgba(239,63,71,.9); }
.modal.upgrader-modal .upgrade-skin-card.rarity-epic { --rarity-glow:rgba(170,88,245,.82); }
.modal.upgrader-modal .upgrade-skin-card.rarity-rare { --rarity-glow:rgba(68,166,247,.8); }
.modal.upgrader-modal .upgrade-skin-card.rarity-uncommon { --rarity-glow:rgba(78,207,119,.78); }
.modal.upgrader-modal .upgrade-skin-card.rarity-common { --rarity-glow:rgba(190,176,167,.52); }
.modal.upgrader-modal .upgrade-skin-card small { min-height:2.5em; max-height:2.5em; font-size:11px; font-weight:750; }
.modal.upgrader-modal .upgrade-skin-card b { font-size:12px; font-weight:850; }
@media (max-width:540px) {
  .modal.upgrader-modal .upgrade-skin-card { grid-template-rows:minmax(54px,1fr) auto auto; }
}
/* Bring the bold name closer to the price while keeping the full skin visible. */
.modal.upgrader-modal .upgrade-skin-card { gap:2px; }
.modal.upgrader-modal .upgrade-skin-card .skin-art { min-height:0; overflow:hidden; }
.modal.upgrader-modal .upgrade-skin-card .skin-art img { object-fit:contain; transform:scale(.9); }
.modal.upgrader-modal .upgrade-skin-card small { font-size:12px; line-height:1.2; font-weight:800; }
.modal.upgrader-modal .upgrade-skin-card b { margin-top:0; font-size:12px; }
@media (max-width:540px) {
  .modal.upgrader-modal .upgrade-skin-card small { font-size:11px; }
}

/* ===== Case Battles: Lobby, offene Battles, Spin-Lanes ===== */
.battle-lobby { max-width:760px; margin:20px auto; padding:18px; border:1px solid rgba(241,226,203,.08); border-radius:9px; background:#29211c; }
.battle-lobby-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.battle-lobby-head h3 { margin:0; font-size:16px; }
.battle-lobby-head p { margin:4px 0 0; color:#aa9a91; font-size:11px; }
.battle-lobby-head strong { color:#f2cf78; font-size:14px; }
.battle-slot { display:flex; align-items:center; gap:9px; margin-top:7px; padding:10px; border:1px solid rgba(241,226,203,.07); border-radius:6px; background:#352b25; }
.battle-slot>div { min-width:0; flex:1; }
.battle-slot b { display:block; overflow:hidden; color:#eee8e4; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.battle-slot small { color:#a8988e; font-size:10px; }
.battle-slot.empty { border-style:dashed; background:transparent; opacity:.75; }
.battle-seat-button { width:100%; color:#e8d8c8; font:inherit; text-align:left; cursor:pointer; transition:border-color .16s,background .16s,opacity .16s; }
.battle-seat-button:hover:not(:disabled), .battle-seat-button.is-selected { border-color:rgba(231,182,94,.7); background:rgba(231,182,94,.12); opacity:1; }
.battle-seat-button:disabled { cursor:wait; opacity:.7; }
.battle-slot.is-bot .battle-avatar { background:rgba(231,182,94,.16); }
.battle-kick { width:24px; height:24px; border:0; border-radius:50%; background:#473b34; color:#dad0c9; cursor:pointer; }
.battle-kick:hover { background:#6b2f37; color:#fff; }
.battle-lobby-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.battle-lobby-actions .battle-start { flex:1 1 180px; width:auto; }
.battle-wait { flex:1; color:#edc96f; font-size:12px; font-weight:750; }
.battle-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.battle-topbar .battle-spin-status { margin:0; text-align:left; }
.battle-pot { color:#c0b3aa; font-size:12px; } .battle-pot b { color:#f2cf78; }
.battle-fast { padding:6px 10px; font-size:11px; } .battle-fast.active { border-color:#e7b65e; color:#f2cd77; }
.battle-team.leading { border-color:rgba(231,182,94,.55); box-shadow:0 0 18px rgba(231,182,94,.12); }
.battle-team.won { border-color:#e7b65e; background:linear-gradient(180deg,rgba(231,182,94,.12),#302620); }
.battle-lane-row { display:flex; gap:8px; }
.battle-lane { position:relative; flex:1 1 0; min-width:0; padding:8px; border:1px solid rgba(241,226,203,.06); border-radius:6px; background:#352b25; }
.battle-case-progress { margin:0 0 12px; padding:9px 10px 10px; border:1px solid rgba(241,226,203,.08); border-radius:8px; background:rgba(25,19,15,.74); }
.battle-case-progress-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 1px 8px; color:#d7c8b8; font-size:10px; letter-spacing:.08em; }
.battle-case-progress-head span { color:#f2cd77; font-size:11px; letter-spacing:0; }
.battle-case-progress-track { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 5px; scrollbar-width:thin; scrollbar-color:rgba(231,182,94,.35) rgba(255,255,255,.04); }
.battle-case-step { position:relative; flex:0 0 100px; min-width:0; height:78px; display:grid; grid-template-columns:30px 1fr; grid-template-rows:14px 1fr; align-items:center; column-gap:7px; padding:7px; border:1px solid rgba(241,226,203,.08); border-radius:7px; background:linear-gradient(145deg,rgba(67,52,40,.78),rgba(40,31,25,.9)); opacity:.56; transition:opacity .2s,border-color .2s,box-shadow .2s,transform .2s; }
.battle-case-step small { grid-column:1 / -1; color:#a8988e; font-size:9px; font-weight:800; }
.battle-case-step img { grid-column:1; grid-row:2; width:30px; height:38px; object-fit:contain; }
.battle-case-step b { grid-column:2; grid-row:2; display:-webkit-box; overflow:hidden; color:#ded2c7; font-size:10px; line-height:1.25; text-align:left; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.battle-case-step.is-current { border-color:#efbf59; background:linear-gradient(145deg,rgba(111,74,24,.46),rgba(59,42,24,.94)); box-shadow:0 0 15px rgba(231,182,94,.2),inset 0 0 0 1px rgba(255,215,128,.12); opacity:1; transform:translateY(-1px); }
.battle-case-step.is-current small { color:#f2cd77; }
.battle-case-step.is-opened { border-color:rgba(231,182,94,.2); opacity:.78; }
.battle-lane header { display:flex; align-items:center; gap:6px; }
.battle-lane header .battle-avatar { flex:none; }
.battle-lane header b { flex:1; min-width:0; overflow:hidden; color:#e8e1dc; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.battle-lane header strong { color:#f1cf7c; font-size:11px; white-space:nowrap; }
.battle-reel { --rc:68px; --rg:8px; --rp:8px; position:relative; box-sizing:content-box; height:calc(3*var(--rc) + 2*var(--rg) + 2*var(--rp)); margin-top:8px; overflow:hidden; border:1px solid rgba(241,226,203,.07); border-radius:8px; background:#211a16; }
.battle-reel::before { content:''; position:absolute; z-index:3; left:4px; right:4px; top:calc(var(--rp) + var(--rc) + var(--rg) - 2px); height:calc(var(--rc) + 4px); box-sizing:border-box; border:1.5px solid #e7b65e; border-radius:8px; box-shadow:0 0 12px rgba(231,182,94,.28); pointer-events:none; }
.battle-reel::after { content:''; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(33,26,22,.68) 0,rgba(33,26,22,.68) calc(var(--rp) + var(--rc) + var(--rg)/2),transparent calc(var(--rp) + var(--rc) + var(--rg)/2),transparent calc(var(--rp) + 2*var(--rc) + 1.5*var(--rg)),rgba(33,26,22,.68) calc(var(--rp) + 2*var(--rc) + 1.5*var(--rg))); }
.battle-reel-track { position:relative; display:flex; flex-direction:column; gap:var(--rg); padding:var(--rp); will-change:transform; }
.battle-reel-card { position:relative; display:grid; flex:0 0 var(--rc); height:var(--rc); place-items:center; overflow:hidden; border:1px solid rgba(241,226,203,.08); border-radius:6px; background:linear-gradient(180deg,#3c312a,#2f2620); }
.battle-reel-card::before { content:''; position:absolute; z-index:0; inset:18% 30%; border-radius:50%; background:radial-gradient(ellipse,var(--case-glow),transparent 70%); opacity:.6; filter:blur(10px); }
.battle-reel-card .skin-art { position:absolute; z-index:1; inset:5px 8px; display:flex; width:auto; height:auto; align-items:center; justify-content:center; overflow:hidden; }
.battle-reel-card .skin-art img, .battle-reel-card .skin-art svg { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px #0008); }
.battle-reel-card.is-winner { border-color:#e5b54f; box-shadow:inset 0 0 18px rgba(231,182,94,.2),0 0 14px rgba(231,182,94,.2); }
.battle-lane.is-winner { border-color:rgba(231,182,94,.6); }
.battle-lane-win { min-height:14px; margin-top:6px; color:#f2cf78; font-size:11px; font-weight:850; text-align:center; }
@media(max-width:540px) { .battle-lobby { margin:10px; padding:12px; } .battle-lane { padding:5px; } .battle-lane header b { display:none; } .battle-reel { --rc:54px; --rg:6px; --rp:6px; } }
/* Battle entry list, create view and case picker */
.battle-setup, .battle-create, .battle-picker { margin:16px; padding:16px; border:1px solid rgba(241,226,203,.08); border-radius:9px; background:#29211c; }
.battle-list-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.battle-list-top h3 { margin:0; color:#f4ede9; font-size:15px; }
.battle-list-top h3 span { color:#f2cf78; }
.battle-sort { display:flex; gap:4px; padding:3px; border-radius:6px; background:#211a16; }
.battle-sort button { padding:6px 12px; border:0; border-radius:4px; background:transparent; color:#a8988e; font-size:11px; font-weight:800; cursor:pointer; }
.battle-sort button.active { background:#443730; color:#f2cd77; }
.battle-open-create { width:auto; min-height:38px; padding:0 16px; }
.battle-open-list { display:grid; gap:7px; }
.battle-open-empty { padding:12px; border:1px dashed rgba(241,226,203,.12); border-radius:6px; color:#a8988e; font-size:11px; text-align:center; }
.battle-open-row { display:flex; align-items:center; gap:12px; padding:9px 11px; border:1px solid rgba(241,226,203,.08); border-radius:6px; background:#352b25; }
.battle-row-cases { display:flex; flex:0 1 auto; align-items:center; gap:4px; min-width:0; overflow:hidden; }
.battle-row-cases img { flex:none; width:46px; height:46px; object-fit:contain; border-radius:5px; background:#221b17; }
.battle-thumb-more { flex:none; padding:0 6px; color:#f2cf78; font-size:11px; font-weight:800; }
.battle-row-info { min-width:0; flex:1; }
.battle-row-info b { display:block; overflow:hidden; color:#eee8e4; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.battle-row-info small { color:#a8988e; font-size:10px; }
.battle-row-info em { color:#f2cf78; font-style:normal; font-weight:800; }
.battle-row-join { display:flex; flex:none; align-items:stretch; overflow:hidden; border:0; border-radius:5px; background:linear-gradient(180deg,#f4ca70,#dc9e3b); color:#23190c; cursor:pointer; }
.battle-row-join:hover { filter:brightness(1.06); }
.battle-row-join span { display:flex; align-items:center; padding:0 12px; font-size:11px; font-weight:800; }
.battle-row-join b { display:flex; align-items:center; padding:0 12px; background:rgba(0,0,0,.18); font-size:12px; }
.battle-row-watch { display:grid; place-items:center; min-height:38px; padding:0 14px; border:1px solid rgba(231,182,94,.35); border-radius:6px; background:rgba(231,182,94,.12); color:#f2cd77; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
.battle-live-badge { margin-left:6px; color:#ee7a70; font-size:9px; font-style:normal; letter-spacing:.08em; }
.battle-open-row.is-live { border-color:rgba(238,122,112,.28); }
.battle-create-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.battle-create-top .secondary-action { width:auto; }
.battle-create-cost { display:flex; flex-direction:column; align-items:flex-end; }
.battle-create-cost span { color:#a8988e; font-size:10px; }
.battle-create-cost b { color:#f2cf78; font-size:15px; }
.battle-create-top .battle-start { width:auto; min-width:180px; }
.battle-create-settings { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; }
.battle-create-settings .battle-label { margin-top:0; }
.battle-create-right { display:flex; flex-direction:column; align-items:flex-end; }
.battle-cases-box { margin-top:18px; padding:12px; border:1px solid rgba(241,226,203,.08); border-radius:8px; background:#211a16; }
.battle-cases-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#cfc4bc; font-size:12px; font-weight:800; }
.battle-clear { border:0; background:transparent; color:#a8988e; font-size:11px; cursor:pointer; }
.battle-clear:hover { color:#f2cf78; }
.battle-cases-grid, .battle-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.battle-add-tile, .battle-sel-tile, .battle-pick-card { background-clip:padding-box; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:150px; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; color:#f4ede9; cursor:pointer; }
.battle-round-no { position:absolute; top:6px; left:6px; padding:2px 8px; border-radius:99px; background:rgba(33,26,22,.85); color:#f2cf78; font-size:10px; font-style:normal; font-weight:800; }
.battle-add-tile { border-style:dashed; }
.battle-add-tile span { display:grid; width:34px; height:34px; place-items:center; border-radius:6px; background:#3b302a; font-size:22px; }
.battle-add-tile b { font-size:11px; }
.battle-add-tile:hover, .battle-sel-tile:hover, .battle-pick-card:hover { border-color:rgba(231,182,94,.45); }
.battle-sel-wrap .battle-sel-tile { border-color:transparent; }
.battle-sel-tile img, .battle-pick-card img { width:100%; max-width:150px; aspect-ratio:1; object-fit:contain; background:none; }
.battle-sel-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }
.battle-sel-wrap .battle-sel-tile { min-height:190px; }
.battle-stepper { display:flex; align-items:stretch; overflow:hidden; border:1px solid rgba(241,226,203,.1); border-radius:6px; background:#211a16; }
.battle-stepper button { flex:1; height:34px; border:0; background:#443730; color:#f0c86e; font-size:20px; font-weight:800; cursor:pointer; }
.battle-stepper button:hover { background:#51433b; }
.battle-sel-tile b, .battle-pick-card b { font-size:11px; text-align:center; }
.battle-sel-tile span, .battle-pick-card span { color:#f2cf78; font-size:11px; font-weight:800; }
.battle-pick-card.picked { border-color:#e7b65e; }
.battle-pick-card em { position:absolute; top:6px; right:6px; padding:2px 7px; border-radius:99px; background:#e7b65e; color:#23190c; font-size:10px; font-style:normal; font-weight:900; }
.battle-picker-top { margin-bottom:12px; }
.battle-picker-top input { width:100%; height:38px; padding:0 12px; border:1px solid rgba(241,226,203,.12); border-radius:6px; background:#211a16; color:#f4ede9; font-size:13px; outline:0; }
.battle-picker-grid { min-height:200px; }
.battle-picker-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:10px 12px; border-radius:8px; background:#211a16; color:#a8988e; font-size:12px; }
.battle-picker-bar b { color:#f2cf78; }
.battle-picker-bar .primary-action { width:auto; min-width:140px; }
@media(max-width:540px) { .battle-setup, .battle-create, .battle-picker { margin:10px; padding:12px; } .battle-open-row { flex-wrap:wrap; } .battle-row-cases img { width:36px; height:36px; } .battle-create-right { align-items:flex-start; } .battle-create-top .battle-start { min-width:0; flex:1 1 100%; } .battle-cases-grid, .battle-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.battle-tiebreak { margin:0 0 14px; padding:12px; border:1px solid rgba(231,182,94,.35); border-radius:8px; background:#29201b; animation:battleTbIn .35s ease both; }
.battle-tiebreak h4 { margin:0 0 10px; color:#f2cc74; font-size:11px; letter-spacing:.12em; text-align:center; }
.battle-tb-window { position:relative; height:104px; overflow:hidden; border:1px solid rgba(241,226,203,.07); border-radius:8px; background:#211a16; }
.battle-tb-window::before { content:''; position:absolute; z-index:3; top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px); background:#e7b65e; box-shadow:0 0 12px rgba(231,182,94,.7); pointer-events:none; }
.battle-tb-window::after { content:''; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,#211a16 0,transparent 14%,transparent 86%,#211a16 100%); }
.battle-tb-track { display:flex; gap:8px; padding:8px; width:max-content; will-change:transform; }
.battle-tb-card { display:flex; flex:0 0 140px; height:86px; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; padding:6px; border:1px solid rgba(241,226,203,.08); border-radius:6px; background:linear-gradient(180deg,#3c312a,#2f2620); }
.battle-tb-card.team-mine { border-bottom:3px solid #4aa3ff; }
.battle-tb-card.team-enemy { border-bottom:3px solid #d96a5b; }
.battle-tb-card .battle-avatar { flex:none; }
.battle-tb-card b { max-width:100%; overflow:hidden; color:#f2ece8; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.battle-tb-card small { color:#a3958c; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.battle-tb-card.is-winner { border-color:#e5b54f; box-shadow:inset 0 0 18px rgba(231,182,94,.22),0 0 14px rgba(231,182,94,.25); }
.battle-tb-result { min-height:16px; margin:10px 0 0; color:#f2cf78; font-size:13px; font-weight:850; text-align:center; }
@keyframes battleTbIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media(max-width:540px) { .battle-tb-card { flex-basis:112px; } }

/* Centered round countdown overlay in case battles */
.battle-arena { position:relative; }
.battle-countdown { position:absolute; top:50%; left:50%; z-index:5; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:150px; padding:18px 30px 20px; border:6px solid rgba(0,0,0,.45); border-radius:16px; background:rgba(0,0,0,.6); background-clip:padding-box; box-shadow:0 12px 40px rgba(0,0,0,.45); backdrop-filter:blur(4px); pointer-events:none; text-align:center; }
.battle-countdown small { color:rgba(255,255,255,.75); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.battle-countdown b { color:#fff; font-size:64px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 2px 14px rgba(255,255,255,.25); animation:battleCountPop .5s ease-out; }
@keyframes battleCountPop { from { opacity:.2; transform:scale(1.35); } to { opacity:1; transform:scale(1); } }
@media(max-width:540px) { .battle-countdown { min-width:120px; padding:14px 22px 16px; } .battle-countdown b { font-size:48px; } }

/* Game pages: every game has its own URL and fills the main area instead of a popup */
.main-content.game-page-active { max-width: none; }
.game-route { display: flex; flex-direction: column; gap: 16px; min-height: calc(100vh - 140px); }
.game-route .subpage-top { margin: 0; }
.main-content .modal.game-page-modal { width: 100%; max-width: none; max-height: none; overflow: visible; animation: none; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.main-content .modal.game-page-modal:not(.cases-modal):not(.coinflip-modal) { padding: clamp(18px, 2.4vw, 34px); }
.main-content .modal.game-page-modal .modal-close { display: none; }
.main-content .modal.game-page-modal .modal-head { margin-right: 0; }
.main-content .modal.game-page-modal .modal-head h2 { font-size: clamp(24px, 2.4vw, 34px); }
.main-content .modal.game-page-modal .modal-head p { font-size: 14px; }
.game-route-bust .game-panel, .game-route-targets .info-panel, .game-route-towers .info-panel { max-width: 860px; width: 100%; margin: 0 auto; }
.game-route-bust .bust-stage { height: clamp(240px, 40vh, 420px); }
@media (max-width: 720px) {
  .game-route { min-height: 0; gap: 10px; }
  .main-content .modal.game-page-modal { border-radius: 14px; }
  .main-content .modal.game-page-modal:not(.cases-modal):not(.coinflip-modal) { padding: 14px 11px; }
}

/* Sub page top bar: back button and chip in the site theme */
.subpage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.back-home { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.back-home:hover { border-color: rgba(231,182,94,.45); background: var(--raise); color: var(--caramel-2); }
.demo-chip { padding: 5px 11px; border: 1px solid rgba(231,182,94,.28); border-radius: 99px; background: rgba(231,182,94,.1); color: var(--caramel-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

/* Battles: prices under the items and bigger collected drops */
.battle-reel { --rc:84px; }
.battle-reel-card .skin-art { inset:5px 8px 20px; }
.battle-reel-price { position:absolute; z-index:1; left:4px; right:4px; bottom:4px; overflow:hidden; color:#f1cf7c; font-size:11px; font-style:normal; font-weight:800; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.battle-drops { gap:8px; margin-top:10px; }
.battle-drop { display:flex; width:84px; height:auto; flex-direction:column; align-items:stretch; gap:4px; padding:6px 5px 6px; border:1px solid rgba(241,226,203,.09); border-radius:8px; background:radial-gradient(circle at 50% 38%,var(--case-glow),#2f2620 70%); }
.battle-drop-art { display:block; height:62px; }
.battle-drop .skin-art { width:100%; height:100%; }
.battle-drop .skin-art img, .battle-drop .skin-art svg { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px #0008); }
.battle-drop-price { padding:3px 2px; border-radius:5px; background:rgba(0,0,0,.35); color:#f1cf7c; font-size:12px; font-style:normal; font-weight:800; line-height:1.15; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media(max-width:540px) { .battle-reel { --rc:72px; } .battle-drop { width:68px; } .battle-drop-art { height:48px; } .battle-drop-price { font-size:10px; } }

/* Towers */
.tower-board { --tower-columns:4; display:grid; gap:7px; width:min(100%,560px); margin:0 auto; padding:16px 0 12px; }
.tower-row { display:grid; grid-template-columns:repeat(var(--tower-columns),minmax(0,1fr)); gap:7px; padding:3px; border-radius:11px; transition:background .18s,box-shadow .18s; }
.tower-row.is-active { background:rgba(231,182,94,.08); box-shadow:inset 0 0 0 1px rgba(231,182,94,.35),0 0 18px rgba(231,182,94,.08); }
.tower-tile { min-width:0; height:40px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(231,182,94,.09); border-radius:8px; background:linear-gradient(145deg,#2a2620,#221f1a); color:#a99a7c; font-family:var(--display); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; cursor:pointer; transition:transform .13s,border-color .13s,background .13s,opacity .13s; }
.tower-tile:disabled { cursor:default; opacity:.55; }
.tower-row.is-active .tower-tile { opacity:1; border-color:rgba(231,182,94,.32); background:linear-gradient(145deg,#3d3220,#2c261c); color:#f1d896; }
.tower-row.is-active .tower-tile:hover { transform:translateY(-2px); border-color:rgba(231,182,94,.7); background:linear-gradient(145deg,#56432a,#3a2f1e); }
.tower-gem { color:#e7b65e; font-size:12px; }
.tower-trap { color:#e89a74; font-size:15px; }
.tower-tile.safe-hint { opacity:.7; }
.tower-tile.safe.picked { opacity:1; border-color:rgba(231,182,94,.6); background:linear-gradient(145deg,#65502b,#3e321e); color:#ffe39b; box-shadow:0 0 12px rgba(231,182,94,.16); }
.tower-tile.trap { border-color:rgba(174,80,59,.32); background:linear-gradient(145deg,#3a221c,#271b18); }
.tower-tile.trap.picked { opacity:1; border-color:rgba(222,111,79,.7); background:linear-gradient(145deg,#5a2a20,#341f1a); animation:mineHitPop .42s cubic-bezier(.18,.8,.3,1); }
.tower-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; padding-bottom:12px; color:#a99775; font-size:11px; }
.tower-stats b { color:#f0d48f; font-variant-numeric:tabular-nums; }
.tower-stats i { font-style:normal; }
.tower-controls { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.tower-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.tower-modes button { height:31px; border:1px solid rgba(231,182,94,.12); border-radius:7px; background:#2a2219; color:#d7c49e; font-size:11px; font-weight:700; cursor:pointer; }
.tower-modes button.selected { border-color:#c58a35; background:linear-gradient(180deg,#5d4520,#3d2e19); color:#ffe39b; }
.tower-game .mine-bet-block .bet-control { display:flex; }
.tower-game .mine-bet-block .bet-control input { flex:1 1 auto; min-width:60px; }
@media (max-width:540px) {
  .tower-board, .tower-row { gap:5px; }
  .tower-tile { height:34px; gap:3px; font-size:11px; }
  .tower-gem { font-size:10px; }
  .tower-controls { grid-template-columns:1fr; }
}
.battle-sel-tile, .battle-pick-card { background:transparent; }

/* Case Battle page: no outer box, rows sit directly on the site background */
.main-content .modal.game-page-modal.battle-page-modal { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
/* Cases page: no outer box, the site background shows behind the title and the case cards */
.main-content .modal.game-page-modal.cases-modal { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
.battle-page-modal .ruby-case-top { height: auto; padding: 0 0 18px; border-bottom: 0; }
.battle-page-modal .ruby-case-top h2 { font-size: 22px; color: #f2cf78; }
.battle-page-modal .battle-setup { margin: 0; padding: 0; border: 0; background: transparent; }
.battle-page-modal .battle-list-top { margin-bottom: 18px; }
.battle-page-modal .battle-list-top h3 { font-size: 16px; }
.battle-page-modal .battle-sort { background: rgba(20,15,12,.6); }
.battle-page-modal .battle-open-list { gap: 12px; }
.battle-page-modal .battle-open-row { padding: 14px 16px; border: 1px solid rgba(190,140,70,.4); border-radius: 12px; background: linear-gradient(90deg, rgba(22,16,12,.8), rgba(22,16,12,.55)); box-shadow: inset 0 1px 0 rgba(241,226,203,.05); transition: border-color .18s, box-shadow .18s, transform .18s; }
.battle-page-modal .battle-open-row:hover { border-color: rgba(231,182,94,.75); box-shadow: 0 0 22px rgba(231,182,94,.2); transform: translateY(-1px); }
.battle-page-modal .battle-row-cases img { width: 54px; height: 54px; border-radius: 8px; background: rgba(0,0,0,.28); }
.battle-page-modal .battle-row-info b { font-size: 14px; }
.battle-page-modal .battle-row-info small { font-size: 11px; }
.battle-page-modal .battle-open-empty { background: transparent; }
.battle-page-modal .battle-row-join { min-height: 46px; border-radius: 9px; }
.battle-page-modal .battle-row-join span { padding: 0 18px; font-size: 14px; }
.battle-page-modal .battle-row-join b { gap: 6px; padding: 0 16px; background: transparent; color: #fff3d0; font-size: 15px; }
.battle-page-modal .battle-row-join b .gem { font-size: 16px; }
.battle-page-modal .battle-row-join { background: linear-gradient(180deg,#8a5d1c,#5c3d12); color: #fff3d0; }
.battle-page-modal .battle-row-join:hover { filter: brightness(1.12); }