/* ============================================================
   PLAYFABFAB UI 2.0 — clean table layout
   Palette: Black #07040d · Purple #7b2ff7/#a855f7 · Blood red #c1121f/#e11d2e
   ============================================================ */

:root {
  --black: #07040d;
  --black-2: #0d0618;
  --purple: #7b2ff7;
  --purple-hi: #a855f7;
  --purple-deep: #3b1d6e;
  --red: #c1121f;
  --red-hi: #e11d2e;
  --red-deep: #7a0c14;
  --bone: #f5f0e6;
  --ink: #17102a;
  --gold: #f2b705;
  --font-spray: 'Rubik Spray Paint', system-ui, sans-serif;
  --font-marker: 'Permanent Marker', cursive;
  --font-cond: 'Barlow Condensed', sans-serif;
}

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

html, body {
  height: 100%;
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-cond);
  overscroll-behavior: none;
}

body::before { /* film grain */
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

body::after { /* city glow */
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(123,47,247,.35), transparent 70%),
    radial-gradient(50% 35% at 85% 110%, rgba(193,18,31,.22), transparent 70%),
    radial-gradient(45% 30% at 10% 105%, rgba(123,47,247,.18), transparent 70%);
}

#app { position: relative; z-index: 1; height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }

/* ---------- screens ---------- */
.screen { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; animation: screenIn .35s ease both; }
.screen.active { display: flex; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- typography ---------- */
.game-title {
  font-family: var(--font-spray);
  font-size: clamp(44px, 13vw, 68px);
  letter-spacing: 2px; line-height: 1; text-align: center;
  margin: 6px 0 14px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(168,85,247,.45));
  transform: rotate(-2deg);
}
.t-purple { color: var(--purple-hi); }
.t-red { color: var(--red-hi); text-shadow: 0 0 18px rgba(225,29,46,.55); }
.tagline { font-family: var(--font-marker); font-size: clamp(14px, 4vw, 17px); text-align: center; color: #c9b8e8; line-height: 1.6; text-shadow: 0 2px 6px #000; }
.panel-title { font-family: var(--font-spray); font-size: 26px; color: var(--purple-hi); text-align: center; letter-spacing: 1px; margin-bottom: 14px; text-shadow: 0 0 16px rgba(168,85,247,.5); }

/* ---------- home ---------- */
#screen-home { justify-content: flex-start; }
.home-inner { display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) 24px 24px; gap: 4px; }
.logo-mark { animation: logoFloat 4s ease-in-out infinite; }
.logo-svg { width: 96px; height: 100px; filter: drop-shadow(0 0 22px rgba(225,29,46,.5)); }
.logo-svg.big { width: 108px; height: 112px; }
@keyframes logoFloat { 0%,100% { transform: translateY(0) rotate(-2deg);} 50% { transform: translateY(-8px) rotate(2deg);} }
.home-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; width: 100%; max-width: 320px; }
.home-row { display: flex; gap: 10px; }
.home-row .btn { flex: 1; }
.home-foot { margin-top: 34px; font-size: 14px; letter-spacing: 1.5px; color: #6e5a99; text-transform: uppercase; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-marker); font-size: 16px; letter-spacing: 1px; color: var(--bone);
  background: linear-gradient(150deg, var(--purple) 0%, var(--purple-deep) 100%);
  border: 2px solid var(--purple-hi); border-radius: 16px 5px 16px 5px;
  padding: 12px 20px; cursor: pointer;
  box-shadow: 0 5px 0 #1c0f38, 0 0 20px rgba(123,47,247,.35);
  transition: transform .08s ease, box-shadow .08s ease;
  user-select: none; touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #1c0f38, 0 0 20px rgba(123,47,247,.35); }
.btn-primary { text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.btn-big { font-size: 20px; padding: 16px 24px; }
.btn-danger, .btn-ghost {
  background: linear-gradient(150deg, #1a1030 0%, #0d0819 100%);
  border-color: var(--red);
  box-shadow: 0 5px 0 #2a060a, 0 0 16px rgba(193,18,31,.25);
  color: #e8b4bc;
}
.btn.disabled { opacity: .4; pointer-events: none; filter: grayscale(.5); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px 4px 12px 4px;
  background: #160b28; border: 2px solid var(--purple-deep); color: var(--purple-hi);
  font-size: 18px; cursor: pointer; font-family: var(--font-marker);
}

/* ---------- setup ---------- */
#screen-setup { justify-content: center; padding: 16px; overflow-y: auto; }
.panel {
  background: linear-gradient(170deg, #150a26 0%, #0b0514 100%);
  border: 2px solid var(--purple-deep); border-radius: 22px 8px 22px 8px;
  padding: 22px 18px;
  box-shadow: 0 0 40px rgba(123,47,247,.18), inset 0 0 60px rgba(0,0,0,.5);
  width: 100%; max-width: 420px; margin: 0 auto;
}
.field-label { display: block; font-family: var(--font-marker); font-size: 13px; letter-spacing: 2px; color: var(--red-hi); margin: 16px 0 6px; text-shadow: 0 0 10px rgba(225,29,46,.4); }
.text-input {
  width: 100%; padding: 12px 14px; font-family: var(--font-marker); font-size: 17px;
  background: #0a0612; color: var(--bone); border: 2px solid var(--purple-deep);
  border-radius: 12px 4px 12px 4px; outline: none;
}
.text-input:focus { border-color: var(--purple-hi); box-shadow: 0 0 14px rgba(168,85,247,.4); }
.seg-control { display: flex; gap: 8px; }
.seg-btn {
  flex: 1; padding: 10px 4px; font-family: var(--font-marker); font-size: 15px;
  background: #0d0718; color: #8d7bb5; border: 2px solid var(--purple-deep);
  border-radius: 12px 4px 12px 4px; cursor: pointer; transition: all .15s ease;
}
.seg-btn.active { background: linear-gradient(150deg, var(--purple), var(--purple-deep)); color: #fff; border-color: var(--purple-hi); box-shadow: 0 0 16px rgba(168,85,247,.45); }
.seg-control.small .seg-btn { font-size: 12px; padding: 8px 2px; }
.opt-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.opt-name { font-size: 16px; font-weight: 600; letter-spacing: .5px; color: #cbb8ea; }
.bot-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 6px 0 0;
  background: #120a22; border: 1px solid var(--purple-deep); border-radius: 10px;
  padding: 5px 10px; font-size: 14px; color: #a78ddb; letter-spacing: .5px;
}
.bot-chip b { color: var(--bone); font-weight: 600; }
.setup-actions { display: flex; gap: 10px; margin-top: 22px; }
.setup-actions .btn-big { flex: 1; }
.fine-print { text-align: center; font-size: 12px; letter-spacing: 1px; color: #5d4b85; margin-top: 12px; text-transform: uppercase; }

/* ============================================================
   GAME SCREEN — UI 2.0
   opponents row / center info / your zone / hand
   ============================================================ */
.game-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 6px;
  background: linear-gradient(180deg, #12081f 0%, transparent 100%);
}
.round-badge { font-family: var(--font-marker); font-size: 15px; letter-spacing: 2px; color: var(--purple-hi); text-shadow: 0 0 12px rgba(168,85,247,.5); }
.wallet-mini {
  display: flex; align-items: center; gap: 5px; font-family: var(--font-marker); font-size: 15px;
  color: var(--gold); background: #160b28; border: 1px solid var(--purple-deep);
  padding: 5px 12px; border-radius: 12px 4px 12px 4px;
}
.coin-ico { color: var(--gold); text-shadow: 0 0 8px rgba(242,183,5,.6); }
.big-ico { font-size: 34px; }
.coin-chip { color: var(--gold); margin-left: 4px; }

/* opponents: a clean row of panels across the top */
.opps-zone {
  display: flex; gap: 8px; padding: 6px 10px 2px;
  overflow-x: auto; scrollbar-width: none; flex: 0 0 auto;
}
.opps-zone::-webkit-scrollbar { display: none; }
.opp {
  flex: 1 1 0; min-width: 100px; max-width: 155px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(19,10,35,.55);
  border: 1px solid var(--purple-deep);
  border-radius: 14px 5px 14px 5px;
  padding: 6px 4px 7px;
}
.opp.turn { border-color: var(--red-hi); box-shadow: 0 0 18px rgba(225,29,46,.5); }
.opp-id { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-marker); font-size: 14px; color: #fff;
  background: linear-gradient(150deg, var(--purple) 0%, var(--red-deep) 100%);
  border: 2px solid var(--purple-hi);
  text-shadow: 0 1px 2px #000;
}
.opp.turn .avatar { box-shadow: 0 0 0 2px var(--red-hi), 0 0 18px rgba(225,29,46,.7); }
.seat-name { font-family: var(--font-marker); font-size: 11px; letter-spacing: 1px; color: #cbb8ea; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-name .you-tag { color: var(--gold); }
.backs { display: flex; min-height: 18px; }
.card-back-mini {
  width: 18px; height: 25px; margin-left: -6px;
  background: linear-gradient(150deg, var(--purple) 0%, var(--red-deep) 100%);
  border: 1px solid #0a0612; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.card-back-mini:first-child { margin-left: 0; }

/* played-card rows: every player's open cards, upright, in front of them */
.opp-open { display: flex; align-items: center; min-height: 34px; }
.opp-open .card.mini { width: 34px; }
.opp-open .card.mini + .card.mini { margin-left: -12px; }

/* center info */
.center-zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 10px 6px; flex: 0 0 auto;
}
.suit-orb {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #2a1245 0%, #0d0618 75%);
  border: 2px dashed rgba(168,85,247,.5);
  box-shadow: 0 0 26px rgba(168,85,247,.3), inset 0 0 18px rgba(0,0,0,.7);
}
.suit-orb.red { color: var(--red-hi); text-shadow: 0 0 14px rgba(225,29,46,.8); border-color: rgba(225,29,46,.55); }
.suit-orb.black { color: var(--purple-hi); text-shadow: 0 0 14px rgba(168,85,247,.8); }
.control-indicator {
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,6,18,.72); border: 1px solid var(--purple-deep);
  border-radius: 14px 4px 14px 4px; padding: 5px 14px;
}
.ci-label { font-size: 11px; letter-spacing: 2px; color: #6e5a99; font-weight: 700; }
.ci-suit { font-size: 20px; line-height: 1; }
.ci-suit.red { color: var(--red-hi); text-shadow: 0 0 12px rgba(225,29,46,.7); }
.ci-suit.black { color: var(--purple-hi); text-shadow: 0 0 12px rgba(168,85,247,.7); }
.ci-name { font-family: var(--font-marker); font-size: 13px; color: var(--bone); }
.deck-left { font-size: 11px; letter-spacing: 1.5px; color: #8d7bb5; font-weight: 600; text-transform: uppercase; }

/* your zone: your played cards + this round's slot, right above your hand */
.you-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 10px 0; flex: 0 0 auto; min-height: 148px; justify-content: flex-end; }
.you-open { display: flex; align-items: center; min-height: 48px; }
.you-open .card.mini { width: 44px; }
.you-open .card.mini + .card.mini { margin-left: -12px; }

/* the card played this round — slot in front of each player */
.trick-front { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; min-height: 70px; }
.tf-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #9b86c4; font-weight: 600; }
.tf-label.winning { color: var(--gold); text-shadow: 0 0 8px rgba(242,183,5,.6); }

/* hand bar */
.hand-bar {
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: linear-gradient(0deg, rgba(7,4,13,.95) 55%, rgba(7,4,13,0) 100%);
  flex: 0 0 auto;
}
.you-info { min-width: 60px; }
.you-info .seat-name { font-size: 13px; }
.you-info .ctrl-tag { font-family: var(--font-marker); font-size: 10px; color: var(--gold); letter-spacing: 1px; min-height: 14px; display: block; text-shadow: 0 0 8px rgba(242,183,5,.5); }
.hand { display: flex; justify-content: center; padding: 2px 0; }
.hand .card { margin-left: -14px; }
.hand .card:first-child { margin-left: 0; }

.hint-bar {
  margin: 2px 14px 4px; text-align: center;
  font-family: var(--font-marker); font-size: 13px; letter-spacing: 1px;
  color: var(--purple-hi); text-shadow: 0 0 10px rgba(168,85,247,.4);
  min-height: 20px; flex: 0 0 auto;
}
.history-strip {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  scrollbar-width: none; flex: 0 0 auto;
}
.history-strip::-webkit-scrollbar { display: none; }
.hist-chip {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: .5px;
  background: #120a22; border: 1px solid var(--purple-deep); border-radius: 8px;
  padding: 3px 8px; color: #a78ddb;
}
.hist-chip b { color: var(--bone); }
.hist-chip .kura-star { color: var(--red-hi); }

/* ---------- cards ---------- */
.card {
  position: relative;
  width: clamp(46px, 13vw, 62px);
  aspect-ratio: 5/7;
  background: linear-gradient(160deg, #fffdf7 0%, var(--bone) 100%);
  border: 2px solid #0a0612;
  border-radius: 9px;
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
  cursor: pointer;
  display: flex; flex-direction: column;
  font-family: var(--font-cond); font-weight: 700; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
  user-select: none; touch-action: manipulation;
}
.card .corner { position: absolute; top: 4px; left: 5px; line-height: .95; text-align: center; font-size: clamp(12px, 3.4vw, 16px); }
.card .corner small { display: block; font-size: .85em; }
.card .pip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(22px, 6.4vw, 32px); opacity: .9; }
.card.red { color: var(--red); }
.card.illegal { filter: grayscale(.75) brightness(.55); cursor: not-allowed; }
.card.illegal::after {
  content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--red-hi); font-size: 22px; opacity: .8; text-shadow: 0 0 8px #000;
}
.card.legal { box-shadow: 0 0 0 2px var(--purple-hi), 0 0 18px rgba(168,85,247,.55), 0 3px 8px rgba(0,0,0,.55); }
.card.legal:active { transform: translateY(-8px) scale(1.05); }
.card.card-back {
  background: radial-gradient(circle at 50% 42%, rgba(225,29,46,.9) 0%, rgba(225,29,46,0) 34%),
    linear-gradient(150deg, var(--purple) 0%, var(--red-deep) 100%);
  border-color: var(--purple-hi);
}
.card.mini { width: 28px; cursor: default; border-width: 1px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.55); transition: none; }
.card.mini .corner { font-size: 9px; top: 2px; left: 3px; }
.card.mini .pip { font-size: 13px; }
.card.tcard { width: 40px; cursor: default; }
.card.tcard .corner { font-size: 10px; }
.card.tcard .pip { font-size: 18px; }
.you-zone .card.tcard { width: 54px; }
.you-zone .card.tcard .corner { font-size: 13px; }
.you-zone .card.tcard .pip { font-size: 24px; }
.card.tcard.winning { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(242,183,5,.7), 0 3px 8px rgba(0,0,0,.55); }

/* turn arrow + timer badge */
.turn-arrow {
  display: none; font-size: 16px; color: var(--gold); line-height: 1;
  text-shadow: 0 0 12px rgba(242,183,5,.9);
  animation: arrowBounce .6s ease-in-out infinite alternate;
}
.opp.turn .turn-arrow, .you-zone .turn-on { display: block; }
@keyframes arrowBounce { from { opacity: .55; } to { opacity: 1; } }
.timer-badge {
  display: none; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 50%;
  background: linear-gradient(150deg, var(--red-hi), var(--red-deep));
  color: #fff; font-family: var(--font-marker); font-size: 12px; line-height: 22px; text-align: center;
  box-shadow: 0 0 14px rgba(225,29,46,.8);
  animation: timerPulse .45s ease-in-out infinite alternate;
}
.timer-badge.show { display: block; }
@keyframes timerPulse { from { transform: scale(1); } to { transform: scale(1.28); } }

/* ---------- overlays / modals ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(4,2,9,.82); backdrop-filter: blur(4px);
}
.overlay.active { display: flex; animation: screenIn .25s ease both; }
.modal-panel { max-height: 86dvh; display: flex; flex-direction: column; }
.rules-scroll { overflow-y: auto; padding-right: 4px; margin-bottom: 14px; }
.rules-scroll h3 { font-family: var(--font-marker); font-size: 15px; color: var(--red-hi); letter-spacing: 2px; margin: 14px 0 4px; }
.rules-scroll p { font-size: 16px; line-height: 1.5; color: #d5c8ee; margin-bottom: 4px; }
.rules-scroll b { color: var(--purple-hi); }

/* result */
.result-panel { text-align: center; }
.result-logo { display: flex; justify-content: center; animation: logoFloat 3s ease-in-out infinite; }
.result-title {
  font-family: var(--font-spray); font-size: clamp(28px, 8vw, 44px); letter-spacing: 2px;
  color: var(--gold); text-shadow: 0 0 30px rgba(242,183,5,.5), 0 4px 0 #000;
  transform: rotate(-2deg); margin: 8px 0 4px;
}
.result-title.lose { color: var(--red-hi); text-shadow: 0 0 30px rgba(225,29,46,.5), 0 4px 0 #000; }
.kura-banner {
  display: none; font-family: var(--font-marker); letter-spacing: 2px; font-size: 16px;
  color: #fff; background: linear-gradient(90deg, var(--purple) 0%, var(--red) 100%);
  border-radius: 10px; padding: 8px 14px; margin: 8px 0;
  box-shadow: 0 0 26px rgba(225,29,46,.5);
  animation: kuraPulse 1s ease-in-out infinite;
}
.kura-banner.show { display: block; }
@keyframes kuraPulse { 50% { box-shadow: 0 0 44px rgba(168,85,247,.8); transform: scale(1.03); } }
.result-sub { font-size: 17px; color: #cbb8ea; margin: 6px 0; }
.coin-delta { font-family: var(--font-marker); font-size: 30px; color: var(--gold); text-shadow: 0 0 16px rgba(242,183,5,.55); margin: 10px 0 18px; }
.coin-delta.negative { color: var(--red-hi); text-shadow: 0 0 16px rgba(225,29,46,.55); }
.result-actions { display: flex; flex-direction: column; gap: 10px; }

/* wallet */
.wallet-balance { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--font-marker); font-size: 42px; color: var(--gold); text-shadow: 0 0 20px rgba(242,183,5,.5); }
.wallet-balance small { font-size: 13px; letter-spacing: 2px; color: #8d7bb5; }
.wallet-id { text-align: center; font-size: 14px; letter-spacing: 1px; color: #9b86c4; margin: 6px 0 12px; }
.wallet-id b { color: var(--purple-hi); }
/* identity card: username + FAB number with copy buttons */
.idcard { margin: 4px 0 12px; border: 1px solid rgba(242,183,5,.28); border-radius: 10px; background: rgba(0,0,0,.35); padding: 8px 10px; }
.idrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.idrow + .idrow { border-top: 1px solid rgba(255,255,255,.06); }
.idlbl { font-family: var(--font-marker); font-size: 11px; letter-spacing: 1.5px; color: #8d7bb5; width: 92px; flex-shrink: 0; }
.idrow b { flex: 1; font-size: 16px; letter-spacing: 1.5px; color: #ffe9c9; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.idcopy { font-family: var(--font-marker); font-size: 11px; letter-spacing: 1px; padding: 5px 12px; border-radius: 7px; border: 1px solid rgba(242,183,5,.45); background: transparent; color: var(--gold); cursor: pointer; flex-shrink: 0; }
.idcopy:active { background: rgba(242,183,5,.18); transform: scale(.96); }
.wallet-tx { max-height: 150px; overflow-y: auto; margin-bottom: 12px; }
.tx-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 10px; border-bottom: 1px dashed #2a1747; color: #cbb8ea; }
.tx-row .plus { color: var(--gold); } .tx-row .minus { color: var(--red-hi); }
.wallet-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.wallet-actions .btn { font-size: 13px; padding: 10px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(150deg, #1c0f38, #0d0718);
  border: 2px solid var(--red); color: var(--bone);
  font-family: var(--font-marker); font-size: 14px; letter-spacing: 1px;
  padding: 10px 18px; border-radius: 14px 4px 14px 4px;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 100;
  box-shadow: 0 0 24px rgba(225,29,46,.4); max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 480px) {
  .hand .card { margin-left: -10px; }
}

/* ============================================================
   UI 3.0 — graffiti oval table (reference build)
   ============================================================ */
.game-topbar { gap: 8px; }
.gt-mid { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.gt-title {
  font-family: var(--font-spray); font-size: 17px; letter-spacing: 1px;
  color: var(--purple-hi); text-shadow: 0 0 14px rgba(168,85,247,.65), 0 2px 0 #000;
}
.gt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bet-btns { display: flex; gap: 4px; }
.bet-btn {
  font-family: var(--font-marker); font-size: 10px; letter-spacing: 1px;
  padding: 4px 9px; cursor: pointer; color: #f3c9cf;
  background: linear-gradient(150deg, #4a0d15, #1c060a);
  border: 1.5px solid var(--red-hi); border-radius: 8px 3px 8px 3px;
  box-shadow: 0 2px 0 #2a060a;
}
.bet-btn:active { transform: translateY(2px); box-shadow: none; }

.table-oval {
  position: relative; flex: 1 1 auto; min-height: 0;
  margin: 4px 12px; border-radius: 50% / 46%;
  transform: scale(.9); transform-origin: center center;
  background: radial-gradient(ellipse 95% 85% at 50% 42%, #2c1549 0%, #190b2c 55%, #0c0516 100%);
  border: 3px solid #241243;
  box-shadow: inset 0 0 90px rgba(0,0,0,.8), inset 0 16px 44px rgba(168,85,247,.10), 0 0 44px rgba(123,47,247,.28);
  overflow: visible;
}
.oval-felt {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.35), inset 0 2px 18px rgba(255,255,255,.05);
}
.oval-tags {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.tag { font-family: var(--font-spray); line-height: 1; white-space: nowrap; }
.tag-purple {
  font-size: clamp(40px, 13vw, 68px); transform: rotate(-7deg) translateY(-8%);
  color: rgba(168,85,247,.32); text-shadow: 0 0 34px rgba(168,85,247,.45), 0 4px 0 rgba(0,0,0,.4);
}
.tag-red {
  font-size: clamp(26px, 8vw, 42px); transform: rotate(5deg) translate(24%, 52%);
  color: rgba(225,29,46,.30); text-shadow: 0 0 28px rgba(225,29,46,.4);
}
.table-center-mini {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1;
}

.seat2 {
  position: absolute; transform: translate(-50%, -50%);
  width: 136px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  z-index: 2;
}
.seat2.you { flex-direction: column-reverse; }
.seat2.turn .avatar { box-shadow: 0 0 0 2px var(--red-hi), 0 0 20px rgba(225,29,46,.75); }
.seat2 .avatar { width: 36px; height: 36px; border: 2px solid var(--purple-hi); }
.seat2.you .avatar { width: 42px; height: 42px; }

.fan { position: relative; width: 100%; height: 58px; }
.fan .card.mini {
  position: absolute; left: 50%; top: 0; margin-left: -15px;
  transform-origin: 50% 165%;
  width: 30px; border-radius: 5px;
}
.fan .card.mini .corner { font-size: 8px; top: 2px; left: 3px; }
.fan .card.mini .pip { font-size: 12px; }
.seat2.you .fan { height: 66px; }
.seat2.you .fan .card.mini { width: 38px; margin-left: -19px; }
.seat2.you .fan .card.mini .corner { font-size: 10px; }
.seat2.you .fan .card.mini .pip { font-size: 16px; }

.tcard-slot { min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; }
.seat2.you .tcard-slot { min-height: 78px; }
.card.tcard { width: 38px; }
.card.tcard .corner { font-size: 10px; }
.card.tcard .pip { font-size: 16px; }
.seat2.you .card.tcard { width: 54px; }
.seat2.you .card.tcard .corner { font-size: 13px; }
.seat2.you .card.tcard .pip { font-size: 24px; }
.seat2 .backs { min-height: 16px; }
.seat2 .card-back-mini { width: 14px; height: 19px; margin-left: -5px; }

/* ============ UI 3.1 — multiplayer room ============ */
.mp-head { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 6px; }
.mp-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18px 20px; overflow-y: auto; }
#mp-join-form { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 4px; }
.mp-code-input { text-align: center; font-size: 26px; letter-spacing: 8px; }
.mp-or { text-align: center; font-family: var(--font-marker); color: #6e5a99; margin: 10px 0; font-size: 13px; }
.mp-code {
  font-family: var(--font-spray); font-size: 64px; letter-spacing: 8px; color: var(--gold);
  text-shadow: 0 0 30px rgba(242,183,5,.5), 0 4px 0 #000; cursor: pointer; transform: rotate(-2deg);
}
.mp-code-sub { font-size: 13px; color: #8d7bb5; margin: 6px 0 18px; }
.mp-code-sub a { color: var(--purple-hi); }
.mp-seats-label { font-family: var(--font-marker); font-size: 12px; letter-spacing: 2px; color: var(--red-hi); margin-bottom: 10px; }
.mp-roster { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.mp-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(19,10,35,.55); border: 1px solid var(--purple-deep);
  border-radius: 12px 4px 12px 4px; padding: 10px 12px;
}
.mp-row.empty { opacity: .45; border-style: dashed; }
.mp-row.off .mp-name { color: #6e5a99; }
.mp-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a1747; flex: 0 0 auto; }
.mp-dot.on { background: #38d06b; box-shadow: 0 0 8px rgba(56,208,107,.7); }
.mp-name { flex: 1; font-family: var(--font-marker); font-size: 15px; }
.mp-name b { color: var(--gold); }
.mp-host { font-size: 9px; letter-spacing: 1px; color: #fff; background: linear-gradient(90deg, var(--purple), var(--red)); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.mp-seat { font-size: 12px; color: #8d7bb5; letter-spacing: 1px; }
.mp-status { margin-top: 16px; font-family: var(--font-marker); font-size: 12px; letter-spacing: 1px; color: var(--purple-hi); text-align: center; }

/* multiplayer room: deal button + chat */
.mp-chat {
  width: 100%; max-width: 340px; margin-top: 14px; max-height: 140px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10,6,18,.5); border: 1px solid var(--purple-deep);
  border-radius: 12px 4px 12px 4px; padding: 8px 10px;
}
.mp-msg { font-size: 14px; color: #cbb8ea; }
.mp-msg b { color: var(--purple-hi); font-weight: 600; }
.mp-msg.mine b { color: var(--gold); }
.mp-chat-row { display: flex; gap: 6px; width: 100%; max-width: 340px; margin-top: 8px; }
.mp-chat-row .text-input { flex: 1; padding: 8px 12px; font-size: 14px; }
.mp-chat-row .btn { padding: 8px 14px; font-size: 13px; }
.modal-field { margin: 4px 0 14px; }
#overlay-name .btn-primary { width: 100%; }
.mp-row.self { box-shadow: inset 3px 0 0 #e8b84b; }
.gate-err { display: none; color: #ff9c9c; font-size: 13px; margin-top: 10px; text-align: center; }
#overlay-gate .panel-sub { text-align: center; font-size: 13px; opacity: .85; margin-bottom: 10px; }
.mp-bal { font-size: 12px; opacity: .8; margin-left: auto; }
.mp-bal.broke { color: #ff8080; opacity: 1; font-weight: 700; }


/* ================= CASINO THEME (overrides) ================= */
:root {
  --black: #0e0d0b;
  --bone: #f5efe0;
  --purple: #d4af37;
  --purple-hi: #f0c94a;
  --purple-deep: #3d3524;
  --red-hi: #c21230;
  --font-spray: Georgia, 'Times New Roman', serif;
  --font-marker: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-cond: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body { background: radial-gradient(1200px 620px at 50% -10%, #201c14 0%, var(--black) 60%) !important; }
.panel, .modal-panel { box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0,0,0,.65) !important; }
.panel-title, .game-title { text-shadow: 0 2px 0 #000, 0 0 26px rgba(212,175,55,.28) !important; }
.tagline { color: #cfc4a5 !important; text-shadow: none !important; }
.field-label { text-shadow: none !important; }
.btn { letter-spacing: .06em; }
.btn-primary { background: linear-gradient(180deg, #f0c94a 0%, #d4af37 100%) !important; color: #241c05 !important; border: 1px solid #8a6d1f !important; font-weight: 700; box-shadow: 0 3px 0 #7a5f18, 0 8px 18px rgba(0,0,0,.5); }
.btn-ghost { background: transparent !important; border: 1px solid #6b5c33 !important; color: var(--bone) !important; }
.btn-gold { display:block; width:100%; background: linear-gradient(180deg, #f0c94a 0%, #d4af37 100%); color: #241c05; border: 1px solid #8a6d1f; font-weight: 700; border-radius: 10px; padding: 15px; font-size: 17px; cursor: pointer; box-shadow: 0 3px 0 #7a5f18, 0 8px 18px rgba(0,0,0,.5); letter-spacing: .08em; }
.btn-big { padding: 16px; font-size: 17px; }
.btn-sub { display: block; font-size: 11px; font-weight: 400; letter-spacing: .03em; opacity: .78; margin-top: 4px; text-transform: none; }
.text-input, input[type=text], input[type=number], input[type=tel], input[type=password] { background: #0f0d0a !important; border: 1px solid #4a4130 !important; color: var(--bone) !important; }
.seg-btn { border-color: #4a4130 !important; color: #cfc4a5 !important; }
.mp-bal { color: #a99c7c; }
.mp-bal.broke { color: #e06060; }

/* ---------- public lobby ---------- */
.lobby-panel { max-height: 82vh; overflow-y: auto; }
.lobby-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #3d3524; background: #14110c; border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.lobby-host { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; color: var(--bone); letter-spacing: .05em; }
.lobby-seats { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: #a99c7c; }
.seat-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #6b5c33; display: inline-block; }
.seat-dot.on { background: var(--purple); border-color: var(--purple); }
.lobby-stake { font-size: 19px; font-weight: 700; color: var(--purple-hi); font-variant-numeric: tabular-nums; }
.lobby-stake small { font-size: 11px; color: #a99c7c; font-weight: 400; }
.lobby-join { padding: 8px 18px; font-size: 13px; width: auto; display: inline-block; }
.lobby-empty { text-align: center; color: #a99c7c; padding: 26px 10px; border: 1px dashed #4a4130; border-radius: 10px; font-size: 14px; }
#lobby-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 12px; }
#lobby-chips .chip { flex: 0 0 calc(33.333% - 8px); text-align: center; font-size: 12px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.20); background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 45%, rgba(0,0,0,.15)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #cfc4a5; cursor: pointer; font-family: inherit; box-shadow: 0 6px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22); }
#lobby-chips .chip.on { background: #8f1420; color: #fff; border-color: #b01a26; font-weight: 700; }
.kura-tag { font-size: 10px; font-weight: 700; color: #241c05; background: linear-gradient(180deg,#f0c94a,#d4af37); border-radius: 4px; padding: 2px 6px; letter-spacing: .08em; vertical-align: middle; }
#btn-refresh { position: fixed; left: 14px; bottom: 14px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: #14110c; border: 1px solid #6b5c33; color: var(--purple-hi); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.55); }
#btn-refresh:active { transform: scale(.92); }
.lobby-need { font-size: 10px; color: #a99c7c; margin-top: 2px; font-variant-numeric: tabular-nums; }
.vote-card { position: fixed; left: 16px; right: 16px; bottom: 84px; z-index: 80; background: linear-gradient(180deg,#1c1913,#14110c); border: 1px solid var(--purple); border-radius: 12px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.7); text-align: center; }
.vote-title { font-family: Georgia, serif; color: var(--purple-hi); font-size: 16px; letter-spacing: .06em; }
.vote-sub { font-size: 13px; color: #cfc4a5; margin: 8px 0 12px; }
.vote-btns { display: flex; gap: 10px; }
.vote-btns .btn { flex: 1; }
.vote-timerbar { height: 4px; background: #3d3524; border-radius: 2px; margin-top: 12px; overflow: hidden; }
.vote-timerbar i { display: block; height: 100%; background: var(--purple); width: 100%; transition: width .25s linear; }
/* ---------- animations ---------- */
.btn:active { transform: scale(.96); }
.overlay.active .panel { animation: popin .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popin { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card { transition: transform .15s ease, box-shadow .15s ease; }
.fan .card:hover { transform: translateY(-10px); }
#coin-delta.show { animation: coinpop .5s ease both; }
@keyframes coinpop { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
#result-title { animation: titlepulse .6s ease both; }
@keyframes titlepulse { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
#btn-chat-fab { position: fixed; right: 14px; bottom: 14px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg,#f0c94a,#d4af37); border: 1px solid #8a6d1f; color: #241c05; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
#btn-chat-fab:active { transform: scale(.92); }
#chat-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #c21230; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px; }
#chat-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: linear-gradient(180deg,#1c1913,#14110c); border-top: 1px solid var(--purple); border-radius: 14px 14px 0 0; padding: 10px 14px 14px; transform: translateY(105%); transition: transform .28s ease; box-shadow: 0 -12px 40px rgba(0,0,0,.7); }
#chat-drawer.open { transform: translateY(0); }
.chat-head { display: flex; justify-content: space-between; align-items: center; font-family: Georgia, serif; color: var(--purple-hi); font-size: 14px; letter-spacing: .1em; padding: 2px 2px 8px; }
#btn-chat-close { background: none; border: none; color: #a99c7c; font-size: 22px; cursor: pointer; line-height: 1; }
#chat-drawer .mp-chat { max-height: 38vh; height: 38vh; margin-top: 0; }
#chat-drawer .mp-chat-row { max-width: none; }
.mp-msg { color: #d8cdb2; }
.mp-msg b { color: var(--purple-hi); }
.mp-msg.mine b { color: var(--purple-hi); }

/* iOS scroll fix: tall modals (wallet) must scroll to reach CLOSE */
.modal-panel { max-height: 86vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }

/* ---------- checkers ---------- */
.game-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #3d3524; background: #14110c; border-radius: 10px; padding: 14px; margin-top: 10px; }
.game-card-title { font-family: Georgia, serif; font-size: 18px; letter-spacing: .08em; color: var(--purple-hi); }
.game-card-sub { font-size: 12px; color: #a99c7c; margin-top: 4px; }
#ck-board { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; max-width: 420px; margin: 0 auto; border: 2px solid #6b5c33; border-radius: 6px; overflow: hidden; }
.ck-sq { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.ck-sq.light { background: #e8d5b0; }
.ck-sq.dark { background: #7a5c38; }
.ck-sq.last { box-shadow: inset 0 0 0 2px rgba(240,201,74,.6); }
.ck-sq.sel { box-shadow: inset 0 0 0 3px var(--purple-hi); }
.ck-p { width: 78%; height: 78%; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #c21230; }
.ck-p.w { background: radial-gradient(circle at 35% 30%, #fff, #cfc4a5 75%); }
.ck-p.b { background: radial-gradient(circle at 35% 30%, #5a5148, #17130c 75%); }
.ck-dot { width: 26%; height: 26%; border-radius: 50%; background: rgba(240,201,74,.9); box-shadow: 0 0 6px rgba(0,0,0,.4); }

#btn-chat-fab { z-index: 200; }
#chat-drawer { z-index: 210; }
#ck-code-display { font-family: Georgia, serif; font-size: 38px; font-weight: 700; letter-spacing: .35em; color: var(--purple-hi); text-align: center; text-shadow: 0 2px 0 #000, 0 0 22px rgba(212,175,55,.4); margin: 4px 0 2px; padding-left: .35em; }

/* ============ CHECK! table header — last 5 cards played ============ */
#ckh-strip { display: flex; justify-content: center; align-items: flex-end; min-height: 88px; padding: 10px 20px; background: rgba(0,0,0,.28); border: 1px solid #3a2d55; border-radius: 8px; }
.ckh-card { width: 52px; height: 72px; margin: 0 -14px; border-radius: 6px; background: #f5f0e6; color: #1a1a2e; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.5); border: 1px solid #c9c2b2; position: relative; }
.ckh-card.red { color: #c1121f; }
.ckh-card.top { transform: translateY(-6px) scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.65); z-index: 5; }
.ckh-card.joker { background: linear-gradient(135deg, #2b2b3a 0 50%, #f5f0e6 50% 100%); color: #f5f0e6; }

/* ============ CHECK! table: opponents, hand, J-command ============ */
#ckh-opp { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; }
.ckh-op { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,.25); border: 1px solid #3a2d55; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.ckh-op.check { border-color: #f0c94a; box-shadow: 0 0 8px rgba(240,201,74,.45); }
.ckh-op.out { opacity: .45; }
.ckh-op.out .ckh-op-name { text-decoration: line-through; }
.ckh-op.turn { border-color: #7b2ff7; }
.ckh-op-count { font-weight: 700; color: #f0c94a; }
#ckh-hand { display: flex; justify-content: center; flex-wrap: wrap; min-height: 66px; margin-top: 8px; }
.ckh-card.mine { width: 42px; height: 58px; margin: 3px -6px; font-size: 15px; cursor: pointer; }
.ckh-card.mine.play { transform: translateY(-9px); box-shadow: 0 0 0 2px #f0c94a, 0 4px 10px rgba(0,0,0,.6); z-index: 3; }
.ckh-card.mine.dead { opacity: .55; cursor: default; }
#ckh-cmd { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; }
#ckh-cmd .cmd-suit { width: 44px; height: 44px; font-size: 22px; border-radius: 8px; }

/* ============ CHECK! board pile + counts ============ */
#ckh-boardline { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
#ckh-deck { width: 66px; height: 90px; border-radius: 8px; background: repeating-linear-gradient(45deg, #2b2b3a 0 6px, #1a1a2e 6px 12px); border: 2px solid #6b5c33; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
#ckh-deck-count { font-size: 24px; font-weight: 700; color: #f0c94a; line-height: 1; }
.deck-label { font-size: 10px; letter-spacing: 1.5px; color: #c9c2b2; margin-top: 4px; }
#ckh-boardmsg { flex: 1; font-size: 13px; color: #f0c94a; min-height: 20px; }
.ckh-op-count { font-weight: 700; color: #f0c94a; font-size: 14px; background: rgba(0,0,0,.35); border-radius: 10px; padding: 1px 8px; }
.ckh-op.board .ckh-op-count { color: #7b2ff7; }
.ckh-card.jcmd { box-shadow: 0 0 0 2px #7b2ff7 inset; }
.ckh-card.mine.jcmd { box-shadow: 0 0 0 2px #7b2ff7, 0 2px 6px rgba(0,0,0,.5); }
.ckh-card.mine.jcmd.play { box-shadow: 0 0 0 2px #f0c94a, 0 0 8px #7b2ff7, 0 4px 10px rgba(0,0,0,.6); }

/* ============ CHECK! joker — clearly readable ============ */
.ckh-card.joker { background: #14142a; border: 1px solid #f0c94a; color: #f0c94a; font-size: 9px; letter-spacing: 1px; line-height: 1.2; gap: 2px; }
.ckh-card.joker .jk-star { font-size: 18px; letter-spacing: 0; }
.ckh-card.mine.jcmd { box-shadow: 0 0 0 2px #7b2ff7, 0 2px 6px rgba(0,0,0,.5); }

/* ============ CHECK! J-command picker guidance ============ */
#ckh-cmd .cmd-suit.held { box-shadow: 0 0 0 2px #f0c94a; }
#ckh-cmd .cmd-suit:not(.held) { opacity: .55; }
#ckh-cmd .cmd-suit.winline { box-shadow: 0 0 0 2px #f0c94a, 0 0 12px #f0c94a; transform: scale(1.1); }

/* ============ CHECK! jokers — single-color identity cards ============ */
.ckh-card.joker { background: #101018; border: 2px solid #e8e8f0; color: #e8e8f0; }
.ckh-card.joker .jk-star { font-size: 16px; }
.ckh-card.joker .jk-word { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.ckh-card.joker .jk-pair { font-size: 11px; letter-spacing: 1px; }
/* red joker: all red */
.ckh-card.joker.redj { background: #2a0d12; border-color: #ff5a5a; color: #ff8080; }
/* black joker: all white/silver */
.ckh-card.joker:not(.redj) { border-color: #c9c2b2; color: #f5f0e6; }

/* ============ CHECK! victory overlay ============ */
#ckh-victory { position: fixed; inset: 0; background: rgba(8,6,18,.92); z-index: 400; display: flex; align-items: center; justify-content: center; }
.ckh-vic-inner { background: linear-gradient(160deg, #1c1230, #0d0a1a); border: 2px solid #f0c94a; border-radius: 14px; padding: 28px 24px; text-align: center; max-width: 340px; box-shadow: 0 0 40px rgba(240,201,74,.35); }
.ckh-vic-star { font-size: 44px; color: #f0c94a; }
.ckh-vic-inner h2 { color: #f0c94a; letter-spacing: 2px; margin: 8px 0; }
.ckh-vic-pot { font-size: 26px; font-weight: 700; color: #7CFC00; margin-top: 8px; }

/* ============ CHECK! felt table + avatars ============ */
#ckh-felt { background: radial-gradient(ellipse at center, #14532d 0%, #0b3d2e 55%, #072a1f 100%); border: 1px solid #6b5c33; border-radius: 14px; padding: 10px 8px; margin-top: 6px; box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
#ckh-opp { display: flex; justify-content: center; gap: 14px; margin: 4px 0 8px; flex-wrap: wrap; }
.ckh-av { display: flex; flex-direction: column; align-items: center; width: 72px; position: relative; }
.ckh-av-circle { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#2b2b3a,#1a1a2e); border: 2px solid #3a2d55; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #f0c94a; }
.ckh-av.turn .ckh-av-circle { border-color: #f0c94a; box-shadow: 0 0 12px rgba(240,201,74,.7); }
.ckh-av.check .ckh-av-circle { border-color: #ff5a5a; box-shadow: 0 0 12px rgba(255,90,90,.8); animation: ckhPulse 1s infinite alternate; }
.ckh-av.out { opacity: .4; }
.ckh-av-name { font-size: 11px; margin-top: 3px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ckh-av-count { font-size: 11px; color: #f0c94a; font-weight: 700; }
.ckh-av-arrow { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); color: #f0c94a; font-size: 13px; }
@keyframes ckhPulse { from { box-shadow: 0 0 6px rgba(255,90,90,.5); } to { box-shadow: 0 0 16px rgba(255,90,90,.95); } }
#ckh-center { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 122px; }
#ckh-topcard { display: flex; align-items: center; justify-content: center; }
.ckh-card.big { width: 82px; height: 114px; font-size: 30px; border-radius: 10px; }
.ckh-card.big .jk-word { font-size: 14px; }
.ckh-card.big .jk-star { font-size: 26px; }
.ckh-card.big .jk-pair { font-size: 16px; }
#ckh-boardmsg { max-width: 130px; font-size: 12px; }
#ckh-jokch { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 8px 0; }

/* ============ CHECK! round table ============ */
#ckh-felt { position: relative; height: 330px; background: radial-gradient(ellipse at center, #177a3e 0%, #0b3d2e 58%, #052e22 100%); border: 7px solid #4a2f17; border-radius: 50% / 46%; box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.5); margin-top: 10px; }
#ckh-felt::after { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(240,201,74,.25); border-radius: 50% / 46%; pointer-events: none; }
#ckh-opp { position: absolute; top: 5px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; z-index: 3; }
.ckh-av { width: 66px; }
.ckh-av-circle { width: 42px; height: 42px; font-size: 18px; background: linear-gradient(135deg, #3a2d18, #1f1608); border-color: #6b5c33; }
#ckh-center { position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 20px; z-index: 2; }
#ckh-deck { width: 56px; height: 78px; transform: rotate(-6deg); }
#ckh-deck-count { font-size: 20px; }
#ckh-topcard .ckh-card.big { width: 88px; height: 122px; font-size: 34px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.65); }
#ckh-topcard .ckh-card.big .jk-word { font-size: 15px; }
#ckh-topcard .ckh-card.big .jk-star { font-size: 28px; }
#ckh-topcard .ckh-card.big .jk-pair { font-size: 17px; }
#ckh-strip { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; z-index: 2; background: rgba(0,0,0,.3); padding: 4px 12px; border-radius: 10px; min-height: 0; }
#ckh-strip .ckh-card { width: 30px; height: 42px; font-size: 12px; margin: 0 -8px; border-radius: 4px; }
#ckh-strip .ckh-card.top { transform: translateY(-3px) scale(1.05); }
#ckh-strip .ckh-card.joker .jk-word { font-size: 6px; }
#ckh-strip .ckh-card.joker .jk-star { font-size: 10px; }
#ckh-strip .ckh-card.joker .jk-pair { font-size: 7px; }

/* ============ CHECK! previous-3 corner widget ============ */
#ckh-prev3 { position: absolute; top: 40px; left: 6px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(0,0,0,.35); border: 1px solid rgba(240,201,74,.35); border-radius: 8px; padding: 4px 6px; }
.ckh-prev3-label { font-size: 8px; letter-spacing: 1.5px; color: #f0c94a; }
#ckh-prev3-cards { display: flex; }
#ckh-prev3-cards .ckh-card { width: 26px; height: 36px; font-size: 10px; margin: 0 -7px; border-radius: 3px; }
#ckh-prev3-cards .ckh-card.top { transform: translateY(-2px) scale(1.06); }
#ckh-prev3-cards .ckh-card.joker .jk-word { font-size: 5px; letter-spacing: 0; }
#ckh-prev3-cards .ckh-card.joker .jk-star { font-size: 9px; }
#ckh-prev3-cards .ckh-card.joker .jk-pair { font-size: 6px; }

/* ============ iOS: reachable buttons under the address bar ============ */
#screen-check { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#screen-check .panel { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
#ckh-felt { height: 305px; }

/* ============ CHECK! PREV 3 — top banner near the game name ============ */
#ckh-prev3 { position: static; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 2px auto 8px; padding: 3px 10px; }
.ckh-prev3-label { font-size: 9px; }
#ckh-prev3-cards .ckh-card { width: 28px; height: 38px; font-size: 11px; margin: 0 -7px; }

/* ===== casino retheme: red/black main, purple supporting ===== */
.btn-gold { background: linear-gradient(180deg, #e11d2e 0%, #8f0f1c 100%) !important; color: #fff !important; }
/* black home backdrop with a subtle blood-red vignette + faint red floor glow */
#screen-home { position: relative; overflow: hidden; background: radial-gradient(1200px 800px at 50% -12%, #1a0a10 0%, #0b0508 55%, #060406 100%); box-shadow: inset 0 0 180px rgba(107,15,26,.55); }
.home-inner { position: relative; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 100%; width: 100%; justify-content: flex-start; }
#screen-home .home-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 500px at 50% 108%, rgba(143,20,32,.18), rgba(143,20,32,0) 70%); }
.hb { position: absolute; display: flex; align-items: center; justify-content: center; animation: hbFloat 7s ease-in-out infinite alternate; will-change: transform; }
.hb-card { background: #160a0e; border: 1px solid rgba(143,20,32,.45); color: #8f1420; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.35); border-radius: 10px; }
.hb-card.red { color: #a8842f; }
.hb-die { background-color: #14100c; border: 1px solid rgba(168,132,47,.35); border-radius: 16px; background-image: radial-gradient(circle at 30% 30%, #a8842f 0 9%, transparent 10%), radial-gradient(circle at 70% 70%, #a8842f 0 9%, transparent 10%), radial-gradient(circle at 70% 30%, #a8842f 0 9%, transparent 10%), radial-gradient(circle at 30% 70%, #a8842f 0 9%, transparent 10%), radial-gradient(circle at 50% 50%, #a8842f 0 9%, transparent 10%); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.hb-disc { border-radius: 50%; }
.hb-disc.red { background: radial-gradient(circle at 35% 32%, #a3162a 0%, #6b0f1a 45%, #2a050a 100%); }
.hb-disc.black { background: radial-gradient(circle at 35% 32%, #6b531f 0%, #3a2c10 50%, #100c06 100%); }
@keyframes hbFloat { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 6deg)); } }
@media (prefers-reduced-motion: reduce) { .hb { animation: none !important; } }
/* near-black panels with a faint blood-red tint on the lobby + practice screens */
#screen-lobby .panel, #screen-practice .panel { background: linear-gradient(170deg, rgba(26,8,12,.9) 0%, rgba(8,4,6,.96) 100%); border-color: rgba(225,29,46,.3); }
/* home announcement box */
/* ===== announcement box (v9.35) — small flat rectangle, abstract bold type ===== */
#home-announce { flex-shrink: 0; align-items: stretch; gap: 0; margin-top: 14px; width: 100%; max-width: 320px; border-radius: 5px; overflow: hidden; background: linear-gradient(100deg, #6b0f1a 0%, #b31224 52%, #6b0f1a 100%); border: 1px solid rgba(255,90,105,.4); box-shadow: 0 6px 18px rgba(179,18,36,.35); }
#home-announce::before { content: '///'; align-self: center; padding-left: 12px; font-family: 'Bebas Neue', 'Arial Black', sans-serif; font-size: 16px; letter-spacing: 2px; color: rgba(255,210,120,.85); }
#home-announce-text { flex: 1; text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-style: italic; color: #ffe9c9; line-height: 1.3; padding: 10px 12px; }
#home-announce-link { display: flex; align-items: center; padding: 0 16px; background: #f5f0e6; color: #8f1420; font-family: 'Bebas Neue', 'Arial Black', sans-serif; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; }
#home-announce-link:active { background: #e63946; color: #fff; }
@media (max-width: 360px) { #home-announce { flex-direction: column; align-items: stretch; } #home-announce-link { text-align: center; justify-content: center; padding: 8px 14px; } }
.home-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.home-top-btn { width: auto; padding: 8px 14px; font-size: 13px; }
.home-online { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #c9c2b2; margin: 2px 0 8px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 12px; }
.game-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 45%, rgba(0,0,0,.4)); border: 1px solid rgba(225,29,46,.35); border-radius: 22px; padding: 16px 6px 14px; cursor: pointer; color: #fff; font-family: inherit; box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.game-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 42%; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); border-radius: inherit; pointer-events: none; }
.game-tile:nth-child(odd) { transform: rotate(-1.2deg); }
.game-tile:nth-child(even) { transform: rotate(1.2deg); }
.game-tile:active { transform: scale(.97); }
.game-tile:nth-child(odd):active { transform: rotate(-1.2deg) scale(.97); }
.game-tile:nth-child(even):active { transform: rotate(1.2deg) scale(.97); }
.tile-name { font-weight: 800; letter-spacing: 1px; font-size: 13px; color: #e63946; }
.tile-sub { font-size: 9px; color: #8d8296; text-align: center; }
.tile-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.tile-spade { font-size: 34px; color: #e11d2e; text-shadow: 0 0 14px rgba(225,29,46,.55); }
/* ===== custom tile icons (v9.32) — all locked inside the 52x52 .tile-icon box ===== */
/* CHECK! — four suits, lit: spade/club in cream, heart/diamond in blood red */
.tile-suits { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; align-items: center; justify-items: center; }
.tile-suits b { font-size: 24px; line-height: 1; font-weight: 400; font-style: normal; }
.tile-suits .su-spade { color: #f5f0e6; text-shadow: 0 0 10px rgba(245,240,230,.45); }
.tile-suits .su-heart { color: #ff2d40; text-shadow: 0 0 10px rgba(255,45,64,.6); }
.tile-suits .su-club { color: #f5f0e6; text-shadow: 0 0 10px rgba(245,240,230,.45); }
.tile-suits .su-diam { color: #ff2d40; text-shadow: 0 0 10px rgba(255,45,64,.6); }
/* CHECKERS — mini board, white pieces on top row, dark pieces on bottom row */
.tile-ckbd { position: relative; width: 44px; height: 44px; border: 2px solid #6b4a26; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.35); background: repeating-conic-gradient(#151010 0% 25%, #e8dcc8 0% 50%) 0 0 / 11px 11px; }
.ck-row { position: absolute; left: 2px; right: 2px; display: flex; justify-content: space-around; }
.ck-row.ck-top { top: 2px; }
.ck-row.ck-bot { bottom: 2px; }
.ck-row i { width: 4.5px; height: 4.5px; border-radius: 50%; }
.ck-top i { background: radial-gradient(circle at 35% 30%, #ffffff, #cfc4ae 70%); box-shadow: 0 1px 1px rgba(0,0,0,.6); }
.ck-bot i { background: radial-gradient(circle at 35% 30%, #4a4a4a, #0a0a0a 70%); box-shadow: 0 1px 1px rgba(0,0,0,.6); }
/* LUDO — die + 4 pawns in the table colors */
.tile-ludo-ico { position: relative; }
.ld-die { position: relative; width: 24px; height: 24px; background: linear-gradient(150deg, #ffffff, #d9d2c2); border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9); display: block; }
.ld-die b { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #1a0a10; }
.ld-die b:nth-child(1) { top: 4px; left: 4px; }
.ld-die b:nth-child(2) { top: 4px; right: 4px; }
.ld-die b:nth-child(3) { top: 10px; left: 10px; }
.ld-die b:nth-child(4) { bottom: 4px; left: 4px; }
.ld-die b:nth-child(5) { bottom: 4px; right: 4px; }
.ld-pawn { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.5); }
.ld-p1 { top: 1px; left: 1px; background: #3b82f6; }
.ld-p2 { top: 1px; right: 1px; background: #facc15; }
.ld-p3 { bottom: 1px; left: 1px; background: #22c55e; }
.ld-p4 { bottom: 1px; right: 1px; background: #ef4444; }
.help-panel { text-align: left; }
.help-item { margin-bottom: 10px; border: 1px solid #3a2d55; border-radius: 8px; padding: 8px 10px; }
.help-item summary { cursor: pointer; font-weight: 700; color: #f0c94a; }
.help-item p { font-size: 13px; color: #c9c2b2; margin: 8px 0 2px; line-height: 1.5; }
/* admin-managed policy documents (override hardcoded terms/policy when set) */
#tc-custom h1, #tc-custom h2, #tc-custom h3, #tc-custom h4, #pol-custom h1, #pol-custom h2, #pol-custom h3, #pol-custom h4 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; color: #f0c94a; margin: 14px 0 6px; font-size: 20px; }
#tc-custom p, #pol-custom p, #tc-custom li, #pol-custom li { font-size: 13px; color: #c9c2b2; line-height: 1.55; margin: 6px 0; }
#tc-custom ul, #tc-custom ol, #pol-custom ul, #pol-custom ol { padding-left: 20px; }
#tc-custom b, #tc-custom strong, #pol-custom b, #pol-custom strong { color: #ffe9c9; }
#tc-custom a, #pol-custom a { color: #ff2d40; }

/* ===== FabFab Games wordmark + help scroll ===== */
.wordmark { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; }
.wm-fabfab { font-family: 'Bebas Neue', 'Arial Black', sans-serif; font-size: 58px; letter-spacing: 6px; line-height: 0.95; background: linear-gradient(180deg, #e11d2e 0%, #b31224 45%, #7a0c14 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 18px rgba(225,29,46,.25); }
.wm-games { font-family: 'Bebas Neue', 'Arial Black', sans-serif; font-size: 24px; letter-spacing: 16px; text-indent: 16px; color: #e11d2e; margin-top: 4px; line-height: 1; }
#screen-help { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== topbar: wallet only, aligned right ===== */
.home-topbar { justify-content: flex-end; }

/* ===== checkers felt pad ===== */
#ck-feltwrap { background: radial-gradient(ellipse at center, #177a3e 0%, #0b3d2e 58%, #052e22 100%); border: 6px solid #4a2f17; border-radius: 14px; padding: 12px 10px; box-shadow: inset 0 0 40px rgba(0,0,0,.5); margin: 8px 0; }
#ck-board { margin: 0 auto; }

/* ===== scroll fixes: friends guide + practice room ===== */
#screen-help-friends, #screen-practice { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== Dynamic Island / safe-area top: panel titles must clear the notch =====
   (horizontal padding untouched — only the top inset grows) */
#screen-help .panel, #screen-help-friends .panel, #screen-terms .panel,
#screen-policy .panel, #screen-socials .panel, #screen-practice .panel,
#screen-lobby .panel, #screen-games .panel, #screen-ludo .panel,
#screen-check .panel, #screen-ck .panel, #screen-fight .panel {
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
}

/* ===== language switch (EN/FR) ===== */
.lang-switch { display: inline-flex; gap: 4px; margin-right: auto; }
.lang-btn { width: auto; padding: 8px 12px; font-size: 12px; font-weight: 700; border: 1px solid #3a2d55; border-radius: 6px; background: #141018; color: #a89bb8; cursor: pointer; font-family: inherit; }
.lang-btn.on { background: linear-gradient(180deg, #e11d2e, #8f0f1c); color: #fff; border-color: #ff5a5a; }

/* ===== language switch — pinned to the very top-right of the screen ===== */
.lang-switch { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 10px; z-index: 95; display: inline-flex; gap: 3px; transform: scale(0.82); transform-origin: top right; }
.lang-btn { width: auto; padding: 6px 9px; font-size: 11px; font-weight: 700; border: 1px solid #3a2d55; border-radius: 6px; background: rgba(20, 16, 24, .92); color: #a89bb8; cursor: pointer; font-family: inherit; }
.lang-btn.on { background: linear-gradient(180deg, #e11d2e, #8f0f1c); color: #fff; border-color: #ff5a5a; }

/* ===== home footer row: equal, centered, never overflowing ===== */
.home-row .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 12px; white-space: normal; overflow-wrap: break-word; }

/* ===== T&C gate + policy screens ===== */
#tc-gate { position: fixed; inset: 0; background: rgba(8,6,18,.94); z-index: 420; display: flex; align-items: center; justify-content: center; }
.tc-box { background: linear-gradient(160deg, #1c1230, #0d0a1a); border: 2px solid #f0c94a; border-shadow: 0 0 30px rgba(240,201,74,.3); border-radius: 14px; padding: 24px 20px; max-width: 340px; text-align: center; box-shadow: 0 0 34px rgba(240,201,74,.28); }
#screen-terms, #screen-policy { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== LUDO board ===== */
#ld-board { position: relative; width: 100%; aspect-ratio: 1; display: grid; grid-template: repeat(15, 1fr) / repeat(15, 1fr); background: #efece3; border: 3px solid #4a2f17; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ld-cell { border: 1px solid #9c9a92; }
.ld-yard0 { background: #de3131; } .ld-yard1 { background: #2ea04a; } .ld-yard2 { background: #f5c81e; } .ld-yard3 { background: #3874e0; }
.ld-home { background: #d9d6cc; }
.ld-cell.ld-safe { background: #f5f2e9; }
.ld-star { font-size: 11px; color: #6a6862; display: flex; align-items: center; justify-content: center; height: 100%; }
.ld-start.ld-s0 { background: #de3131; } .ld-start.ld-s1 { background: #2ea04a; } .ld-start.ld-s2 { background: #f5c81e; } .ld-start.ld-s3 { background: #3874e0; }
.ld-center { grid-row: 7 / 10; grid-column: 7 / 10; background: conic-gradient(from 45deg, #f5c81e 0 25%, #3874e0 0 50%, #de3131 0 75%, #2ea04a 0); }
#ld-tokens { position: absolute; inset: 0; pointer-events: none; }
.ld-token { position: absolute; width: 5.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.5); pointer-events: auto; cursor: pointer; }
.ld-token.can { border-color: #f0c94a; box-shadow: 0 0 10px #f0c94a; }

/* ===== LUDO board v2 — classic look ===== */
.ld-yard { border-color: transparent !important; }
.ld-y0 { background: #de3131; } .ld-y1 { background: #2ea04a; } .ld-y2 { background: #f5c81e; } .ld-y3 { background: #3874e0; }
.ld-h { border-color: rgba(0,0,0,.25) !important; }
.ld-h0 { background: #de3131; } .ld-h1 { background: #2ea04a; } .ld-h2 { background: #f5c81e; } .ld-h3 { background: #3874e0; }
.ld-base { position: absolute; background: #fbfaf6; border-radius: 16%; box-shadow: inset 0 0 0 3px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.25); display: grid; grid-template: 1fr 1fr / 1fr 1fr; padding: 9%; z-index: 1; }
.ld-base i { border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.35); }
#ld-tokens { z-index: 2; }

/* ===== LUDO center rotation fix: yellow up, blue right, red down, green left ===== */
.ld-center { background: conic-gradient(from -45deg, #f5c81e 0 25%, #3874e0 0 50%, #de3131 0 75%, #2ea04a 0); }

/* ===== LUDO glass treatment: rounded tiles on wood grout ===== */
#ld-board { gap: 2px; background: #6f4e2a; border-radius: 10px; }
.ld-cell { border: none; border-radius: 18%; box-shadow: inset 0 1px 2px rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.22); }
.ld-yard { box-shadow: inset 0 2px 7px rgba(255,255,255,.28), inset 0 -3px 9px rgba(0,0,0,.32); }
.ld-h, .ld-start { box-shadow: inset 0 2px 4px rgba(255,255,255,.4), inset 0 -2px 5px rgba(0,0,0,.3); }
.ld-base { border-radius: 18%; background-color: rgba(251,250,246,.94); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 3px 9px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.15); }
.ld-center { border-radius: 14%; box-shadow: inset 0 2px 7px rgba(255,255,255,.35), inset 0 -3px 9px rgba(0,0,0,.35); }
.ld-token { box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.7), inset 0 -3px 5px rgba(0,0,0,.35); background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0 12%, rgba(255,255,255,0) 46%); }

/* ===== LUDO v7.95: white glass route only; yards/houses flat; seeds fit cells ===== */
.ld-cell { background: #fdfdfb; box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.14); }
.ld-yard, .ld-h, .ld-start { box-shadow: none; border-radius: 8%; }
.ld-token { width: 5.2%; }

/* ===== LUDO v7.96: square centered homes + always-vivid colored routes ===== */
.ld-base { aspect-ratio: 1 / 1; height: auto; }
.ld-h, .ld-start { box-shadow: inset 0 2px 4px rgba(255,255,255,.5), inset 0 -2px 5px rgba(0,0,0,.3); border-radius: 14%; }

/* ===== LUDO v7.97: restore the colored home routes (specificity over the white route) ===== */
.ld-cell.ld-h0 { background: #de3131; }
.ld-cell.ld-h1 { background: #2ea04a; }
.ld-cell.ld-h2 { background: #f5c81e; }
.ld-cell.ld-h3 { background: #3874e0; }

/* ===== LUDO v7.98: house-colored start squares with glow + depth tint ===== */
.ld-cell.ld-start.ld-s0 { background: #de3131; box-shadow: inset 0 2px 4px rgba(255,255,255,.5), inset 0 -2px 5px rgba(0,0,0,.3), 0 0 9px rgba(222,49,49,.55); }
.ld-cell.ld-start.ld-s1 { background: #2ea04a; box-shadow: inset 0 2px 4px rgba(255,255,255,.5), inset 0 -2px 5px rgba(0,0,0,.3), 0 0 9px rgba(46,160,74,.55); }
.ld-cell.ld-start.ld-s2 { background: #f5c81e; box-shadow: inset 0 2px 4px rgba(255,255,255,.6), inset 0 -2px 5px rgba(0,0,0,.28), 0 0 9px rgba(245,200,30,.55); }
.ld-cell.ld-start.ld-s3 { background: #3874e0; box-shadow: inset 0 2px 4px rgba(255,255,255,.5), inset 0 -2px 5px rgba(0,0,0,.3), 0 0 9px rgba(56,116,224,.55); }

/* ===== LUDO v7.99: seamless solid house wraps ===== */
.ld-yblock { position: absolute; width: 40%; aspect-ratio: 1 / 1; z-index: 1; border-radius: 3.5%; box-shadow: inset 0 3px 10px rgba(255,255,255,.32), inset 0 -4px 12px rgba(0,0,0,.38); }
.ld-yb0 { background: #de3131; } .ld-yb1 { background: #2ea04a; } .ld-yb2 { background: #f5c81e; } .ld-yb3 { background: #3874e0; }
.ld-base { z-index: 2; }
#ld-tokens { z-index: 3; }
/* restore saturated yard cells beneath the wraps (backup specificity) */
.ld-cell.ld-y0 { background: #de3131; } .ld-cell.ld-y1 { background: #2ea04a; } .ld-cell.ld-y2 { background: #f5c81e; } .ld-cell.ld-y3 { background: #3874e0; }

/* ===== LUDO v8.0: white-glass dice ===== */
#ld-dice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 17%; aspect-ratio: 1 / 1; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .25s; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
#ld-dice.show { opacity: 1; }

/* ===== LUDO v8.1: dice under the board, actions pinned to page bottom ===== */
#ld-felt { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#ld-dice { position: relative; left: auto; top: auto; transform: none; width: 54px; }
#ld-actions { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: 10px; right: 10px; z-index: 60; margin-top: 0; }
#ld-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 12px; }

/* ===== LUDO v8.2: topbar with forfeit, tap-the-dice to roll ===== */
.ld-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.ld-topbar .btn { width: auto; padding: 8px 12px; font-size: 12px; flex-shrink: 0; }
#ld-dice { pointer-events: auto; cursor: pointer; }
#ld-dice.ready { animation: ldReady 1s infinite alternate; }
@keyframes ldReady { from { filter: drop-shadow(0 0 4px rgba(240,201,74,.55)); } to { filter: drop-shadow(0 0 14px rgba(240,201,74,.95)); } }

/* ===== LUDO v8.5: unmissable safe stars — sanctuary squares ===== */
.ld-cell.ld-safe { box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.14), inset 0 0 0 2px rgba(240,201,74,.45); }
.ld-cell.ld-safe .ld-star { font-size: 19px; font-weight: 700; color: #3f3d34; text-shadow: 0 1px 0 #ffffff, 0 0 4px rgba(255,255,255,.95); }

/* ===== LUDO v8.7: Android layout — clear the action bar, lift the chat FAB ===== */
#screen-ludo { padding-bottom: 140px; }
body.ludo-live #btn-chat-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }

/* ===== LUDO v8.8: house wraps extend over their arm rows (no aspect lock) ===== */
.ld-yblock { aspect-ratio: auto; }

/* ===== LUDO v8.9: seed houses back to squares, shifted down over the housing strips ===== */
.ld-base { aspect-ratio: 1 / 1; }
.ld-yblock { aspect-ratio: auto; }

/* ===== LUDO v9.3: lifelike animations ===== */
/* 3D dice cube */
#ld-dice { perspective: 320px; }
.ld-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.ld-cf { position: absolute; inset: 0; background: linear-gradient(145deg, #ffffff, #e9e7df); border-radius: 16%; box-shadow: inset 0 2px 5px rgba(255,255,255,.95), inset 0 -3px 6px rgba(0,0,0,.2); display: grid; grid-template: repeat(3,1fr) / repeat(3,1fr); padding: 12%; backface-visibility: hidden; }
.ld-cf i { border-radius: 50%; }
.ld-cf i.on { background: radial-gradient(circle at 35% 30%, #55555f, #101018); box-shadow: inset 0 1px 2px rgba(255,255,255,.35); }
.ld-cf.f1 { transform: translateZ(27px); }
.ld-cf.f6 { transform: rotateY(180deg) translateZ(27px); }
.ld-cf.f3 { transform: rotateY(90deg) translateZ(27px); }
.ld-cf.f4 { transform: rotateY(-90deg) translateZ(27px); }
.ld-cf.f5 { transform: rotateX(90deg) translateZ(27px); }
.ld-cf.f2 { transform: rotateX(-90deg) translateZ(27px); }
#ld-again { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #f0c94a; display: none; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#ld-again.show { display: block; animation: ldReady 1s infinite alternate; }
/* hop + fly animations (wired up in v9.24: hop glide per cell + faded capture arc) */
.ld-token.hopping { animation: ldHop .28s ease-in-out infinite; z-index: 7; transition: left .13s cubic-bezier(.42, 0, .58, 1), top .13s cubic-bezier(.42, 0, .58, 1); }
@keyframes ldHop { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 42% { transform: translate(-50%, -78%) scale(1.14); } }
.ld-token.flying { transition: left .45s cubic-bezier(.5, -.2, .6, 1), top .45s cubic-bezier(.5, -.2, .6, 1), opacity .45s; opacity: .2; z-index: 7; }
/* rim player chips */
#ld-chips { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ld-chip { position: absolute; display: flex; align-items: center; gap: 6px; background: rgba(16, 12, 24, .85); border: 2px solid #3a2d55; border-radius: 20px; padding: 3px 10px 3px 3px; font-size: 11px; max-width: 46%; }
.ld-chip .ld-chip-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); flex-shrink: 0; }
.ld-chip .ld-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-chip.turn { border-color: #f0c94a; box-shadow: 0 0 10px rgba(240,201,74,.55); }
.ld-chip.out { opacity: .4; }
.ld-chip .you-tag { color: #f0c94a; font-weight: 700; font-size: 9px; }

/* ===== LUDO v9.4: faster dice, living houses, wood-hop sound ===== */
.ld-base { display: grid; grid-template: 1fr 1fr / 1fr 1fr; padding: 11%; gap: 8%; }

/* ===== LUDO v9.5: bulletproof square houses ===== */
.ld-base, .ld-yblock { box-sizing: border-box; }

/* ===== LUDO v9.12: turn theatre + working forfeit ===== */
#ld-dice.turnpulse { animation: ldDicePulse .55s ease; }
@keyframes ldDicePulse { from { transform: rotate(0deg) scale(1); } 40% { transform: rotate(180deg) scale(1.14); } to { transform: rotate(360deg) scale(1); } }
.ld-chip.turn { border-width: 3px; box-shadow: 0 0 14px rgba(240,201,74,.8); }
.ld-topbar .btn { position: relative; z-index: 6; }

/* ===== LUDO v9.13: full-size seeds in the house ===== */
.ld-token.home { width: 11%; z-index: 2; }

/* ===== LUDO v9.14: one seed size everywhere ===== */
.ld-token.home { width: 5.2%; }
.ld-base { display: block; padding: 0; }

/* ===== LUDO v9.16: guaranteed-square houses + stack badges ===== */
.ld-base { aspect-ratio: 1 / 1; height: auto; }
.ld-stack { position: absolute; width: 3.4%; aspect-ratio: 1; border-radius: 50%; background: #14101a; color: #f0c94a; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1px solid #f0c94a; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* ===== LUDO v9.17: clear houses + snappy dice ===== */
.ld-chip { font-size: 10px; padding: 2px 8px 2px 2px; }
.ld-chip .ld-chip-dot { width: 22px; height: 22px; font-size: 11px; }

.ld-cube { transition: transform .6s cubic-bezier(.2,.72,.28,1); }
#ld-dice.turnpulse { animation-duration: .4s; }
#ld-dice { padding: 14px; margin: -14px; }
#ld-dice { cursor: pointer; }

/* ===== LUDO v9.18: full-size dice with padded tap area ===== */
#ld-dice { box-sizing: content-box; }

/* ===== LUDO v9.22: reliability edition — clean glides ===== */
.ld-token { transition: left .35s ease, top .35s ease; }

/* ===== LUDO v9.24: feel & pace polish ===== */
/* P3.10 board bezel: gold pinstripe + dark surround + soft vignette */
#ld-board { border: 2px solid rgba(201,162,39,.85); box-shadow: 0 0 0 7px #160c27, 0 0 0 8px rgba(201,162,39,.28), 0 12px 32px rgba(0,0,0,.65); }
#ld-felt { background: radial-gradient(ellipse at 50% 42%, #1a0f2e 0%, #12081f 78%); border-radius: 14px; padding: 14px 10px; }
/* P3.11 REMOVED: yard ghost slots deleted — clean white pads, seeds only */
/* P3.12 token anchoring: dark base rim + contact shadow ellipse */
.ld-token { box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 3px 4px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.7), inset 0 -3px 5px rgba(0,0,0,.35); }
.ld-token::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -16%; height: 30%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); z-index: -1; }
/* P3.13 movable-token bounce (replaces the scale pulse) + gold ring */
.ld-token.can { animation: ldBounce .6s ease-in-out infinite alternate; border-color: #f0c94a; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 10px #f0c94a, inset 0 2px 3px rgba(255,255,255,.7), inset 0 -3px 5px rgba(0,0,0,.35); }
@keyframes ldBounce { from { transform: translate(-50%, -50%) translateY(0); } to { transform: translate(-50%, -50%) translateY(-16%); } }
/* landing squash after the final hop */
.ld-token.ld-land { animation: ldLand .08s ease-out; }
@keyframes ldLand { from { transform: translate(-50%, -50%) scaleY(.85); } to { transform: translate(-50%, -50%) scaleY(1); } }
/* P3.14 active-player quadrant glow (seat color, <=20% opacity, 300ms fade) */
.ld-yblock::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ld-yb0.active::after { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(222,49,49,.2), transparent 72%); }
.ld-yb1.active::after { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(46,160,74,.2), transparent 72%); }
.ld-yb2.active::after { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(245,200,30,.18), transparent 72%); }
.ld-yb3.active::after { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(56,116,224,.2), transparent 72%); }
/* P2.7 turn timer ring around the dice (conic fill set inline from JS) */
#ld-ring { position: absolute; inset: 7px; border-radius: 50%; opacity: 0; transition: opacity .3s; pointer-events: none; }
#ld-ring.on { opacity: 1; }
#ld-cube { z-index: 1; }
#ld-dice.urgent { animation: ldUrgentPulse .45s ease-in-out infinite alternate; }
@keyframes ldUrgentPulse { from { filter: drop-shadow(0 0 4px rgba(225,29,72,.6)); } to { filter: drop-shadow(0 0 16px rgba(225,29,72,1)); } }
/* P2.8 status text fade on hand-off */
#ld-status { transition: opacity .15s ease; }
/* P2.9 ROLL AGAIN badge: 200ms easeOutBack entrance, then the glow loop */
#ld-again.show { animation: ldAgainIn .2s cubic-bezier(0.34, 1.56, 0.64, 1), ldReady 1s .25s infinite alternate; }
@keyframes ldAgainIn { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* P0.4 victory overlay (CHECK! pattern) + confetti burst */
#ld-victory { position: fixed; inset: 0; background: rgba(8,6,18,.92); z-index: 400; display: flex; align-items: center; justify-content: center; }
.ld-vic-inner { background: linear-gradient(160deg, #1c1230, #0d0a1a); border: 2px solid #f0c94a; border-radius: 14px; padding: 28px 24px; text-align: center; max-width: 340px; box-shadow: 0 0 40px rgba(240,201,74,.35); position: relative; z-index: 1; }
.ld-vic-inner h2 { color: #f0c94a; letter-spacing: 2px; margin: 8px 0; }
.ld-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.ld-confetti span { position: absolute; top: -12px; opacity: 0; border-radius: 2px; animation: ldConfetti 3s ease-in forwards; }
@keyframes ldConfetti { 0% { transform: translateY(-4vh) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
/* reduced motion: no confetti, no bounce/pulse loops, near-instant transitions */
@media (prefers-reduced-motion: reduce) {
  .ld-confetti { display: none; }
  .ld-token.can, .ld-token.hopping, .ld-token.ld-land { animation: none; }
  #ld-dice.turnpulse, #ld-dice.ready, #ld-dice.urgent { animation: none; }
  #ld-again.show { animation: none; }
  .ld-token, .ld-token.flying, .ld-cube { transition-duration: .01s; }
}

/* ===== LUDO: square dice, zero layout shake, board breathing room ===== */
/* F2: the dice must be a perfect square on every device — explicit equal
   width/height + aspect-ratio fallback; it can never be flex-stretched/shrunk */
#ld-dice { width: 54px; height: 54px; aspect-ratio: 1 / 1; flex: 0 0 auto; align-self: center; }
#ld-cube { width: 100%; height: 100%; aspect-ratio: 1 / 1; flex-shrink: 0; }
.ld-cf { width: 100%; height: 100%; aspect-ratio: 1 / 1; }
/* the conic timer ring stays absolutely positioned — zero effect on the dice box size */
#ld-ring { position: absolute; inset: 7px; }
/* F3: single-line status/info — long strings ellipsize instead of wrapping to 2 lines */
#ld-status, #ld-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }
#ld-status { height: 16px; line-height: 16px; font-size: 12px; }
#ld-info { height: 15px; line-height: 15px; }
/* "rolled: N" reserves its height permanently — hidden, never removed from flow */
#ld-lastroll { min-height: 14px; line-height: 14px; }
#ld-lastroll:empty { visibility: hidden; }
/* ROLL AGAIN badge is absolutely positioned — zero layout impact (confirmed) */
#ld-again { position: absolute; }
/* F4: breathing room between the top stats strip and the board */
#ld-felt { margin-top: 12px; }

/* ===== FIGHT! — arena, HUD canvas, tile icon ===== */
.tile-fight-ico { background: linear-gradient(160deg, #2a0d14, #12060a); border-radius: 10px; position: relative; overflow: hidden; }
.tile-fight-ico::before, .tile-fight-ico::after {
  content: ''; position: absolute; width: 34px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #b31224, #ff2d40); opacity: .8;
}
.tile-fight-ico::before { transform: rotate(-38deg) translate(-8px, -6px); }
.tile-fight-ico::after { transform: rotate(-38deg) translate(10px, 8px); width: 22px; opacity: .55; }
.tile-fight-ico b {
  font-family: 'Bebas Neue', Impact, sans-serif; font-style: italic; font-size: 26px; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe9a8, #f0c94a 55%, #c33);
  -webkit-background-clip: text; background-clip: text; color: transparent; transform: skewX(-6deg);
}
#fg-feltwrap {
  background: radial-gradient(ellipse at 50% 30%, #2b0f1c 0%, #160710 55%, #070308 100%);
  border: 6px solid #3a1420; border-radius: 14px; padding: 10px 8px 8px;
  box-shadow: inset 0 0 44px rgba(0,0,0,.6); margin: 8px 0;
}
#fg-canvas { display: block; width: 100%; height: auto; border-radius: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
#fg-hint { display: none; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
@media (pointer: coarse) { #fg-hint { display: flex; } }
.fg-hint-chip {
  font-size: 10px; letter-spacing: .4px; color: #cbb98a; background: rgba(240,201,74,.08);
  border: 1px solid rgba(240,201,74,.25); border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}
#fg-code-display {
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 34px; letter-spacing: 6px; text-align: center;
  color: #f0c94a; text-shadow: 0 2px 10px rgba(179,18,36,.6); cursor: pointer; margin-top: 4px;
}