/* Ludo styling — reuses the theme variables from line_escape.css. */

.ludo-wrap { max-width: 520px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom)); color: var(--text); }

.ludo-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ludo-topbar a.back {
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
  background: var(--btn); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 12px;
}
.ludo-topbar a.back:active { transform: translateY(1px); }
.ludo-title { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }

.ludo-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); vertical-align: -2px; }

/* setup */
#ludo-setup { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.ludo-h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.ludo-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ludo-seg button {
  background: var(--btn); color: var(--muted); border: 1px solid var(--line2);
  border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ludo-seg button.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.ludo-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.ludo-field { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.ludo-field label { font-size: 13px; color: var(--muted2); min-width: 60px; }
#ludo-names { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ludo-name-row { display: flex; align-items: center; gap: 10px; }
.ludo-name-row input {
  flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line2);
  border-radius: 8px; padding: 8px 10px; font-size:var(--fld-fs,14px);
}
.ludo-name-ai { color: var(--muted2); font-size: 14px; }
.ludo-note { color: var(--muted2); font-size: 13px; margin: 14px 0 4px; min-height: 18px; }
.ludo-setup-row { display: flex; gap: 8px; margin: 8px 0 4px; }
.ludo-ghost {
  flex: 1; background: var(--btn); color: var(--muted); border: 1px solid var(--line2);
  border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ludo-start {
  margin-top: 10px; width: 100%; background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 10px; padding: 13px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ludo-start:active { transform: translateY(1px); }

/* game */
#ludo-status { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.ludo-board-wrap { display: flex; justify-content: center; }
#ludo-board { border-radius: 12px; touch-action: manipulation; max-width: 100%; }
#ludo-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
#ludo-roll { background: var(--accent); color: var(--accent-fg); border: none; border-radius: 10px; padding: 12px 22px; font-size: 16px; font-weight: 700; cursor: pointer; }
#ludo-roll:disabled { opacity: 0.4; cursor: default; }
#ludo-roll:not(:disabled):active { transform: translateY(1px); }
.ludo-die-box { background: var(--btn); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 12px; font-size: 14px; color: var(--muted); }
.ludo-die-box #ludo-die { color: var(--accent); font-weight: 800; font-size: 18px; margin-left: 4px; }
#ludo-controls .ghost { background: var(--btn); color: var(--muted); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
#ludo-msg { font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; margin-top: 8px; }

/* win */
#ludo-win { position: fixed; inset: 0; background: var(--backdrop2); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
#ludo-win.hidden { display: none; }
.ludo-win-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 28px 32px; text-align: center; max-width: 320px; width: 100%; }
.ludo-win-title { font-size: 26px; font-weight: 800; margin-bottom: 18px; }
.ludo-win-card button { background: var(--accent); color: var(--accent-fg); border: none; border-radius: 10px; padding: 12px 24px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }

/* modal (settings / help) */
#ludo-modal { position: fixed; inset: 0; background: var(--backdrop2); display: flex; align-items: center; justify-content: center; z-index: 55; padding: 20px; }
#ludo-modal.hidden { display: none; }
.ludo-modal-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 18px 20px; width: 100%; max-width: 380px; max-height: 84vh; overflow-y: auto; }
.ludo-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ludo-modal-title { font-size: 18px; font-weight: 700; color: var(--text); }
.ludo-modal-close { background: var(--btn); color: var(--muted); border: 1px solid var(--line2); border-radius: 8px; width: 32px; height: 32px; font-size: 15px; cursor: pointer; }
.ludo-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.ludo-set-row label { flex: 1; }
.ludo-set-row select { background: var(--bg); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; font-size:var(--fld-fs,14px); }
.ludo-set-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.ludo-modal-ok { margin-top: 14px; width: 100%; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 10px; padding: 11px; font-size: 15px; font-weight: 700; cursor: pointer; }
.ludo-help { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.ludo-help li { margin-bottom: 8px; }
.ludo-help b { color: var(--accent); }

.ludo-note-guest { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted2); }
.ludo-note-guest a { color: var(--accent); }
.hidden { display: none !important; }

