/* ============================================================
   VAIKUNTAPALI — styles. Gold-on-indigo, series palette.
   Everything code-drawn; no images. Responsive desktop+mobile.
   ============================================================ */
:root{
  --indigo:#1a1436;
  --indigo-2:#241a52;
  --gold:#e6b64c;
  --gold-soft:#f3d489;
  --cream:#f7efe0;
  --ochre:#c8792e;
  --green:#6fae8b;      /* ladder */
  --snake:#8a7bd8;      /* snake (soft violet, on-brand) */
  --snake-2:#b3a6ef;
  --ink:#2a2340;
  --shadow:0 6px 20px rgba(0,0,0,.35);
  --sq: min(8.4vmin, 60px);   /* square size, responsive */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family: "Segoe UI", system-ui, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Telugu", sans-serif;
  background: radial-gradient(1200px 800px at 50% -10%, var(--indigo-2), var(--indigo)) fixed;
  color: var(--cream);
  overflow-x:hidden;
}
.hidden{ display:none !important; }

#app{ max-width: 1000px; margin:0 auto; padding: 12px 12px 28px; }

/* ---------- Topbar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:6px 2px 12px; }
.home-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold); text-decoration:none;
  border:1px solid rgba(230,182,76,.5); border-radius:999px;
  padding:6px 14px 6px 10px; font-size:14px; transition:.15s; order:-1;
}
.home-link:hover{ background:var(--gold); color:var(--ink); }
.home-om{ font-size:20px; line-height:1; }
.home-text{ font-weight:600; }
.brand h1{ margin:0; font-size: clamp(22px,4.5vw,34px); color:var(--gold); letter-spacing:.5px; }
.subtitle{ margin:2px 0 0; font-size: clamp(11px,2.6vw,14px); color:#c9bfe0; opacity:.9; }
.lang-switch{ display:flex; gap:6px; }
.lang-btn{
  background:transparent; color:var(--cream); border:1px solid rgba(230,182,76,.5);
  border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; transition:.15s;
}
.lang-btn.is-active{ background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:600; }

/* ---------- Buttons ---------- */
.btn{ border:none; border-radius:12px; padding:12px 18px; font-size:16px; cursor:pointer; transition:transform .08s, filter .15s; }
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary{ background: linear-gradient(180deg,var(--gold-soft),var(--gold)); color:var(--ink); font-weight:700; box-shadow:var(--shadow); }
.btn-ghost{ background: rgba(255,255,255,.06); color:var(--cream); border:1px solid rgba(255,255,255,.15); }
.btn:hover{ filter:brightness(1.05); }

