/* ═══════════════════════════════════════════════════════════════
   In-room Ludo — sleek / glassy / minimal
   Uses the site's own theme variables so it blends with Rose,
   Modern and Dark. Classic Ludo colours lead on the board.
   Loaded as a separate stylesheet via app.php.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ludo-red:    #e5484d;
  --ludo-green:  #30a46c;
  --ludo-yellow: #ffb224;
  --ludo-blue:   #3e63dd;
  --ludo-red-soft:    rgba(229,72,77,.14);
  --ludo-green-soft:  rgba(48,164,108,.14);
  --ludo-yellow-soft: rgba(255,178,36,.16);
  --ludo-blue-soft:   rgba(62,99,221,.14);
}

/* ── Panel: frosted glass, layered depth ── */
#ludoPanel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 428px; max-width: 92vw;
  background: color-mix(in srgb, var(--bg, #fff) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border-left: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 60%, transparent);
  box-shadow: -24px 0 60px rgba(15,18,30,.18), -1px 0 0 rgba(255,255,255,.05) inset;
  z-index: 1200; transform: translateX(101%);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; overflow: hidden;
}
#ludoPanel.open { transform: translateX(0); }

.lp-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border,#e5e5e5) 55%, transparent);
  flex-shrink: 0; background: color-mix(in srgb, var(--surface,#fff) 40%, transparent);
}
.lp-head b { font-size: 15.5px; letter-spacing: -0.01em; }
.lp-status { font-size: 11.5px; color: var(--muted,#888); font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent,#a44) 10%, transparent); }
.lp-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  background: none; border: none; font-size: 17px; cursor: pointer; color: var(--muted,#888);
  transition: background .15s, color .15s; }
.lp-x:hover { background: color-mix(in srgb, var(--text,#111) 7%, transparent); color: var(--text,#111); }

#lpBody { padding: 16px; overflow-y: auto; flex: 1; scrollbar-width: thin; }

/* ── Cards ── */
.lp-card {
  background: color-mix(in srgb, var(--surface,#fff) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--border,#e5e5e5) 50%, transparent);
  border-radius: 16px; padding: 14px; margin-bottom: 13px;
  box-shadow: 0 1px 2px rgba(15,18,30,.04);
}
.lp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lp-sub { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted,#888); margin-bottom: 10px; }
.lp-hint { font-size: 11.5px; color: var(--muted,#888); margin-top: 9px; line-height: 1.55; }
.lp-empty { font-size: 12.5px; color: var(--muted,#888); padding: 10px 0; text-align: center; }

/* ── Buttons ── */
.lp-btn {
  padding: 9px 15px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border,#ddd) 70%, transparent);
  background: color-mix(in srgb, var(--surface,#fff) 80%, transparent);
  color: var(--text,#111); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: transform .12s, border-color .15s, box-shadow .15s;
}
.lp-btn:hover { border-color: color-mix(in srgb, var(--accent,#a44) 50%, transparent);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,18,30,.08); }
.lp-btn:active { transform: translateY(0); }
.lp-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.lp-btn.primary {
  background: linear-gradient(135deg, var(--accent,#a44), color-mix(in srgb, var(--accent,#a44) 60%, var(--gold,#dba)));
  color: #fff; border: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent,#a44) 30%, transparent);
}
.lp-btn.primary:hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--accent,#a44) 40%, transparent); }
.lp-btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }
.lp-btn.invite { margin: 3px; }
.lp-sel {
  padding: 8px 11px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border,#ddd) 70%, transparent);
  background: color-mix(in srgb, var(--surface,#fff) 80%, transparent);
  color: var(--text,#111); font-family: inherit; font-size: 13px; cursor: pointer;
}

/* ── Lobby game list ── */
.lp-game { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border,#eee) 50%, transparent); font-size: 13px; }
.lp-game:last-child { border-bottom: none; }
.lp-g-n { font-weight: 700; min-width: 50px; font-variant-numeric: tabular-nums; }
.lp-g-p { flex: 1; color: var(--muted,#888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Player rows / seats ── */
.lp-pl { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; }
.lp-dot { width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }

/* ── Board: soft, seamless, depth ── */
#lpBoard {
  position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 18px;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--surface,#fff) 90%, transparent), transparent 60%),
    var(--surface2,#f0f0f0);
  border: 1px solid color-mix(in srgb, var(--border,#e5e5e5) 60%, transparent);
  box-shadow: inset 0 1px 3px rgba(15,18,30,.06), 0 8px 30px rgba(15,18,30,.08);
  margin-bottom: 12px;
}
.lp-cell { position: absolute; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--border,#e0e0e0) 35%, transparent);
  background: color-mix(in srgb, var(--surface,#fff) 70%, transparent); box-sizing: border-box; }
.lp-cell.safe {
  background: color-mix(in srgb, var(--accent,#a44) 12%, var(--surface,#fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent,#a44) 25%, transparent);
}
.lp-cell.safe::after { content: '\2605'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 8px;
  color: color-mix(in srgb, var(--accent,#a44) 45%, transparent); }
.lp-cell.hc0 { background: var(--ludo-red-soft); }
.lp-cell.hc1 { background: var(--ludo-green-soft); }
.lp-cell.hc2 { background: var(--ludo-yellow-soft); }
.lp-cell.hc3 { background: var(--ludo-blue-soft); }

/* Bases: quadrant washes with a crisp ring */
.lp-base { position: absolute; border-radius: 16px; box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.3); }
.lp-base.b0 { background: var(--ludo-red-soft);    border: 1.5px solid var(--ludo-red); }
.lp-base.b1 { background: var(--ludo-green-soft);  border: 1.5px solid var(--ludo-green); }
.lp-base.b2 { background: var(--ludo-yellow-soft); border: 1.5px solid var(--ludo-yellow); }
.lp-base.b3 { background: var(--ludo-blue-soft);   border: 1.5px solid var(--ludo-blue); }
.lp-ctr { position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: 20px; filter: drop-shadow(0 2px 3px rgba(15,18,30,.2)); }

/* ── Tokens: glassy 3D pieces (the signature) ── */
.lp-tk {
  position: absolute; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 3px 6px rgba(15,18,30,.35), inset 0 -2px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.5);
  background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), rgba(255,255,255,0) 45%);
  transition: left .35s cubic-bezier(.34,1.4,.5,1), top .35s cubic-bezier(.34,1.4,.5,1), transform .15s;
  z-index: 5;
}
.lp-tk.movable { cursor: pointer; animation: lpPulse 1.3s ease-in-out infinite; z-index: 6; }
.lp-tk.movable:hover { transform: scale(1.14); }
@keyframes lpPulse {
  0%, 100% { box-shadow: 0 3px 6px rgba(15,18,30,.35), inset 0 -2px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.5), 0 0 0 0 color-mix(in srgb, var(--accent,#a44) 55%, transparent); }
  50%      { box-shadow: 0 3px 6px rgba(15,18,30,.35), inset 0 -2px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.5), 0 0 0 6px color-mix(in srgb, var(--accent,#a44) 0%, transparent); }
}

/* ── Dice + turn indicator ── */
.lp-dice { text-align: center; margin: 10px 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.lp-die {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface,#fff) 95%, transparent), var(--surface2,#eee));
  border: 1px solid color-mix(in srgb, var(--border,#ddd) 60%, transparent);
  box-shadow: 0 4px 10px rgba(15,18,30,.1), inset 0 1px 1px rgba(255,255,255,.6);
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lp-die.rolling { animation: lpRoll .5s ease; }
@keyframes lpRoll {
  0%   { transform: rotate(0) scale(1); }
  30%  { transform: rotate(-18deg) scale(1.12); }
  60%  { transform: rotate(14deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}
.lp-players { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.lp-ptag { font-size: 12px; padding: 4px 11px; border-radius: 99px; border: 1.5px solid;
  background: color-mix(in srgb, var(--surface,#fff) 60%, transparent); transition: all .2s; }
.lp-ptag.on { font-weight: 700; transform: scale(1.05);
  box-shadow: 0 2px 8px color-mix(in srgb, currentColor 20%, transparent); }

/* ── Win banner ── */
.lp-won {
  background: linear-gradient(135deg, var(--accent,#a44), var(--gold,#dba));
  color: #fff; border-radius: 14px; padding: 16px; text-align: center;
  font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent,#a44) 35%, transparent);
  animation: lpWin .5s cubic-bezier(.16,1,.3,1);
}
@keyframes lpWin { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Invite toast ── */
.ludo-invite-toast {
  position: fixed; bottom: 22px; right: 22px;
  background: color-mix(in srgb, var(--surface,#fff) 88%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--border,#ddd) 60%, transparent);
  border-radius: 16px; padding: 15px 17px;
  box-shadow: 0 12px 36px rgba(15,18,30,.22); z-index: 1300;
  font-size: 13.5px; max-width: 310px;
  animation: lpToast .4s cubic-bezier(.16,1,.3,1);
}
@keyframes lpToast { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Desktop split: shove chat left ── */
@media (min-width: 900px) {
  body.ludo-open .chat-area { margin-right: 428px; transition: margin .42s cubic-bezier(.16,1,.3,1); }
}
/* ── Mobile / PWA: full-width panel ── */
@media (max-width: 899px) {
  #ludoPanel { width: 100vw; max-width: 100vw; }
}
/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #ludoPanel, .lp-tk, .lp-die, .lp-won, .ludo-invite-toast,
  body.ludo-open .chat-area { transition: none; animation: none; }
  .lp-tk.movable { animation: none; outline: 2px solid var(--accent,#a44); outline-offset: 2px; }
}