/* online */
.ludo-online-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center; }
.ludo-or { color: var(--muted2); font-size: 13px; margin: 12px 0; }
.ludo-join-row { display: flex; gap: 8px; }
.ludo-join-row input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; text-align: center; }
.ludo-code { font-size: 34px; font-weight: 800; letter-spacing: 6px; color: var(--accent); margin: 6px 0 12px; }
.ludo-lobby-players { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; text-align: left; }
.lo-player { display: flex; align-items: center; gap: 10px; background: var(--btn); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; font-size: 14px; color: var(--text); }
.ludo-lb { width: 100%; border-collapse: collapse; font-size: 14px; }
.ludo-lb th { color: var(--muted2); font-size: 12px; text-align: left; padding: 4px 6px; }
.ludo-lb td { padding: 5px 6px; border-bottom: 1px solid var(--line); color: var(--muted); }
.ludo-lb td:first-child { width: 34px; color: var(--muted2); }
.ludo-lb tr.me td { color: var(--accent); font-weight: 700; }
.ludo-lb .flag { width: 16px; height: 12px; vertical-align: middle; border-radius: 2px; }

/* final standings */
#ludo-standings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; }
.ludo-rank-row { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); background: var(--btn); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; }
.ludo-rank-row .m { min-width: 22px; font-size: 16px; }
.ludo-rank-row .nm { flex: 1; font-weight: 600; }
.ludo-rank-row .loser { font-size: 12px; color: var(--muted2); }

/* current player's turn — pulse the action buttons (not the board) */
@keyframes ludoTurnPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.18); } }
#ludo-controls.ludo-myturn #ludo-roll:not(:disabled) { animation: ludoTurnPulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
#ludo-controls.ludo-myturn #ludo-skip:not(.hidden) { animation: ludoTurnPulse 1.1s ease-in-out infinite; }

/* ============================================================ V2 (v321) */
:root{
  --lg-red:#ef4d5a; --lg-green:#2fbf71; --lg-blue:#3a8dff; --lg-yellow:#ffc531;
}
/* lively background behind the whole tool */
.ludo-wrap{position:relative;z-index:1;}
.ludo-wrap::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(58,141,255,.16), transparent 60%),
    radial-gradient(55% 45% at 85% 20%, rgba(47,191,113,.15), transparent 60%),
    radial-gradient(60% 55% at 80% 88%, rgba(239,77,90,.14), transparent 60%),
    radial-gradient(55% 50% at 15% 85%, rgba(255,197,49,.13), transparent 60%);
}
@keyframes ludoBlob{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14px,-18px) scale(1.08);}}
.ludo-wrap::after{
  content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(14px 14px at 20% 30%, rgba(255,255,255,.06), transparent 60%),
             radial-gradient(10px 10px at 70% 60%, rgba(255,255,255,.05), transparent 60%),
             radial-gradient(12px 12px at 45% 80%, rgba(255,255,255,.05), transparent 60%);
  animation:ludoBlob 14s ease-in-out infinite;
}

/* board wrap becomes the anchor for overlays */
.ludo-board-wrap{position:relative;}
#ludo-board{box-shadow:0 18px 44px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.06) inset;transition:box-shadow .2s;}
#ludo-fx{position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none;z-index:5;}
.ludo-shake{animation:ludoShake .32s ease;}
@keyframes ludoShake{10%{transform:translate(-3px,2px);}30%{transform:translate(4px,-3px);}50%{transform:translate(-4px,2px);}70%{transform:translate(3px,3px);}90%{transform:translate(-2px,-2px);}}

