/* ═══════════════════════════════════════════
   ROYAL ANDAR BAHAR — style.css
   royalgame.fun/royal-andar-bahar
═══════════════════════════════════════════ */

/* ── RESET ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y
}

::-webkit-scrollbar {
  width: 4px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: rgba(239, 191, 4, .25);
  border-radius: 2px
}

/* ══ THEME VARIABLES ══ */
:root {
  --gold: #EFBF04;
  --gold2: #b8920a;
  --gold3: #fff5a0;
  --red: #dc2626;
  --red2: #ff4444;
  --grn: #00c853;
  --bg: #020804;
  --bg2: #061006;
  --felt: #0a2010;
  --felt2: #061206;
  --andr: #3b82f6;
  --bahr: #ef4444;
  --card-bg: linear-gradient(145deg, #fffef8, #f5f0e0);
  --card-red: #dc2626;
  --card-black: #111;
  --cw: clamp(33px, 8.5vw, 50px);
  --ch: clamp(46px, 12vw, 70px);
}

/* Gold theme — Level 5 */
body.t-gold {
  --bg: #060400;
  --bg2: #0c0800;
  --felt: #1a1000;
  --felt2: #100c00;
  --gold: #FFD700;
  --gold2: #cc8800;
  --gold3: #ffe98a;
  --andr: #f59e0b;
  --bahr: #f97316;
  --card-bg: linear-gradient(145deg, #2a2200, #1a1600);
  --card-red: #f97316;
  --card-black: #FFD700;
}

/* Royal theme — Level 10 */
body.t-royal {
  --bg: #020010;
  --bg2: #06001a;
  --felt: #0d0038;
  --felt2: #090025;
  --gold: #c084fc;
  --gold2: #9333ea;
  --gold3: #f0abfc;
  --andr: #818cf8;
  --bahr: #e879f9;
  --card-bg: linear-gradient(145deg, #1a0050, #0d0035);
  --card-red: #e879f9;
  --card-black: #818cf8;
}

/* ══ BODY ══ */
body {
  background: radial-gradient(ellipse 140% 160% at 50% -10%, #1a4a1a 0%, #0d2d0d 25%, var(--bg2) 55%, var(--bg) 100%);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Rajdhani', 'Arial Black', sans-serif;
}

body.t-gold {
  background: radial-gradient(ellipse 140% 160% at 50% -10%, #3a2a00 0%, #1a1200 25%, #0c0800 55%, #060400 100%);
}

body.t-royal {
  background: radial-gradient(ellipse 140% 160% at 50% -10%, #1a0060 0%, #0d0040 25%, #06001a 55%, #020010 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .005) 0, rgba(255, 255, 255, .005) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .005) 0, rgba(255, 255, 255, .005) 1px, transparent 1px, transparent 9px);
}

/* ── BG CANVAS ── */
#bgc {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0
}

/* ── FLASH ── */
#flashEl {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0
}

#flashEl.on {
  animation: flashA .5s ease-out forwards
}

@keyframes flashA {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* ── CONFETTI ── */
#confettiEl {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 201;
  overflow: hidden
}

.cf {
  position: absolute;
  top: -20px;
  animation: cffall var(--d) linear forwards
}

@keyframes cffall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1
  }

  100% {
    transform: translateY(105vh) rotate(720deg);
    opacity: 0
  }
}

/* ── TOAST ── */
#toast {
  position: fixed;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(145deg, #0a1a0a, #061006);
  border: 1.5px solid rgba(239, 191, 4, .5);
  border-radius: 12px;
  padding: clamp(8px, 2vw, 12px) clamp(16px, 4vw, 28px);
  z-index: 320;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

.toast-t {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.6em, 1.8vw, .82em);
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 2px
}

/* ══ MODALS ══ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.overlay.show {
  opacity: 1;
  pointer-events: all
}

.modal-box {
  background: linear-gradient(145deg, #061206, #0a1a0a);
  border: 2px solid rgba(239, 191, 4, .5);
  border-radius: 20px;
  padding: clamp(18px, 4vw, 30px);
  max-width: clamp(300px, 90vw, 420px);
  width: 100%;
  text-align: center;
  transform: scale(.9);
  transition: transform .3s;
  box-shadow: 0 0 60px rgba(239, 191, 4, .14), 0 20px 60px rgba(0, 0, 0, .8);
}

.overlay.show .modal-box {
  transform: scale(1)
}

.modal-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1em, 4vw, 1.5em);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 0 20px var(--gold);
  margin-bottom: 10px
}

.modal-sub {
  font-family: 'Rajdhani', sans-serif;
  color: rgba(255, 255, 255, .75);
  font-size: clamp(.8em, 2.5vw, 1em);
  margin-bottom: 16px;
  letter-spacing: .5px;
  line-height: 1.5
}

.modal-btn {
  background: linear-gradient(145deg, #4a2200, #2a1200);
  border: 2px solid var(--gold);
  border-radius: 12px;
  color: var(--gold);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.65em, 2vw, .85em);
  font-weight: 900;
  letter-spacing: 2px;
  padding: 11px 30px;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  max-width: 240px;
  margin-top: 6px;
}

.modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 191, 4, .4)
}

.modal-unlock {
  margin: 10px 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95em;
  color: var(--grn)
}

/* Daily grid */
.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 14px 0
}

