/* ═══════════════════════════════════════════════════════
   ROYAL TEEN PATTI — style.css
   royalgame.fun  ·  Saffron / Gold / Dark Green felt
   Three-file architecture: index.html + style.css + game.js
   ═══════════════════════════════════════════════════════ */

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

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

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

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 153, 0, .22);
  border-radius: 2px
}

/* ── TOKEN SYSTEM ── */
:root {
  /* Saffron palette */
  --saffron: #FF9933;
  --saffron2: #FFBB55;
  --saffron3: #FFD899;
  --saffron4: #FFF0D0;
  --amber: #CC6600;

  /* Gold palette (shared with platform) */
  --gold: #EFBF04;
  --gold2: #D4A800;
  --gold3: #FFF5A0;

  /* Felt table */
  --felt: #0a1f0a;
  --felt2: #071507;
  --felt3: #0d2a0d;

  /* Backgrounds */
  --bg: #040a04;
  --bg2: #060e06;

  /* States */
  --win: #22c55e;
  --win2: #4ade80;
  --lose: #ef4444;
  --lose2: #f87171;
  --push: #94a3b8;
  --blind-c: #a78bfa;
  /* purple — blind mode */
  --seen-c: #38bdf8;
  /* sky — seen mode */
  --trail-c: #EFBF04;
  /* gold — trail hand */

  /* Cards */
  --card-w: clamp(50px, 11vw, 74px);
  --card-h: clamp(70px, 15.5vw, 104px);
  --card-r: clamp(5px, 1.2vw, 9px);

  /* Spacing */
  --r-xl: 22px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── BODY ── */
body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -5%, #2a1200 0%, #140a00 25%, #080400 55%, #040200 100%);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Rajdhani', 'Arial Black', sans-serif;
  color: #fff;
}

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

/* ── AMBIENT FELT TEXTURE ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(40, 90, 20, .15) 0%, transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .006) 0, rgba(255, 255, 255, .006) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .006) 0, rgba(255, 255, 255, .006) 1px, transparent 1px, transparent 8px);
}

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

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

@keyframes flashA {
  0% {
    opacity: 0
  }

  12% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

#sparkCont {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 202;
  overflow: hidden
}

.spark {
  position: fixed;
  pointer-events: none;
  animation: spfx var(--d, .45s) ease-out forwards
}

@keyframes spfx {
  0% {
    transform: translate(0, 0) scale(1.4);
    opacity: 1
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0
  }
}

#rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden
}

.rc {
  position: absolute;
  top: -60px;
  animation: rcfall var(--d) ease-in forwards
}

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

  85% {
    opacity: 1
  }

  100% {
    transform: translateY(115vh) rotate(720deg) scale(.3);
    opacity: 0
  }
}

/* ── BODY SHAKE ── */
@keyframes bodyShake {

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

  15% {
    transform: translateX(-7px)
  }

  35% {
    transform: translateX(7px)
  }

  55% {
    transform: translateX(-5px)
  }

  75% {
    transform: translateX(5px)
  }
}

body.shaking {
  animation: bodyShake .4s ease-out
}

/* ══════════════════════════════════════════════════
   OVERLAYS
══════════════════════════════════════════════════ */

/* ── WIN OVERLAY ── */
#winOverlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 350;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#winOverlay.pop {
  animation: woPop .48s cubic-bezier(.175, .885, .32, 1.275) forwards
}

#winOverlay.gone {
  animation: woGone .3s ease-in forwards
}

@keyframes woPop {
  from {
    transform: translate(-50%, -50%) scale(0) rotate(-6deg)
  }

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

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

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

.wo-e {
  font-size: clamp(2.4em, 9vw, 4.8em);
  animation: woBob .65s ease-in-out infinite alternate
}

@keyframes woBob {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-8px)
  }
}

.wo-t {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.6em, 6.5vw, 3.6em);
  letter-spacing: 5px;
  text-shadow: 0 0 22px currentColor, 0 0 48px currentColor;
}

.wo-h {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.7em, 2.2vw, 1.1em);
  font-weight: 900;
  color: rgba(255, 255, 255, .7);
  letter-spacing: 2px
}

.wo-a {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.85em, 2.8vw, 1.4em);
  font-weight: 900;
  color: #fff
}

.c-saffron {
  color: var(--saffron2)
}

.c-gold {
  color: var(--gold)
}

.c-win {
  color: var(--win2)
}

.c-push {
  color: var(--push)
}

