/* TrainWALA — UI styles. Train / Indian-railway palette. Newcomer-first. */
:root {
  --indigo:#2c3e9e; --indigo-d:#20296b; --indigo-l:#e9ecff;
  --food:#379048; --drink:#4884c9; --timepass:#d67828;
  --food-l:#e4f3e7; --drink-l:#e6effa; --timepass-l:#faeede;
  --ink:#1d2233; --muted:#6b7189; --line:#dfe3ee; --bg:#f4f6fc;
  --paper:#ffffff; --gold:#e0a020; --red:#e23b3b; --green-go:#4caf3f; --red-halt:#e2493b;
  --shadow:0 2px 6px rgba(30,40,90,.08), 0 8px 24px rgba(30,40,90,.08);
  --radius:14px;
  --p0:#e23b3b; --p1:#2f7de1; --p2:#37a852; --p3:#e0a020; --p4:#8e44ad; --p5:#16a596;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Nunito',system-ui,sans-serif; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:'Baloo 2',system-ui,sans-serif; margin:0; line-height:1.15; }
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.screen { min-height:100vh; }

/* ---------------- buttons ---------------- */
.btn { border:1px solid var(--line); background:var(--paper); color:var(--ink);
  padding:.5rem .85rem; border-radius:10px; font-weight:700; font-size:.92rem; transition:.12s; }
.btn:hover { border-color:var(--indigo); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.btn-primary:hover { background:var(--indigo-d); }
.btn-ghost { background:transparent; }
.btn-big { padding:.8rem 1.4rem; font-size:1.05rem; width:100%; margin-top:.5rem; }
.btn-go { background:var(--green-go); color:#fff; border-color:var(--green-go); }
.btn-sell { background:var(--gold); color:#3a2a00; border-color:var(--gold); }
.btn-danger { background:var(--red); color:#fff; border-color:var(--red); }
.btn-warn { background:#c9791f; color:#fff; border-color:#c9791f; }

/* ---------------- setup ---------------- */
#setup { display:flex; align-items:center; justify-content:center; padding:2rem 1rem;
  background:radial-gradient(1200px 600px at 50% -10%, #dfe6ff 0%, var(--bg) 60%); }
.setup-card { background:var(--paper); border-radius:20px; box-shadow:var(--shadow);
  max-width:640px; width:100%; padding:2rem; border:1px solid var(--line); }
.brand { display:flex; gap:1rem; align-items:center; margin-bottom:1.5rem; }
.brand-mark { font-size:2.6rem; }
.brand-mark.small { font-size:1.3rem; }
.setup-card h1 { font-size:2.2rem; color:var(--indigo); letter-spacing:-.5px; }
.tagline { color:var(--muted); margin:.25rem 0 0; font-size:.98rem; }
.field { margin-bottom:1.4rem; }
.field > label { display:block; font-weight:800; margin-bottom:.5rem; }
.chip-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip { border:2px solid var(--line); background:var(--paper); border-radius:12px;
  padding:.5rem 1rem; font-weight:800; font-size:1.05rem; min-width:3rem; }
.chip.active { border-color:var(--indigo); background:var(--indigo-l); color:var(--indigo); }
.hint { color:var(--muted); font-size:.85rem; margin:.5rem 0 0; }
.player-rows { display:flex; flex-direction:column; gap:.6rem; }
.player-row { display:flex; gap:.6rem; align-items:center; }
.player-row .dot { width:1.1rem; height:1.1rem; border-radius:50%; flex:0 0 auto; }
.player-row input[type=text] { flex:1; padding:.5rem .7rem; border:1px solid var(--line);
  border-radius:9px; font-size:.95rem; font-family:inherit; }
.player-row select { padding:.5rem; border:1px solid var(--line); border-radius:9px; font-family:inherit; }
.advanced { margin-bottom:1rem; }
.advanced summary { cursor:pointer; font-weight:700; color:var(--muted); }
.adv-grid { padding:.8rem 0; }
.adv-grid label { display:block; font-weight:700; font-size:.9rem; }
.adv-grid input { margin-top:.3rem; padding:.5rem; border:1px solid var(--line); border-radius:8px; width:12rem; }
.fineprint { text-align:center; color:var(--muted); font-size:.78rem; margin:.9rem 0 0; }

/* ---------------- top bar ---------------- */
.topbar { display:flex; align-items:center; gap:1rem; padding:.6rem 1rem;
  background:var(--indigo); color:#fff; position:sticky; top:0; z-index:20; }
.topbar-left { display:flex; align-items:center; gap:.5rem; font-size:1.1rem; }
.topbar-right { display:flex; gap:.5rem; margin-left:auto; }
.topbar-right .btn { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.25); }
.topbar-right .btn:hover { background:rgba(255,255,255,.22); }
.phase-strip { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-weight:700; font-size:.9rem; }
.phase-pill { background:rgba(255,255,255,.14); padding:.28rem .7rem; border-radius:20px; }
.phase-pill b { font-weight:800; }

/* ---------------- layout ---------------- */
.layout { display:grid; grid-template-columns:1fr 360px; gap:1rem; padding:1rem;
  max-width:1280px; margin:0 auto; align-items:start; }
.board-col { display:flex; flex-direction:column; gap:.8rem; }
.side-col { display:flex; flex-direction:column; gap:.8rem; position:sticky; top:56px; }

/* ---------------- signal tracker ---------------- */
.signal-tracker { display:flex; align-items:center; gap:.6rem; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:.6rem .9rem; box-shadow:var(--shadow); }
.signal-tracker .lbl { font-weight:800; color:var(--muted); font-size:.85rem; margin-right:.2rem; }
.sig { width:2.1rem; height:2.1rem; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.7rem; color:#fff; border:2px solid transparent; }
.sig.halt { background:var(--red-halt); }
.sig.go { background:var(--green-go); }
.sig.pending { background:#c9cee0; color:#5a6178; }
.sig.current { border-color:var(--ink); box-shadow:0 0 0 3px rgba(29,34,51,.12); }
.go-warn { color:var(--red); font-weight:800; font-size:.85rem; margin-left:auto; }

/* ---------------- board ---------------- */
.board { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow); }
.rail { height:8px; border-radius:4px; background:repeating-linear-gradient(90deg,#b9c0d8 0 14px,#eef1f9 14px 20px);
  margin:.5rem 0 1rem; }
.track { display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:stretch; }
.platform { background:var(--indigo-l); border:2px solid #c7cdf5; border-radius:12px; padding:.8rem;
  min-width:120px; display:flex; flex-direction:column; }
.platform h4 { color:var(--indigo); font-size:1rem; }
.platform .sub { font-size:.72rem; color:var(--muted); margin-bottom:.5rem; }
.compartment { border:2px solid var(--line); border-radius:12px; overflow:hidden; }
.twin-stack { display:grid; grid-template-rows:1fr 1fr; gap:.8rem; min-width:0; }
.comp-head { display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; background:#eef1fb; border-bottom:1px solid var(--line); }
.comp-head h3 { color:var(--indigo); font-size:1.1rem; }
.comp-badges { display:flex; gap:.35rem; margin-left:auto; }
.limit-badge { display:flex; flex-direction:column; align-items:center; border-radius:7px; color:#fff;
  padding:.15rem .4rem; font-weight:800; font-size:.72rem; line-height:1.1; min-width:2.4rem; }
.limit-badge small { font-size:.6rem; opacity:.9; font-weight:700; }
.badge-food { background:var(--food); } .badge-drink { background:var(--drink); } .badge-timepass { background:var(--timepass); }
.sections { display:grid; grid-template-columns:repeat(3,1fr); }
.section { border-right:1px dashed var(--line); padding:.6rem; min-height:150px; display:flex; flex-direction:column; gap:.5rem; }
.section:last-child { border-right:none; }
.section .sec-name { font-size:.7rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.token-piles { display:flex; gap:.3rem; flex-wrap:wrap; }
.pile { display:flex; align-items:center; gap:.22rem; border-radius:20px; padding:.12rem .5rem .12rem .18rem;
  font-weight:800; font-size:.8rem; }
.pile-food { background:var(--food-l); color:var(--food); } .pile-drink { background:var(--drink-l); color:var(--drink); }
.pile-timepass { background:var(--timepass-l); color:var(--timepass); }
.pile .tk { width:1.15rem; height:1.15rem; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.62rem; }
.tk-food { background:var(--food); } .tk-drink { background:var(--drink); } .tk-timepass { background:var(--timepass); }
.hawkers { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:auto; }
.hawker { width:1.7rem; height:1.7rem; border-radius:50%; color:#fff; font-weight:800; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.hawker.me { outline:3px solid var(--ink); outline-offset:1px; }
.space-slot { border-radius:10px; transition:.12s; }
.space-slot.legal { cursor:pointer; box-shadow:0 0 0 3px rgba(44,62,158,.35) inset; background:rgba(44,62,158,.05); }
.space-slot.legal:hover { background:rgba(44,62,158,.12); }
.legal-tag { font-size:.66rem; font-weight:800; color:var(--indigo); background:#fff; border:1px solid var(--indigo);
  border-radius:20px; padding:.05rem .45rem; display:inline-block; margin-top:.3rem; }
.offboard { text-align:center; color:var(--muted); font-size:.8rem; padding:.4rem; }

/* ---------------- action tray ---------------- */
.action-tray { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1rem; box-shadow:var(--shadow); min-height:64px; }
.tray-title { font-weight:800; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.tray-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.tray-hint { color:var(--muted); font-size:.85rem; margin-top:.5rem; }
.ai-thinking { display:flex; align-items:center; gap:.6rem; color:var(--indigo); font-weight:700; }
.spinner { width:1.1rem; height:1.1rem; border:3px solid var(--indigo-l); border-top-color:var(--indigo);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.banner { border-radius:var(--radius); padding:.7rem 1rem; font-weight:700; }
.banner.go { background:#e7f6e4; color:#2c6e22; border:1px solid #bfe4b5; }
.banner.leave { background:#fdeaea; color:#a52; border:1px solid #f4c9c9; }

/* ---------------- side panels ---------------- */
.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem 1rem; box-shadow:var(--shadow); }
.panel h3 { font-size:1rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem; }
.turn-badge { display:flex; align-items:center; gap:.6rem; }
.turn-badge .who { font-family:'Baloo 2'; font-size:1.15rem; font-weight:800; }
.actions-left { display:flex; gap:.3rem; margin-left:auto; }
.adot { width:1rem; height:1rem; border-radius:50%; background:var(--line); }
.adot.on { background:var(--indigo); }
.tag-ai { font-size:.66rem; background:var(--indigo-l); color:var(--indigo); padding:.1rem .4rem; border-radius:6px; font-weight:800; }

/* shop + card grid */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:.5rem; }
.gcard { border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--paper); position:relative; }
.gcard img { width:100%; display:block; aspect-ratio:33/47; object-fit:cover; background:#f0f2f8; }
.gcard .meta { font-size:.62rem; text-align:center; padding:.15rem; font-weight:700; }
.gcard.selectable { cursor:pointer; }
.gcard.selectable:hover { border-color:var(--indigo); }
.gcard.sel { outline:3px solid var(--indigo); outline-offset:-1px; }
.gcard .cornerpts { position:absolute; top:2px; right:2px; background:var(--ink); color:#fff; font-size:.6rem;
  font-weight:800; border-radius:5px; padding:.02rem .28rem; }
.gcard .costbar { position:absolute; top:2px; left:2px; display:flex; gap:1px; }
.gcard .costbar .tk { width:.7rem; height:.7rem; border-radius:50%; border:1px solid #fff; }
.empty-slot { border:2px dashed var(--line); border-radius:9px; aspect-ratio:33/47; display:flex;
  align-items:center; justify-content:center; color:var(--muted); font-size:.7rem; }

/* player mini-cards */
.pmini { border:1px solid var(--line); border-radius:10px; padding:.5rem .6rem; margin-bottom:.5rem; }
.pmini.active { border-color:var(--indigo); background:var(--indigo-l); }
.pmini .row1 { display:flex; align-items:center; gap:.45rem; }
.pmini .name { font-weight:800; }
.pmini .stat { margin-left:auto; font-size:.78rem; color:var(--muted); display:flex; gap:.6rem; }
.pmini .stat b { color:var(--ink); }
.pmini .pos { font-size:.72rem; color:var(--muted); margin-top:.25rem; }
.mini-dot { width:1rem; height:1rem; border-radius:50%; }
.fine-flag { color:var(--red); font-weight:800; }

/* bank */
.bank-row { display:flex; gap:.5rem; }
.bank-cell { flex:1; text-align:center; border-radius:10px; padding:.5rem; font-weight:800; }
.bank-cell .n { font-size:1.4rem; font-family:'Baloo 2'; }
.bank-cell .t { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; }
.bank-food { background:var(--food-l); color:var(--food); }
.bank-drink { background:var(--drink-l); color:var(--drink); }
.bank-timepass { background:var(--timepass-l); color:var(--timepass); }

/* info icon + tooltip */
.info { display:inline-flex; align-items:center; justify-content:center; width:1.05rem; height:1.05rem;
  border-radius:50%; background:var(--indigo-l); color:var(--indigo); font-size:.72rem; font-weight:800;
  cursor:help; flex:0 0 auto; }
.tip { position:fixed; z-index:60; max-width:280px; background:var(--ink); color:#fff; padding:.6rem .8rem;
  border-radius:9px; font-size:.82rem; line-height:1.35; box-shadow:var(--shadow); pointer-events:none; }
.tip .cite { display:block; margin-top:.35rem; color:#c8cef0; font-size:.72rem; }

/* ---------------- modal ---------------- */
.modal-root { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-backdrop { position:absolute; inset:0; background:rgba(20,25,45,.55); }
.modal { position:relative; background:var(--paper); border-radius:18px; box-shadow:var(--shadow);
  max-width:640px; width:100%; max-height:88vh; overflow:auto; padding:1.5rem; }
.modal-close { position:absolute; top:.8rem; right:.8rem; border:none; background:var(--bg); width:2rem; height:2rem;
  border-radius:50%; font-size:1rem; font-weight:800; color:var(--muted); }
.modal h2 { color:var(--indigo); margin-bottom:.4rem; }
.modal .sub { color:var(--muted); margin-bottom:1rem; font-size:.92rem; }
.modal-foot { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.2rem; }
.placement-row { display:flex; align-items:center; gap:.6rem; padding:.5rem; border:1px solid var(--line);
  border-radius:10px; margin-bottom:.5rem; }
.type-badge { padding:.2rem .6rem; border-radius:7px; color:#fff; font-weight:800; font-size:.8rem; }
.type-btns { display:flex; gap:.35rem; }
.type-btns button { border:2px solid var(--line); background:#fff; border-radius:8px; padding:.3rem .6rem; font-weight:800; }
.type-btns button.on { border-color:var(--ink); }
.type-btns button.food.on { border-color:var(--food); background:var(--food-l); color:var(--food); }
.type-btns button.drink.on { border-color:var(--drink); background:var(--drink-l); color:var(--drink); }
.type-btns button.timepass.on { border-color:var(--timepass); background:var(--timepass-l); color:var(--timepass); }
.type-btns button:disabled { opacity:.3; cursor:not-allowed; }
.secbtn { border:2px solid var(--line); background:#fff; border-radius:8px; padding:.3rem .6rem; font-weight:800; }
.secbtn.on { border-color:var(--indigo); background:var(--indigo-l); color:var(--indigo); }
.gcard.dim { opacity:.4; }
.cost-meter { font-weight:800; }
.cost-meter.over { color:var(--red); }
.steps { padding-left:1.1rem; }
.steps li { margin-bottom:.5rem; line-height:1.4; }
.logbox { background:#0f1424; color:#d7ddf5; border-radius:10px; padding:.8rem; font-family:ui-monospace,monospace;
  font-size:.78rem; line-height:1.5; max-height:50vh; overflow:auto; }

/* scoring */
.score-table { width:100%; border-collapse:collapse; margin-top:.5rem; }
.score-table th,.score-table td { padding:.5rem .6rem; text-align:center; border-bottom:1px solid var(--line); }
.score-table th { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.score-table td.name { text-align:left; font-weight:800; }
.score-table tr.winner { background:#fff8e6; }
.score-table .total { font-family:'Baloo 2'; font-size:1.15rem; font-weight:800; }
.trophy { color:var(--gold); }

@media (max-width:920px) {
  .layout { grid-template-columns:1fr; }
  .side-col { position:static; }
  .track { grid-template-columns:1fr; }
}