/* =========================================================
   FOX ARMY: CATALYST COMMAND — v3 design system
   ---------------------------------------------------------
   Palette (named, restrained):
     --void        #06080B   deepest background
     --panel       #11161D   card base
     --panel-2     #1A222C   card raised / inset
     --panel-3     #232E3A   card hover / active
     --wine        #5C2230   status banner depth
     --gold        #C9A646   antique medal gold (desaturated, not "AI gold")
     --gold-lt     #E8C66B
     --cyan        #1FD8C4   catalyst energy signature
     --felt        #0E3A2C   Hokm table cloth
     --ink         #F2EFE6   primary text
     --ink-dim     #7C8794   secondary text
     --danger      #D9604A
     --success     #3FBF8E
   Type:
     Display -> Oswald 600/700 (medal/military energy, numbers/ranks/headlines only)
     Body    -> Inter 400/500/600
     Mono    -> JetBrains Mono (wallet addresses, tx hashes, on-chain data ONLY —
                the one deliberate seam tying mini-app and admin panel together)
   Signature:
     A slow hologram "verification sweep" plays once across the wallet
     card the moment a wallet successfully connects — distinct from the
     ambient logo glow, marking wallet connection as a meaningfully
     different state change (a cryptographic proof, not a toggle).
   ========================================================= */

:root {
  --void: #06080B;
  --bg-grad: radial-gradient(135% 65% at 50% -14%, #121821 0%, #06080B 56%);
  --panel: #11161D;
  --panel-2: #1A222C;
  --panel-3: #232E3A;
  --panel-border: rgba(201, 166, 70, 0.13);
  --panel-border-soft: rgba(255,255,255,0.055);
  --wine: #5C2230;
  --gold: #C9A646;
  --gold-lt: #E8C66B;
  --cyan: #1FD8C4;
  --cyan-dim: rgba(31, 216, 196, 0.13);
  --felt: #0E3A2C;
  --felt-edge: #092820;
  --ink: #F2EFE6;
  --ink-dim: #7C8794;
  --ink-faint: #4D5663;
  --danger: #D9604A;
  --success: #3FBF8E;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --font-display: 'Oswald', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  overscroll-behavior-y: none;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--bg-grad);
  min-height: 100vh;
  padding-bottom: calc(76px + var(--safe-bottom));
}
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ===================== LOADING SCREEN ===================== */
.loading-screen {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; background: var(--bg-grad);
}
.loading-logo {
  width: 100px; height: 100px; object-fit: contain;
  animation: loading-pulse 1.7s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55));
}
@keyframes loading-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.85; }
  50% { transform: scale(1.03); opacity: 1; }
}
.loading-bar { width: 170px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.loading-bar__fill {
  height: 100%; width: 36%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--gold-lt));
  animation: loading-sweep 1.15s ease-in-out infinite;
}
@keyframes loading-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }
.loading-text { font-family: var(--font-display); font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.05em; text-transform: uppercase; }

/* ===================== APP SHELL & VIEWS ===================== */
.app-shell { max-width: 480px; margin: 0 auto; padding: calc(12px + var(--safe-top)) 16px 8px; position: relative; }
.view { display: none; animation: view-in 0.24s cubic-bezier(.2,.8,.3,1); }
.view.is-active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== HEADER ===================== */
.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.header-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.09em; color: var(--ink-dim); text-transform: uppercase; }

.wallet-pill {
  display: flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--cyan); border-radius: 999px; background: var(--cyan-dim);
  color: var(--cyan); font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.03em;
  transition: all 0.2s; flex: none; position: relative; overflow: hidden;
}
.wallet-pill:active { transform: scale(0.96); }
.wallet-pill.is-connected { border-color: var(--gold); color: var(--gold-lt); background: rgba(201,166,70,0.1); font-family: var(--font-mono); font-size: 11px; }
.wallet-pill .wallet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-dim); flex: none; }
.wallet-pill.is-connected .wallet-dot { background: var(--gold-lt); box-shadow: 0 0 7px var(--gold-lt); }

.wallet-pill.is-sweeping::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(232,198,107,0.55) 50%, transparent 70%);
  animation: verify-sweep 0.9s ease;
}
@keyframes verify-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

.ticket-pill {
  display: flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--panel-border-soft);
  font-family: var(--font-display); font-size: 12px; color: var(--gold-lt); flex: none;
}

/* ===================== HOME: HERO ===================== */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px; text-align: center; }
.hero-glow {
  position: absolute; top: 16px; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-dim) 0%, rgba(31,216,196,0) 70%);
  animation: pulse-glow 3.8s ease-in-out infinite; z-index: 0;
}
@keyframes pulse-glow { 0%, 100% { transform: scale(0.92); opacity: 0.6; } 50% { transform: scale(1.07); opacity: 1; } }
.hero-logo {
  width: 178px; height: 178px; object-fit: contain; position: relative; z-index: 1;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.6)); animation: float-logo 5.4s ease-in-out infinite;
}
@keyframes float-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-title {
  margin: 6px 0 0; font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: 0.035em; color: var(--gold-lt); position: relative; z-index: 1;
}
.hero-sub { margin: 2px 0 0; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; position: relative; z-index: 1; }