/* ── TRAIL OVERLAY ── */
#trailOverlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 355;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#trailOverlay.pop {
  animation: woPop .5s cubic-bezier(.175, .885, .32, 1.275) forwards
}

#trailOverlay.gone {
  animation: woGone .35s ease-in forwards
}

.trail-crown {
  font-size: clamp(2.8em, 11vw, 5.5em);
  animation: trailSpin 2s linear infinite
}

@keyframes trailSpin {
  0% {
    transform: rotate(-6deg) scale(1)
  }

  50% {
    transform: rotate(6deg) scale(1.08)
  }

  100% {
    transform: rotate(-6deg) scale(1)
  }
}

.trail-txt {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.8em, 7vw, 4em);
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 28px var(--gold), 0 0 60px var(--gold2);
}

.trail-hindi {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.9em, 3vw, 1.5em);
  color: rgba(255, 255, 255, .55);
  letter-spacing: 3px
}

.trail-payout {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.8em, 2.6vw, 1.3em);
  font-weight: 900;
  color: #fff
}

/* ── QUALIFY OVERLAY ── */
#qualifyOverlay {
  position: fixed;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 348;
  pointer-events: none;
  text-align: center;
  background: rgba(0, 0, 0, .88);
  border: 2px solid var(--saffron);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 40px rgba(255, 153, 0, .35);
}

#qualifyOverlay.pop {
  animation: woPop .38s cubic-bezier(.175, .885, .32, 1.275) forwards
}

#qualifyOverlay.gone {
  animation: woGone .28s ease-in forwards
}

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

.qo-t {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1em, 3.5vw, 1.8em);
  color: var(--saffron2);
  letter-spacing: 3px
}

.qo-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.55em, 1.7vw, .78em);
  color: rgba(255, 255, 255, .55);
  letter-spacing: 1px
}

.qo-rescue {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.55em, 1.6vw, .75em);
  font-weight: 900;
  color: var(--win2);
  letter-spacing: 1px
}

/* ── NEAR MISS BANNER ── */
#nearMissBanner {
  position: fixed;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 346;
  pointer-events: none;
  text-align: center;
  background: rgba(0, 0, 0, .84);
  border: 2px solid rgba(239, 68, 68, .55);
  border-radius: 14px;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 30px rgba(239, 68, 68, .2);
}

#nearMissBanner.pop {
  animation: woPop .35s cubic-bezier(.175, .885, .32, 1.275) forwards
}

#nearMissBanner.gone {
  animation: woGone .25s ease-in forwards
}

.nm-ico {
  font-size: clamp(1.4em, 4.5vw, 2.4em)
}

.nm-t {
  font-family: 'Cinzel', serif;
  font-size: clamp(.95em, 3.2vw, 1.8em);
  font-weight: 900;
  color: var(--saffron2);
  letter-spacing: 3px
}

.nm-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.5em, 1.5vw, .72em);
  color: rgba(255, 255, 255, .5)
}

/* ── TOAST ── */
#toast {
  position: fixed;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(145deg, #1a0c00, #0e0600);
  border: 1.5px solid rgba(255, 153, 0, .5);
  border-radius: 12px;
  padding: clamp(8px, 2vw, 12px) clamp(16px, 4vw, 28px);
  z-index: 320;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s, transform .22s;
  white-space: nowrap;
  max-width: 88vw;
  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(--saffron2);
  font-weight: 900;
  letter-spacing: 1.5px
}

/* ── RANK UP ── */
#lvToast {
  position: fixed;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: linear-gradient(145deg, #2a1200, #160900);
  border: 3px solid var(--saffron);
  border-radius: 14px;
  padding: clamp(10px, 2.5vw, 16px) clamp(18px, 4.5vw, 30px);
  text-align: center;
  z-index: 325;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(255, 153, 0, .4);
}

#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, 2.1vw, .92em);
  color: var(--saffron);
  font-weight: 900;
  letter-spacing: 2px
}

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

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

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

