/* ════════════════════════════════════════════════════════════
   LUDO ROYALE — carnival board-game night aesthetic
   ════════════════════════════════════════════════════════════ */

:root{
  --red:    #e23b34;
  --red-d:  #a31f1a;
  --green:  #2eab4c;
  --green-d:#1a7531;
  --yellow: #f4b91d;
  --yellow-d:#c08a06;
  --blue:   #2f7bd9;
  --blue-d: #1a4f99;
  --gold:   #f6c94a;
  --cream:  #fdf6e3;
  --ink:    #2b1d12;

  /* theme variables (overridden per theme) */
  --bg1: #0e4429;
  --bg2: #062b18;
  --board-frame: #7a4a21;
  --board-frame-2:#5b3413;
  --board-bg: #fdf6e3;
  --cell-line: #d8c9a3;
  --accent: #f6c94a;
  --pod-bg: rgba(255,255,255,.08);
  --text-on-bg: #fdf6e3;
}

body.theme-midnight{
  --bg1:#1b1035; --bg2:#070314;
  --board-frame:#3a2a6e; --board-frame-2:#221649;
  --board-bg:#171228; --cell-line:#3c2f63;
  --accent:#ff5fd0; --pod-bg:rgba(255,255,255,.06);
  --cream:#171228; --ink:#efe6ff; --text-on-bg:#efe6ff;
}
body.theme-nature{
  --bg1:#27542c; --bg2:#10260f;
  --board-frame:#4c7031; --board-frame-2:#33511d;
  --board-bg:#f3f7dc; --cell-line:#c4d49a;
  --accent:#9adb4f; --text-on-bg:#f3f7dc;
}
body.theme-desert{
  --bg1:#9a6427; --bg2:#4f2c0c;
  --board-frame:#b08230; --board-frame-2:#7c5717;
  --board-bg:#fbeccb; --cell-line:#e0c890;
  --accent:#ffd34d; --text-on-bg:#fbeccb;
}

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

html,body{ height:100%; }

body{
  font-family:'Nunito', sans-serif;
  color:var(--text-on-bg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 10px),
    radial-gradient(ellipse at 50% 120%, var(--bg1), var(--bg2) 75%);
  background-attachment: fixed;
  overflow-x:hidden;
  min-height:100%;
}

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.hidden{ display:none !important; }

.screen{ min-height:100vh; display:flex; flex-direction:column; align-items:center; }

/* ════════════════ MENU ════════════════ */

#menu{ justify-content:center; padding:24px 14px; }

.menu-card{
  width:min(560px, 100%);
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 40%, rgba(0,0,0,.18)),
    rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:30px 30px 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}

.logo-wrap{ text-align:center; margin-bottom:22px; }

.logo-dice{ font-size:26px; letter-spacing:8px; margin-bottom:2px; }
.mini-die{ display:inline-block; animation: bob 2.4s ease-in-out infinite; }
.mini-die.d-red{ color:var(--red); animation-delay:0s; }
.mini-die.d-green{ color:var(--green); animation-delay:.3s; }
.mini-die.d-yellow{ color:var(--yellow); animation-delay:.6s; }
.mini-die.d-blue{ color:var(--blue); animation-delay:.9s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-7px) rotate(8deg);} }