/* ===================== PROMO BANNER (admin-editable ads) ===================== */
.promo-banner {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-md);
  margin-bottom: 10px; border: 1px solid var(--panel-border-soft); cursor: pointer;
  transition: transform 0.12s;
}
.promo-banner:active { transform: scale(0.98); }
.promo-banner__img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; }
.promo-banner__text { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.promo-banner__text b { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; }
.promo-banner__text small { font-size: 10.5px; color: rgba(242,239,230,0.7); }

/* ===================== PROGRESS CARD ===================== */
.progress-card {
  background: linear-gradient(160deg, var(--wine) 0%, var(--panel) 62%);
  border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  padding: 17px 16px 15px; margin-top: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
}
.progress-card__title { margin: 0 0 13px; text-align: center; font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.11em; color: var(--ink-dim); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.stat { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.24); border-radius: var(--radius-md); padding: 11px; min-width: 0; }
.stat__icon { width: 33px; height: 33px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.stat__icon--gold { background: radial-gradient(circle, var(--gold-lt), var(--gold) 72%); color: #2b2106; }
.stat__icon--cyan { background: radial-gradient(circle, #8ff5ee, var(--cyan) 72%); color: #06302c; }
.stat__body { display: flex; flex-direction: column; min-width: 0; }
.stat__label { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.01em; }
.stat__value { font-family: var(--font-display); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.rank-badge { font-size: 12px; color: var(--ink-dim); }
.rank-badge b { color: var(--gold-lt); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }
.rank-hint { font-size: 10.5px; color: var(--ink-dim); }
.progress-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.progress-bar__fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--gold-lt)); transition: width 0.6s cubic-bezier(.2,.9,.3,1); box-shadow: 0 0 11px rgba(31,216,196,0.45); }
.progress-caption { margin: 6px 0 0; font-size: 10px; color: var(--ink-dim); text-align: center; }

/* ===================== BUTTONS / GRIDS ===================== */
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px 10px; border-radius: var(--radius-lg); text-align: center; transition: transform 0.12s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s; }
.btn:active { transform: scale(0.96); }
.btn--gold { background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%); color: #2b2106; box-shadow: 0 7px 20px rgba(201,166,70,0.25); }
.btn--gold .btn__icon { font-size: 21px; line-height: 1; }
.btn--gold b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; }
.btn--outline { background: var(--cyan-dim); border: 1.5px solid var(--cyan); color: var(--cyan); }
.btn--outline.is-claimed { border-color: var(--gold); color: var(--gold-lt); background: rgba(201,166,70,0.1); }
.btn__icon--logo { width: 25px; height: 25px; object-fit: contain; }
.btn--outline .btn__text { display: flex; flex-direction: column; gap: 1px; }
.btn--outline b { font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.btn--outline small { font-size: 9.5px; opacity: 0.8; }

.wide-card { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 15px 16px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-lg); transition: transform 0.12s, border-color 0.2s; }
.wide-card:active { transform: scale(0.98); }
.wide-card__icon { font-size: 25px; flex: none; }
.wide-card__text { display: flex; flex-direction: column; flex: 1; text-align: left; gap: 1px; }
.wide-card__text b { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.wide-card__text small { font-size: 10.5px; color: var(--ink-dim); }
.wide-card__chev { font-size: 18px; color: var(--ink-dim); }

.secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mini-card { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); transition: transform 0.12s; }
.mini-card:active { transform: scale(0.97); }
.mini-card__icon { font-size: 21px; flex: none; }
.mini-card__text { display: flex; flex-direction: column; text-align: left; gap: 1px; }
.mini-card__text b { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; }
.mini-card__text small { font-size: 10px; color: var(--ink-dim); }

.section-gap { height: 6px; }

/* ===================== BOTTOM NAV ===================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(6,8,11,0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(31,216,196,0.12);
  padding: 8px 0 max(12px, env(safe-area-inset-bottom));
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px 2px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  position: relative; transition: color 0.2s;
}
.nav-svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  transition: stroke 0.2s, filter 0.2s;
}
.nav-item.is-active {
  color: var(--cyan);
}
.nav-item.is-active .nav-svg {
  filter: drop-shadow(0 0 6px rgba(31,216,196,0.8));
}
.nav-item.is-active::before {
  content: '';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 2px;
  background: var(--cyan);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(31,216,196,0.4);
}
.nav-item:not(.is-active):hover { color: rgba(255,255,255,0.6); }

/* ===================== TOASTS ===================== */
#toast-container { position: fixed; top: calc(14px + var(--safe-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast { pointer-events: auto; max-width: 88%; padding: 10px 18px; background: var(--panel-2); border: 1px solid var(--gold); border-radius: 999px; font-size: 12px; color: var(--gold-lt); box-shadow: 0 8px 24px rgba(0,0,0,0.48); animation: toast-in 0.25s ease, toast-out 0.3s ease 1.7s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* ===================== SHEET / MODAL ===================== */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.62); display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 60; }
.sheet-overlay.is-open { opacity: 1; visibility: visible; }
.sheet { width: 100%; max-width: 480px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-bottom: none; border-radius: 24px 24px 0 0; padding: 10px 18px calc(20px + var(--safe-bottom)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(.2,.9,.3,1); max-height: 85vh; overflow-y: auto; }
.sheet-overlay.is-open .sheet { transform: translateY(0); }
.sheet__handle { width: 36px; height: 4px; background: rgba(255,255,255,0.18); border-radius: 999px; margin: 6px auto 14px; }
.sheet__title { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--gold-lt); }
.sheet__sub { margin: 0 0 14px; font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
.sheet__close { width: 100%; margin-top: 14px; padding: 13px; background: rgba(255,255,255,0.05); border-radius: var(--radius-md); font-size: 13px; }

/* ===================== TABS ===================== */
.subtab-row { display: flex; gap: 6px; margin-bottom: 14px; background: var(--panel-2); border-radius: 999px; padding: 4px; }
.subtab { flex: 1; text-align: center; padding: 9px 4px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--ink-dim); font-family: var(--font-display); letter-spacing: 0.01em; transition: all 0.2s; }
.subtab.is-active { background: var(--cyan); color: #06302c; }

/* ===================== MISSION LIST ===================== */
.mission-section-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.mission-section-title:first-child { margin-top: 0; }
.mission-section-title small { font-family: var(--font-body); font-weight: 400; font-size: 10.5px; color: var(--ink-dim); }

.task-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); }
.task-item__icon { font-size: 18px; flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--panel-2); border-radius: 10px; }
.task-item__body { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.task-item__body b { font-size: 12.5px; font-family: var(--font-display); font-weight: 600; }
.task-item__body small { font-size: 10px; color: var(--ink-dim); }
.task-item__body small.reward { color: var(--gold-lt); }
.btn-mini { padding: 8px 14px; border-radius: 999px; flex: none; background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%); color: #2b2106; font-size: 11px; font-weight: 700; font-family: var(--font-display); white-space: nowrap; }
.btn-mini:disabled { opacity: 0.4; background: var(--panel-2); color: var(--ink-dim); }
.partner-logo { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; font-family: var(--font-display); color: #fff; }

/* ===================== GAMES TAB ===================== */
.game-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.game-tile { position: relative; border-radius: var(--radius-lg); padding: 17px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 134px; overflow: hidden; border: 1px solid var(--panel-border-soft); transition: transform 0.15s; }
.game-tile:active { transform: scale(0.97); }
.game-tile--wheel { background: linear-gradient(160deg, #2B1B36 0%, var(--panel) 65%); }
.game-tile--hokm { background: linear-gradient(160deg, var(--felt-edge) 0%, var(--panel) 65%); }
.game-tile__icon { font-size: 30px; }
.game-tile__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.game-tile__sub { font-size: 10px; color: var(--ink-dim); }
.game-tile__badge { position: absolute; top: 11px; right: 11px; font-size: 9px; font-family: var(--font-display); font-weight: 700; background: var(--cyan); color: #06302c; padding: 3px 8px; border-radius: 999px; }

/* ----- Wheel screen ----- */
.wheel-screen { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.wheel-wrap { position: relative; width: 280px; height: 280px; margin: 10px auto 6px; }
.wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid var(--gold-lt); z-index: 5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
#wheelCanvas { width: 280px; height: 280px; border-radius: 50%; box-shadow: 0 0 0 6px var(--panel-2), 0 0 0 8px var(--gold), 0 16px 44px rgba(0,0,0,0.55); }
.wheel-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, var(--gold-lt), var(--gold) 75%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.4); z-index: 4; }
.wheel-hub img { width: 34px; height: 34px; object-fit: contain; }
.wheel-spin-btn { margin-top: 16px; padding: 14px 38px; border-radius: 999px; background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%); color: #2b2106; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; box-shadow: 0 9px 24px rgba(201,166,70,0.32); transition: transform 0.12s; }
.wheel-spin-btn:active { transform: scale(0.96); }
.wheel-spin-btn:disabled { opacity: 0.4; box-shadow: none; }
.wheel-ticket-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--ink-dim); }
.wheel-result { margin-top: 16px; padding: 12px 20px; border-radius: var(--radius-md); background: var(--panel-2); text-align: center; min-width: 200px; font-family: var(--font-display); font-size: 14px; color: var(--cyan); border: 1px solid var(--panel-border-soft); }
.get-tickets-btn { margin-top: 10px; font-size: 11px; color: var(--ink-dim); text-decoration: underline; text-decoration-color: var(--panel-border-soft); }

/* ----- Hokm table ----- */
.hokm-table { background: radial-gradient(ellipse at 50% 40%, var(--felt) 0%, var(--felt-edge) 100%); border-radius: var(--radius-lg); border: 6px solid #5a3a22; box-shadow: 0 12px 34px rgba(0,0,0,0.55), inset 0 0 44px rgba(0,0,0,0.38); padding: 14px 10px; position: relative; min-height: 420px; display: flex; flex-direction: column; }
.hokm-topbar { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; }
.hokm-trump { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.32); padding: 6px 12px; border-radius: 999px; font-family: var(--font-display); font-size: 12px; color: var(--gold-lt); }
.hokm-score { font-family: var(--font-display); font-size: 12px; color: var(--ink); background: rgba(0,0,0,0.32); padding: 6px 12px; border-radius: 999px; }
.hokm-ai-row { display: flex; justify-content: center; gap: -8px; margin: 6px 0 10px; min-height: 56px; }
.hokm-ai-card { width: 34px; height: 48px; border-radius: 6px; margin: 0 -8px; background: linear-gradient(160deg, #8b2e3c, #5c1b26); border: 1.5px solid rgba(255,255,255,0.25); box-shadow: 0 3px 6px rgba(0,0,0,0.4); }
.hokm-trick-area { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 100px; position: relative; }
.hokm-trick-slot { width: 56px; height: 78px; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.hokm-status-text { text-align: center; font-size: 11px; color: rgba(255,255,255,0.65); margin-bottom: 8px; font-family: var(--font-display); letter-spacing: 0.02em; }
.hokm-hand-row { display: flex; justify-content: center; gap: 2px; margin-top: 8px; padding: 4px 0 2px; overflow-x: auto; }
.playing-card { width: 52px; height: 74px; border-radius: 7px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; box-shadow: 0 3px 8px rgba(0,0,0,0.35); flex: none; cursor: pointer; transition: transform 0.15s; border: 1px solid rgba(0,0,0,0.08); position: relative; }
.playing-card:active { transform: translateY(-4px); }
.playing-card.is-disabled { opacity: 0.35; filter: grayscale(0.4); cursor: default; }
.playing-card.is-disabled:active { transform: none; }
.playing-card .pc-rank { line-height: 1; }
.playing-card .pc-suit { font-size: 18px; line-height: 1; margin-top: 1px; }
.playing-card.is-red { color: #C23B3B; }
.playing-card.is-black { color: #1A1A1A; }
.hokm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.74); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; z-index: 10; }
.hokm-overlay.is-hidden { display: none; }
.hokm-overlay__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gold-lt); }
.hokm-overlay__sub { font-size: 12.5px; color: var(--ink-dim); max-width: 260px; }
.hokm-overlay__btn { padding: 12px 28px; border-radius: 999px; margin-top: 4px; background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%); color: #2b2106; font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.hokm-back-link { margin-top: 12px; text-align: center; font-size: 12px; color: var(--ink-dim); }

/* ===================== SCREEN HEADER (sub-pages) ===================== */
.screen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.screen-back { width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.screen-head h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }

/* ===================== PROFILE / ACCOUNT VIEW ===================== */
.profile-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); margin-bottom: 12px; }
.profile-card__avatar { width: 46px; height: 46px; object-fit: contain; }
.profile-card div { display: flex; flex-direction: column; text-align: left; gap: 2px; }
.profile-card b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; }
.profile-card small { font-size: 10.5px; color: var(--ink-dim); font-family: var(--font-mono); }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.profile-stats div { background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); padding: 10px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.profile-stats b { font-family: var(--font-display); font-size: 13px; }
.profile-stats small { font-size: 9.5px; color: var(--ink-dim); }
.danger-link { width: 100%; padding: 12px; font-size: 12px; color: var(--danger); text-align: center; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); margin-bottom: 8px; font-size: 12.5px; }