.logo {
  font-family: 'Cinzel', serif;
  font-size: clamp(.75em, 3.8vw, 1.35em);
  font-weight: 900;
  color: var(--saffron2);
  letter-spacing: clamp(1px, .8vw, 3px);
  text-shadow: 0 0 14px var(--saffron), 0 0 32px rgba(255, 153, 0, .35);
  white-space: nowrap;
  animation: logoGlow 3s ease-in-out infinite;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes logoGlow {

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

  50% {
    filter: brightness(1.28)
  }
}

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

.logo .hindi {
  font-family: 'Rajdhani', sans-serif;
  font-size: .65em;
  color: rgba(255, 153, 0, .55);
  font-style: normal;
  letter-spacing: 1px;
  display: block;
  line-height: 1
}

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

.coins-box {
  background: linear-gradient(145deg, #0a0500, #140900);
  border: 1.5px solid rgba(255, 153, 0, .38);
  border-radius: 10px;
  padding: clamp(5px, 1.2vw, 8px) clamp(9px, 2.2vw, 14px);
  min-width: 82px;
  text-align: center;
}

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

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

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

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

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

  100% {
    transform: scale(1)
  }
}

.icon-btn {
  background: linear-gradient(145deg, #0a0500, #070300);
  border: 1.5px solid rgba(255, 153, 0, .28);
  border-radius: 8px;
  color: var(--saffron);
  font-size: .95em;
  width: clamp(30px, 7vw, 36px);
  height: clamp(30px, 7vw, 36px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
  flex-shrink: 0;
}

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

/* ── TICKER ── */
.ticker-wrap {
  height: clamp(20px, 4vw, 26px);
  overflow: hidden;
  width: 100%;
  text-align: center
}

#ticker {
  color: var(--saffron2);
  font-size: clamp(.58em, 1.8vw, .78em);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--saffron);
  line-height: clamp(20px, 4vw, 26px);
  transition: opacity .2s, transform .2s;
}

/* ══════════════════════════════════════════════════
   BLIND / SEEN TOGGLE — the signature cultural mechanic
══════════════════════════════════════════════════ */
.blind-seen-bar {
  width: 100%;
  background: linear-gradient(145deg, #0e0500, #070300);
  border: 1.5px solid rgba(255, 153, 0, .22);
  border-radius: 12px;
  padding: clamp(8px, 2vw, 11px) clamp(10px, 2.5vw, 14px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.bs-label-block {
  flex: 1;
  min-width: 0
}

.bs-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.32em, .82vw, .48em);
  font-weight: 900;
  color: rgba(255, 153, 0, .55);
  letter-spacing: 2px;
  text-transform: uppercase
}

.bs-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.52em, 1.5vw, .72em);
  color: rgba(255, 255, 255, .45);
  margin-top: 2px
}

.bs-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0
}

.bs-btn {
  padding: clamp(5px, 1.2vw, 7px) clamp(10px, 2.5vw, 16px);
  border-radius: 9px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.5em, 1.4vw, .68em);
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .14s;
  border: 1.5px solid;
}

.bs-btn.blind-btn {
  background: rgba(167, 139, 250, .08);
  border-color: rgba(167, 139, 250, .35);
  color: var(--blind-c);
}

.bs-btn.blind-btn.active {
  background: rgba(167, 139, 250, .18);
  border-color: var(--blind-c);
  box-shadow: 0 0 12px rgba(167, 139, 250, .4);
}

.bs-btn.seen-btn {
  background: rgba(56, 189, 248, .08);
  border-color: rgba(56, 189, 248, .3);
  color: var(--seen-c);
}

.bs-btn.seen-btn.active {
  background: rgba(56, 189, 248, .16);
  border-color: var(--seen-c);
  box-shadow: 0 0 12px rgba(56, 189, 248, .35);
}

/* ── PAIR PLUS TOGGLE ── */
.pp-row {
  width: 100%;
  background: linear-gradient(145deg, #0e0500, #070300);
  border: 1.5px solid rgba(239, 191, 4, .2);
  border-radius: 12px;
  padding: clamp(7px, 1.7vw, 10px) clamp(10px, 2.5vw, 14px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pp-label {
  flex: 1;
  min-width: 0
}

.pp-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.32em, .82vw, .48em);
  font-weight: 900;
  color: rgba(239, 191, 4, .6);
  letter-spacing: 2px
}

.pp-paystrip {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 3px
}

.pp-pay {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.26em, .62vw, .38em);
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239, 191, 4, .07);
  border: 1px solid rgba(239, 191, 4, .2);
  color: rgba(239, 191, 4, .7);
}

.pp-pay.top {
  color: var(--saffron2);
  border-color: rgba(255, 153, 0, .4);
  background: rgba(255, 153, 0, .1)
}

.toggle-sw {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer
}

.toggle-sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .15);
  transition: all .2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: all .2s;
}

.toggle-sw input:checked+.toggle-track {
  background: rgba(239, 191, 4, .3);
  border-color: var(--gold);
}

.toggle-sw input:checked+.toggle-track::after {
  transform: translateX(20px);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(239, 191, 4, .6);
}