.day-item {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  padding: clamp(4px, 1.4vw, 7px) 2px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.38em, 1vw, .5em);
  color: rgba(255, 255, 255, .38);
}

.day-item.done {
  background: rgba(239, 191, 4, .14);
  border-color: rgba(239, 191, 4, .4);
  color: var(--gold)
}

.day-item.today {
  background: rgba(0, 200, 83, .2);
  border-color: var(--grn);
  color: var(--grn);
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(0, 200, 83, .35)
}

.day-item .day-num {
  font-size: 1.4em
}

.day-item .day-coin {
  margin-top: 2px;
  opacity: .8
}

.day-reward-txt {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.8em, 2.5vw, 1.1em);
  color: var(--grn);
  font-weight: 900;
  margin: 10px 0
}

/* ══ SIDE PANELS ══ */
.panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(340px, 95vw);
  height: 100%;
  background: linear-gradient(180deg, #061206, #020804);
  border-left: 1.5px solid rgba(239, 191, 4, .2);
  z-index: 380;
  transition: right .32s cubic-bezier(.25, .46, .45, .94);
  overflow-y: auto;
  padding: 20px 14px 40px;
}

.panel.open {
  right: 0
}

.panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 370;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s
}

.panel-overlay.show {
  opacity: 1;
  pointer-events: all
}

.panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.panel-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05em;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 3px
}

.panel-close {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: rgba(255, 255, 255, .6);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center
}

/* Stats rows */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: 'Rajdhani', sans-serif;
  font-size: .95em
}

.stat-row .sl {
  color: rgba(255, 255, 255, .5);
  letter-spacing: .5px
}

.stat-row .sv {
  font-family: 'Orbitron', sans-serif;
  font-size: .84em;
  font-weight: 900;
  color: var(--gold)
}

.pref-section {
  margin-top: 16px
}

.pref-title {
  font-family: 'Cinzel', serif;
  font-size: .72em;
  color: rgba(239, 191, 4, .7);
  letter-spacing: 2px;
  margin-bottom: 10px
}

.pref-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.pref-bar {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 10px;
  text-align: center
}

.pref-bar label {
  display: block;
  font-size: .66em;
  letter-spacing: 2px;
  margin-bottom: 6px;
  font-family: 'Orbitron', sans-serif
}

.pref-fill {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 5px
}

.pref-val {
  font-family: 'Orbitron', sans-serif;
  font-size: .78em;
  font-weight: 900
}

.weekly-done {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--grn);
  border-radius: 8px;
  color: var(--grn);
  font-family: 'Orbitron', sans-serif;
  font-size: .66em;
  text-align: center
}

/* Theme panel */
.theme-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: .84em;
  color: rgba(255, 255, 255, .44);
  margin-bottom: 10px
}

.theme-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px
}

.theme-card {
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
  position: relative
}

.theme-card.active {
  border-color: var(--gold);
  transform: scale(1.04)
}

.theme-card.locked {
  opacity: .4;
  cursor: default
}

.tc-icon {
  font-size: 1.8em;
  margin-bottom: 6px
}

.tc-name {
  font-family: 'Cinzel', serif;
  font-size: .6em;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--gold)
}

.tc-lock {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: .6em;
  opacity: .7
}

.tc-active {
  font-size: .5em;
  color: var(--grn);
  margin-top: 4px;
  font-family: 'Orbitron', sans-serif
}