/* ===================== PAYOUT REQUEST CARD ===================== */
.payout-card { background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.payout-card__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.payout-status { font-size: 10px; font-family: var(--font-display); font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.payout-status--pending { background: rgba(201,166,70,0.15); color: var(--gold-lt); }
.payout-status--approved { background: rgba(31,216,196,0.15); color: var(--cyan); }
.payout-status--paid { background: rgba(63,191,142,0.15); color: var(--success); }
.payout-status--rejected { background: rgba(217,96,74,0.15); color: var(--danger); }
.payout-card small { color: var(--ink-dim); font-family: var(--font-mono); font-size: 10px; word-break: break-all; }

/* ===================== SOCIAL LIST ===================== */
.social-row { display: flex; align-items: center; gap: 12px; padding: 13px; background: var(--panel); border: 1px solid var(--panel-border-soft); border-radius: var(--radius-md); margin-bottom: 8px; transition: transform 0.12s; }
.social-row:active { transform: scale(0.98); }
.social-row__icon { font-size: 20px; flex: none; }
.social-row__text { flex: 1; text-align: left; }
.social-row__text b { font-family: var(--font-display); font-size: 13px; font-weight: 600; display: block; }
.social-row__text small { font-size: 10.5px; color: var(--ink-dim); }

/* responsive tightening */
@media (max-width: 340px) {
  .hero-logo { width: 152px; height: 152px; }
  .hero-title { font-size: 16px; }
  .wheel-wrap, #wheelCanvas { width: 240px; height: 240px; }
}

/* ===================== NEON NAV ICONS ===================== */
.nav-item__icon {
  font-size: 20px;
  transition: filter 0.2s, transform 0.2s;
  filter: grayscale(0.4) opacity(0.7);
}
.nav-item.is-active .nav-item__icon {
  filter: none;
  animation: neon-pulse-icon 2s ease-in-out infinite;
}
@keyframes neon-pulse-icon {
  0%,100% { filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 8px var(--cyan)); }
  50%      { filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 16px var(--cyan)) drop-shadow(0 0 24px rgba(31,216,196,0.4)); }
}
.nav-item { transition: color 0.2s; }
.nav-item.is-active { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }

/* ===================== WATCHDOGZ ENTRY BUTTON ===================== */
.watchdogz-entry-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  margin-top: 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0A0A1A 0%, #0D1B2A 60%, #0A1A18 100%);
  border: 1px solid rgba(31,216,196,0.3);
  box-shadow: 0 0 0 1px rgba(31,216,196,0.1), 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(31,216,196,0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.2s;
}
.watchdogz-entry-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(31,216,196,0.015) 2px, rgba(31,216,196,0.015) 4px);
  pointer-events: none;
}
.watchdogz-entry-btn:active { transform: scale(0.98); }
.watchdogz-entry-btn:hover { box-shadow: 0 0 0 1px rgba(31,216,196,0.4), 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(31,216,196,0.1); }
.wdz-btn-left { display: flex; align-items: center; gap: 12px; }
.wdz-icon { font-size: 26px; filter: drop-shadow(0 0 8px var(--cyan)); }
.wdz-text { text-align: left; }
.wdz-text b { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--cyan); letter-spacing: 0.05em; display: block; text-shadow: 0 0 12px rgba(31,216,196,0.6); }
.wdz-text small { font-size: 9.5px; color: rgba(31,216,196,0.6); letter-spacing: 0.02em; }
.wdz-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: rgba(31,216,196,0.12); border: 1px solid rgba(31,216,196,0.35); color: var(--cyan); letter-spacing: 0.06em; text-shadow: 0 0 8px var(--cyan); animation: wdz-badge-pulse 2s ease-in-out infinite; }
@keyframes wdz-badge-pulse { 0%,100%{box-shadow:0 0 4px rgba(31,216,196,.3)}50%{box-shadow:0 0 12px rgba(31,216,196,.6),0 0 24px rgba(31,216,196,.2)} }

/* ===================== WATCHDOGZ VIEW ===================== */
.wdz-header {
  background: linear-gradient(135deg, #0A0A1A, #0D1B2A);
  border: 1px solid rgba(31,216,196,0.2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
}
.wdz-scanline {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(31,216,196,0.02) 2px, rgba(31,216,196,0.02) 4px);
  animation: scanscroll 8s linear infinite;
}
@keyframes scanscroll { 0%{transform:translateY(0)}100%{transform:translateY(4px)} }
.wdz-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wdz-logo-text { font-family: var(--font-mono); font-size: 12px; color: rgba(31,216,196,0.7); letter-spacing: 0.1em; }
.wdz-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: blink-dot 1.5s ease-in-out infinite; flex: none; }
@keyframes blink-dot { 0%,100%{opacity:1}50%{opacity:.4} }
.wdz-status-txt { font-family: var(--font-mono); font-size: 10px; color: var(--success); letter-spacing: 0.08em; }
.wdz-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wdz-stat { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 8px; text-align: center; border: 1px solid rgba(31,216,196,0.1); }
.wdz-stat span { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--cyan); display: block; }
.wdz-stat small { font-size: 8.5px; color: var(--ink-dim); letter-spacing: 0.06em; }