/* ── BET SELECTOR ── */
.bet-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.chip-row {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.3vw, 8px);
  flex-wrap: wrap;
  justify-content: center
}

.chip-label {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.38em, .9vw, .52em);
  color: rgba(255, 153, 0, .4);
  letter-spacing: 2px
}

.chip-btn {
  width: clamp(36px, 8vw, 46px);
  height: clamp(36px, 8vw, 46px);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.45em, 1.3vw, .62em);
  font-weight: 900;
  transition: all .14s;
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .35);
}

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

.chip-btn:hover {
  transform: translateY(-4px) scale(1.1)
}

.chip-btn.active {
  transform: translateY(-5px) scale(1.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .7), 0 0 14px currentColor, inset 0 2px 0 rgba(255, 255, 255, .3)
}

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

.c2 {
  background: radial-gradient(circle at 35% 35%, #88aaff, #2244cc);
  color: #fff
}

.c5 {
  background: radial-gradient(circle at 35% 35%, #88aaff, #2244cc);
  color: #fff
}

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

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

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

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

.bet-display-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bet-col {
  text-align: center;
  min-width: 54px
}

.bet-lbl {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.3em, .72vw, .44em);
  color: rgba(255, 153, 0, .4);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 2px
}

.bet-val {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.78em, 2.5vw, 1.1em);
  font-weight: 900;
  color: var(--saffron2);
  text-shadow: 0 0 7px var(--saffron)
}

.bet-val.gem {
  color: var(--gold)
}

.bet-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 153, 0, .18)
}

/* ══════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════ */
.table-area {
  width: 100%;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, #1a4a1a 0%, #0d2d0d 55%, #071507 85%, #040a04 100%);
  border-radius: clamp(12px, 3vw, 20px);
  border: 3px solid rgba(255, 153, 0, .3);
  padding: clamp(8px, 2vw, 14px) clamp(8px, 2vw, 12px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 153, 0, .08), 0 6px 28px rgba(0, 0, 0, .8);
  position: relative;
  overflow: hidden;
}

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

/* Subtle royal/Diwali pattern in felt */
.table-area::after {
  content: '♠ तीन पत्ती ♥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4em, 4vw, 2.2em);
  font-weight: 900;
  color: rgba(255, 153, 0, .04);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 4px;
  z-index: 0;
}

.hand-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.48em, 1.3vw, .64em);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.hand-label.dealer {
  color: rgba(255, 153, 0, .5)
}

.hand-label.player {
  color: rgba(255, 255, 255, .32)
}

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 153, 0, .3);
  border-radius: 7px;
  padding: 2px 9px;
  min-width: 28px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.58em, 1.7vw, .82em);
  font-weight: 900;
  color: #fff;
  transition: all .22s;
  margin-left: 8px;
}

.score-badge.qual {
  border-color: var(--win2);
  color: var(--win2);
  background: rgba(34, 197, 94, .12)
}

.score-badge.noq {
  border-color: var(--lose2);
  color: var(--lose2);
  background: rgba(239, 68, 68, .1)
}

/* ── CARDS ROW ── */
.cards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 8px);
  min-height: clamp(78px, 17vw, 112px);
  padding: 4px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

/* ── CARD ── */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  position: relative;
  cursor: default;
  flex-shrink: 0;
  transform-style: preserve-3d;
  transition: transform .4s ease;
}

.card.dealing {
  animation: cardSlide .28s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes cardSlide {
  from {
    transform: translateY(-36px) scale(.85);
    opacity: 0
  }

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

/* Card face/back */
.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .42s ease
}

.card.flipped .card-inner {
  transform: rotateY(180deg)
}

.card-face,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--card-r);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── CARD BACK ── */
.card-back {
  background: linear-gradient(145deg, #2d0a00, #1a0500);
  border: 1.5px solid rgba(255, 153, 0, .38);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .8), inset 0 0 0 3px rgba(255, 153, 0, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.3em, 3.5vw, 1.9em);
}

.card-back::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 153, 0, .14);
  border-radius: 4px;
}

/* ── CARD FACE ── */
.card-face {
  background: linear-gradient(145deg, #fffef8, #f8f5e8);
  border: 1.5px solid rgba(0, 0, 0, .12);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3px, .8vw, 5px);
  font-family: 'Cinzel', serif;
}

.card-face.red {
  color: #dc2626
}

.card-face.black {
  color: #111
}