/* ---- 3D dice ---- */
#ludo-dice-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:8;perspective:640px;}
.ludo-die3d{
  --die-size:64px; --dh:calc(var(--die-size)/2);
  position:absolute;left:0;top:0;width:var(--die-size);height:var(--die-size);
  transform-style:preserve-3d;will-change:transform;
  transform:translate3d(0,0,0) rotateX(-24deg) rotateY(24deg);
}
.die-face{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:14%;box-sizing:border-box;border-radius:16%;
  background:linear-gradient(145deg,#ffffff 0%,#f1f1ec 60%,#dcdcd4 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 6px 10px rgba(255,255,255,.7), inset 0 -8px 12px rgba(0,0,0,.12);
  backface-visibility:hidden;
}
.die-face .pip{align-self:center;justify-self:center;width:74%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a4a4a, #0b0b0b 70%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.35);}
.die-f1{transform:translateZ(var(--dh));}
.die-f6{transform:rotateY(180deg) translateZ(var(--dh));}
.die-f3{transform:rotateY(90deg) translateZ(var(--dh));}
.die-f4{transform:rotateY(-90deg) translateZ(var(--dh));}
.die-f5{transform:rotateX(90deg) translateZ(var(--dh));}
.die-f2{transform:rotateX(-90deg) translateZ(var(--dh));}
/* pip layouts */
.die-f1 .pip:nth-child(1){grid-area:2/2;}
.die-f2 .pip:nth-child(1){grid-area:1/1;} .die-f2 .pip:nth-child(2){grid-area:3/3;}
.die-f3 .pip:nth-child(1){grid-area:1/1;} .die-f3 .pip:nth-child(2){grid-area:2/2;} .die-f3 .pip:nth-child(3){grid-area:3/3;}
.die-f4 .pip:nth-child(1){grid-area:1/1;} .die-f4 .pip:nth-child(2){grid-area:1/3;} .die-f4 .pip:nth-child(3){grid-area:3/1;} .die-f4 .pip:nth-child(4){grid-area:3/3;}
.die-f5 .pip:nth-child(1){grid-area:1/1;} .die-f5 .pip:nth-child(2){grid-area:1/3;} .die-f5 .pip:nth-child(3){grid-area:2/2;} .die-f5 .pip:nth-child(4){grid-area:3/1;} .die-f5 .pip:nth-child(5){grid-area:3/3;}
.die-f6 .pip:nth-child(1){grid-area:1/1;} .die-f6 .pip:nth-child(2){grid-area:1/3;} .die-f6 .pip:nth-child(3){grid-area:2/1;} .die-f6 .pip:nth-child(4){grid-area:2/3;} .die-f6 .pip:nth-child(5){grid-area:3/1;} .die-f6 .pip:nth-child(6){grid-area:3/3;}
#ludo-die-shadow{position:absolute;left:0;top:0;width:var(--die-size,64px);height:calc(var(--die-size,64px)*.4);
  border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 70%);will-change:transform,opacity;transform:translate3d(0,0,0);}
.ludo-die3d.rolling{cursor:default;}
.ludo-die3d.landed{animation:dieLand .26s ease;}
@keyframes dieLand{0%{transform:var(--land-t) scale(1.14,.86);}60%{transform:var(--land-t) scale(.95,1.06);}100%{transform:var(--land-t) scale(1,1);}}

/* ---- turn banner ---- */
#ludo-turn-banner{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 10px;max-width:280px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 18px;font-weight:800;font-size:16px;color:var(--text);
  backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.28);}
#ludo-turn-banner.show{animation:ltbIn .5s cubic-bezier(.2,.9,.3,1.4);}
#ludo-turn-banner .ltb-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 10px 1px currentColor;}
@keyframes ltbIn{0%{opacity:0;transform:translateY(-14px) scale(.9);}60%{opacity:1;transform:translateY(0) scale(1.06);}100%{transform:scale(1);}}

/* ---- premium buttons (glassmorphism) ---- */
#ludo-roll{
  display:inline-flex;align-items:center;gap:9px;padding:14px 30px;font-size:18px;border-radius:16px;
  background:linear-gradient(160deg, var(--roll-c1,#ffcf5c), var(--roll-c2,#e0a833));
  color:#1c1400;box-shadow:0 10px 24px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.18);
  transition:transform .1s, box-shadow .15s, filter .15s;letter-spacing:.3px;
}
#ludo-roll .lr-ico{font-size:20px;display:inline-block;}
#ludo-roll:not(:disabled):hover{filter:brightness(1.05);}
#ludo-roll:not(:disabled):active{transform:translateY(2px) scale(.98);box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.4);}
#ludo-controls.ludo-myturn #ludo-roll:not(:disabled) .lr-ico{animation:diceWiggle 1.1s ease-in-out infinite;}
@keyframes diceWiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-16deg);}75%{transform:rotate(16deg);}}
#ludo-controls .ghost{background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);transition:transform .1s, filter .15s;}
#ludo-controls .ghost:active{transform:translateY(1px) scale(.98);}
.ludo-start,.ludo-modal-ok,.ludo-win-card button{transition:transform .1s, filter .15s;}
.ludo-start:hover,.ludo-modal-ok:hover{filter:brightness(1.06);}
.ludo-seg button{transition:transform .1s, filter .15s;}
.ludo-seg button.active{box-shadow:0 4px 12px rgba(0,0,0,.25);}

