/* ================= GGGL Ludo (përdor edhe stilet e hollit nga chess.css) ================= */
.colors { display: flex; gap: 10px; }
.colors button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--c); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--rail);
  transition: transform .12s, box-shadow .12s;
}
.colors button.on { box-shadow: 0 0 0 3px var(--chalk); transform: scale(1.06); }

.howto { margin-top: 32px; }
.howto h2 { font: 700 20px/1.2 var(--display); margin: 0 0 12px; }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.howto-grid div { padding: 14px 16px; border-radius: var(--r-sm); background: var(--deck); border: 1px solid var(--rail); }
.howto-grid p { margin: 6px 0 0; color: var(--haze); font-size: 14px; line-height: 1.5; }

/* ---------- Loja ---------- */
.lboard-col { width: min(100%, calc(100dvh - 150px), 760px); }
.lwrap { border-radius: 14px; background: #0E1433; }
#board { width: 100%; height: 100%; }
.lboard { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.lb-bg { fill: #151B3D; }
.cell { fill: #E9EDFB; }
.lane { opacity: .92; }
.base { opacity: .95; }
.base-in { fill: #F4F6FF; }
.spot { opacity: .28; }
.tri { opacity: .95; }
.hub { fill: #151B3D; opacity: .25; }
.arrow { fill: none; stroke-width: .1; stroke-linecap: round; stroke-linejoin: round; }
.star { pointer-events: none; }

.tok { transition: transform .11s ease-out; cursor: default; }
.tok-hit { fill: transparent; }
.safe-ring { fill: none; stroke: #FFC24B; stroke-width: .07; pointer-events: none; }
.tok-star { display: none; fill: #FFC24B; stroke: #fff; stroke-width: .035; stroke-linejoin: round; pointer-events: none; }
.tok.safe .tok-star { display: inline; }
.tok-ring { fill: none; stroke: #0B1026; stroke-width: .1; stroke-dasharray: .35 .18; opacity: 0; }
.tok.can { cursor: pointer; }
.tok.can .tok-ring { opacity: 1; animation: ring 1.6s linear infinite; }
@keyframes ring { to { stroke-dashoffset: -1.06; } }
.tok.can:hover .tok-ring { stroke: #E0442F; }
.tok.moving { transition-duration: .09s; }
.tok.hit { transition: transform .25s ease-in; }

/* paneli anësor */
.lplay .side { width: 320px; }
.players { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.players li {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; overflow: hidden;
  padding: 8px 12px 8px 10px; border-radius: 12px; background: var(--deck); border: 1px solid var(--rail);
}
.players li.turn { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc) inset; }
.players li.out { opacity: .55; }
.players .chip { width: 14px; height: 14px; border-radius: 50%; background: var(--pc); flex: none; }
.players .avatar { width: 28px; height: 28px; }
.players .bot { width: 28px; height: 28px; display: grid; place-items: center; font-size: 20px; }
.players .who { min-width: 0; flex: 1; }
.players .nm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.players .rt { color: var(--haze); font-size: 12px; font-weight: 700; }
.players .home { display: flex; gap: 3px; }
.players .home i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--pc); }
.players .home i.in { background: var(--pc); }
.players .timer { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pc); width: 0; }

.dice-row { display: flex; gap: 12px; align-items: stretch; }
.dice-row .status { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dice {
  --pc: var(--chalk); --sz: 52px;
  position: relative; width: 88px; height: 88px; flex: none; border-radius: 18px; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%), var(--deck);
  border: 2px solid color-mix(in srgb, var(--pc) 70%, transparent);
  display: grid; place-items: center; transition: border-color .2s;
}
.dice:disabled { cursor: default; }
.dice.ready { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 60%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
.dice.ready .scene { animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.scene { width: var(--sz); height: var(--sz); perspective: 340px; position: relative; z-index: 1; }
.cube {
  position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(28deg); transition: transform .7s cubic-bezier(.2, .75, .25, 1.05);
}
.dice.rolling .scene { animation: toss .7s ease-out; }
@keyframes toss { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.08); } 70% { transform: translateY(0) scale(.97); } 85% { transform: translateY(-3px); } 100% { transform: none; } }
.df {
  position: absolute; inset: 0; border-radius: 12px; padding: 16%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #F1F3FB 55%, #D5DAEE);
  box-shadow: inset 0 0 0 1px rgba(11,16,38,.08), inset 0 -4px 8px rgba(11,16,38,.12);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  backface-visibility: hidden;
}
.df i { width: 70%; aspect-ratio: 1; place-self: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3A4270, #0B1026 70%); box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.8); }
.f1 { transform: translateZ(calc(var(--sz) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--sz) / 2)); }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--sz) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--sz) / 2)); }
.f2 { transform: rotateX(90deg) translateZ(calc(var(--sz) / 2)); }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--sz) / 2)); }
.f1 i { grid-area: 2 / 2; background: radial-gradient(circle at 35% 30%, #FF8A98, #D92B45 70%); width: 90%; }
.f2 i:nth-child(1) { grid-area: 1 / 1; } .f2 i:nth-child(2) { grid-area: 3 / 3; }
.f3 i:nth-child(1) { grid-area: 1 / 1; } .f3 i:nth-child(2) { grid-area: 2 / 2; } .f3 i:nth-child(3) { grid-area: 3 / 3; }
.f4 i:nth-child(1) { grid-area: 1 / 1; } .f4 i:nth-child(2) { grid-area: 1 / 3; } .f4 i:nth-child(3) { grid-area: 3 / 1; } .f4 i:nth-child(4) { grid-area: 3 / 3; }
.f5 i:nth-child(1) { grid-area: 1 / 1; } .f5 i:nth-child(2) { grid-area: 1 / 3; } .f5 i:nth-child(3) { grid-area: 2 / 2; } .f5 i:nth-child(4) { grid-area: 3 / 1; } .f5 i:nth-child(5) { grid-area: 3 / 3; }
.f6 i:nth-child(1) { grid-area: 1 / 1; } .f6 i:nth-child(2) { grid-area: 2 / 1; } .f6 i:nth-child(3) { grid-area: 3 / 1; } .f6 i:nth-child(4) { grid-area: 1 / 3; } .f6 i:nth-child(5) { grid-area: 2 / 3; } .f6 i:nth-child(6) { grid-area: 3 / 3; }
.floor { position: absolute; left: 20%; right: 20%; bottom: 9px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); }

.lobby-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.lobby-players li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--rail); font-weight: 700; }
.lobby-players li.empty { color: var(--haze); font-weight: 500; border-style: dashed; }
.lobby-players .avatar { width: 24px; height: 24px; }