.cr-top {
  font-size: clamp(.68em, 1.9vw, 1em);
  font-weight: 900;
  line-height: 1;
  align-self: flex-start;
  letter-spacing: -1px
}

.cr-mid {
  font-size: clamp(1.2em, 3.5vw, 1.9em);
  line-height: 1;
  text-align: center
}

.cr-bot {
  font-size: clamp(.68em, 1.9vw, 1em);
  font-weight: 900;
  line-height: 1;
  align-self: flex-end;
  transform: rotate(180deg);
  letter-spacing: -1px
}

/* Seen/active player card glow */
.card.active-glow {
  box-shadow: 0 0 16px rgba(255, 153, 0, .65), 0 0 36px rgba(255, 153, 0, .2)
}

/* ── SQUEEZE ANIMATION ── */
.card.squeeze .card-inner {
  animation: squeezePeek 1.2s cubic-bezier(.36, 1.06, .55, 1) forwards
}

@keyframes squeezePeek {
  0% {
    transform: rotateY(0)
  }

  25% {
    transform: rotateY(25deg)
  }

  50% {
    transform: rotateY(18deg)
  }

  75% {
    transform: rotateY(100deg)
  }

  100% {
    transform: rotateY(180deg)
  }
}

/* ── TABLE DIVIDER ── */
.vs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  position: relative;
  z-index: 1
}

.vs-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 153, 0, .2), transparent)
}

.vs-text {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.38em, .9vw, .54em);
  color: rgba(255, 153, 0, .4);
  letter-spacing: 3px
}

/* ── QUALIFY BAR ── */
.qualify-bar {
  min-height: 18px;
  margin: 2px 0;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.3em, .75vw, .44em);
  font-weight: 900;
  letter-spacing: 2px;
  transition: all .25s;
  position: relative;
  z-index: 1;
}

.qualify-bar.qual {
  color: var(--win2)
}

.qualify-bar.noq {
  color: var(--lose2)
}

/* ── HAND STRENGTH METER ── */
.strength-bar {
  width: 100%;
  position: relative;
  z-index: 1;
  display: none;
  /* shown after deal */
}

.strength-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.28em, .68vw, .4em);
  color: rgba(255, 255, 255, .35);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.strength-track {
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 3px;
  overflow: hidden
}

.strength-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s var(--ease);
  background: var(--saffron)
}

/* ══════════════════════════════════════════════════
   ANTE BONUS INDICATOR
══════════════════════════════════════════════════ */
.ante-bonus-bar {
  width: 100%;
  background: rgba(239, 191, 4, .07);
  border: 1px solid rgba(239, 191, 4, .2);
  border-radius: 9px;
  padding: clamp(5px, 1.2vw, 8px) clamp(10px, 2.5vw, 14px);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
}

.ante-bonus-bar.show {
  display: flex
}

.ab-txt {
  font-size: clamp(.38em, .9vw, .54em);
  color: rgba(239, 191, 4, .7);
  font-weight: 900;
  letter-spacing: 1px
}

.ab-val {
  font-size: clamp(.6em, 1.8vw, .82em);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold)
}

/* ══════════════════════════════════════════════════
   STRATEGY HINT
══════════════════════════════════════════════════ */
#hintBar {
  width: 100%;
  background: linear-gradient(145deg, #080500, #050300);
  border: 1px solid rgba(255, 153, 0, .22);
  border-radius: 8px;
  padding: clamp(4px, 1vw, 7px) clamp(10px, 2.5vw, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: all .22s;
}

.hint-ico {
  font-size: clamp(.8em, 2.5vw, 1.15em)
}

.hint-txt {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.58em, 1.7vw, .78em);
  color: rgba(255, 153, 0, .8);
  font-weight: 700;
  letter-spacing: .5px;
  flex: 1;
}

.hint-toggle {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.38em, .9vw, .52em);
  color: rgba(255, 153, 0, .4);
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
}

.hint-toggle:hover {
  color: var(--saffron)
}

/* ══════════════════════════════════════════════════
   ACTION BUTTONS
══════════════════════════════════════════════════ */
.action-row {
  display: flex;
  gap: clamp(5px, 1.4vw, 9px);
  width: 100%;
  flex-wrap: wrap
}

.act-btn {
  flex: 1;
  min-width: 0;
  height: clamp(40px, 9.5vw, 54px);
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.6vw, .75em);
  font-weight: 900;
  letter-spacing: clamp(0px, .3vw, 2px);
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .12s;
  border: 2px solid;
}

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

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

  100% {
    left: 220%
  }
}

.act-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.1)
}