.logo{
  font-family:'Titan One', cursive;
  font-size: clamp(44px, 11vw, 64px);
  line-height:.92;
  letter-spacing:2px;
  color:var(--gold);
  text-shadow: 0 3px 0 #8a5b00, 0 8px 22px rgba(0,0,0,.5);
}
.logo span{
  display:block;
  font-size:.26em;
  letter-spacing:4px;
  padding-left:4px;
  margin-bottom:4px;
  color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.tagline{ margin-top:8px; font-weight:700; opacity:.75; letter-spacing:3px; font-size:12px; text-transform:uppercase; }

.menu-section{ margin-bottom:18px; }
.menu-label{
  font-size:11px; font-weight:900; letter-spacing:3px; text-transform:uppercase;
  opacity:.65; margin-bottom:8px;
}

.mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mode-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:12px 14px; border-radius:16px; text-align:left;
  background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.14);
  transition: all .18s ease;
}
.mode-btn:hover{ background:rgba(255,255,255,.13); transform:translateY(-1px); }
.mode-btn.selected{
  border-color:var(--gold);
  background:linear-gradient(160deg, rgba(246,201,74,.22), rgba(246,201,74,.06));
  box-shadow:0 0 0 1px rgba(246,201,74,.3), 0 6px 18px rgba(0,0,0,.25);
}
.mode-ico{ font-size:22px; }
.mode-name{ font-weight:900; font-size:15px; }
.mode-desc{ font-size:11.5px; opacity:.65; font-weight:600; }

.count-row{ display:flex; gap:10px; margin-bottom:12px; }
.count-btn{
  width:46px; height:46px; border-radius:14px;
  font-family:'Titan One', cursive; font-size:20px; color:#fff;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14);
  transition: all .15s ease;
}
.count-btn:hover{ background:rgba(255,255,255,.14); }
.count-btn.selected{ border-color:var(--gold); color:var(--gold); background:rgba(246,201,74,.12); }