.standings { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.standings li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--ink); }
.standings li.me { outline: 1px solid var(--gold); }
.standings .pl { font: 700 16px var(--display); width: 26px; color: var(--haze); }
.standings li:first-child .pl { color: var(--gold); }
.standings .chip { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); flex: none; }
.standings .nm { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings .dl { font: 700 14px var(--display); }
.standings .dl.up { color: var(--ok); } .standings .dl.down { color: var(--danger); }

.recent .res-badge.place { background: rgba(141,149,201,.2); color: var(--chalk); }

@media (max-width: 1000px) {
  .howto-grid { grid-template-columns: 1fr 1fr; }
  .lboard-col { width: min(100%, calc(100dvh - 250px), 640px); }
  .lplay .side { width: min(100%, 640px); }
  .players { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .howto-grid { grid-template-columns: 1fr; }
  .lboard-col { width: 100%; }
  .players li { min-height: 44px; padding: 6px 8px; gap: 8px; }
  .players .avatar, .players .bot { display: none; }
  .dice { width: 76px; height: 76px; --sz: 46px; }
}

/* ---------- Tabela 3D ---------- */
.lwrap.b3d { background: radial-gradient(120% 90% at 50% 30%, #26306A 0%, #141A3E 55%, #0B1026 100%); }
.board3d { width: 100%; height: 100%; }
.board3d canvas { display: block; width: 100% !important; height: 100% !important; }