.th-classic {
  background: linear-gradient(145deg, #0a2010, #061206)
}

.th-gold {
  background: linear-gradient(145deg, #1a1000, #100800)
}

.th-royal {
  background: linear-gradient(145deg, #0d0038, #080025)
}

/* Badge panel */
.badge-meta {
  font-family: 'Orbitron', sans-serif;
  font-size: .6em;
  color: rgba(255, 255, 255, .38);
  letter-spacing: 2px;
  margin-bottom: 12px
}

.badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.badge-item {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center
}

.badge-item.earned {
  border-color: rgba(239, 191, 4, .4);
  background: rgba(239, 191, 4, .07)
}

.badge-item.locked {
  opacity: .36
}

.badge-icon {
  font-size: 1.5em;
  margin-bottom: 4px
}

.badge-name {
  font-family: 'Cinzel', serif;
  font-size: .6em;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px
}

.badge-desc {
  font-size: .6em;
  color: rgba(255, 255, 255, .44);
  margin-top: 2px;
  line-height: 1.3
}

/* Tournament */
.tourn-note {
  font-family: 'Rajdhani', sans-serif;
  font-size: .84em;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 12px;
  line-height: 1.4
}

.tourn-week {
  font-family: 'Orbitron', sans-serif;
  font-size: .6em;
  color: rgba(239, 191, 4, .6);
  letter-spacing: 2px;
  margin-bottom: 12px
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 8px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, .03)
}

.lb-row.player {
  background: rgba(239, 191, 4, .1);
  border: 1px solid rgba(239, 191, 4, .3)
}

.lb-pos {
  font-family: 'Orbitron', sans-serif;
  font-size: .72em;
  font-weight: 900;
  color: var(--gold);
  width: 24px;
  text-align: center
}

.lb-name {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95em;
  font-weight: 700;
  color: #fff
}

.lb-score {
  font-family: 'Orbitron', sans-serif;
  font-size: .72em;
  color: var(--gold);
  font-weight: 900
}

.lb-below {
  text-align: center;
  padding: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: .62em;
  color: var(--gold)
}

/* ── LEVEL UP TOAST ── */
#lvToast {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: linear-gradient(145deg, #2a1000, #180800);
  border: 3px solid #ff8800;
  border-radius: 14px;
  padding: clamp(10px, 2.5vw, 16px) clamp(18px, 4.5vw, 30px);
  text-align: center;
  z-index: 360;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(255, 136, 0, .5);
}

#lvToast.pop {
  animation: lvIn .44s cubic-bezier(.175, .885, .32, 1.275) forwards
}

#lvToast.gone {
  animation: lvOut .3s ease-in forwards
}

@keyframes lvIn {
  from {
    transform: translateX(-50%) scale(0)
  }

  to {
    transform: translateX(-50%) scale(1)
  }
}

@keyframes lvOut {
  from {
    transform: translateX(-50%) scale(1);
    opacity: 1
  }

  to {
    transform: translateX(-50%) scale(0);
    opacity: 0
  }
}

.lv-t {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.72em, 2vw, .9em);
  color: #ff9900;
  font-weight: 900;
  letter-spacing: 2px
}

.lv-n {
  font-family: 'Cinzel', serif;
  font-size: clamp(.9em, 2.5vw, 1.2em);
  color: #fff;
  font-weight: 900;
  margin-top: 3px
}

/* ── ACHIEVEMENT TOAST ── */
#achToast {
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: linear-gradient(145deg, #001a2a, #000d18);
  border: 2px solid rgba(100, 200, 255, .5);
  border-radius: 14px;
  padding: 10px 18px;
  z-index: 361;
  pointer-events: none;
  opacity: 0;
  transition: all .35s;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#achToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

.ach-icon {
  font-size: 1.4em
}

.ach-t {
  font-family: 'Cinzel', serif;
  font-size: .74em;
  font-weight: 900;
  color: #60c0ff;
  letter-spacing: 2px
}

.ach-d {
  font-size: .65em;
  color: rgba(255, 255, 255, .54);
  margin-top: 2px
}

/* ── RESULT OVERLAY ── */
#resultEl {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 18px;
  padding: clamp(14px, 3.5vw, 24px) clamp(22px, 5.5vw, 44px);
  text-align: center;
  z-index: 340;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#resultEl.pop {
  animation: resPop .42s cubic-bezier(.175, .885, .32, 1.275) forwards
}

#resultEl.gone {
  animation: resGone .3s ease-in forwards
}

@keyframes resPop {
  from {
    transform: translate(-50%, -50%) scale(0)
  }

  to {
    transform: translate(-50%, -50%) scale(1)
  }
}

@keyframes resGone {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
  }

  to {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0
  }
}

.res-icon {
  font-size: clamp(1.6em, 5.5vw, 2.8em)
}

.res-lbl {
  font-family: 'Cinzel', serif;
  font-size: clamp(1em, 3.5vw, 2em);
  font-weight: 900;
  letter-spacing: 4px
}

.res-amt {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.75em, 2.3vw, 1.2em);
  font-weight: 900
}