.act-btn:active:not(:disabled) {
  transform: translateY(1px)
}

.act-btn:disabled {
  opacity: .32;
  cursor: not-allowed
}

/* DEAL button */
.btn-deal {
  background: linear-gradient(145deg, #ff7600, #cc1e00);
  border-color: var(--saffron);
  color: #fff;
  width: 100%;
  box-shadow: 0 0 20px rgba(255, 100, 0, .55), 0 4px 14px rgba(0, 0, 0, .6);
}

.btn-deal:hover:not(:disabled) {
  box-shadow: 0 0 36px rgba(255, 120, 0, .85)
}

/* PLAY / FOLD */
.btn-play {
  background: linear-gradient(145deg, #1a5500, #0a2800);
  border-color: #44ff44;
  color: #88ff88;
}

.btn-fold {
  background: linear-gradient(145deg, #550000, #280000);
  border-color: #ff4444;
  color: #ff8888;
}

/* ── BLIND PLAY ── */
.btn-blind {
  background: linear-gradient(145deg, #1a0040, #0d0020);
  border-color: var(--blind-c);
  color: var(--blind-c);
  font-size: clamp(.44em, 1.3vw, .65em);
}

/* ── SEEN PLAY ── */
.btn-seen {
  background: linear-gradient(145deg, #003344, #001d2a);
  border-color: var(--seen-c);
  color: var(--seen-c);
  font-size: clamp(.44em, 1.3vw, .65em);
}

/* ══════════════════════════════════════════════════
   BADGES & EXTRAS
══════════════════════════════════════════════════ */
.badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 20px;
  width: 100%
}

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

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

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

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

.perfect-badge {
  background: rgba(239, 191, 4, .08);
  border: 1px solid rgba(239, 191, 4, .3);
  border-radius: 8px;
  padding: 3px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.5em, 1.4vw, .68em);
  font-weight: 900;
  color: var(--gold);
  display: none;
  letter-spacing: 1px;
}

.perfect-badge.on {
  display: block
}

/* ── PROBABILITY DISPLAY ── */
.prob-bar {
  width: 100%;
  background: linear-gradient(145deg, #080500, #050300);
  border: 1px solid rgba(255, 153, 0, .16);
  border-radius: 9px;
  padding: clamp(5px, 1.2vw, 8px) clamp(10px, 2.5vw, 14px);
  display: none;
}

.prob-bar.show {
  display: block
}

.prob-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.28em, .68vw, .4em);
  color: rgba(255, 153, 0, .4);
  letter-spacing: 2px;
  margin-bottom: 6px
}

.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px
}

.prob-item {
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  padding: 4px;
  text-align: center;
}

.prob-item.active-hand {
  border-color: rgba(255, 153, 0, .4);
  background: rgba(255, 153, 0, .07)
}

.prob-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.36em, .88vw, .52em);
  color: rgba(255, 255, 255, .4);
  display: block
}

.prob-pct {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.48em, 1.3vw, .68em);
  font-weight: 900;
  color: rgba(255, 255, 255, .6)
}

.prob-item.active-hand .prob-pct {
  color: var(--saffron2)
}

/* ── DAILY GOAL ── */
.goal-bar {
  width: 100%;
  background: linear-gradient(145deg, #080500, #060300);
  border: 1px solid rgba(255, 153, 0, .14);
  border-radius: 10px;
  padding: clamp(6px, 1.5vw, 9px) clamp(10px, 2.5vw, 14px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.goal-icon {
  font-size: clamp(.9em, 2.8vw, 1.3em);
  flex-shrink: 0
}

.goal-info {
  flex: 1;
  min-width: 0
}

.goal-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.48em, 1.3vw, .68em);
  color: rgba(255, 255, 255, .5);
  margin-bottom: 3px
}

.goal-track {
  height: 3px;
  background: rgba(255, 255, 255, .07);
  border-radius: 2px;
  overflow: hidden
}

.goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  border-radius: 2px;
  transition: width .5s var(--ease)
}

.goal-count {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.38em, .9vw, .54em);
  font-weight: 900;
  color: rgba(255, 153, 0, .55);
  white-space: nowrap
}

/* ── STATS ── */
.stats-row {
  display: flex;
  gap: clamp(5px, 1.3vw, 8px);
  width: 100%
}

