/* ─── Lanka Ludo – Global Styles ─── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Poppins:wght@400;600;700&display=swap');

:root {
  --gold:    #FFD700;
  --gold2:   #FFA500;
  --dark:    #0d0d1a;
  --dark2:   #1a0a2e;
  --panel:   #1e1035;
  --panel2:  #150c28;
  --red:     #e74c3c;
  --blue:    #3498db;
  --green:   #2ecc71;
  --yellow:  #f1c40f;
  --purple:  #6c3fa0;
  --border-gold: 2px solid #FFD700;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--dark);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Gold text ── */
.text-gold { color: var(--gold) !important; }
.text-gold2 { color: var(--gold2) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ─────────────── APP SHELL ─────────────── */
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; overflow: hidden; }

.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

/* ─────────────── AUTH SCREENS ─────────────── */
.auth-bg {
  background: radial-gradient(ellipse at top, #3a0a0a 0%, #1a0a2e 40%, #0d0d1a 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-logo { text-align: center; margin-bottom: 30px; }
.auth-logo-img {
  display: block;
  margin: 0 auto 6px;
  width: 100%;
  max-width: 220px;
  filter: drop-shadow(0 0 20px rgba(255, 200, 0, 0.5))
          drop-shadow(0 4px 16px rgba(0, 0, 0, 0.9));
}
.auth-logo h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  background: linear-gradient(135deg, #FFD700, #FFA500, #FF6B00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  letter-spacing: 3px;
}
.auth-logo .sub { color: #aaa; font-size: 0.85rem; letter-spacing: 2px; margin-top: -5px; }

.auth-card {
  background: linear-gradient(135deg, rgba(30,16,53,0.95), rgba(21,12,40,0.98));
  border: 2px solid #FFD70044;
  border-radius: 20px;
  padding: 30px 25px;
  width: 100%;
  max-width: 400px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.1);
}
@media (max-width: 360px) {
  .auth-card { padding: 22px 16px; border-radius: 16px; }
  .auth-card h2 { font-size: 1.15rem; margin-bottom: 14px; }
}

.auth-card h2 { color: var(--gold); font-size: 1.4rem; margin-bottom: 20px; text-align: center; }

.form-group { margin-bottom: 16px; }
.form-group label { font-size: 0.8rem; color: #ccc; margin-bottom: 5px; display: block; text-transform: uppercase; letter-spacing: 1px; }
.form-control {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 10px;
  color: #1a0a2e;
  padding: 12px 16px;
  width: 100%;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.2);
}
.form-control::placeholder { color: #999; }

/* ── Inline form validation errors ── */
.form-error {
  display: none;
  color: #ff5555;
  font-size: 0.74rem;
  margin-top: 5px;
  padding: 5px 10px;
  background: rgba(255,60,60,0.1);
  border-left: 3px solid #ff4444;
  border-radius: 0 6px 6px 0;
  animation: err-fade-in 0.2s ease;
}
.form-error.visible { display: block; }

@keyframes err-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Red border on the input that triggered the error */
.input-error {
  border-color: #ff4444 !important;
  box-shadow: 0 0 0 3px rgba(255,68,68,0.18) !important;
}

/* Shake animation played once on error */
@keyframes input-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.input-shake { animation: input-shake 0.35s ease; }

/* ── Registration photo picker ── */
.reg-photo-wrap {
  display: inline-block;
  cursor: pointer;
  max-width: 100%;
}
.reg-photo-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,215,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  transition: border-color 0.2s;
}
.reg-photo-circle:hover { border-color: var(--gold); }
.btn-photo-src {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,215,0,0.3);
  color: #ccc;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-photo-src:hover { background: rgba(255,215,0,0.12); color: var(--gold); }

/* ── Profile avatar with edit badge ── */
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.prof-edit-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--gold);
  color: #1a0a00;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0d0d1a;
  pointer-events: none;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a0a2e;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ─────────────── BUTTONS ─────────────── */
.btn-gold {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a0a2e;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(255,165,0,0.4);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(255,165,0,0.6); }
.btn-gold:active { transform: translateY(0); }

.btn-outline-gold {
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  border-radius: 12px;
  padding: 10px 24px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline-gold:hover { background: rgba(255,215,0,0.1); }

.btn-ghost {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ─────────────── HOME SCREEN ─────────────── */
.home-bg {
  background: radial-gradient(ellipse at top, #3d0808 0%, #1a0a2e 50%, #0d0d1a 100%);
  min-height: 100vh;
}

/* Top bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  position: relative;
  z-index: 10;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(30,16,53,0.9), rgba(50,20,80,0.9));
  border: 2px solid #FFD70066;
  border-radius: 15px;
  padding: 8px 12px;
}
.player-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: #2a1550;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  overflow: hidden;
}
.player-name { font-weight: 700; font-size: 0.85rem; color: #fff; }
.player-level { font-size: 0.75rem; color: var(--gold); }
.xp-bar-wrap { width: 80px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 2px; }
.xp-bar { height: 100%; background: linear-gradient(90deg, #FFD700, #FF6B00); border-radius: 3px; transition: width 0.5s; }

.top-icons { display: flex; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #2a1550, #3d1a70);
  border: 2px solid #FFD70066;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 1.1rem;
  transition: all 0.2s;
}
.icon-btn:hover { border-color: var(--gold); transform: scale(1.05); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--dark);
}

/* Currency bar */
.currency-bar {
  display: flex;
  gap: 8px;
  padding: 0 15px 8px;
}
.currency-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(30,16,53,0.85), rgba(40,20,70,0.85));
  border: 2px solid #FFD70044;
  border-radius: 20px;
  padding: 5px 10px;
  min-width: 110px;
}
.currency-icon { font-size: 1.1rem; }
.currency-val { font-weight: 700; font-size: 0.9rem; color: #fff; }
.currency-add {
  width: 22px; height: 22px;
  background: var(--gold);
  color: #1a0a2e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  margin-left: auto;
}

/* Hero logo area */
.hero-area {
  text-align: center;
  padding: 10px 15px 5px;
  position: relative;
}
.game-title {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255,165,0,0.5));
}
.game-title .l1 { color: #FF4444; }
.game-title .l2 { color: var(--gold); }
.game-title .l3 { color: var(--blue); }
.game-title .l4 { color: var(--green); }
.game-title .l5 { color: var(--gold); }

/* Mode buttons */
.mode-section { padding: 10px 15px; }
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
}
.mode-btn {
  background: linear-gradient(135deg, #1e1035, #2a1550);
  border: 2px solid #FFD70066;
  border-radius: 15px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mode-btn:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255,215,0,0.2); }
.mode-btn.online { background: linear-gradient(135deg, #1a0a5e, #2d1a8e); border-color: var(--gold); }
.mode-btn .mode-icon { font-size: 1.8rem; }
.mode-btn .mode-name { font-weight: 700; font-size: 0.95rem; color: var(--gold); }
.mode-btn .mode-sub  { font-size: 0.65rem; color: #aaa; }

/* Quick actions */
.quick-actions { padding: 10px 15px; }
.qa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(30,16,53,0.7), rgba(40,20,70,0.7));
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.qa-item:hover { border-color: var(--gold); background: rgba(255,215,0,0.05); }
.qa-icon { font-size: 1.5rem; }
.qa-text .qa-title { font-weight: 600; font-size: 0.9rem; }
.qa-text .qa-sub   { font-size: 0.72rem; color: #aaa; }
.qa-arrow { margin-left: auto; color: var(--gold); }

/* ─────────────── BOTTOM NAV ─────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: url('../assets/images/bottom_bg.png') center center / 100% 100% no-repeat;
  border-top: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 14px 10px;
  z-index: 1000;
  box-sizing: border-box;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  transition: transform 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:active { transform: scale(0.88); }

/* Nav image icon */
.nav-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: brightness(0.6) saturate(0.5);
  transition: filter 0.22s ease, transform 0.22s ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Active nav item — full brightness + gold glow */
.nav-item.active .nav-img {
  filter: brightness(1.2) saturate(1.3)
          drop-shadow(0 0 10px rgba(255, 210, 0, 0.9))
          drop-shadow(0 0 20px rgba(255, 180, 0, 0.5))
          drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
  transform: translateY(-3px) scale(1.08) translateZ(0);
}

/* Hover state */
.nav-item:hover .nav-img {
  filter: brightness(0.85) saturate(0.9)
          drop-shadow(0 0 8px rgba(255, 200, 0, 0.5));
  transform: translateY(-1px) translateZ(0);
}

/* ─────────────── GAME BOARD ─────────────── */
.game-screen {
  background: #08080f;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ── Top / Bottom player rows ── */
.gs-top-row, .gs-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  flex-shrink: 0;
  background: #0d0d1e;
}
.gs-top-row    { border-bottom: 1.5px solid rgba(255,80,80,0.3); }
.gs-bottom-row { border-top:    1.5px solid rgba(255,80,80,0.3); }

/* ── Player panels (corners) ── */
.gp-panel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px 8px;
  min-width: 0;
  min-height: 64px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.gp-panel.gp-active {
  border-color: var(--gold);
  background: rgba(255,215,0,0.08);
  box-shadow: 0 0 10px rgba(255,215,0,0.22);
}
.gp-right { flex-direction: row-reverse; }
.gp-right .gp-info { text-align: right; }

.gp-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid #f1c40f;
  background: #e8a800;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255,215,0,0.35), 0 2px 4px rgba(0,0,0,0.5);
}
.gp-avatar.gp-av-red    { border-color: #e53935; background: linear-gradient(135deg,#5e0e0e,#c42020); }
.gp-avatar.gp-av-blue   { border-color: #1e88e5; background: linear-gradient(135deg,#071e4a,#1655c0); }
.gp-avatar.gp-av-green  { border-color: #43a047; background: linear-gradient(135deg,#062810,#1a7030); }
.gp-avatar.gp-av-yellow { border-color: #ffc107; background: linear-gradient(135deg,#7a4400,#c08000); }
.gp-avatar-svg { width: 112%; height: 112%; }

.gp-info    { flex: 1; min-width: 0; }
.gp-name    { font-weight: 700; font-size: 0.78rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-loc     { font-size: 0.6rem; color: #888; margin-top: 1px; }
.gp-streak  { font-size: 0.63rem; color: #ff9900; font-weight: 600; margin-top: 1px; }
.gp-hearts  { font-size: 0.65rem; color: #aaa; margin-top: 2px; letter-spacing: 1px; }

/* ── Center timer box: jeweled capsule artwork (gold/blue ring + diamond
   points baked into the image itself, replacing the old CSS-drawn border).
   Trimmed to its content bbox first (see time_bg_trim.png). `contain`
   alone left gaps: the box's own ratio (driven by its text content) didn't
   match the artwork's 504:295 ratio, so the oval never reached the box's
   left/right edges — dead dark-background slivers showed on the sides.
   Locking the box itself to the artwork's exact aspect-ratio (content is
   vertically centered and comfortably fits within the resulting height at
   every breakpoint) makes the two ratios match exactly, so the art can
   fill edge-to-edge with zero gap and zero distortion. ── */
.gs-timer-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 30px;
  aspect-ratio: 504 / 295;
  background: url('../assets/images/time_bg_trim.png') center / 100% 100% no-repeat;
  padding: 9px 26px;
  min-width: 130px;
  flex-shrink: 0;
  position: relative;
  gap: 2px;
}
.gs-quit-btn { display: none; }

/* Clock icon + time value sit side-by-side on one row, turn label below */
.gs-timer-row { display: flex; align-items: center; gap: 8px; }

.gs-back-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 10px;
  background: #0d0d1e;
  border-top: 1px solid rgba(255,215,0,0.12);
  flex-shrink: 0;
}

.gs-back-btn {
  width: 160px;
  height: 42px;
  border-radius: 22px;
  background: linear-gradient(135deg, #b07800, #FFD700);
  border: 2px solid #FFD700;
  color: #1a0a00;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a5000, 0 5px 14px rgba(255,215,0,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.gs-back-btn:hover  { box-shadow: 0 6px 0 #7a5000, 0 7px 18px rgba(255,215,0,0.55); transform: translateY(-2px); }
.gs-back-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5000, 0 2px 6px rgba(255,215,0,0.3); }
.gs-clock-icon { width: 26px; height: 26px; flex-shrink: 0; }
.gs-clock-icon svg { width: 100%; height: 100%; display: block; }
.gs-timer-val  { font-size: 1.55rem; font-weight: 900; color: #00e68a; letter-spacing: 1px; line-height: 1; }
.gs-turn-lbl   { font-size: 0.6rem; color: #aaa; font-weight: 600; letter-spacing: 0.5px; }

/* ── Center dice ── */
.gs-dice-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; flex-shrink: 0;
}
.gs-dice-row { display: flex; align-items: center; gap: 10px; }
.gs-dice-ring {
  width: 92px; height: 92px;
  border-radius: 50%;
  /* Trimmed to content bbox (dice_bg_trim.png), but the trimmed art itself
     isn't perfectly square (457×399 — its side diamonds reach further out
     than the top/bottom ones), while this box must stay square for a true
     circular hit-area. `contain` left empty gaps at the top/bottom inside
     the circular clip (the ring never reached those edges); `cover` fills
     the box completely, cropping only the very tips of the side diamonds —
     already-invisible sliver, since the circular clip cuts corners either
     way — and keeps the ring seamless top-to-bottom and side-to-side. */
  background: url('../assets/images/dice_bg_trim.png') center / cover no-repeat;
  box-shadow: 0 0 16px rgba(231,76,60,0.65), 0 0 32px rgba(231,76,60,0.28);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s, filter 0.2s;
}
.gs-dice-ring:hover   { box-shadow: 0 0 22px rgba(231,76,60,0.9), 0 0 40px rgba(231,76,60,0.4); }
.gs-dice-ring:active  { box-shadow: 0 0 10px rgba(231,76,60,0.5); }
.gs-dice-ring.disabled { opacity: 0.45; cursor: not-allowed; }
/* Actionable "your move" state — green glow around the jeweled ring artwork */
.gs-dice-ring.my-turn {
  box-shadow: 0 0 18px rgba(46,204,113,0.75), 0 0 36px rgba(46,204,113,0.35);
}
.gs-dice-ring.my-turn:hover {
  box-shadow: 0 0 24px rgba(46,204,113,0.9), 0 0 44px rgba(46,204,113,0.45);
}
.gs-dice-chevron {
  font-size: 1.05rem;
  color: rgba(46,204,113,0.55);
  text-shadow: 0 0 8px rgba(46,204,113,0.7);
  animation: gs-chevron-pulse 1.6s ease-in-out infinite;
}
.gs-dice-chevron-r { animation-delay: 0.3s; }
@keyframes gs-chevron-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.gs-mode-lbl { font-size: 0.6rem; color: #555; letter-spacing: 1px; }

/* Size override only — the die sits inside the dice_bg ring, which is
   already the dark background there; color/background come from the base
   .dice/.dot styles (white glossy die, dark pips) so there's only one
   dark background (the ring), not the ring's dark centre AND another dark
   cube layered on top of it. */
.gs-dice {
  width: 54px !important;
  height: 54px !important;
}

/* ── Online waiting overlay ── */
.waiting-overlay {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(13,13,26,0.96);
  z-index: 50;
  padding: 20px;
  text-align: center;
  gap: 8px;
}
.waiting-overlay.show { display: flex; }
.wo-icon  { font-size: 2.5rem; }
.wo-title { font-size: 1rem; font-weight: 700; color: var(--gold); }
.wo-codeblock {
  display: none;
  background: rgba(255,215,0,0.1);
  border: 2px solid rgba(255,215,0,0.4);
  border-radius: 12px;
  padding: 12px 20px;
  margin: 6px 0;
}
.wo-codeblock.show { display: block; }
.wo-code-label { font-size: 0.65rem; color: #aaa; letter-spacing: 1px; margin-bottom: 4px; }
.wo-code       { font-size: 1.8rem; font-weight: 900; color: var(--gold); letter-spacing: 8px; }
.wo-copy-btn {
  margin-top: 6px; background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.35);
  color: var(--gold); border-radius: 6px; padding: 3px 12px; cursor: pointer; font-size: 0.7rem;
}
.wo-count { font-size: 0.78rem; color: #aaa; }
.wo-color { font-size: 0.68rem; color: #666; margin-top: 4px; }
.wo-cancel-btn {
  margin-top: 14px; background: rgba(255,80,80,0.12); border: 1px solid rgba(255,80,80,0.4);
  color: #ff8080; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-size: 0.75rem;
}
.wo-start-btn {
  margin-top: 10px; background: linear-gradient(135deg,#2ecc71,#27ae60); border: none;
  color: #fff; border-radius: 6px; padding: 8px 22px; cursor: pointer; font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 4px 20px rgba(46,204,113,0.4);
}

/* ── Selectable option chips (online match setup) ── */
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.opt-btn {
  flex: 1; min-width: 44px; padding: 8px 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,215,0,0.3);
  color: #ddd; font-size: 0.8rem; font-weight: 600;
}
.opt-btn.active {
  background: linear-gradient(135deg, var(--gold), #e0a800); border-color: var(--gold);
  color: #1a1a1a;
}

.hist-badge {
  display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.5px; vertical-align: middle; margin-left: 4px;
}
.hist-win  { background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.4); color: #2ecc71; }
.hist-loss { background: rgba(255,80,80,0.12);  border: 1px solid rgba(255,80,80,0.4);  color: #ff8080; }

.host-badge {
  display: inline-block; background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.4);
  color: var(--gold); border-radius: 4px; padding: 1px 6px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.5px; vertical-align: middle;
}

/* ── Online match countdown (top timer box) ── */
.match-timer {
  font-size: 0.68rem; font-weight: 700; color: var(--gold);
  background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3);
  border-radius: 6px; padding: 2px 8px; margin-bottom: 4px;
}

.game-header { display: none; }

.game-board-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
}

/* ── Board stage: sizing frame that the board + corner badges anchor to ──
   Real rotating gradient border (blue → violet → red → gold), not just a
   glow, using the padding-box/border-box double-background trick. */
.board-stage {
  position: relative;
  box-sizing: border-box;
  width:  min(97vw, 460px);
  height: min(97vw, 460px);
  border-radius: 16px;
  border: 5px solid transparent;
  background:
    transparent padding-box,
    conic-gradient(from 220deg, #1e88e5, #6a5acd 18%, #e5433d 42%, var(--gold) 68%, #1e88e5 100%) border-box;
  box-shadow:
    0 0 20px 3px rgba(30,136,229,0.35),
    0 0 26px 4px rgba(229,57,53,0.22),
    0 0 18px 3px rgba(255,215,0,0.25);
}

/* ── Board grid ── */
#ludo-board {
  width:  100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows:    repeat(15, 1fr);
  border: 4px solid var(--gold);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 3px #0d0d1a,
    0 0 40px rgba(255,215,0,0.25),
    0 12px 50px rgba(0,0,0,0.9);
}

/* ── Board-completion % badges (one per quadrant corner) — solid chips ── */
.board-pct {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 7px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.board-pct-red    { top: 4px;    left: 4px;   background: linear-gradient(135deg,#e5433d,#a81a1a); }
.board-pct-blue   { top: 4px;    right: 4px;  background: linear-gradient(135deg,#2f8fe0,#0d3d8a); }
.board-pct-yellow { bottom: 4px; left: 4px;   background: linear-gradient(135deg,#f3b400,#8c5e00); }
.board-pct-green  { bottom: 4px; right: 4px;  background: linear-gradient(135deg,#43a355,#114d22); }


/* ── Default cell ── */
.cell {
  border: 0.5px solid rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: default;
}

/* ── Path cell (warm ivory) ── */
.path-cell { background: #f0ece4; border-color: rgba(0,0,0,0.22); }
/* ── Safe square (warm gold tint) ── */
.path-cell.safe { background: #fff9c4; }

/* ── Safe square – star overlay ── */
.cell.safe::after {
  content: '★';
  position: absolute;
  font-size: 80%;
  color: rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

/* ── Big decorative dice-face circle, one per home quadrant (see
   createQuadrantIcon in game.js) — sits behind the token layer, spans the
   inner 4×4 of its quadrant via inline grid-column/grid-row. ── */
.quadrant-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* z-index only takes effect on a positioned element — without this,
     z-index:0 below was silently ignored, letting the underlying cells'
     0.5px borders bleed through as faint grid lines inside the white
     circle instead of it reading as one clean, solid disc. */
  position: relative;
  z-index: 0;
  padding: 1%;
}
.quadrant-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* ── Movable cell highlight ── */
.cell.movable {
  outline: 2px solid #00e600;
  outline-offset: -2px;
  cursor: pointer;
  animation: cell-pulse 0.7s ease infinite;
  z-index: 1;
}
@keyframes cell-pulse {
  0%,100% { outline-color: #00e600; }
  50%      { outline-color: #88ff88; box-shadow: inset 0 0 8px rgba(0,230,0,0.35); }
}

/* ── Corner home base – flat quadrant colour, no inner/outer/start tiers.
   The big dice-face circle (.quadrant-icon, drawn once per quadrant in
   renderBoard()) carries the visual detail now instead. ── */
.home-red    { background: #e0392f !important; }
.home-blue   { background: #2f7fd8 !important; }
.home-green  { background: #2e8f4a !important; }
.home-yellow { background: #f0a020 !important; }

/* ── Home stretch lanes (vivid, clearly readable) ── */
.lane-red    { background: #e53935 !important; }
.lane-blue   { background: #1e88e5 !important; }
.lane-green  { background: #43a047 !important; }
/* Yellow lane uses bright amber-gold so it reads as yellow, not orange */
.lane-yellow { background: #ffc107 !important; }

/* ── Center 3×3 ──
   Rotation: red lane enters from LEFT, blue from TOP, green from RIGHT, yellow from BOTTOM.
   conic-gradient from -45deg aligns each color's triangle with its arriving lane:
     blue  0–90°  = top sector   (12→3 o'clock offset -45°)
     green 90–180° = right sector
     yellow 180–270° = bottom sector
     red  270–360° = left sector
*/
.center-cell {
  background: conic-gradient(
    from -45deg,
    #1e88e5   0deg  90deg,
    #43a047  90deg 180deg,
    #ffc107 180deg 270deg,
    #e53935 270deg 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  position: relative;
  overflow: visible;
}
/* Star fades out as tokens fill the center */
.center-cell::after {
  content: '★';
  font-size: 1.2em;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 0 8px rgba(255,255,255,0.35);
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* ── Finished-pawn quadrants inside the center ── */
.ct-quad {
  position: absolute;
  width: 50%;
  height: 50%;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 6%;
  gap: 4%;
  box-sizing: border-box;
}
.ct-tl { top: 0;    left: 0;   }
.ct-tr { top: 0;    right: 0;  }
.ct-br { bottom: 0; right: 0;  }
.ct-bl { bottom: 0; left: 0;   }

/* Mini pawn SVG — width drives height via viewBox aspect ratio */
.ct-pawn {
  display: block;
  flex-shrink: 0;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
  animation: ct-pop 0.38s cubic-bezier(0.34,1.56,0.64,1) both;
}
/* 1 pawn  → large */
.ct-quad[data-cnt="1"] .ct-pawn { width: 66%; }
/* 2 pawns → two side by side */
.ct-quad[data-cnt="2"] .ct-pawn { width: 44%; }
/* 3 pawns → three smaller */
.ct-quad[data-cnt="3"] .ct-pawn { width: 40%; }
/* 4 pawns → 2 × 2 grid */
.ct-quad[data-cnt="4"] .ct-pawn { width: 42%; }

@keyframes ct-pop {
  from { transform: scale(0) translateY(6px); opacity: 0; }
  to   { transform: scale(1) translateY(0);   opacity: 1; }
}

/* ─────────────── TOKENS (SVG pawn shape) ─────────────── */
.token {
  width: 80%;
  height: 80%;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  position: relative;
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.6)) drop-shadow(0 3px 5px rgba(0,0,0,0.4));
  user-select: none;
}
.token:hover { transform: translateY(-2px) scale(1.12); }
/* Color fills are built into SVG internals — no background needed */
.token.red, .token.blue, .token.green, .token.yellow { background: none; }
.token.selected {
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 8px var(--gold))
    drop-shadow(0 0 16px rgba(255,215,0,0.5))
    drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: token-pulse 0.55s ease infinite;
}
@keyframes token-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ── Token move / event animations ── */
@keyframes capture-flash {
  0%   { filter: brightness(1) saturate(1) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); transform: scale(1); }
  28%  { filter: brightness(3.5) saturate(0) drop-shadow(0 0 8px #fff); transform: scale(1.3); }
  60%  { filter: brightness(2) saturate(0) drop-shadow(0 0 4px #fff); transform: scale(0.85); }
  100% { filter: brightness(1) saturate(1) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); transform: scale(1); }
}
.token.capture-flash {
  animation: capture-flash 0.3s ease forwards;
  pointer-events: none;
}
@keyframes home-burst {
  0%   { transform: scale(1);    filter: brightness(1)   drop-shadow(0 2px 3px rgba(0,0,0,0.6)); opacity: 1; }
  35%  { transform: scale(1.8);  filter: brightness(2.5) drop-shadow(0 0 14px gold);              opacity: 1; }
  65%  { transform: scale(0.8);  filter: brightness(1.5) drop-shadow(0 0 6px gold);               opacity: 0.7; }
  100% { transform: scale(0);    filter: brightness(1);                                            opacity: 0; }
}
.token.home-burst {
  animation: home-burst 0.48s ease forwards;
  pointer-events: none;
  z-index: 99;
}

/* Different-colored tokens sharing one cell (e.g. two colors both parked
   on a safe square) each need their own clickable pawn — quadrant-offset
   them via position so hover/selected transforms (which apply on top)
   don't fight with the offset itself. */
.token.token-stacked {
  position: absolute;
  width: 50%;
  height: 50%;
}
.token.token-stack-0 { top: 4%;    left: 4%; }
.token.token-stack-1 { top: 4%;    right: 4%; }
.token.token-stack-2 { bottom: 4%; left: 4%; }
.token.token-stack-3 { bottom: 4%; right: 4%; }

.multi-token {
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.72);
  border-radius: 50%;
  width: 56%;
  height: 56%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px; right: 1px;
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.4);
}

/* ─────────────── DICE ─────────────── */
.dice-area  { display: none; }
.turn-banner { display: none; }

.dice {
  width: 72px;
  height: 72px;
  background: linear-gradient(145deg, #ffffff 0%, #efefef 50%, #d8d8d8 100%);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(3, 1fr);
  padding: 9px;
  gap: 3px;
  border: 1.5px solid #bbb;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow:
    0 7px 0 #999,
    0 8px 12px rgba(0,0,0,0.65),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 2px 0 0 rgba(255,255,255,0.6);
}
.dice:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow:
    0 10px 0 #999,
    0 11px 16px rgba(0,0,0,0.65),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 2px 0 0 rgba(255,255,255,0.6);
}
.dice:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    0 2px 0 #999,
    0 3px 6px rgba(0,0,0,0.5),
    inset 0 2px 0 rgba(255,255,255,0.9),
    inset 2px 0 0 rgba(255,255,255,0.5);
}
.dice.rolling {
  animation: dice-shake 0.62s cubic-bezier(0.4,0,0.2,1);
}
@keyframes dice-shake {
  0%   { transform: rotate(0deg)   scale(1)    translateY(0);     }
  10%  { transform: rotate(-28deg) scale(1.16) translateY(-7px);  }
  26%  { transform: rotate(26deg)  scale(1.2)  translateY(-11px); }
  42%  { transform: rotate(-20deg) scale(1.14) translateY(-6px);  }
  58%  { transform: rotate(16deg)  scale(1.09) translateY(-3px);  }
  72%  { transform: rotate(-9deg)  scale(1.04) translateY(-1px);  }
  86%  { transform: rotate(5deg)   scale(1.01) translateY(0);     }
  100% { transform: rotate(0deg)   scale(1)    translateY(0);     }
}
.dice.landed {
  animation: dice-landed 0.38s cubic-bezier(0.22,1,0.36,1);
}
@keyframes dice-landed {
  0%   { transform: scale(1.18) translateY(-5px); }
  55%  { transform: scale(0.91) translateY(3px);  }
  100% { transform: scale(1)    translateY(0);    }
}
.dice.six {
  box-shadow:
    0 0 0 2.5px var(--gold),
    0 0 18px rgba(255,215,0,0.8),
    0 0 36px rgba(255,215,0,0.35),
    0 4px 0 #b07800,
    0 5px 14px rgba(0,0,0,0.6);
  transition: box-shadow 0.2s ease;
}
.dot {
  background: radial-gradient(circle at 35% 30%, #444, #111);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.dot.hidden { background: transparent !important; box-shadow: none !important; }

.dice-val-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
}

.roll-btn { display: none; }
.player-panels { display: none; }

/* ─────────────── LEADERBOARD ─────────────── */
/* ─────────────── LEADERBOARD ─────────────── */
.lb-screen {
  background: #0d0d1a;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lb-topbar {
  display: flex;
  align-items: center;
  padding: 12px 14px 8px;
  background: #0a0a18;
  flex-shrink: 0;
}
.lb-topbar-title { flex: 1; text-align: center; }
.lb-game-name {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
}
.lc-r { color: #e74c3c; }
.lc-b { color: #3498db; }
.lc-g { color: #2ecc71; }
.lc-y { color: #f39c12; }
.lb-heading-row {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,215,0,0.5);
  margin-top: 2px;
}
.lb-help-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.lb-notice {
  background: rgba(255,255,255,0.04);
  text-align: center;
  padding: 6px 14px;
  font-size: 0.74rem;
  color: #aaa;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lb-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.lb-tab {
  flex: 1; text-align: center; padding: 9px 2px;
  font-size: 0.65rem; font-weight: 600; color: #777;
  cursor: pointer; letter-spacing: 0.4px;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.lb-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
/* 200px covers my-rank-bar (~58px) + bottom-nav (~110px) + buffer */
.lb-scroll { flex: 1; overflow-y: auto; padding-bottom: 220px; }

/* ── Podium ── */
.lb-podium {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 14px 8px 8px;
}
.lb-pod {
  flex: 1;
  border-radius: 14px;
  padding: 10px 6px 10px;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center;
  border: 1.5px solid;
}
.lb-pod.gold   { background: linear-gradient(160deg,#2a1f00,#1a1200); border-color:#FFD700; flex:1.15; box-shadow:0 0 16px rgba(255,215,0,0.2); }
.lb-pod.silver { background: linear-gradient(160deg,#1a1a24,#111118); border-color:#C0C0C0; }
.lb-pod.bronze { background: linear-gradient(160deg,#1e1208,#110c05); border-color:#CD7F32; }

.pod-badge {
  width: 26px; height: 26px;
  clip-path: polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.8rem; margin: 0 auto 4px;
}
.pod-badge-1 { background: linear-gradient(135deg,#FFD700,#FFA500); color:#1a0a00; }
.pod-badge-2 { background: linear-gradient(135deg,#E8E8E8,#A8A8A8); color:#1a1a1a; }
.pod-badge-3 { background: linear-gradient(135deg,#E8A060,#A05020); color:#fff; }

.pod-av-wrap {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; border: 3px solid; background: #0d0d1a; flex-shrink: 0;
  width: 56px; height: 56px; overflow: hidden;
}
.lb-pod.gold .pod-av-wrap { width: 68px; height: 68px; font-size: 2rem; }
.pod-av-wrap.pod-av-gold   { border-color:#FFD700; box-shadow:0 0 12px rgba(255,215,0,0.45); }
.pod-av-wrap.pod-av-silver { border-color:#C0C0C0; }
.pod-av-wrap.pod-av-bronze { border-color:#CD7F32; }

.pod-name {
  font-weight: 700; font-size: 0.72rem; color: #fff;
  margin-top: 4px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
}
.pod-loc {
  font-size: 0.58rem; color: #888;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pod-streak-label { font-size: 0.58rem; color: #aaa; margin-top: 3px; }
.pod-streak-val { font-size: 0.95rem; font-weight: 900; color: var(--gold); }
.lb-pod.gold .pod-streak-val { font-size: 1.1rem; }
.pod-active {
  font-size: 0.56rem; color: #888;
  display: flex; align-items: center; gap: 3px; margin-top: 2px;
}
.active-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2ecc71; display: inline-block; flex-shrink: 0;
}

/* ── Column headers ── */
.lb-cols {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 66px 50px 62px;
  gap: 4px; padding: 6px 10px;
  font-size: 0.56rem; color: #666; text-transform: uppercase; letter-spacing: 0.4px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.lb-list { padding: 4px 8px 0; }

.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 66px 50px 62px;
  gap: 4px; align-items: center;
  padding: 8px 8px; border-radius: 10px; margin-bottom: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s;
}
.lb-row:hover { background: rgba(255,255,255,0.08); }

.lb-rank-num { font-weight: 700; font-size: 0.88rem; color: #aaa; text-align: center; }
.lb-player   { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lb-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1a1040; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0; border: 1.5px solid rgba(255,215,0,0.2);
  overflow: hidden;
}
/* Ensure photo <img> fills avatar containers perfectly */
.lb-av-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.lb-name     { font-weight: 600; font-size: 0.73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-district { font-size: 0.62rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-streak   { font-weight: 700; font-size: 0.78rem; color: #ff6b35; text-align: center; }
.lb-points   { font-weight: 700; font-size: 0.78rem; color: var(--gold); text-align: center; }
.lb-time     { font-size: 0.6rem; color: #777; display: flex; align-items: center; gap: 3px; }

.lb-update-notice { text-align: center; font-size: 0.66rem; color: #444; padding: 10px; }

/* ── My Rank Bar ── */
.my-rank-bar {
  position: fixed;
  bottom: 110px;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: linear-gradient(135deg,#1a0a40,#0d0820);
  border-top: 2px solid var(--gold);
  padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
  z-index: 100; box-sizing: border-box;
}
.mrb-rank-block { text-align: center; min-width: 46px; }
.mrb-yr-label   { font-size: 0.52rem; color: var(--gold); font-weight: 700; letter-spacing: 0.4px; }
.mrb-yr-num     { font-size: 1.5rem; font-weight: 900; color: var(--gold); line-height: 1; }
.mrb-avatar-wrap {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold); background: #0d0d1a;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  overflow: hidden;
}
/* Inner avatar div must fill the 42×42 circle so img 100%/100% works */
.mrb-avatar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.mrb-info-block { flex: 1; min-width: 0; }
.mrb-uname { font-weight: 700; font-size: 0.78rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrb-uloc  { font-size: 0.6rem; color: #888; }
.mrb-stat-col  { text-align: center; min-width: 46px; }
.mrb-slabel    { font-size: 0.5rem; color: #888; font-weight: 700; letter-spacing: 0.3px; }
.mrb-sval      { font-size: 0.8rem; font-weight: 700; color: var(--gold); }

/* ── Leave game confirm modal ── */
.leave-modal {
  position: relative !important;
  width: 260px !important;
  max-width: 260px !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding: 20px 18px 18px !important;
  text-align: center;
  border-color: rgba(255,215,0,0.5) !important;
  margin: auto !important;
  flex-shrink: 0;
  align-self: center;
}
.leave-modal-icon  { font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.leave-modal-title { font-size: 1rem; font-weight: 800; color: var(--gold); margin-bottom: 6px; letter-spacing: 0.5px; }
.leave-modal-msg   { font-size: 0.76rem; color: #bbb; line-height: 1.5; margin-bottom: 16px; }
.leave-modal-warn  { display: block; color: #ff6b6b; font-size: 0.7rem; margin-top: 4px; }
.leave-modal-btns  { display: flex; gap: 8px; }
.leave-btn {
  flex: 1; height: 38px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  border: none; transition: transform 0.12s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.leave-btn:active { transform: scale(0.94); }
.leave-btn-yes {
  background: linear-gradient(135deg, #7a1a00, #c0392b);
  color: #fff;
  border: 1.5px solid rgba(255,80,80,0.4);
}

/* ─────────────── FEE NOTICE ─────────────── */
.fee-notice {
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.78rem;
  color: #ccc;
  text-align: center;
  margin-bottom: 14px;
}
.fee-notice strong { color: var(--gold); }

/* ─────────────── GUEST TIMEOUT MODAL ─────────────── */
.guest-timeout-overlay { background: rgba(0,0,0,0.92) !important; }

.guest-timeout-modal {
  text-align: center;
  max-width: 320px !important;
  border-color: rgba(255,215,0,0.55) !important;
  padding: 28px 22px 22px !important;
}
.gt-icon  { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.gt-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem; font-weight: 900;
  color: var(--gold);
  margin-bottom: 10px;
}
.gt-msg {
  font-size: 0.82rem; color: #ccc; line-height: 1.6;
  margin-bottom: 14px;
}
.gt-brand { color: var(--gold); font-weight: 700; }
.gt-perks {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-bottom: 18px;
}
.gt-perk {
  background: rgba(255,215,0,0.07);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.7rem; color: #ccc;
}
.gt-btn { width: 100% !important; margin-bottom: 8px !important; }
.gt-skip {
  background: none; border: none;
  color: #666; font-size: 0.72rem;
  cursor: pointer; margin-top: 4px;
  text-decoration: underline;
  display: block; width: 100%;
}
.gt-skip:hover { color: #aaa; }

/* ─────────────── MODALS ─────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  z-index: 2000;
  overflow: auto;
}
.modal-overlay.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal {
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  background: linear-gradient(135deg, #1e1035, #150c28);
  border: 2px solid rgba(255,215,0,0.3);
  border-radius: 20px;
  padding: 22px 20px;
  width: 90%;
  max-width: 360px;
  height: auto;
  max-height: 85vh;
  overflow-y: auto;
  animation: modal-in 0.25s ease;
  box-sizing: border-box;
}
@keyframes modal-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal h3 { color: var(--gold); font-size: 1.2rem; margin-bottom: 15px; text-align: center; }
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ─────────────── WIN SCREEN ─────────────── */
.win-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 3000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.win-screen.show { display: flex; }

/* Solid card that holds all win content */
.win-box {
  background: linear-gradient(160deg, #2a0a5e 0%, #1a0a2e 60%, #0d0820 100%);
  border: 2px solid var(--gold);
  border-radius: 22px;
  padding: 22px 20px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.15),
    0 0 40px rgba(255,215,0,0.25),
    0 24px 60px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.win-trophy { font-size: 4rem; animation: trophy-bounce 1s ease infinite; margin-bottom: 4px; }
@keyframes trophy-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.win-title { font-family: 'Cinzel', serif; font-size: 2rem; color: var(--gold); margin: 6px 0 4px; text-shadow: 0 0 20px rgba(255,215,0,0.6); }
.win-sub   { color: #ccc; font-size: 0.95rem; margin-bottom: 14px; }
.win-score-bar {
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 20px;
  padding: 5px 18px;
  font-size: 0.85rem;
  color: #ddd;
  margin-bottom: 14px;
  display: none;
}
.win-score-bar span { color: var(--gold); font-weight: 700; }
.win-rewards { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.wr-item { text-align: center; min-width: 68px; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 8px 10px; border: 1px solid rgba(255,215,0,0.15); }
.wr-icon { font-size: 1.6rem; }
.wr-val  { font-weight: 700; font-size: 1.1rem; color: var(--gold); }
.wr-lbl  { font-size: 0.62rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

.win-rankings {
  display: none;
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.wr-rank-title {
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 8px;
}
.wr-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.85rem;
}
.wr-rank-row:last-child { border-bottom: none; }
.wr-rank-medal { font-size: 1.1rem; min-width: 28px; }
.wr-rank-name  { flex: 1; font-weight: 600; text-align: left; }
.wr-rank-pts   { color: #aaa; font-size: 0.8rem; }
.wr-red    { color: #e74c3c; }
.wr-blue   { color: #3498db; }
.wr-green  { color: #2ecc71; }
.wr-yellow { color: #f1c40f; }

/* ─────────────── NOTIFICATIONS PANEL ─────────────── */
.notif-panel {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: linear-gradient(135deg, #1e1035, #0d0d1a);
  border-left: 2px solid rgba(255,215,0,0.2);
  z-index: 1500;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.notif-panel.open { transform: translateX(0); }
.notif-item {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread { border-left: 3px solid var(--gold); }
.ni-title  { font-weight: 600; font-size: 0.85rem; }
.ni-msg    { font-size: 0.75rem; color: #aaa; margin-top: 2px; }
.ni-time   { font-size: 0.65rem; color: #555; margin-top: 3px; }

/* ─────────────── PROFILE SCREEN ─────────────── */
.profile-hero {
  background: linear-gradient(135deg, rgba(40,10,80,0.9), rgba(20,5,40,0.9));
  padding: 25px 20px;
  text-align: center;
  border-bottom: 2px solid rgba(255,215,0,0.2);
}
.profile-avatar-big {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: #2a1550;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto 10px;
}
.profile-badge-tag {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #1a0a2e;
  font-weight: 700;
  font-size: 0.7rem;
  border-radius: 20px;
  padding: 3px 12px;
  display: inline-block;
  margin-top: 5px;
  letter-spacing: 1px;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 15px;
}
.stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.stat-val { font-size: 1.5rem; font-weight: 700; color: var(--gold); }
.stat-lbl { font-size: 0.7rem; color: #888; margin-top: 2px; }

/* ─────────────── TOAST ─────────────── */
#toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(20,10,40,0.95);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 12px;
  padding: 10px 20px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.toast.success { border-color: #2ecc71; }
.toast.error   { border-color: #e74c3c; }
@keyframes toast-in  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }

/* ─────────────── UTIL ─────────────── */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,215,0,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #888;
  padding: 10px 15px 5px;
}

.divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 8px 15px;
}

.back-btn {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
}
.back-btn:hover { background: rgba(255,215,0,0.15); border-color: var(--gold); }

.pb-bottom { padding-bottom: 120px; }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 380px) {
  .game-title  { font-size: 2.4rem; }
  .mode-btn    { padding: 10px 6px; }
  .mode-btn .mode-name { font-size: 0.82rem; }
}

/* ══════════════════════════════════════════════
   NEW HOME SCREEN  (hn-*)
══════════════════════════════════════════════ */

.hn-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;   /* only hide horizontal overflow — never clip vertical content */
  /* Push all content above the fixed bottom-nav (6px + 90px img + 10px + 8px buffer = 114px) */
  padding-bottom: calc(114px + env(safe-area-inset-bottom, 0px));
  background-image: url('../assets/images/home-bg.jpeg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0a0a22;
}

/* ── Top Bar ── */
.hn-topbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 6px;
  background: transparent;
  border-bottom: none;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.hn-player {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  margin: 0 4px 0 0;
  /* Trimmed to its actual artwork bounds (no transparent padding) so
     aspect-ratio can lock the box to the image's true 570:255 shape —
     background-size:100% 100% is only safe once the ratio matches exactly,
     otherwise the circular avatar frame stretches into an oval. */
  background: url('../assets/images/profile_bg_trim.png') center / 100% 100% no-repeat;
  aspect-ratio: 570 / 255;
  /* Fixed size tiers, not vw/clamp: vw scales off the whole viewport, not
     the space actually left after siblings, so independently-vw-sized
     elements can each look "fit" alone yet still collide together — this
     was measured (getBoundingClientRect) to actually overlap at several
     widths before switching to these verified fixed steps. Sizes here are
     bigger than the original pass (per explicit request to make the
     profile card taller) — margins/padding elsewhere were tightened to
     free up the extra width this needs at the narrowest tier. */
  height: 50px;
  /* Fixed px, not percentages: percentage padding/width on a box whose size
     comes from aspect-ratio (rather than an explicit `width`) resolves
     against the wrong containing block in this layout — measured via
     getComputedStyle to be ~3.4x too large here, not the intended % of
     .hn-player's own (aspect-ratio-derived) width. These px values are
     3% top/bottom, 10% right, 5.4% left of .hn-player's actual width at
     each tier's height (see the tier media queries below), computed once
     and hard-coded rather than left to re-break the same way. */
  padding: 3px 11px 3px 6px;
  box-sizing: border-box;
}

.hn-avatar {
  width: 39px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  overflow: hidden;
  flex-shrink: 0;
}

.hn-pinfo { display: flex; flex-direction: column; margin-left: 7px; min-width: 0; }

.hn-username {
  color: #fff;
  font-weight: 700;
  font-size: 0.62rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hn-psub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.hn-crown { font-size: 0.75rem; }

.hn-xp {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
}

.hn-lvl {
  background: linear-gradient(135deg, #6c3fa0, #4a1a80);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
}

.hn-currencies {
  display: flex;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  align-items: center;
}

.hn-coin {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  /* Fixed px, not percentages — same containing-block bug as .hn-player's
     padding (measured ~2.4x too large here). 17%/25% of .hn-coin's own
     width at each tier, hard-coded. */
  padding: 0 12px 0 17px;
  height: 18px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
/* Trimmed artwork + exact aspect-ratio, same reasoning as .hn-player above —
   coin_bg/gems_bg are wide pills (~3.8:1); stretching the untrimmed 3:2
   canvas to a text-sized box turned the round end-caps into ovals. */
.hn-coin-coins { background-image: url('../assets/images/coin_bg_trim.png'); aspect-ratio: 538 / 141; margin: 0 4px 0 0; }
.hn-coin-gems  { background-image: url('../assets/images/gems_bg_trim.png');  aspect-ratio: 543 / 143; margin: 0 4px; }

/* Invisible click zone over the "+" button already baked into the coin/gem
   background art (no icon/text of our own needed on top of it). */
.hn-plus {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
}

.hn-gear {
  width: 22px;
  aspect-ratio: 251 / 247;
  background: url('../assets/images/settings_trim.png') center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  transition: transform 0.2s, filter 0.2s;
}
.hn-gear:hover { transform: scale(1.08); filter: brightness(1.15); }

/* Mobile-first fixed size tiers for the top bar (profile card / coin+gem
   pills / gear). Each tier's total width (padding + margins + all 4
   elements, computed from their aspect-ratio-derived widths) was checked
   against getBoundingClientRect() at the tier's lower bound to confirm no
   overlap — plain vw/clamp scaling was tried first and measured to still
   collide at several widths, since vw tracks viewport size, not the space
   actually left over after sibling elements. */
@media (min-width: 341px) {
  .hn-player   { height: 52px; padding: 3px 12px 3px 6px; }
  .hn-avatar   { width: 41px; font-size: 1rem; }
  .hn-pinfo    { margin-left: 7px; }
  .hn-username { font-size: 0.68rem; }
  .hn-coin     { height: 22px; font-size: 0.58rem; padding: 0 14px 0 21px; }
  .hn-plus     { width: 14px; right: 2px; }
  .hn-gear     { width: 26px; }
}
@media (min-width: 421px) {
  .hn-player   { height: 64px; padding: 4px 14px 4px 8px; }
  .hn-avatar   { width: 50px; font-size: 1.3rem; }
  .hn-pinfo    { margin-left: 9px; }
  .hn-username { font-size: 0.74rem; }
  .hn-coin     { height: 28px; font-size: 0.68rem; padding: 0 18px 0 27px; }
  .hn-plus     { width: 18px; right: 2px; }
  .hn-gear     { width: 32px; }
}
@media (min-width: 561px) {
  .hn-player   { height: 94px; padding: 6px 21px 6px 11px; }
  .hn-avatar   { width: 74px; font-size: 1.7rem; }
  .hn-pinfo    { margin-left: 13px; }
  .hn-username { font-size: 0.86rem; }
  .hn-coin     { height: 34px; font-size: 0.76rem; padding: 0 22px 0 32px; }
  .hn-plus     { width: 22px; right: 3px; }
  .hn-gear     { width: 42px; }
}

/* ── Hero / Background ── */
.hn-hero {
  flex: 1;
  background: transparent;
  position: relative;
  min-height: 0;
  /* .hn-logo is bottom-anchored and absolutely positioned, sized mainly by
     width — on short viewports (landscape phones, small-height devices)
     .hn-hero itself can shrink to well under the logo's natural height,
     letting it spill upward past the hero's top edge and overlap the top
     bar above it. Clipping here is the hard guarantee; the max-height on
     .hn-logo below is what makes it actually shrink to fit instead of
     just getting cropped. */
  overflow: hidden;
}

/* Subtle fade at very bottom of hero behind the logo/mode-buttons overlay */
.hn-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                   /* below .hn-bottom-overlay (z-index:2) */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 55%,
    rgba(4, 1, 16, 0.55) 80%,
    rgba(4, 1, 16, 0.82) 100%
  );
  pointer-events: none;
}

/* Positioning frame for the logo + game-mode buttons: stacked together
   as one flex column, packed against the *bottom* of the hero, so the
   logo always sits directly above the mode buttons regardless of the
   modes' own height. */
.hn-bottom-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  z-index: 2;
}

/* Lanka Ludo logo image — last thing anchored above the mode buttons. */
.hn-logo {
  width: 68%;
  max-width: 280px;
  margin-bottom: 10px;
  /* vh, not a percentage: percentages need a definite-height ancestor;
     vh caps the logo directly on short/landscape viewports regardless.
     .hn-hero's own overflow:hidden is the hard backstop either way. */
  max-height: 20vh;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 20px rgba(255, 200, 0, 0.65));
  pointer-events: none;
  user-select: none;
}

/* ── Game Mode Buttons (image-based) — packed directly below the logo,
   both anchored to the bottom of the hero as one unit (see
   .hn-bottom-overlay above). ── */
.hn-modes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 12px;  /* nav clearance handled by .hn-wrapper padding-bottom */
  background: linear-gradient(to bottom, rgba(4, 1, 16, 0.40), rgba(4, 1, 16, 0.75));
}

.hn-mode-img {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.hn-mode-img img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hn-mode-img:hover  { transform: translateY(-4px) scale(1.04); }
.hn-mode-img:active { transform: translateY(1px)  scale(0.97); }

/* On short/landscape viewports the hero's available height can be smaller
   than the logo + mode buttons' combined footprint — shrink both so the
   stacked-at-bottom group reliably fits inside the hero instead of
   spilling upward into the top bar. */
@media (max-height: 460px) {
  .hn-logo    { max-height: 11vh; margin-bottom: 4px; }
  .hn-modes   { padding: 4px 6px 6px; gap: 4px; }
  .hn-mode-img img { max-height: 50px; }
}

/* ── Responsive tweaks ── */
@media (max-width: 380px) {
  .hn-logo   { width: 92%; }
}


/* ════════════════════════════════════════════════════════════
   GAME SCREEN — FULL RESPONSIVE
   Fixed chrome height: top-row ≈76px + bottom-row ≈76px
                      + back-row ≈58px + board padding ≈16px
                      = ~226px non-board vertical space
════════════════════════════════════════════════════════════ */

/* 1 ── Make the game screen exactly fill the viewport with no scroll */
#screen-game {
  height: 100vh;                   /* safe fallback */
  height: -webkit-fill-available;  /* iOS Safari URL-bar fix */
  height: 100dvh;                  /* Android Chrome dynamic toolbar fix */
  min-height: unset !important;    /* override .screen { min-height:100vh } */
  overflow: hidden;
}

.game-screen {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.game-board-wrap {
  overflow: hidden;
  min-height: 0;   /* prevent flex from refusing to shrink */
}

/* 2 ── Board: constrained by BOTH viewport width AND available height */
.board-stage {
  width:  min(min(97vw, calc(100dvh - 226px)), 460px);
  height: min(min(97vw, calc(100dvh - 226px)), 460px);
}

/* 3 ── Narrow phones  (≤ 390px wide — most Android/iOS) */
@media (max-width: 390px) {
  .gs-top-row,
  .gs-bottom-row  { padding: 5px 6px; gap: 5px; }
  .gp-panel       { padding: 5px 6px; gap: 5px; min-height: 58px; }
  .gp-avatar      { width: 38px; height: 38px; font-size: 1.2rem; border-width: 2px; }
  .gp-name        { font-size: 0.70rem; }
  .gp-streak      { font-size: 0.56rem; }
  .gs-timer-box   { min-width: 104px; padding: 6px 14px; }
  .gs-timer-val   { font-size: 1.3rem; }
  .gs-dice-ring   { width: 82px; height: 82px; }
  .gs-dice        { width: 48px !important; height: 48px !important; }
  .gs-back-btn    { width: 144px; height: 38px; font-size: 0.84rem; }
  .gs-back-row    { padding: 6px 12px 8px; }
}

/* 4 ── Very narrow phones  (≤ 360px wide — older budget phones) */
@media (max-width: 360px) {
  .gs-top-row,
  .gs-bottom-row  { padding: 4px 5px; gap: 4px; }
  .gp-panel       { padding: 4px 5px; gap: 4px; min-height: 52px; }
  .gp-avatar      { width: 34px; height: 34px; font-size: 1.05rem; border-width: 2px; }
  .gp-name        { font-size: 0.65rem; }
  .gp-loc         { display: none; }
  .gp-streak      { font-size: 0.52rem; margin-top: 0; }
  .gs-timer-box   { min-width: 96px; padding: 5px 11px; border-radius: 16px; }
  .gs-timer-val   { font-size: 1.2rem; letter-spacing: 1px; }
  .gs-turn-lbl    { font-size: 0.52rem; }
  .gs-dice-ring   { width: 74px; height: 74px; }
  .gs-dice        { width: 44px !important; height: 44px !important; }
  .gs-back-btn    { width: 128px; height: 35px; font-size: 0.78rem; }
  .gs-back-row    { padding: 5px 10px 7px; }
}

/* 5 ── Short screens  (≤ 680px tall — compact Androids, Samsung A-series) */
@media (max-height: 680px) {
  .gp-panel       { min-height: 54px; padding: 5px 7px; }
  .gp-avatar      { width: 38px; height: 38px; font-size: 1.2rem; }
  .gs-back-row    { padding: 5px 16px 6px; }
  .gs-back-btn    { height: 36px; }
  .board-stage {
    width:  min(min(97vw, calc(100dvh - 208px)), 460px);
    height: min(min(97vw, calc(100dvh - 208px)), 460px);
  }
}

/* 6 ── Very short screens  (≤ 580px tall — small phones / landscape) */
@media (max-height: 580px) {
  .gs-top-row,
  .gs-bottom-row  { padding: 3px 5px; gap: 3px; }
  .gp-panel       { min-height: 44px; padding: 3px 5px; gap: 3px; }
  .gp-avatar      { width: 30px; height: 30px; font-size: 0.95rem; border-width: 2px; }
  .gp-name        { font-size: 0.62rem; }
  .gp-loc         { display: none; }
  .gp-streak      { font-size: 0.5rem; margin-top: 0; }
  .gs-timer-box   { min-width: 86px; padding: 4px 9px; border-radius: 12px; gap: 0; }
  .gs-clock-icon  { display: none; }
  .gs-timer-val   { font-size: 1.1rem; letter-spacing: 1px; }
  .gs-turn-lbl    { font-size: 0.48rem; }
  .gs-dice-ring   { width: 66px; height: 66px; }
  .gs-dice        { width: 38px !important; height: 38px !important; }
  .gs-mode-lbl    { display: none; }
  .gs-back-row    { padding: 2px 10px 3px; }
  .gs-back-btn    { height: 28px; width: 120px; font-size: 0.72rem; border-radius: 14px;
                    box-shadow: 0 2px 0 #7a5000, 0 3px 8px rgba(255,215,0,0.3); }
  .board-stage {
    width:  min(min(97vw, calc(100dvh - 182px)), 460px);
    height: min(min(97vw, calc(100dvh - 182px)), 460px);
  }
}

/* 7 ── Extremely short  (≤ 480px tall — very old phones / most landscape) */
@media (max-height: 480px) {
  .gp-panel       { min-height: 36px; }
  .gp-avatar      { width: 26px; height: 26px; font-size: 0.8rem; }
  .gp-name        { font-size: 0.58rem; }
  .gp-streak      { display: none; }
  .gs-timer-box   { min-width: 74px; }
  .gs-timer-val   { font-size: 1.0rem; }
  .gs-back-row    { padding: 1px 8px 2px; }
  .gs-back-btn    { height: 24px; font-size: 0.65rem; }
  .board-stage {
    width:  min(min(97vw, calc(100dvh - 158px)), 460px);
    height: min(min(97vw, calc(100dvh - 158px)), 460px);
  }
}

/* 8 ── Large phones (≥ 414px wide — iPhone Plus / Pro Max, Pixel XL) */
@media (min-width: 414px) {
  .gp-avatar    { width: 48px; height: 48px; font-size: 1.65rem; }
  .gp-name      { font-size: 0.82rem; }
  .gs-timer-box { min-width: 150px; padding: 10px 30px; }
  .gs-dice-ring { width: 98px; height: 98px; }
  .gs-dice      { width: 58px !important; height: 58px !important; }
}

/* 9 ── Prevent body scroll on game screen (especially iOS bounce) */
body:has(#screen-game.active) {
  overflow: hidden;
  touch-action: none;
}