/* ── BOOST BUTTON ── */
#boostBtn {
  position: fixed;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 280;
  display: none;
  background: linear-gradient(145deg, #2a1a00, #1a0e00);
  border: 2px solid #ffaa00;
  border-radius: 14px;
  padding: 11px 24px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.6em, 1.8vw, .8em);
  font-weight: 900;
  color: #ffcc00;
  letter-spacing: 2px;
  animation: boostPulse 1s ease-in-out infinite;
}

@keyframes boostPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 170, 0, .4)
  }

  50% {
    box-shadow: 0 0 26px rgba(255, 170, 0, .85)
  }
}

/* ═══════════════════════════
   APP LAYOUT
═══════════════════════════ */
#app {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1.4vh, 11px);
  padding: clamp(8px, 2vw, 14px) clamp(8px, 2.5vw, 14px) 24px;
  width: 100%;
  max-width: 520px;
}

/* ── HEADER ── */
.hdr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px
}

.logo {
  font-family: 'Cinzel', serif;
  font-size: clamp(.95em, 4vw, 1.6em);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: clamp(1px, .8vw, 4px);
  text-shadow: 0 0 14px var(--gold2), 0 0 35px rgba(239, 191, 4, .35);
  white-space: nowrap;
  animation: lglow 3s ease-in-out infinite;
}

@keyframes lglow {

  0%,
  100% {
    filter: brightness(1)
  }

  50% {
    filter: brightness(1.25)
  }
}

.logo em {
  color: #fff;
  font-style: normal;
  text-shadow: 0 0 10px var(--gold)
}

.hdr-right {
  display: flex;
  gap: 5px;
  align-items: center
}

.coins-box {
  background: linear-gradient(145deg, #061206, #0b1a0b);
  border: 1.5px solid rgba(239, 191, 4, .4);
  border-radius: 10px;
  padding: clamp(4px, 1vw, 7px) clamp(9px, 2.3vw, 14px);
  text-align: center;
  min-width: 80px;
}

.coins-box label {
  display: block;
  color: #4a6a4a;
  font-size: clamp(.42em, 1vw, .56em);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1px
}

.cv {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.72em, 2.4vw, 1em);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 7px var(--gold)
}

.cv.bump {
  animation: vbump .22s ease-out
}

@keyframes vbump {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.32);
    color: #fff
  }

  100% {
    transform: scale(1)
  }
}

.icon-btn {
  background: linear-gradient(145deg, #0a1a0a, #061206);
  border: 1.5px solid rgba(239, 191, 4, .3);
  border-radius: 8px;
  color: var(--gold);
  font-size: 1em;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s
}

.icon-btn:hover {
  border-color: var(--gold);
  transform: scale(1.08)
}

/* ── XP BAR ── */
.xp-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px
}

.xp-level {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.52em, 1.5vw, .7em);
  font-weight: 900;
  color: var(--gold);
  white-space: nowrap
}

.xp-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 3px;
  overflow: hidden
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  border-radius: 3px;
  transition: width .6s ease
}

.xp-next {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.44em, 1.2vw, .6em);
  color: rgba(255, 255, 255, .38);
  white-space: nowrap
}

/* ── MODE TABS ── */
.mode-tabs {
  display: flex;
  gap: 5px;
  width: 100%;
  background: rgba(0, 0, 0, .3);
  border-radius: 12px;
  padding: 4px
}

.mode-btn {
  flex: 1;
  height: clamp(30px, 7.5vw, 40px);
  border-radius: 9px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.4vw, .65em);
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .15s;
  color: rgba(255, 255, 255, .38);
  background: transparent
}

.mode-btn.active {
  background: linear-gradient(145deg, #0d2d0d, #061206);
  border-color: rgba(239, 191, 4, .5);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(239, 191, 4, .2)
}

/* ── FAST TIMER ── */
#fastTimerRow {
  width: 100%;
  display: none;
  align-items: center;
  gap: 8px
}

#fastTimerRow.show {
  display: flex
}

.timer-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, .08);
  border-radius: 4px;
  overflow: hidden
}

.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4444, #ffaa00, #00c853);
  border-radius: 4px;
  transition: width 1s linear
}

.timer-fill.urgent {
  background: #ff2222
}

.timer-num {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.6em, 1.8vw, .8em);
  font-weight: 900;
  color: #ffaa00;
  min-width: 28px;
  text-align: right
}