/* ---------- Setup ---------- */
.setup{ text-align:center; padding: 18px 8px; max-width:520px; margin:0 auto; }
.setup-label{ font-size: clamp(16px,3.5vw,20px); color:var(--gold-soft); margin-bottom:14px; }
.pawn-picker{ display:flex; gap:16px; justify-content:center; margin-bottom:16px; }
.pawn-choice{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background: rgba(255,255,255,.05); border:2px solid transparent; border-radius:16px;
  padding:14px 20px; cursor:pointer; color:var(--cream);
}
.pawn-choice.is-active{ border-color:var(--gold); background: rgba(230,182,76,.12); }
.pawn-name{ font-size:14px; }
.calm-toggle{ display:inline-flex; align-items:center; gap:8px; margin:6px 0 18px; font-size:14px; color:#d8cff0; cursor:pointer; }

/* ---------- Pawn previews (code-drawn characters) ---------- */
.pawn-preview{ position:relative; width:40px; height:56px; display:inline-block; }
/* Pawn = simple figure: head + body(dress) + legs, pure CSS */
.pawn{
  position:absolute; width:var(--sq); height:var(--sq); pointer-events:none;
  transition: left .28s cubic-bezier(.34,1.4,.5,1), top .28s cubic-bezier(.34,1.4,.5,1);
  z-index:5; will-change:left,top;
}
.pawn .fig{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%); width:62%; height:82%; }
.pawn .head{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:42%; aspect-ratio:1; border-radius:50%; background:#f0c9a0; border:1.5px solid rgba(0,0,0,.25);
}
.pawn .body{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; height:60%; border-radius:40% 40% 22% 22%;
  border:1.5px solid rgba(0,0,0,.25);
}
.pawn-boy .body,  .pawn.boy  .body{ background: linear-gradient(180deg,#5aa9e6,#3f7fd0); }  /* blue dress */
.pawn-girl .body, .pawn.girl .body{ background: linear-gradient(180deg,#ef8fb4,#d85f92); width:118%; height:66%; } /* pink flared dress */
.pawn .base{ position:absolute; bottom:2%; left:50%; transform:translateX(-50%); width:52%; height:8%; background:rgba(0,0,0,.25); border-radius:50%; filter:blur(1px); }

/* preview uses same pieces, smaller */
.pawn-preview .head{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:#f0c9a0; }
.pawn-preview .body{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:22px; height:28px; border-radius:40% 40% 20% 20%; }
.pawn-boy.pawn-preview::before,.pawn-girl.pawn-preview::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:18px;height:18px;border-radius:50%;background:#f0c9a0; }
.pawn-boy.pawn-preview::after{ content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:22px;height:28px;border-radius:40% 40% 20% 20%; background:linear-gradient(180deg,#5aa9e6,#3f7fd0); }
.pawn-girl.pawn-preview::after{ content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:26px;height:30px;border-radius:40% 40% 18% 18%; background:linear-gradient(180deg,#ef8fb4,#d85f92); }

/* Pawn reactions (CSS-only, cheap) */
.pawn.run   .fig{ animation: hop .28s ease; }
.pawn.excite .fig{ animation: excite .6s ease; }   /* at ladder foot */
.pawn.fear   .fig{ animation: fear .6s ease; }      /* at snake mouth */
@keyframes hop{ 0%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-22%)} 100%{transform:translateX(-50%) translateY(0)} }
@keyframes excite{ 0%,100%{transform:translateX(-50%) translateY(0) rotate(0)} 25%{transform:translateX(-50%) translateY(-30%) rotate(-6deg)} 60%{transform:translateX(-50%) translateY(-14%) rotate(6deg)} }
@keyframes fear{ 0%,100%{transform:translateX(-50%) translateY(0)} 20%{transform:translateX(-56%) translateY(4%)} 40%{transform:translateX(-44%) translateY(4%)} 60%{transform:translateX(-56%) translateY(4%)} 80%{transform:translateX(-44%) translateY(4%)} }

/* ---------- Game layout ---------- */
.game{ display:flex; gap:20px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.board-wrap{ position:relative; }
.board{
  position:relative;
  display:grid; grid-template-columns: repeat(10, var(--sq)); grid-auto-rows: var(--sq);
  border:3px solid var(--gold); border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
  background: var(--indigo-2);
}
.cell{
  position:relative; display:flex; align-items:flex-start; justify-content:flex-start;
  font-size: clamp(8px,1.6vmin,11px); color:rgba(255,255,255,.55); padding:2px 3px;
  border:.5px solid rgba(255,255,255,.06);
}
.cell.dark{ background: rgba(255,255,255,.03); }
.cell.light{ background: rgba(255,255,255,.06); }
.cell .num{ font-variant-numeric:tabular-nums; }
.cell.ladder-foot{ box-shadow: inset 0 0 0 2px rgba(111,174,139,.7); }
.cell.snake-head{ box-shadow: inset 0 0 0 2px rgba(179,166,239,.7); }
.cell.goal{
  background: radial-gradient(circle at 50% 45%, var(--gold-soft), var(--ochre));
  color:var(--ink); font-weight:800;
}
.cell.goal .num{ display:none; }
.cell .goalMark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size: clamp(11px,2.4vmin,16px); }

/* ---------- SVG overlay (snakes + ladders) ---------- */
.overlay{ position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); pointer-events:none; z-index:3; }
.ladder-rail{ stroke: var(--green); stroke-width:.7; stroke-linecap:round; }
.ladder-rung{ stroke: var(--gold-soft); stroke-width:.5; stroke-linecap:round; opacity:.9; }
.snake-body{ fill:none; stroke:var(--snake); stroke-width:1.7; stroke-linecap:round; opacity:.92; filter: drop-shadow(0 0 .4px rgba(0,0,0,.4)); }
.snake-body.wiggle{ animation: wiggle 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes wiggle{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(.5px) } }
.snake-head-dot{ fill:var(--snake-2); }
.snake-eye{ fill:#1a1436; }

/* ---------- HUD ---------- */
.hud{ display:flex; flex-direction:column; gap:12px; min-width:200px; max-width:260px; }
.status{ background: rgba(255,255,255,.06); border-radius:12px; padding:12px 14px; font-size:14px; min-height:48px; }
.die-area{ display:flex; align-items:center; gap:12px; }
.die{
  width:64px; height:64px; border-radius:14px; border:2px solid var(--gold);
  background: linear-gradient(180deg,#fff,#e9e0cc); color:var(--ink);
  font-size:34px; font-weight:800; cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.die.rolling{ animation: roll .5s ease; }
@keyframes roll{ 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(200deg) scale(1.12)} 100%{transform:rotate(360deg) scale(1)} }

/* ---------- Modal (teaching card) ---------- */
.modal{ position:fixed; inset:0; background:rgba(10,7,24,.72); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter: blur(3px); }
.modal-card{ background: linear-gradient(180deg,var(--indigo-2),var(--indigo)); border:2px solid var(--gold); border-radius:18px; padding:22px; max-width:420px; width:100%; text-align:center; box-shadow:var(--shadow); animation: pop .28s cubic-bezier(.34,1.5,.5,1); }
@keyframes pop{ 0%{transform:scale(.85); opacity:0} 100%{transform:scale(1); opacity:1} }
.modal-kind{ font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-soft); }
.modal-name{ margin:.3em 0 .2em; color:var(--gold); font-size: clamp(18px,4vw,24px); }
.modal-text{ color:#e8e0f5; font-size:15px; line-height:1.5; }
.modal-ep{ display:inline-block; margin:10px 0 4px; color:var(--gold-soft); text-decoration:none; border-bottom:1px solid var(--gold-soft); }
.modal-card .btn{ margin-top:16px; }
.modal.win .modal-card{ border-color:var(--gold-soft); }

/* ---------- Responsive: stack HUD under board on mobile ---------- */
@media (max-width: 620px){
  :root{ --sq: 9vmin; }
  .game{ flex-direction:column; align-items:center; }
  .hud{ flex-direction:row; flex-wrap:wrap; max-width: calc(10 * var(--sq)); width:100%; align-items:center; }
  .status{ flex-basis:100%; text-align:center; }
  .die-area{ flex:1; }
}
@media (max-width: 380px){ :root{ --sq: 8.6vmin; } }