/* ---- win: confetti + trophy ---- */
#ludo-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.ludo-trophy{font-size:56px;line-height:1;margin-bottom:6px;animation:trophyPop .6s cubic-bezier(.2,.9,.3,1.5) both;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));}
@keyframes trophyPop{0%{transform:scale(0) rotate(-30deg);}70%{transform:scale(1.2) rotate(8deg);}100%{transform:scale(1) rotate(0);}}
.ludo-win-card{animation:winCardIn .45s cubic-bezier(.2,.9,.3,1.35) both;box-shadow:0 24px 60px rgba(0,0,0,.5);}
@keyframes winCardIn{0%{opacity:0;transform:translateY(24px) scale(.92);}100%{opacity:1;transform:none;}}

/* ---- responsive ---- */
@media (max-width:430px){
  #ludo-roll{padding:13px 24px;font-size:17px;}
  #ludo-controls{gap:8px;}
  #ludo-controls .ghost{padding:10px 12px;}
}
@media (max-height:560px) and (orientation:landscape){
  .ludo-title{font-size:17px;} #ludo-status{font-size:14px;margin-bottom:6px;}
  #ludo-turn-banner{margin-bottom:6px;padding:6px 14px;font-size:14px;}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .ludo-wrap::after,#ludo-turn-banner.show,.ludo-trophy,.ludo-win-card,.ludo-die3d.landed,
  #ludo-controls.ludo-myturn #ludo-roll:not(:disabled) .lr-ico{animation:none !important;}
}

/* v325: dice skins */
.ludo-die3d.skin-dark .die-face{ background:linear-gradient(145deg,#3a3f45 0%,#23272c 60%,#15181b 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 6px 10px rgba(255,255,255,.10), inset 0 -8px 12px rgba(0,0,0,.42); }
.ludo-die3d.skin-dark .pip{ background:radial-gradient(circle at 35% 30%, #ffffff, #cfd3d8 70%); box-shadow:inset 0 1px 1px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.4); }
.ludo-die3d.skin-gold .die-face{ background:linear-gradient(145deg,#ffe9a8 0%,#f2c94c 55%,#c9971f 100%); box-shadow:inset 0 0 0 1px rgba(120,80,0,.2), inset 0 6px 10px rgba(255,255,255,.5), inset 0 -8px 12px rgba(120,80,0,.28); }
.ludo-die3d.skin-gold .pip{ background:radial-gradient(circle at 35% 30%, #5a4a12, #221a03 70%); }

/* v332: more dice skins */
.ludo-die3d.skin-ruby .die-face{ background:linear-gradient(145deg,#ff8a99 0%,#e23b52 55%,#9e1830 100%); box-shadow:inset 0 0 0 1px rgba(120,0,20,.2), inset 0 6px 10px rgba(255,255,255,.4), inset 0 -8px 12px rgba(90,0,20,.3); }
.ludo-die3d.skin-ruby .pip{ background:radial-gradient(circle at 35% 30%, #ffffff, #ffd0d8 70%); }
.ludo-die3d.skin-emerald .die-face{ background:linear-gradient(145deg,#8ff0c0 0%,#2fbf71 55%,#137a45 100%); box-shadow:inset 0 0 0 1px rgba(0,60,30,.2), inset 0 6px 10px rgba(255,255,255,.4), inset 0 -8px 12px rgba(0,50,25,.3); }
.ludo-die3d.skin-emerald .pip{ background:radial-gradient(circle at 35% 30%, #ffffff, #d6ffe8 70%); }
.ludo-die3d.skin-sapphire .die-face{ background:linear-gradient(145deg,#9cc7ff 0%,#3a8dff 55%,#1a4fa8 100%); box-shadow:inset 0 0 0 1px rgba(0,30,90,.2), inset 0 6px 10px rgba(255,255,255,.4), inset 0 -8px 12px rgba(0,20,70,.3); }
.ludo-die3d.skin-sapphire .pip{ background:radial-gradient(circle at 35% 30%, #ffffff, #d6e8ff 70%); }