/* ═══════════════════════════
   TABLE AREA
═══════════════════════════ */
.table-area {
  width: 100%;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, var(--felt) 0%, var(--felt2) 65%, rgba(0, 0, 0, .5) 100%);
  border-radius: clamp(12px, 3vw, 20px);
  border: 3px solid rgba(239, 191, 4, .35);
  padding: clamp(8px, 2vw, 14px) clamp(6px, 1.8vw, 12px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 191, 4, .1), 0 6px 30px rgba(0, 0, 0, .8);
  position: relative;
  overflow: visible;
}

.table-area::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(239, 191, 4, .04) 0%, transparent 70%);
}

.table-area::after {
  content: '❋';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(60px, 18vw, 110px);
  color: rgba(239, 191, 4, .03);
  pointer-events: none;
  z-index: 0
}

.table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  position: relative;
  z-index: 2
}

.table-round {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.3vw, .64em);
  color: rgba(255, 255, 255, .36);
  letter-spacing: 2px
}

.table-cards-count {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.3vw, .64em);
  color: rgba(239, 191, 4, .6);
  letter-spacing: 1px
}

/* ── PILES ROW ── */
.piles-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  position: relative;
  z-index: 2;
  min-height: clamp(80px, 20vw, 115px);
  overflow: visible;
}

.pile-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: visible
}

.pile-lbl {
  font-family: 'Cinzel', serif;
  font-size: clamp(.72em, 2vw, .9em);
  font-weight: 900;
  letter-spacing: 3px;
  transition: color .3s, text-shadow .3s
}

.pile-lbl.andr-lbl {
  color: var(--andr)
}

.pile-lbl.bahr-lbl {
  color: var(--bahr)
}

.pile-cards-area {
  position: relative;
  height: var(--ch);
  width: 100%;
  overflow: visible;
  /* Cards are absolute inside here */
}

.pile-count {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.3vw, .62em);
  font-weight: 900;
  color: rgba(255, 255, 255, .34);
  min-height: 14px
}

.pile-wrap.winner .pile-lbl {
  text-shadow: 0 0 16px currentColor;
  animation: winLbl .6s ease-in-out 4
}

@keyframes winLbl {

  0%,
  100% {
    filter: brightness(1)
  }

  50% {
    filter: brightness(2)
  }
}

/* ── JOKER ZONE ── */
.joker-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px
}

.joker-lbl {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.44em, 1.2vw, .58em);
  font-weight: 900;
  color: rgba(239, 191, 4, .65);
  letter-spacing: 2px
}

.joker-slot {
  width: clamp(54px, 14vw, 76px);
  height: clamp(76px, 19vw, 106px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.joker-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.54em, 1.5vw, .7em);
  color: rgba(255, 255, 255, .5);
  text-align: center;
  max-width: 100px
}

/* ═══════════════════════════
   CARD STYLES
═══════════════════════════ */
.card {
  width: var(--cw);
  height: var(--ch);
  border-radius: clamp(4px, 1vw, 7px);
  background: var(--card-bg);
  border: 1.5px solid rgba(0, 0, 0, .15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2px, .6vw, 4px);
  font-family: 'Cinzel', serif;
  position: absolute;
  top: 0;
  /* anchor to top of pile-cards-area */
  flex-shrink: 0;
  transition: box-shadow .25s, transform .15s;
  user-select: none;
}

.card.red {
  color: var(--card-red)
}

.card.black {
  color: var(--card-black)
}

.card .ctop {
  font-size: clamp(.57em, 1.6vw, .76em);
  font-weight: 900;
  line-height: 1;
  align-self: flex-start;
  letter-spacing: -1px
}

.card .cmid {
  font-size: clamp(1em, 2.8vw, 1.4em);
  line-height: 1;
  align-self: center
}

.card .cbot {
  font-size: clamp(.57em, 1.6vw, .76em);
  font-weight: 900;
  line-height: 1;
  align-self: flex-end;
  transform: rotate(180deg);
  letter-spacing: -1px
}

.card.deal-in {
  animation: cSlide .3s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes cSlide {
  from {
    transform: translateY(-55px) scale(.8);
    opacity: 0
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1
  }
}

.card.latest {
  z-index: 10 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .7), 0 0 10px rgba(239, 191, 4, .25);
  transform: translateY(-5px)
}

.card.win-card {
  z-index: 15 !important;
  animation: winCard .5s ease-in-out 3
}

@keyframes winCard {

  0%,
  100% {
    transform: translateY(-5px) scale(1)
  }

  50% {
    transform: translateY(-15px) scale(1.15)
  }
}