.wdz-search-box { background: var(--panel); border: 1px solid rgba(31,216,196,0.15); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; }
.wdz-input {
  width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(31,216,196,0.2);
  border-radius: 8px; padding: 10px 12px; color: var(--cyan); font-family: var(--font-mono);
  font-size: 12px; outline: none;
}
.wdz-input::placeholder { color: rgba(31,216,196,0.35); }
.wdz-input:focus { border-color: rgba(31,216,196,0.5); box-shadow: 0 0 0 2px rgba(31,216,196,0.1); }
.wdz-textarea { resize: none; }
.wdz-select {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(31,216,196,0.2); border-radius: 8px;
  padding: 8px 10px; color: var(--cyan); font-family: var(--font-mono); font-size: 11px; outline: none;
}
.wdz-filter-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.wdz-search-btn {
  padding: 8px 16px; border-radius: 8px; background: rgba(31,216,196,0.15);
  border: 1px solid var(--cyan); color: var(--cyan); font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer;
  transition: all 0.15s; flex: none;
}
.wdz-search-btn:hover { background: rgba(31,216,196,0.25); box-shadow: 0 0 12px rgba(31,216,196,0.3); }

.wdz-result-card {
  background: linear-gradient(135deg, rgba(10,10,26,0.9), rgba(13,27,42,0.9));
  border: 1px solid rgba(31,216,196,0.15); border-left: 3px solid var(--cyan);
  border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px;
}
.wdz-result-uid { font-family: var(--font-mono); font-size: 9.5px; color: rgba(31,216,196,0.5); margin-bottom: 5px; }
.wdz-result-scammer { font-family: var(--font-mono); font-size: 13px; color: var(--danger); font-weight: 700; margin-bottom: 4px; word-break: break-all; }
.wdz-result-type { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(31,216,196,0.1); color: var(--cyan); margin-bottom: 6px; }
.wdz-result-desc { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 4px; }
.wdz-result-status { font-family: var(--font-mono); font-size: 9.5px; }
.wdz-empty { text-align: center; padding: 28px 16px; color: rgba(31,216,196,0.4); font-family: var(--font-mono); font-size: 11.5px; }

.wdz-form-card { background: linear-gradient(135deg, #0A0A1A, #0D1B2A); border: 1px solid rgba(31,216,196,0.2); border-radius: var(--radius-lg); padding: 16px; }
.wdz-form-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--cyan); letter-spacing: 0.06em; margin-bottom: 4px; }
.wdz-form-sub { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 14px; line-height: 1.5; }
.wdz-field { margin-bottom: 12px; }
.wdz-field label { display: block; font-family: var(--font-mono); font-size: 9.5px; color: rgba(31,216,196,0.6); letter-spacing: 0.08em; margin-bottom: 5px; }
.wdz-field label small { color: var(--ink-dim); text-transform: lowercase; font-size: 9px; }
.wdz-submit-btn {
  width: 100%; padding: 13px; border-radius: 10px; margin-top: 8px;
  background: linear-gradient(135deg, rgba(31,216,196,0.15), rgba(31,216,196,0.08));
  border: 1px solid var(--cyan); color: var(--cyan); font-family: var(--font-mono);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 0 12px rgba(31,216,196,0.15);
}
.wdz-submit-btn:hover { background: rgba(31,216,196,0.25); box-shadow: 0 0 20px rgba(31,216,196,0.3); }
.wdz-submit-btn:disabled { opacity: 0.4; cursor: default; }
.wdz-success-msg { background: rgba(63,191,142,0.1); border: 1px solid var(--success); border-radius: 8px; padding: 12px; color: var(--success); font-size: 12px; margin-top: 10px; font-family: var(--font-mono); }
.wdz-error-msg { background: rgba(217,96,74,0.1); border: 1px solid var(--danger); border-radius: 8px; padding: 12px; color: var(--danger); font-size: 12px; margin-top: 10px; font-family: var(--font-mono); }

/* ===================== HOKM: AI PLAYED AREA ===================== */
.ai-played-area {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; animation: ai-reveal 0.4s cubic-bezier(.2,.9,.3,1);
}
@keyframes ai-reveal {
  from { opacity: 0; transform: translateY(-16px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-played-label { font-family: var(--font-display); font-size: 9px; color: rgba(255,255,255,.5); letter-spacing: 0.12em; }

/* ===================== WHEEL GLOW RING ===================== */
.wheel-glow-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(201,166,70,0);
  pointer-events: none;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.wheel-glow-ring.spinning {
  border-color: var(--gold-lt);
  box-shadow: 0 0 20px rgba(201,166,70,0.4), 0 0 40px rgba(201,166,70,0.2), inset 0 0 20px rgba(201,166,70,0.1);
  animation: ring-spin-glow 0.8s ease-in-out infinite alternate;
}
@keyframes ring-spin-glow {
  from { box-shadow: 0 0 16px rgba(201,166,70,0.3), 0 0 32px rgba(201,166,70,0.15); }
  to   { box-shadow: 0 0 28px rgba(201,166,70,0.6), 0 0 56px rgba(201,166,70,0.3), 0 0 80px rgba(31,216,196,0.1); }
}
.wheel-wrap { position: relative; }

/* ===================== NEON BUTTONS (WatchDogz style — applied globally) ===================== */
/* All primary action buttons get neon glow treatment */
.btn--gold {
  box-shadow: 0 0 12px rgba(201,166,70,0.3), 0 7px 20px rgba(201,166,70,0.2);
  transition: box-shadow 0.2s, transform 0.12s;
}
.btn--gold:active { transform: scale(0.96); box-shadow: 0 0 20px rgba(201,166,70,0.5), 0 4px 12px rgba(201,166,70,0.3); }

.btn--outline {
  box-shadow: 0 0 10px rgba(31,216,196,0.15), inset 0 0 10px rgba(31,216,196,0.05);
  transition: box-shadow 0.2s, transform 0.12s;
}
.btn--outline:hover { box-shadow: 0 0 18px rgba(31,216,196,0.35), inset 0 0 14px rgba(31,216,196,0.08); }

.btn-mini {
  box-shadow: 0 0 8px rgba(201,166,70,0.2);
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn-mini:not(:disabled):hover { box-shadow: 0 0 16px rgba(201,166,70,0.4); }

.wheel-spin-btn {
  box-shadow: 0 0 16px rgba(201,166,70,0.35), 0 8px 20px rgba(201,166,70,0.2);
  transition: box-shadow 0.2s, transform 0.12s;
}
.wheel-spin-btn:not(:disabled):hover { box-shadow: 0 0 28px rgba(201,166,70,0.55), 0 10px 24px rgba(201,166,70,0.3); }

.hokm-overlay__btn {
  box-shadow: 0 0 14px rgba(201,166,70,0.3);
  transition: box-shadow 0.2s, transform 0.12s;
}
.hokm-overlay__btn:hover { box-shadow: 0 0 24px rgba(201,166,70,0.5); }

/* Nav items — neon dot indicator */
.nav-item.is-active::after {
  content: '';
  display: block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan);
  margin: 2px auto 0;
}

/* Wide cards neon border on hover */
.wide-card:hover { border-color: rgba(31,216,196,0.25); box-shadow: 0 0 14px rgba(31,216,196,0.08); }
.game-tile:hover { box-shadow: 0 0 20px rgba(31,216,196,0.12); }

/* ===================== TOP SCAMMERS LIST ===================== */
.scammer-list-section { margin-top: 14px; }
.scammer-list-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: rgba(217,96,74,0.8); text-transform: uppercase;
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
}
.scammer-list-title::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 8px var(--danger);
  animation: blink-dot 1.2s ease-in-out infinite; flex: none;
}
.scammer-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(217,96,74,0.06), rgba(10,10,26,0.8));
  border: 1px solid rgba(217,96,74,0.18); border-left: 3px solid var(--danger);
  border-radius: var(--radius-md); cursor: default;
}
.scammer-rank {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: rgba(217,96,74,0.6); width: 20px; flex: none; text-align: center;
}
.scammer-rank.top1 { color: var(--danger); text-shadow: 0 0 8px var(--danger); }
.scammer-rank.top2 { color: rgba(217,96,74,0.85); }
.scammer-info { flex: 1; min-width: 0; }
.scammer-id {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--danger);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.scammer-meta { font-size: 9.5px; color: var(--ink-dim); margin-top: 1px; }
.scammer-count {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--danger); flex: none;
  background: rgba(217,96,74,0.1); padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(217,96,74,0.25);
}
.scammer-type-badge {
  font-size: 8.5px; padding: 2px 7px; border-radius: 999px;
  background: rgba(217,96,74,0.1); color: rgba(217,96,74,0.8);
  border: 1px solid rgba(217,96,74,0.2); flex: none; white-space: nowrap;
}
.scammer-list-empty {
  text-align: center; padding: 16px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(31,216,196,0.35); letter-spacing: 0.04em;
}