#player-config{ display:flex; flex-direction:column; gap:8px; }
.pc-row{
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:8px 10px;
}
.pc-dot{
  width:26px; height:26px; border-radius:50%; flex:none;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 -4px 6px rgba(0,0,0,.3);
}
.pc-name{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  color:inherit; font-family:inherit; font-weight:800; font-size:15px;
  border-bottom:2px dashed rgba(255,255,255,.18); padding:2px 0;
}
.pc-name:focus{ border-bottom-color:var(--gold); }
.pc-type{
  flex:none; font-weight:900; font-size:12px; letter-spacing:1px;
  padding:7px 12px; border-radius:10px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  transition:all .15s ease; min-width:86px;
}
.pc-type.cpu{ background:rgba(120,90,255,.25); border-color:rgba(150,120,255,.5); }
.pc-type.human{ background:rgba(246,201,74,.18); border-color:rgba(246,201,74,.45); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.rule-row{ display:flex; gap:8px; }
.rule-btn{
  padding:8px 16px; border-radius:11px; font-weight:900; font-size:13px; color:#fff;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14);
}
.rule-btn.selected{ border-color:var(--gold); color:var(--gold); background:rgba(246,201,74,.12); }
.rule-hint{ font-size:11px; opacity:.6; margin-top:7px; font-weight:600; line-height:1.35; }

.theme-row{ display:flex; gap:10px; }
.theme-dot{
  width:38px; height:38px; border-radius:12px;
  border:2px solid rgba(255,255,255,.25);
  transition:all .15s ease;
}
.theme-dot.selected{ border-color:#fff; transform:scale(1.12); box-shadow:0 0 0 3px rgba(246,201,74,.55); }
.t-classic{ background:linear-gradient(135deg,#0e4429 50%, #fdf6e3 50%); }
.t-midnight{ background:linear-gradient(135deg,#1b1035 50%, #ff5fd0 50%); }
.t-nature{ background:linear-gradient(135deg,#27542c 50%, #9adb4f 50%); }
.t-desert{ background:linear-gradient(135deg,#9a6427 50%, #ffd34d 50%); }

#play-btn{
  width:100%; margin-top:6px;
  font-family:'Titan One', cursive; font-size:26px; letter-spacing:4px; color:#5b3413;
  padding:15px; border-radius:18px;
  background:linear-gradient(180deg, #ffe28a, var(--gold) 50%, #d9a51f);
  box-shadow: 0 6px 0 #8a5b00, 0 14px 30px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.7);
  transition: transform .1s ease, box-shadow .1s ease;
}
#play-btn:hover{ filter:brightness(1.05); }
#play-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #8a5b00, 0 8px 18px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.7); }

.menu-foot{ display:flex; justify-content:space-between; margin-top:16px; }
.foot-btn{ font-weight:800; font-size:12.5px; opacity:.7; padding:6px 8px; border-radius:8px; }
.foot-btn:hover{ opacity:1; background:rgba(255,255,255,.08); }

/* ════════════════ GAME SCREEN ════════════════ */

#game{ padding:10px 8px 18px; }

#game-header{
  width:min(770px,100%);
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px 10px;
}
.hdr-btn{
  font-weight:900; font-size:14px; padding:8px 14px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.16);
}
.hdr-btn:hover{ background:rgba(0,0,0,.45); }
#turn-banner{
  font-family:'Titan One', cursive; font-size:clamp(15px,4vw,21px); letter-spacing:1px;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  transition: color .25s ease;
}

#arena{
  width:min(770px, 100%);
  display:flex; flex-direction:column; gap:8px;
  align-items:center;
}

.pod-row{ width:100%; display:flex; justify-content:space-between; gap:10px; }

/* ── player pods ── */
.pod{
  flex:0 1 auto; max-width:46%;
  display:flex; align-items:center; gap:7px;
  background:var(--pod-bg);
  border:2px solid rgba(255,255,255,.13);
  border-radius:12px;
  padding:4px 10px;
  min-height:38px;
  opacity:.55;
  transition: all .25s ease;
  position:relative;
}
.pod.inactive-slot{ visibility:hidden; }
.pod.active{
  opacity:1;
  border-color:var(--pod-color, var(--gold));
  box-shadow:0 0 0 2px var(--pod-color, var(--gold)), 0 0 26px -4px var(--pod-color, var(--gold)), 0 8px 24px rgba(0,0,0,.35);
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
}
.pod.finished{ opacity:.85; }
.pod-row:last-child .pod{ flex-direction:row; }
.pod .pod-avatar{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  background:var(--pod-color);
  border:2px solid rgba(255,255,255,.85);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.4);
}
.pod-mid{ flex:1; min-width:0; }
.pod-name{
  font-weight:900; font-size:11.5px; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pod-sub{ font-size:9px; font-weight:700; opacity:.65; display:flex; align-items:center; gap:4px; }
.pod-homes{ display:inline-flex; gap:2px; }
.home-pip{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
}
.home-pip.done{ background:var(--pod-color); border-color:#fff; box-shadow:0 0 5px var(--pod-color); }
.pod-rank{
  position:absolute; top:-9px; right:-5px; font-size:15px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

/* ── centre dice ── */
#die-anchor{
  position:absolute; left:50%; top:50%;
  width:11%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:6;
}
.die{
  width:100%; height:100%;
  border-radius:20%;
  --die-base:#f3eee0;
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--die-base), white 45%),
    var(--die-base) 55%,
    color-mix(in srgb, var(--die-base), black 25%));
  border:2px solid rgba(255,255,255,.8);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.55), 0 6px 16px rgba(0,0,0,.5);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:14%; gap:4%;
  transition: transform .15s ease, background .25s ease;
}
.die.clickable{ cursor:pointer; animation: dice-pulse 1s ease-in-out infinite; }
.die.clickable:hover{ transform:scale(1.1) rotate(6deg); animation-play-state:paused; }
@keyframes dice-pulse{
  0%,100%{ box-shadow: inset 0 -4px 6px rgba(0,0,0,.22), inset 0 2px 2px rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(246,201,74,.8); }
  50%{ box-shadow: inset 0 -4px 6px rgba(0,0,0,.22), inset 0 2px 2px rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.45), 0 0 0 9px rgba(246,201,74,0); }
}
.die.rolling{ animation: dice-roll .45s linear infinite; }
@keyframes dice-roll{
  0%{ transform:rotate(0) scale(1.05);}
  25%{ transform:rotate(90deg) scale(.95);}
  50%{ transform:rotate(180deg) scale(1.08);}
  75%{ transform:rotate(270deg) scale(.95);}
  100%{ transform:rotate(360deg) scale(1.05);}
}
.pip{ border-radius:50%; background:transparent; }
.pip.on{
  background:radial-gradient(circle at 35% 30%, #ffffff, #e2ddd0 75%);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 -1px 1px rgba(0,0,0,.18);
}

/* ════════════════ BOARD ════════════════ */

#board{
  position:relative;
  width:min(96vw, 720px, calc(100vh - 185px));
  min-width:280px;
  aspect-ratio:1;
  background:var(--board-bg);
  border-radius:14px;
  border:6px solid var(--board-frame);
  outline:3px solid var(--board-frame-2);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.12);
}

#board-static{ position:absolute; inset:0; border-radius:8px; overflow:hidden; }
#token-layer{ position:absolute; inset:0; pointer-events:none; }

/* track cells */
.cell{
  position:absolute;
  background:var(--board-bg);
  border:1px solid var(--cell-line);
  display:flex; align-items:center; justify-content:center;
}
.cell .star{
  width:62%; height:62%; opacity:.55;
}
.cell .star path{ fill:none; stroke:#8a7c55; stroke-width:6; stroke-linejoin:round; }
body.theme-midnight .cell .star path{ stroke:#8f7fd0; }
.cell.c-red{ background:var(--red); border-color:var(--red-d); }
.cell.c-green{ background:var(--green); border-color:var(--green-d); }
.cell.c-yellow{ background:var(--yellow); border-color:var(--yellow-d); }
.cell.c-blue{ background:var(--blue); border-color:var(--blue-d); }
.cell.c-red .star path, .cell.c-green .star path, .cell.c-yellow .star path, .cell.c-blue .star path{ stroke:rgba(255,255,255,.8); }
.cell .arrow{ font-size:1em; font-weight:900; color:rgba(255,255,255,.9); line-height:1; }

/* yards */
.yard{
  position:absolute; width:40%; height:40%;
  display:flex; align-items:center; justify-content:center;
}
.yard.y-red{ left:0; top:0; background:var(--red); }
.yard.y-green{ right:0; top:0; background:var(--green); }
.yard.y-yellow{ right:0; bottom:0; background:var(--yellow); }
.yard.y-blue{ left:0; bottom:0; background:var(--blue); }
.yard-inner{
  width:66%; height:66%; border-radius:16%;
  background:var(--board-bg);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.25);
}
.yard-slot{
  position:absolute; border-radius:50%;
  width:4.2%; height:4.2%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.10);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}

/* center home */
#center-svg{ position:absolute; left:40%; top:40%; width:20%; height:20%; }

/* ── tokens ── */
.token{
  position:absolute;
  width:5.6%; height:5.6%;
  transform:translate(-50%,-50%);
  transition: left .16s ease, top .16s ease, transform .18s ease;
  pointer-events:auto;
  cursor:default;
  z-index:5;
}
.token-body{
  width:100%; height:100%;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.92);
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 -5px 8px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.45);
  position:relative;
}
.token-body::after{
  content:''; position:absolute; left:27%; top:27%; width:46%; height:46%;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, #e8e2d2 65%, #cfc6ae);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25);
}
.token.red .token-body{ background:radial-gradient(circle at 35% 28%, #ff8d83, var(--red) 55%, var(--red-d)); }
.token.green .token-body{ background:radial-gradient(circle at 35% 28%, #7fe097, var(--green) 55%, var(--green-d)); }
.token.yellow .token-body{ background:radial-gradient(circle at 35% 28%, #ffe08a, var(--yellow) 55%, var(--yellow-d)); }
.token.blue .token-body{ background:radial-gradient(circle at 35% 28%, #86b8ff, var(--blue) 55%, var(--blue-d)); }

.token.movable{ cursor:pointer; z-index:8; }
.token.movable .token-body{ animation: tok-pulse .75s ease-in-out infinite; }
@keyframes tok-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 -5px 8px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.45), 0 0 0 0 rgba(255,255,255,.95); }
  50%{ transform:scale(1.18); box-shadow:0 5px 10px rgba(0,0,0,.5), inset 0 -5px 8px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.45), 0 0 0 6px rgba(255,255,255,0); }
}
.token.hopping{ transition: left .17s cubic-bezier(.3,.6,.4,1), top .17s cubic-bezier(.3,.6,.4,1); z-index:9; }
.token.finished{ width:3.4%; height:3.4%; opacity:.95; z-index:4; }
.token.captured-anim{ transition: left .5s cubic-bezier(.5,-.3,.5,1.3), top .5s cubic-bezier(.5,-.3,.5,1.3); }

/* ════════════════ TOAST ════════════════ */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:rgba(8,8,12,.88); color:#fff;
  font-weight:800; font-size:14.5px; letter-spacing:.3px;
  padding:11px 22px; border-radius:30px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
  z-index:60; max-width:88vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ════════════════ OVERLAY ════════════════ */
#overlay{
  position:fixed; inset:0; z-index:80;
  background:rgba(4,6,10,.72);
  backdrop-filter: blur(5px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation: fade-in .3s ease;
}
@keyframes fade-in{ from{opacity:0;} to{opacity:1;} }
#overlay-card{
  width:min(440px,100%);
  background:linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.04)), #181320;
  border:1px solid rgba(255,255,255,.2);
  border-radius:24px;
  padding:30px 28px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation: card-pop .4s cubic-bezier(.2,1.4,.4,1);
  color:#fff;
}
@keyframes card-pop{ from{ transform:scale(.7); opacity:0;} to{ transform:scale(1); opacity:1;} }
.ov-title{
  font-family:'Titan One', cursive; font-size:34px; color:var(--gold);
  text-shadow:0 3px 0 #8a5b00, 0 8px 20px rgba(0,0,0,.5);
  margin-bottom:4px;
}
.ov-sub{ font-weight:700; opacity:.75; margin-bottom:18px; }
.rank-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.rank-item{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:10px 14px;
  font-weight:800; font-size:15px;
}
.rank-item .medal{ font-size:22px; width:30px; }
.rank-item .rdot{
  width:18px; height:18px; border-radius:50%; border:2px solid #fff;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.rank-item .rname{ flex:1; text-align:left; }
.ov-btns{ display:flex; gap:10px; }
.ov-btn{
  flex:1; padding:13px; border-radius:14px;
  font-weight:900; font-size:15px; letter-spacing:1px; color:#fff;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
  transition: all .15s ease;
}
.ov-btn:hover{ background:rgba(255,255,255,.18); }
.ov-btn.primary{
  background:linear-gradient(180deg, #ffe28a, var(--gold) 55%, #d9a51f);
  color:#5b3413; border-color:transparent;
  box-shadow:0 4px 0 #8a5b00;
}
.ov-btn.primary:hover{ filter:brightness(1.06); }

.rules-body{ text-align:left; font-size:13.5px; font-weight:600; line-height:1.55; opacity:.9; margin-bottom:20px; }
.rules-body li{ margin:6px 0 6px 18px; }
.rules-body b{ color:var(--gold); }

/* ════════════════ CONFETTI ════════════════ */
#confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden; }
.confetti{
  position:absolute; top:-14px;
  width:10px; height:14px;
  animation: conf-fall linear forwards;
}
@keyframes conf-fall{
  to{ transform:translateY(108vh) rotate(720deg); opacity:.8; }
}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width:520px){
  .menu-card{ padding:22px 18px; }
  .two-col{ grid-template-columns:1fr; }
  .pod{ min-height:32px; padding:3px 8px; gap:6px; }
  .pod .pod-avatar{ width:22px; height:22px; font-size:12px; }
  .pod-name{ font-size:10.5px; }
  .pod-sub{ font-size:8px; }
}