/* ── JOKER CARD — proper playing card layout, gold distinction ── */
.joker-card {
  width: clamp(54px, 14vw, 76px) !important;
  height: clamp(76px, 19vw, 106px) !important;
  border-radius: clamp(6px, 1.5vw, 9px) !important;
  background: var(--card-bg);
  border: 2.5px solid var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(239, 191, 4, .5),
    0 0 18px rgba(239, 191, 4, .5),
    0 5px 20px rgba(0, 0, 0, .8) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3px, .8vw, 5px) clamp(3px, .7vw, 4px);
  font-family: 'Cinzel', serif;
  overflow: hidden;
}

/* Subtle shimmer behind the suit */
.joker-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(239, 191, 4, .06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.joker-card.red {
  color: var(--card-red);
}

.joker-card.black {
  color: var(--card-black);
}

/* Top-left corner — rank + suit (same as regular card .ctop) */
.joker-card .jctop {
  font-size: clamp(.68em, 1.8vw, .92em);
  font-weight: 900;
  line-height: 1.1;
  align-self: flex-start;
  letter-spacing: -1px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

/* Center suit — bigger than regular card but proportional */
.joker-card .jcmid {
  font-size: clamp(1.6em, 4.5vw, 2.2em);
  line-height: 1;
  align-self: center;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .2));
}

/* Bottom-right corner — rotated 180° (same as regular card .cbot) */
.joker-card .jcbot {
  font-size: clamp(.68em, 1.8vw, .92em);
  font-weight: 900;
  line-height: 1.1;
  align-self: flex-end;
  transform: rotate(180deg);
  letter-spacing: -1px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

/* "★ JOKER" badge — bottom center, very subtle */
.joker-card .jc-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.28em, .75vw, .36em);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold);
  white-space: nowrap;
  z-index: 3;
  opacity: .85;
}

/* Animations */
.joker-card.reveal {
  animation: jokerReveal .52s cubic-bezier(.175, .885, .32, 1.275) both;
}

@keyframes jokerReveal {
  from {
    transform: scale(.25) rotateY(90deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.12) rotateY(0deg);
    opacity: 1;
  }

  to {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

.joker-card.glow {
  animation: jokerGlow 1.8s ease-in-out infinite;
}

@keyframes jokerGlow {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(239, 191, 4, .5), 0 0 18px rgba(239, 191, 4, .5), 0 5px 20px rgba(0, 0, 0, .8);
  }

  50% {
    box-shadow: 0 0 0 2px rgba(239, 191, 4, .9), 0 0 40px rgba(239, 191, 4, .85), 0 0 70px rgba(239, 191, 4, .4), 0 5px 20px rgba(0, 0, 0, .8);
  }
}

.joker-crown {
  display: none;
}

/* ── HINT BAR ── */
#hintBar {
  width: 100%;
  background: linear-gradient(145deg, #060e08, #030a05);
  border: 1px solid rgba(0, 200, 83, .2);
  border-radius: 8px;
  padding: clamp(4px, 1vw, 7px) clamp(10px, 2.5vw, 14px);
  min-height: 28px
}

.hint-txt {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.6em, 1.7vw, .8em);
  color: rgba(0, 230, 120, .8);
  font-weight: 700;
  letter-spacing: .5px
}

/* ══ BET ZONES ══ */
.bet-zones {
  display: flex;
  gap: 8px;
  width: 100%
}

.bet-btn {
  flex: 1;
  height: clamp(56px, 14vw, 74px);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  border: 2.5px solid;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}

.bet-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: sheen 4s ease-in-out infinite
}

@keyframes sheen {
  0% {
    left: -100%
  }

  100% {
    left: 200%
  }
}

.bet-btn:hover:not(:disabled) {
  transform: translateY(-2px)
}

.bet-btn:disabled {
  opacity: .38;
  cursor: not-allowed
}

.andr-btn {
  background: linear-gradient(145deg, #0a1f50, #061230);
  border-color: var(--andr);
  color: var(--andr)
}

.andr-btn.selected {
  background: linear-gradient(145deg, #0d2a60, #081840);
  box-shadow: 0 6px 20px rgba(59, 130, 246, .42), 0 0 0 1px var(--andr);
  transform: translateY(-3px)
}

.bahr-btn {
  background: linear-gradient(145deg, #50100a, #300606);
  border-color: var(--bahr);
  color: var(--bahr)
}

.bahr-btn.selected {
  background: linear-gradient(145deg, #600d0d, #400808);
  box-shadow: 0 6px 20px rgba(239, 68, 68, .42), 0 0 0 1px var(--bahr);
  transform: translateY(-3px)
}

.bb-lbl {
  font-family: 'Cinzel', serif;
  font-size: clamp(.8em, 2.2vw, 1.05em);
  font-weight: 900;
  letter-spacing: 3px
}

.bb-pay {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.46em, 1.2vw, .58em);
  opacity: .7;
  letter-spacing: 1px
}

.bb-amt {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.6em, 1.7vw, .78em);
  font-weight: 900
}

/* ── SIDE BET ── */
.sidebet-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: clamp(6px, 1.5vw, 9px) clamp(10px, 2.5vw, 14px)
}

.sb-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.6em, 1.7vw, .8em);
  color: rgba(255, 255, 255, .54);
  display: flex;
  align-items: center;
  gap: 9px
}