.stat {
  flex: 1;
  background: linear-gradient(145deg, #080500, #060300);
  border: 1.5px solid rgba(255, 153, 0, .16);
  border-radius: clamp(6px, 1.5vw, 10px);
  padding: clamp(4px, 1vw, 7px) clamp(4px, 1vw, 8px);
  text-align: center;
}

.stat label {
  display: block;
  color: rgba(255, 153, 0, .35);
  font-size: clamp(.42em, 1vw, .56em);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px
}

.stat .sv {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.68em, 2.2vw, .95em);
  font-weight: 900;
  color: var(--saffron2);
  text-shadow: 0 0 6px var(--saffron)
}

/* ── RANK ── */
.rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(145deg, #080500, #060300);
  border: 1.5px solid rgba(255, 153, 0, .14);
  border-radius: 10px;
  padding: clamp(6px, 1.5vw, 9px) clamp(12px, 3vw, 18px);
}

.rank-icon {
  font-size: clamp(1em, 3vw, 1.4em);
  flex-shrink: 0
}

.rank-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(.6em, 1.9vw, .84em);
  font-weight: 900;
  color: rgba(255, 153, 0, .75);
  letter-spacing: 2px
}

.rank-prog {
  height: 4px;
  flex: 1;
  background: rgba(255, 153, 0, .1);
  border-radius: 2px;
  overflow: hidden
}

.rank-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--saffron));
  border-radius: 2px;
  transition: width .6s var(--ease)
}

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

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

/* ── PAYTABLE BUTTON ── */
.paytable-btn {
  width: 100%;
  background: linear-gradient(145deg, #0e0500, #070300);
  border: 1.5px solid rgba(255, 153, 0, .25);
  border-radius: 11px;
  padding: clamp(7px, 1.7vw, 10px) clamp(12px, 3vw, 16px);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .12s;
}

.paytable-btn:hover {
  border-color: rgba(255, 153, 0, .5);
  background: rgba(255, 153, 0, .06)
}

.pt-btn-icon {
  font-size: 1.1em;
  flex-shrink: 0
}

.pt-btn-label {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.38em, .9vw, .54em);
  font-weight: 900;
  color: rgba(255, 153, 0, .65);
  letter-spacing: 2px;
  flex: 1;
  text-align: left
}

.pt-btn-top {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.3em, .72vw, .44em);
  color: rgba(255, 153, 0, .4);
  white-space: nowrap
}

/* ── BACK LINK ── */
.back-link {
  width: 100%;
  text-align: center;
  margin-top: 4px
}

.back-link a {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.66em, 1.9vw, .9em);
  color: rgba(255, 153, 0, .38);
  text-decoration: none;
  letter-spacing: 2px;
  transition: color .18s;
}

.back-link a:hover {
  color: rgba(255, 153, 0, .8)
}

/* ── FOCUS ACCESSIBILITY ── */
:focus-visible {
  outline: 2px solid var(--saffron2);
  outline-offset: 3px;
  border-radius: 4px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }

  .rc,
  .spark {
    display: none !important
  }

  #flashEl {
    display: none !important
  }
}

/* ── SHORT VIEWPORT ── */
@media(max-height:740px) {
  #app {
    gap: 4px;
    padding-top: 6px;
    padding-bottom: 16px
  }

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

  .cards-row {
    min-height: 64px;
    padding: 2px
  }

  :root {
    --card-w: clamp(42px, 9.5vw, 62px);
    --card-h: clamp(58px, 13vw, 86px)
  }

  .chip-btn {
    width: 30px;
    height: 30px;
    font-size: .42em
  }

  .act-btn {
    height: 34px;
    font-size: .5em
  }

  .stats-row {
    gap: 4px
  }

  .stat {
    padding: 3px 4px
  }

  .stat label {
    font-size: .38em
  }

  .stat .sv {
    font-size: .6em
  }

  .ticker-wrap {
    height: 18px
  }
}

/* ── VERY NARROW — 360px and below (Galaxy Fold unfolded, older Androids) ── */
@media(max-width:360px) {
  .logo {
    font-size: clamp(.72em, 4vw, 1em);
    letter-spacing: 1px
  }

  .logo .hindi {
    font-size: .6em
  }

  .hdr-right {
    gap: 3px
  }

  .coins-box {
    min-width: 68px;
    padding: 4px 6px
  }

  .cv {
    font-size: clamp(.65em, 5vw, .88em)
  }

  .icon-btn {
    width: 28px;
    height: 28px;
    font-size: .82em
  }

  .bs-btns {
    gap: 4px
  }

  .bs-btn {
    padding: 5px 8px;
    font-size: clamp(.44em, 3vw, .6em)
  }

  .chip-btn {
    width: clamp(28px, 7vw, 36px);
    height: clamp(28px, 7vw, 36px)
  }

  .bet-col {
    min-width: 42px
  }

  .act-btn {
    font-size: clamp(.44em, 3.5vw, .65em);
    letter-spacing: 0
  }

  .prob-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .pp-paystrip {
    display: none
  }

  /* hide at 360px — too crowded */
}