/* ===================== NEON BUTTONS — REAL (no sticker/emoji mode) ===================== */
/* Override all buttons to pure neon glow style — no emoji-button appearance */
.btn, .btn--gold, .btn--outline, .btn-mini, .wheel-spin-btn,
.hokm-overlay__btn, .wdz-submit-btn, .wdz-search-btn, .pyl-play-btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
/* Gold neon */
.btn--gold {
  background: linear-gradient(160deg, var(--gold-lt) 0%, var(--gold) 100%);
  color: #1a1200;
  border: none;
  box-shadow: 0 0 0 1px rgba(232,198,107,0.3), 0 0 12px rgba(201,166,70,0.35), 0 4px 16px rgba(0,0,0,0.4);
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn--gold:active { transform: scale(0.96); box-shadow: 0 0 20px rgba(201,166,70,0.6); }
.btn--gold::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 50%);
  pointer-events:none; border-radius:inherit;
}
/* Cyan neon outline */
.btn--outline {
  background: transparent;
  color: var(--cyan);
  border: 1.5px solid var(--cyan) !important;
  box-shadow: 0 0 10px rgba(31,216,196,0.2), inset 0 0 10px rgba(31,216,196,0.04);
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn--outline:active { transform:scale(0.96); box-shadow:0 0 20px rgba(31,216,196,0.5); }
.btn--outline.is-claimed {
  border-color: var(--gold) !important;
  color: var(--gold-lt);
  box-shadow: 0 0 10px rgba(201,166,70,0.25);
}
/* Mini claim buttons */
.btn-mini {
  background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%);
  color: #1a1200; border: none;
  box-shadow: 0 0 8px rgba(201,166,70,0.3);
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.03em;
  transition: box-shadow 0.15s, transform 0.1s;
}
.btn-mini:not(:disabled):hover { box-shadow: 0 0 16px rgba(201,166,70,0.5); }
.btn-mini:not(:disabled):active { transform: scale(0.95); }
.btn-mini:disabled { background: var(--panel-2); color: var(--ink-dim); box-shadow: none; }
/* Spin button */
.wheel-spin-btn {
  background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%);
  color: #1a1200; border: none;
  box-shadow: 0 0 16px rgba(201,166,70,0.4), 0 8px 24px rgba(0,0,0,0.3);
  transition: box-shadow 0.2s, transform 0.12s;
}
.wheel-spin-btn:not(:disabled):hover { box-shadow: 0 0 28px rgba(201,166,70,0.6); }
.wheel-spin-btn:not(:disabled):active { transform:scale(0.97); }
/* Hokm overlay btn */
.hokm-overlay__btn {
  background: linear-gradient(160deg, var(--gold-lt), var(--gold) 74%);
  color: #1a1200; border: none;
  box-shadow: 0 0 14px rgba(201,166,70,0.35);
  transition: box-shadow 0.2s;
}
/* game tiles */
.game-tile--pyl {
  background: linear-gradient(160deg, #1a0a2e 0%, var(--panel) 65%);
}

/* ===================== PRESS YOUR LUCK UI ===================== */
.pyl-arena {
  background: linear-gradient(160deg, #0e0a1e, #0a0d1a);
  border: 1px solid rgba(31,216,196,0.2);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.pyl-scanline {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(31,216,196,0.015) 3px,rgba(31,216,196,0.015) 4px);
}
.pyl-timer-row {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.pyl-timer-label { font-family:var(--font-mono); font-size:9px; color:rgba(31,216,196,0.5); letter-spacing:.08em; flex:none; }
.pyl-timer-bar-wrap { flex:1; height:4px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.pyl-timer-bar { height:100%; background:var(--cyan); border-radius:999px; transition:width 0.9s linear; box-shadow:0 0 6px var(--cyan); }
.pyl-timer-num { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--cyan); min-width:28px; text-align:right; text-shadow:0 0 10px var(--cyan); flex:none; }
.pyl-timer-num.urgent { color:var(--danger); text-shadow:0 0 10px var(--danger); animation:timer-blink .5s ease-in-out infinite; }
@keyframes timer-blink { 0%,100%{opacity:1} 50%{opacity:.5} }

.pyl-card-area { display:flex; align-items:flex-start; gap:10px; justify-content:center; margin-bottom:8px; }
.pyl-card-wrap { position:relative; width:150px; height:210px; flex:none; }
.pyl-card-back {
  width:150px; height:210px; border-radius:14px;
  background:linear-gradient(160deg,#1e4a8a,#0d2a5c);
  border:2px solid rgba(31,216,196,0.4);
  box-shadow:0 0 20px rgba(31,216,196,0.2), 0 8px 24px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  font-size:60px; color:rgba(31,216,196,0.3);
  position:absolute; top:0; left:0;
  animation:card-breathe 2s ease-in-out infinite;
}
@keyframes card-breathe { 0%,100%{box-shadow:0 0 16px rgba(31,216,196,0.2)} 50%{box-shadow:0 0 28px rgba(31,216,196,0.4)} }
.pyl-card-front { position:absolute; top:0; left:0; animation:card-flip-in .4s cubic-bezier(.2,.9,.3,1); }
@keyframes card-flip-in { from{transform:rotateY(90deg) scale(0.8);opacity:0} to{transform:rotateY(0) scale(1);opacity:1} }
.pyl-card {
  width:150px; height:210px; border-radius:14px;
  background:#fff; border:2px solid rgba(0,0,0,0.1);
  box-shadow:0 0 30px rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; font-weight:800;
}
.pyl-card-rank { font-size:48px; line-height:1; }
.pyl-card-suit { font-size:38px; line-height:1; }
.pyl-card.red { color:#C23B3B; }
.pyl-card.black { color:#1a1a1a; }
.pyl-card.joker {
  background:linear-gradient(160deg,#f5e642,#ff9900);
  color:#1a0a00;
  box-shadow:0 0 40px rgba(255,200,0,0.5);
}

.pyl-history-panel { display:flex; flex-direction:column; gap:5px; }
.pyl-history-label { font-family:var(--font-mono); font-size:8px; color:rgba(255,255,255,0.3); letter-spacing:.08em; writing-mode:vertical-rl; text-orientation:mixed; align-self:flex-start; }
.pyl-hist-card {
  width:44px; height:62px; border-radius:8px;
  background:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  border:1px solid rgba(0,0,0,0.1);
}
.pyl-hist-card .hr { font-size:14px; font-weight:800; line-height:1; }
.pyl-hist-card .hs { font-size:12px; line-height:1; }
.pyl-hist-card.red { color:#C23B3B; }
.pyl-hist-card.black { color:#1a1a1a; }
.pyl-hist-card.joker { background:linear-gradient(160deg,#f5e642,#ff9900); color:#1a0a00; }

.pyl-round-info { font-family:var(--font-mono); font-size:9.5px; color:rgba(255,255,255,0.3); text-align:center; letter-spacing:.06em; }

.pyl-result-popup {
  background:linear-gradient(160deg,rgba(10,10,30,0.95),rgba(6,8,11,0.95));
  border:1px solid rgba(201,166,70,0.35); border-radius:var(--radius-lg);
  padding:14px 16px; margin-bottom:12px; text-align:center;
  animation:pop-in .35s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 0 30px rgba(201,166,70,0.15);
}
@keyframes pop-in { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }
.pyl-stars { font-size:22px; margin-bottom:6px; letter-spacing:4px; }
.pyl-result-text { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--gold-lt); text-shadow:0 0 12px rgba(201,166,70,0.5); }
.pyl-result-sub { font-size:11.5px; color:var(--ink-dim); margin-top:3px; font-family:var(--font-mono); }
.pyl-result-popup.lose .pyl-result-text { color:var(--danger); text-shadow:0 0 12px rgba(217,96,74,0.4); }
.pyl-result-popup.lose .pyl-stars { filter:grayscale(1) opacity(0.5); }

/* Bet type buttons — neon style like in the screenshots */
.pyl-bet-types {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
}
.pyl-bet-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 8px; border-radius:12px; gap:3px;
  background:var(--panel-2);
  border:1.5px solid rgba(255,255,255,0.08);
  cursor:pointer; transition:all 0.15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.pyl-bet-btn:active { transform:scale(0.97); }
.pyl-bet-btn.selected {
  border-color:var(--cyan);
  background:rgba(31,216,196,0.1);
  box-shadow:0 0 14px rgba(31,216,196,0.3), inset 0 0 10px rgba(31,216,196,0.05);
}
.pyl-bet-btn--joker.selected {
  border-color:var(--gold-lt);
  background:rgba(232,198,107,0.12);
  box-shadow:0 0 14px rgba(201,166,70,0.35);
}
.pyl-bet-btn.has-bet { border-color:var(--success); background:rgba(63,191,142,0.1); }
.pyl-btn-name { font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--ink); }
.pyl-bet-btn.selected .pyl-btn-name { color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
.pyl-bet-btn--joker.selected .pyl-btn-name { color:var(--gold-lt); text-shadow:0 0 8px var(--gold-lt); }
.pyl-btn-multi { font-family:var(--font-mono); font-size:10px; color:var(--ink-dim); }
.pyl-bet-btn.selected .pyl-btn-multi { color:rgba(31,216,196,0.7); }

/* Amount controls */
.pyl-amount-section { background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px; }
.pyl-amount-label { font-family:var(--font-display); font-size:10px; color:var(--ink-dim); letter-spacing:.06em; margin-bottom:8px; }
.pyl-amount-controls { display:flex; gap:6px; margin-bottom:8px; }
.pyl-ctrl-btn { padding:7px 14px; border-radius:8px; background:var(--panel-2); border:1px solid rgba(255,255,255,0.08); color:var(--ink); font-family:var(--font-display); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.pyl-ctrl-btn:hover { border-color:rgba(31,216,196,0.3); color:var(--cyan); }
.pyl-ctrl-btn--del { color:var(--danger); }
.pyl-quick-bets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.pyl-quick-btn { padding:7px 10px; border-radius:8px; background:var(--panel-2); border:1px solid rgba(255,255,255,0.08); color:var(--ink-dim); font-family:var(--font-display); font-size:11px; font-weight:600; cursor:pointer; flex:1; min-width:52px; transition:all .15s; }
.pyl-quick-btn:hover { border-color:var(--gold); color:var(--gold-lt); }
.pyl-quick-btn.active-amt { border-color:var(--gold); color:var(--gold-lt); background:rgba(201,166,70,0.08); }
.pyl-selected-display { display:flex; justify-content:space-between; align-items:center; padding:8px 0 0; border-top:1px solid rgba(255,255,255,0.06); }
.pyl-sel-type { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-dim); }
.pyl-sel-amt { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--gold-lt); }

.pyl-play-btn {
  width:100%; padding:15px; border-radius:14px; font-family:var(--font-display);
  font-size:15px; font-weight:700; letter-spacing:0.06em;
  background:linear-gradient(160deg,#3dff6e,#20c95a);
  color:#021a0a; border:none;
  box-shadow:0 0 20px rgba(32,201,90,0.4), 0 6px 20px rgba(0,0,0,0.3);
  transition:all .15s; cursor:pointer;
}
.pyl-play-btn:not(:disabled):hover { box-shadow:0 0 32px rgba(32,201,90,0.6); }
.pyl-play-btn:not(:disabled):active { transform:scale(0.98); }
.pyl-play-btn:disabled { background:var(--panel-2); color:var(--ink-dim); box-shadow:none; }
.pyl-play-btn.betting-closed { background:var(--panel-3); color:var(--ink-dim); }

/* History table */
.pyl-hist-row { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--panel); border:1px solid rgba(255,255,255,0.055); border-radius:var(--radius-sm); margin-bottom:5px; font-size:11.5px; }
.pyl-hist-bet-type { font-family:var(--font-display); font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.pyl-hist-bet-type.red { background:rgba(217,96,74,0.15); color:#ef6e5a; }
.pyl-hist-bet-type.black { background:rgba(100,100,100,0.15); color:#aaa; }
.pyl-hist-bet-type.low { background:rgba(88,166,255,0.15); color:#58a6ff; }
.pyl-hist-bet-type.high { background:rgba(188,140,255,0.15); color:#bc8cff; }
.pyl-hist-bet-type.joker { background:rgba(255,200,0,0.15); color:#ffd700; }
.pyl-hist-amt { font-family:var(--font-display); font-size:12px; color:var(--ink-dim); flex:1; }
.pyl-hist-win { font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--success); }
.pyl-hist-lose { font-family:var(--font-display); font-size:12px; color:var(--danger); }

/* ===================== TON BALANCE CARD ===================== */
.ton-balance-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; margin-bottom: 10px;
  background: linear-gradient(135deg, #0e1a2e, #0a1220);
  border: 1px solid rgba(31,216,196,0.25); border-radius: var(--radius-lg);
  box-shadow: 0 0 16px rgba(31,216,196,0.06);
}
.ton-balance-left { display: flex; align-items: center; gap: 12px; }
.ton-icon { font-size: 26px; filter: drop-shadow(0 0 8px rgba(31,216,196,0.5)); }
.ton-balance-label { font-family: var(--font-mono); font-size: 9.5px; color: rgba(31,216,196,0.5); letter-spacing: .08em; text-transform: uppercase; }
.ton-balance-val { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 10px rgba(31,216,196,0.4); }
.ton-deposit-btn {
  padding: 8px 16px; border-radius: 8px;
  background: rgba(31,216,196,0.12); border: 1px solid var(--cyan);
  color: var(--cyan); font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer; transition: all .15s;
}
.ton-deposit-btn:hover { background: rgba(31,216,196,0.22); box-shadow: 0 0 12px rgba(31,216,196,0.3); }

/* ===================== PYL CURRENCY TOGGLE ===================== */
.pyl-currency-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding: 8px 12px; background: var(--panel-2); border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.06);
}
.pyl-currency-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-dim); letter-spacing: .06em; flex: none; }
.pyl-currency-toggle { display: flex; gap: 4px; flex: none; }
.pyl-cur-btn {
  padding: 6px 14px; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--panel-3); border: 1px solid rgba(255,255,255,.08); color: var(--ink-dim); cursor: pointer; transition: all .15s;
}
.pyl-cur-btn.is-active { background: rgba(31,216,196,0.15); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px rgba(31,216,196,0.2); }
.pyl-cur-balance { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-left: auto; }

/* ===================== TON PAYMENT RESULT BOX ===================== */
.ton-payment-box {
  background: var(--panel-2); border: 1px solid rgba(31,216,196,0.2);
  border-radius: var(--radius-md); padding: 14px;
}
.ton-payment-box p { font-size: 11.5px; color: var(--ink-dim); margin: 0 0 8px; line-height: 1.5; }
.ton-payment-box .ton-wallet-addr {
  font-family: var(--font-mono); font-size: 11px; color: var(--cyan);
  background: rgba(31,216,196,0.06); padding: 8px 10px; border-radius: 8px;
  word-break: break-all; border: 1px solid rgba(31,216,196,0.15); margin: 6px 0;
}
.ton-payment-box .ton-comment {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--gold-lt);
  background: rgba(201,166,70,0.08); padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(201,166,70,0.2); margin-top: 6px; text-align: center;
}
.ton-payment-box .ton-warning { color: var(--danger); font-size: 10.5px; margin-top: 8px; }

/* ===================== VEGAS ROULETTE WHEEL (CSS only override) ===================== */
/* The JS drawWheel() renders the actual segments — we enhance the outer shell */
#wheelCanvas {
  border-radius: 50%;
  box-shadow:
    0 0 0 8px #1a1a1a,
    0 0 0 10px #2d2d2d,
    0 0 0 12px #B8860B,
    0 0 0 14px #2d2d2d,
    0 20px 50px rgba(0,0,0,0.7);
}
.wheel-pointer {
  border-top-color: #ff2020;
  filter: drop-shadow(0 2px 6px rgba(255,32,32,0.6));
}
.wheel-hub {
  background: radial-gradient(circle, #f5f5f5, #c0c0c0 40%, #888 70%, #444);
  border: 3px solid #B8860B;
  box-shadow: 0 0 0 2px #2d2d2d, 0 4px 12px rgba(0,0,0,0.5);
}

/* ===================== FLIPCOIN GAME ===================== */
.game-tile--flipcoin {
  background: linear-gradient(160deg, #1a1200 0%, #2b1d00 40%, var(--panel) 100%);
}
.flipcoin-arena {
  background: linear-gradient(160deg, #0e0800, #1a1200);
  border: 1px solid rgba(201,166,70,0.25);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.flipcoin-desc {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-family: var(--font-display); font-size: 12px; color: var(--ink-dim);
}
.flipcoin-mult-badge {
  background: rgba(201,166,70,0.15); border: 1px solid rgba(201,166,70,0.3);
  color: var(--gold-lt); padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.flipcoin-stage {
  display: flex; flex-direction: column; align-items: center; margin: 8px 0 4px;
  position: relative;
}

/* Coin */
.flipcoin-coin {
  width: 120px; height: 120px;
  perspective: 800px;
  cursor: default;
  position: relative;
}
.flipcoin-face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; backface-visibility: hidden;
  transition: transform 0.05s;
}
.flipcoin-face--ton {
  background: radial-gradient(circle at 35% 35%, #8ff5ee, var(--cyan) 60%, #0a5550);
  border: 4px solid var(--cyan);
  box-shadow: 0 0 24px rgba(31,216,196,0.4), inset 0 2px 8px rgba(255,255,255,0.2);
}
.flipcoin-face--foxc {
  background: radial-gradient(circle at 35% 35%, var(--gold-lt), var(--gold) 60%, #5a3800);
  border: 4px solid var(--gold-lt);
  box-shadow: 0 0 24px rgba(201,166,70,0.4), inset 0 2px 8px rgba(255,255,255,0.2);
  display: none;
}
.flipcoin-face-icon { font-size: 36px; line-height: 1; }
.flipcoin-face-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: rgba(0,0,0,0.7); letter-spacing: 0.05em;
}

/* Coin flip animation */
@keyframes coin-flip {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(900deg); }
  50%  { transform: rotateY(1800deg); }
  75%  { transform: rotateY(2700deg); }
  100% { transform: rotateY(3600deg); }
}
.flipcoin-coin.is-flipping {
  animation: coin-flip 1.2s cubic-bezier(0.4, 0, 0.6, 1);
}

.flipcoin-result-msg {
  margin-top: 10px; padding: 10px 20px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  text-align: center; animation: pop-in 0.3s cubic-bezier(.2,.9,.3,1);
}
.flipcoin-result-msg.win {
  background: rgba(63,191,142,0.12); border: 1px solid var(--success);
  color: var(--success); text-shadow: 0 0 12px rgba(63,191,142,0.4);
}
.flipcoin-result-msg.lose {
  background: rgba(217,96,74,0.1); border: 1px solid var(--danger);
  color: var(--danger);
}

/* Side buttons */
.flipcoin-sides {
  display: flex; align-items: center; gap: 10px; margin: 10px 0;
}
.flipcoin-side-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border-radius: var(--radius-lg);
  background: var(--panel-2); border: 2px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: all 0.15s;
}
.flipcoin-side-btn:active { transform: scale(0.97); }
.flipcoin-side-btn[data-side="ton"].selected {
  border-color: var(--cyan); background: rgba(31,216,196,0.1);
  box-shadow: 0 0 16px rgba(31,216,196,0.3);
}
.flipcoin-side-btn[data-side="foxc"].selected {
  border-color: var(--gold-lt); background: rgba(201,166,70,0.1);
  box-shadow: 0 0 16px rgba(201,166,70,0.3);
}
.flipcoin-side-icon { font-size: 28px; }
.flipcoin-side-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink);
}
.flipcoin-side-btn.selected .flipcoin-side-name { color: var(--cyan); }
.flipcoin-side-btn[data-side="foxc"].selected .flipcoin-side-name { color: var(--gold-lt); }
.flipcoin-side-mult { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); }
.flipcoin-vs {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--ink-faint); flex: none;
}

/* History row */
.flipcoin-history-header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 10.5px; color: var(--ink-dim);
  letter-spacing: 0.05em; margin: 12px 0 6px; text-transform: uppercase;
}
.flipcoin-history-row {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px;
}
.flip-hist-chip {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: 2px solid transparent;
  transition: transform 0.1s;
}
.flip-hist-chip.win-ton { border-color: var(--cyan); background: rgba(31,216,196,0.15); }
.flip-hist-chip.win-foxc { border-color: var(--gold-lt); background: rgba(201,166,70,0.15); }
.flip-hist-chip.lose { border-color: rgba(217,96,74,0.4); background: rgba(217,96,74,0.08); filter: grayscale(0.5) opacity(0.6); }

/* ===================== ROULETTE DESCRIPTION BANNER ===================== */
.roulette-desc-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(135deg, rgba(184,134,11,0.08), rgba(10,10,10,0.6));
  border: 1px solid rgba(184,134,11,0.25); border-radius: var(--radius-md);
  padding: 10px 13px; margin-bottom: 10px;
}
.roulette-desc-icon { font-size: 20px; flex: none; margin-top: 1px; }
.roulette-desc-banner p {
  margin: 0; font-size: 11.5px; color: var(--ink-dim); line-height: 1.55;
}
.roulette-desc-banner p b { color: var(--gold-lt); }

/* ===================== ROULETTE HISTORY ===================== */
.roulette-history-wrap {
  margin-top: 14px; background: var(--panel);
  border: 1px solid rgba(255,255,255,0.055); border-radius: var(--radius-lg); padding: 12px 14px;
}
.roulette-history-title {
  font-family: var(--font-display); font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 10px;
}
.roulette-history-list { display: flex; flex-direction: column; gap: 6px; }
.roulette-history-empty { font-size: 11px; color: var(--ink-faint); text-align: center; padding: 12px 0; font-family: var(--font-mono); }
.roulette-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid rgba(255,255,255,0.04);
}
.roulette-hist-num {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
.roulette-hist-num.green { background: #1a7a1a; color: #fff; box-shadow: 0 0 8px rgba(26,122,26,0.5); }
.roulette-hist-num.red   { background: #C0392B; color: #fff; box-shadow: 0 0 8px rgba(192,57,43,0.4); }
.roulette-hist-num.black { background: #1a1a1a; color: #ddd; border: 1px solid #444; }
.roulette-hist-prize { flex: 1; font-family: var(--font-display); font-size: 12px; color: var(--gold-lt); }
.roulette-hist-date { font-size: 9.5px; color: var(--ink-faint); font-family: var(--font-mono); }

/* ===================== FLIPCOIN — REAL COIN DESIGN ===================== */
.flipcoin-coin {
  width: 140px; height: 140px; position: relative;
  transform-style: preserve-3d; perspective: 800px;
  margin: 0 auto;
}
.flipcoin-face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; backface-visibility: hidden;
}
/* TON side: metallic cyan coin */
.flipcoin-face--ton {
  background: conic-gradient(from 0deg, #0a4a45, #1FD8C4 20%, #8ff5ee 40%, #1FD8C4 60%, #0a4a45 80%, #1FD8C4);
  border: 5px solid #1FD8C4;
  box-shadow: 0 0 0 2px rgba(31,216,196,0.3), 0 0 30px rgba(31,216,196,0.4),
              inset 0 2px 8px rgba(255,255,255,0.3), inset 0 -4px 12px rgba(0,0,0,0.4);
}
.flipcoin-face--ton::after {
  content: '◈';
  position: absolute; inset: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: rgba(31,216,196,0.25);
  border-radius: 50%; border: 2px solid rgba(31,216,196,0.15);
}
/* FOXC side: gold coin */
.flipcoin-face--foxc {
  background: conic-gradient(from 0deg, #5a3800, #C9A646 20%, #E8C66B 40%, #C9A646 60%, #5a3800 80%, #C9A646);
  border: 5px solid #C9A646;
  box-shadow: 0 0 0 2px rgba(201,166,70,0.3), 0 0 30px rgba(201,166,70,0.4),
              inset 0 2px 8px rgba(255,255,255,0.3), inset 0 -4px 12px rgba(0,0,0,0.4);
  display: none;
}
.flipcoin-face--foxc::after {
  content: '🦊';
  position: absolute; font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.flipcoin-face-icon { font-size: 32px; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.flipcoin-face-label {
  z-index: 1; font-family: var(--font-display); font-size: 11px; font-weight: 800;
  color: rgba(0,0,0,0.8); letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

/* Coin flip animation */
@keyframes coin-flip {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(1800deg); }
}
.flipcoin-coin.is-flipping {
  animation: coin-flip 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===================== BUTTON GLOBAL STYLE (ctOS) ===================== */
/* All primary/action buttons — remove sticker appearance, pure neon */
.btn, .btn--gold, .btn--outline, .btn-mini,
.wheel-spin-btn, .hokm-overlay__btn,
.wdz-submit-btn, .wdz-search-btn,
.pyl-play-btn, .flipcoin-side-btn,
.wide-card, .game-tile {
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Gold action buttons */
.btn--gold {
  background: linear-gradient(145deg, #E8C66B 0%, #C9A646 50%, #9A7B2E 100%);
  color: #1a1200; border: none;
  box-shadow: 0 0 0 1px rgba(232,198,107,0.4), 0 0 16px rgba(201,166,70,0.35),
              0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all 0.15s;
}
.btn--gold:active { transform: scale(0.96); box-shadow: 0 0 24px rgba(201,166,70,0.6); }

/* Claim/outline buttons */
.btn--outline {
  background: rgba(31,216,196,0.06);
  color: var(--cyan); border: 1.5px solid var(--cyan) !important;
  box-shadow: 0 0 12px rgba(31,216,196,0.2), inset 0 0 12px rgba(31,216,196,0.04);
  transition: all 0.15s;
}
.btn--outline:active { transform: scale(0.96); box-shadow: 0 0 24px rgba(31,216,196,0.5); }

/* Mini claim buttons */
.btn-mini {
  background: linear-gradient(145deg, #E8C66B, #C9A646);
  color: #1a1200; border: none;
  box-shadow: 0 0 10px rgba(201,166,70,0.3);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em;
}
.btn-mini:not(:disabled):active { transform: scale(0.95); }
.btn-mini:disabled { background: var(--panel-2); color: var(--ink-faint); box-shadow: none; }

/* Wheel spin */
.wheel-spin-btn {
  background: linear-gradient(145deg, #E8C66B 0%, #C9A646 50%, #9A7B2E 100%);
  color: #1a1200; border: none;
  box-shadow: 0 0 20px rgba(201,166,70,0.4), 0 8px 24px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.wheel-spin-btn:not(:disabled):active { transform: scale(0.97); }

/* Spades overlay */
.hokm-overlay__btn {
  background: linear-gradient(145deg, #E8C66B 0%, #C9A646 60%, #9A7B2E 100%);
  color: #1a1200; border: none;
  box-shadow: 0 0 16px rgba(201,166,70,0.4);
}

/* PYL play */
.pyl-play-btn {
  background: linear-gradient(145deg, #4ade80, #22c55e);
  color: #021a0a; border: none;
  box-shadow: 0 0 20px rgba(74,222,128,0.4), 0 6px 20px rgba(0,0,0,0.3);
}
.pyl-play-btn:not(:disabled):active { transform: scale(0.98); }
.pyl-play-btn:disabled { background: var(--panel-2); color: var(--ink-faint); box-shadow: none; }

/* FlipCoin play inherits pyl-play-btn */

/* ===================== REFERRAL SECTION ===================== */
.referral-card {
  background: linear-gradient(135deg, #0e1a2e, #0a1220);
  border: 1px solid rgba(31,216,196,0.2); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 10px;
}
.referral-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--cyan); letter-spacing: 0.06em; margin-bottom: 4px; }
.referral-sub { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 14px; line-height: 1.5; }
.referral-reward { display: inline-flex; align-items: center; gap: 6px; background: rgba(201,166,70,0.1); border: 1px solid rgba(201,166,70,0.25); border-radius: 8px; padding: 6px 12px; font-family: var(--font-display); font-size: 12px; color: var(--gold-lt); margin-bottom: 14px; }
.referral-link-box { background: rgba(0,0,0,0.4); border: 1px solid rgba(31,216,196,0.2); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.referral-link-text { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); flex: 1; word-break: break-all; }
.referral-copy-btn { padding: 6px 14px; border-radius: 7px; background: rgba(31,216,196,0.12); border: 1px solid var(--cyan); color: var(--cyan); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; cursor: pointer; flex: none; transition: all .15s; }
.referral-copy-btn:active { background: rgba(31,216,196,0.25); }
.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.referral-stat { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; text-align: center; }
.referral-stat-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gold-lt); display: block; }
.referral-stat-label { font-size: 9.5px; color: var(--ink-dim); letter-spacing: 0.05em; margin-top: 2px; }