.sb-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0
}

.sb-toggle input {
  opacity: 0;
  width: 0;
  height: 0
}

.sb-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .14);
  border-radius: 10px;
  cursor: pointer;
  transition: .3s
}

.sb-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: .3s
}

input:checked+.sb-slider {
  background: rgba(239, 191, 4, .6)
}

input:checked+.sb-slider::before {
  transform: translateX(16px)
}

.sb-pay {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.52em, 1.5vw, .66em);
  color: var(--gold);
  font-weight: 900
}

/* ── CHIPS ── */
.chip-row {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 8px);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%
}

.chip {
  width: clamp(32px, 8vw, 44px);
  height: clamp(32px, 8vw, 44px);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.44em, 1.3vw, .6em);
  font-weight: 900;
  transition: all .15s;
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .4)
}

.chip::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .28)
}

.chip:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .3)
}

.chip:active {
  transform: translateY(0) scale(.96)
}

.chip.sel {
  transform: translateY(-4px) scale(1.13);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .7), 0 0 12px currentColor, inset 0 2px 0 rgba(255, 255, 255, .3)
}

.c1 {
  background: radial-gradient(circle at 35% 35%, #ff6666, #cc0000);
  color: #fff
}

.c5 {
  background: radial-gradient(circle at 35% 35%, #8888ff, #3333cc);
  color: #fff
}

.c10 {
  background: radial-gradient(circle at 35% 35%, #66cc66, #228822);
  color: #fff
}

.c25 {
  background: radial-gradient(circle at 35% 35%, #ff9933, #cc6600);
  color: #fff
}

.c100 {
  background: radial-gradient(circle at 35% 35%, #aaaaaa, #555555);
  color: #fff
}

.c500 {
  background: radial-gradient(circle at 35% 35%, #ffdd44, #cc9900);
  color: #333
}

/* ── BET CONTROLS ── */
.bet-ctl {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  width: 100%
}

.bet-display {
  text-align: center
}

.bd-lbl {
  color: #4a6a4a;
  font-size: clamp(.42em, 1vw, .56em);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block
}

.bd-val {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.95em, 3vw, 1.5em);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold);
  line-height: 1.1
}

.clr-btn {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  color: rgba(255, 255, 255, .5);
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.54em, 1.5vw, .72em);
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  transition: all .12s
}

.clr-btn:hover {
  border-color: rgba(255, 255, 255, .4);
  color: #fff
}

/* ── STREAK ROW ── */
.streak-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 18px;
  width: 100%
}

.streak-badge {
  background: rgba(255, 140, 0, .12);
  border: 1px solid rgba(255, 140, 0, .4);
  border-radius: 8px;
  padding: 3px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.5em, 1.4vw, .66em);
  font-weight: 900;
  color: #ffaa00;
  display: none;
  letter-spacing: 1px
}

.streak-badge.on {
  display: block;
  animation: sglow 1s ease-in-out infinite alternate
}

@keyframes sglow {
  from {
    box-shadow: 0 0 0 rgba(255, 140, 0, 0)
  }

  to {
    box-shadow: 0 0 10px rgba(255, 140, 0, .4)
  }
}

.tourn-badge {
  background: rgba(239, 191, 4, .1);
  border: 1px solid rgba(239, 191, 4, .3);
  border-radius: 8px;
  padding: 3px 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.3vw, .62em);
  font-weight: 900;
  color: var(--gold);
  display: none;
  letter-spacing: 1px
}

.tourn-badge.on {
  display: block
}

/* ── DEAL BUTTON ── */
#actionRow {
  width: 100%
}

.deal-btn {
  width: 100%;
  height: clamp(44px, 11vw, 58px);
  border-radius: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.6em, 1.8vw, .84em);
  font-weight: 900;
  letter-spacing: clamp(2px, .5vw, 4px);
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(145deg, #ff7600, #cc1e00);
  border: 2px solid var(--gold);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 90, 0, .55), 0 4px 14px rgba(0, 0, 0, .6);
  transition: all .12s;
  position: relative;
  overflow: hidden;
}