/* ── LANDSCAPE PHONES (height < 500px) ── */
@media(orientation:landscape) and (max-height:500px) {
  #app {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: flex-start;
    padding: 6px 10px 10px;
    gap: 6px;
  }

  .hdr {
    width: 100%;
    order: 0
  }

  .ticker-wrap {
    width: 100%;
    order: 1
  }

  /* Left column: table */
  .table-area {
    width: calc(50% - 6px);
    flex-shrink: 0;
    order: 2;
    min-width: 0
  }

  /* Right column: controls */
  .blind-seen-bar,
  .pp-row,
  .bet-area,
  .action-row,
  #hintBar,
  .badge-row,
  .prob-bar,
  .goal-bar {
    width: calc(50% - 6px);
    flex-shrink: 0;
    min-width: 0
  }

  .blind-seen-bar {
    order: 3
  }

  .pp-row {
    order: 4
  }

  .bet-area {
    order: 5
  }

  #hintBar {
    order: 6
  }

  .action-row {
    order: 7
  }

  .badge-row {
    order: 8
  }

  .prob-bar {
    order: 9
  }

  .goal-bar {
    order: 10
  }

  /* These go full-width below */
  #anteBonusBar,
  .stats-row,
  .rank-row,
  #shareBtn,
  .back-link,
  #goalsBar,
  .pr-bar,
  .weekly-panel {
    width: 100%;
    order: 20
  }

  /* Compact cards */
  :root {
    --card-w: clamp(38px, 7vh, 54px);
    --card-h: clamp(54px, 9.5vh, 76px)
  }

  .cards-row {
    min-height: 60px
  }

  .table-area::after {
    display: none
  }
}

/* ── SAFE AREA (iPhone notch / Dynamic Island / home bar) ── */
@supports(padding:env(safe-area-inset-bottom)) {
  #app {
    padding-bottom: max(28px, calc(16px + env(safe-area-inset-bottom)));
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  /* Toast above home bar */
  #toast {
    bottom: max(14%, calc(env(safe-area-inset-bottom) + 12%))
  }

  #lvToast {
    bottom: max(9%, calc(env(safe-area-inset-bottom) + 8%))
  }
}

/* ── PAYTABLE MODAL ── */
#paytableModal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

#paytableModal.open {
  display: flex
}

.pt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(8px)
}

.pt-sheet {
  position: relative;
  z-index: 501;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(155deg, #0e0600, #180a00);
  border: 2px solid rgba(255, 153, 0, .38);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px;
  animation: ptSlide .28s cubic-bezier(.175, .885, .32, 1.275);
  max-height: 88vh;
  overflow-y: auto;
}

@keyframes ptSlide {
  from {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0)
  }
}

.pt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pt-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(.85em, 2.8vw, 1.2em);
  font-weight: 900;
  color: var(--saffron2);
  letter-spacing: 3px
}

.pt-close {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: rgba(255, 255, 255, .5);
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
}

.pt-section {
  margin-bottom: 14px
}

.pt-sec-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.32em, .8vw, .48em);
  font-weight: 900;
  color: rgba(255, 153, 0, .55);
  letter-spacing: 2px;
  margin-bottom: 7px
}

.pt-table {
  width: 100%;
  border-collapse: collapse
}

.pt-table th {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.28em, .68vw, .42em);
  color: rgba(255, 255, 255, .28);
  letter-spacing: 1.5px;
  padding: 3px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.pt-table td {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.5em, 1.4vw, .72em);
  font-weight: 700;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .65)
}

.pt-table td.pay {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.45em, 1.3vw, .65em);
  font-weight: 900;
  color: var(--saffron2);
  text-align: right
}

.pt-table td.pay.big {
  color: var(--gold)
}

.pt-table tr.highlight td {
  background: rgba(255, 153, 0, .06)
}

.pt-table tr.highlight td.pay {
  color: var(--saffron2)
}

.pt-rule {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.48em, 1.3vw, .68em);
  color: rgba(255, 255, 255, .45);
  line-height: 1.5;
  margin-bottom: 4px
}

.pt-rule strong {
  color: var(--saffron2)
}