.deal-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: sheen 3.5s ease-in-out infinite
}

.deal-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255, 110, 0, .8), 0 6px 18px rgba(0, 0, 0, .7)
}

.deal-btn:disabled {
  opacity: .4;
  cursor: not-allowed
}

.deal-btn.pulse {
  animation: dealPulse 1.2s ease-in-out infinite
}

@keyframes dealPulse {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(255, 90, 0, .55), 0 4px 14px rgba(0, 0, 0, .6)
  }

  50% {
    box-shadow: 0 0 40px rgba(255, 110, 0, .9), 0 4px 22px rgba(0, 0, 0, .7)
  }
}

/* ── MINI STATS ── */
.stats-mini {
  display: flex;
  gap: clamp(4px, 1.2vw, 8px);
  width: 100%
}

.sm-stat {
  flex: 1;
  background: linear-gradient(145deg, #061206, #0b1a0b);
  border: 1.5px solid rgba(239, 191, 4, .2);
  border-radius: clamp(6px, 1.5vw, 10px);
  padding: clamp(4px, 1vw, 6px) 4px;
  text-align: center
}

.sm-stat label {
  display: block;
  color: #4a6a4a;
  font-size: clamp(.42em, .9vw, .54em);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1px
}

.sm-stat .sv {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.65em, 2vw, .9em);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 5px var(--gold)
}

/* ── BOTTOM NAV ── */
.bottom-nav {
  display: flex;
  gap: 5px;
  width: 100%
}

.nav-btn {
  flex: 1;
  height: clamp(32px, 8vw, 40px);
  background: linear-gradient(145deg, #061206, #040d04);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: rgba(255, 255, 255, .42);
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.5em, 1.4vw, .65em);
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px
}

.nav-btn:hover {
  border-color: rgba(239, 191, 4, .35);
  color: var(--gold)
}

/* ── SHARE BTN ── */
#shareBtn {
  display: none;
  width: 100%;
  background: linear-gradient(145deg, #001a40, #000d22);
  border: 1.5px solid rgba(100, 160, 255, .4);
  border-radius: 10px;
  padding: clamp(7px, 1.8vw, 11px);
  color: #7eb8ff;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.58em, 1.7vw, .76em);
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all .12s;
  align-items: center;
  justify-content: center;
  gap: 8px
}

#shareBtn:hover {
  border-color: rgba(100, 160, 255, .8);
  box-shadow: 0 0 12px rgba(100, 160, 255, .3)
}

.rg-link {
  width: 100%;
  text-align: center;
  margin-top: 2px
}

.rg-link a {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.62em, 1.7vw, .82em);
  color: rgba(239, 191, 4, .32);
  text-decoration: none;
  letter-spacing: 2px;
  transition: color .2s
}

.rg-link a:hover {
  color: rgba(239, 191, 4, .8)
}

/* ══ RESPONSIVE ══ */
@keyframes streakShake {

  0%,
  100% {
    transform: translateX(0)
  }

  15% {
    transform: translateX(-8px) rotate(-1deg)
  }

  30% {
    transform: translateX(8px) rotate(1deg)
  }

  45% {
    transform: translateX(-6px)
  }

  60% {
    transform: translateX(6px)
  }

  75% {
    transform: translateX(-3px)
  }

  90% {
    transform: translateX(3px)
  }
}

@keyframes bjBob {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.18)
  }
}

@media(max-height:700px) {
  #app {
    gap: 4px;
    padding-top: 5px;
    padding-bottom: 14px
  }

  .table-area {
    padding: 5px 6px
  }

  .piles-row {
    min-height: clamp(68px, 17vw, 105px)
  }

  :root {
    --cw: clamp(28px, 7vw, 42px);
    --ch: clamp(38px, 10vw, 58px)
  }

  .chip {
    width: 26px;
    height: 26px;
    font-size: .38em
  }

  .chip-row {
    gap: 3px
  }

  .deal-btn {
    height: 36px;
    font-size: .54em
  }

  .bet-btn {
    height: 48px
  }

  .xp-row {
    display: none
  }
}

/* ── BOT FEED — top-right, non-intrusive, separate from main toast ── */
#botFeed {
  position: fixed;
  top: 10%;
  right: 10px;
  background: rgba(0, 0, 0, .65);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.58em, 1.6vw, .74em);
  color: rgba(255, 255, 255, .55);
  z-index: 310;
  pointer-events: none;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s, transform .25s;
  max-width: 160px;
  text-align: right;
}

#botFeed.show {
  opacity: 1;
  transform: translateX(0)
}