:root{
  /* bright "parchment" theme */
  --bg:#f4ecd9; --panel:#fbf5e6; --panel2:#fffdf6;
  --gold:#9a6f10; --gold2:#7a5600; --red:#a82a18; --red2:#8a1d0e;
  --vanar:#1d6fa8; --asura:#b4582e; --green:#3a7b22; --teal:#1f8f78;
  --text:#2a2014; --text2:#6a5c44; --border:rgba(120,90,40,.32);
  --z1:#9a6f10; --z2:#3a7b22; --z3:#1d6fa8; --z4:#c0531f; --z5:#a82a18;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(circle at 50% 0%,#fbf6e8,#ecdfc4 75%);color:var(--text);
  font-family:'Crimson Text',Georgia,serif;min-height:100vh}
#app{max-width:1180px;margin:0 auto;padding:18px 20px 60px}
header{text-align:center;margin-bottom:14px}
header h1{font-family:'Cinzel',serif;color:var(--gold);font-size:26px;letter-spacing:.04em}
header .sub{color:var(--text2);font-style:italic;font-size:13px}

.layout{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
@media(max-width:820px){.layout{grid-template-columns:1fr}}

/* ---- board ---- */
.board-wrap{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px;
  box-shadow:0 2px 14px rgba(120,90,40,.12)}
#board{width:100%;height:auto;display:block;touch-action:none}
.zoom-ctl{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:5px;z-index:6}
.zbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:rgba(251,246,232,.92);
  color:var(--text);font-size:18px;font-weight:700;cursor:pointer;line-height:1;box-shadow:0 1px 4px rgba(60,40,10,.2)}
.zbtn:hover{filter:brightness(.96)}

/* player rows above/below the board — never overlap the mesh */
.board-area{position:relative}
.player-row{display:flex;justify-content:space-between;gap:12px}
.player-row.top{margin-bottom:8px}
.player-row.bottom{margin-top:8px}
.corner{flex:1;min-width:0;padding:8px 12px;border-radius:9px;font-size:12px;
  background:var(--panel2);border:1px solid var(--border);opacity:.85;transition:opacity .2s,box-shadow .2s}
.player-row .corner:last-child{text-align:right}
.corner .cname{font-family:'Cinzel',serif;font-size:14px;font-weight:700}
.corner .cicon{font-size:17px}
.corner .cplayer{font-weight:400;font-style:italic;color:var(--text2)}
.corner.bharat .cname{color:var(--gold)} .corner.lanka .cname{color:var(--red)}
.corner .csub{font-size:9.5px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase}
.corner .cstats{margin-top:4px;color:var(--text);font-size:12px}
.corner.active{opacity:1;box-shadow:0 0 0 2px var(--gold) inset}
.corner.lanka.active{box-shadow:0 0 0 2px var(--red) inset}
.corner .slot{margin-top:7px}
.corner .slot:empty{display:none}
.claimbtn{margin-top:7px;padding:4px 9px;font-size:11px}
.player-row .corner:last-child .claimbtn{float:right}
.claimbtn.mine{border-color:var(--gold);color:var(--gold)}
.corner.lanka .claimbtn.mine{border-color:var(--red);color:var(--red)}

.roll-control{display:inline-flex;align-items:center;gap:8px}
.player-row .corner:last-child .roll-control{flex-direction:row-reverse}
.edge{stroke:rgba(120,90,40,.45);stroke-width:1.5}
.node-circle{fill:var(--panel2);stroke-width:2.2;transition:filter .15s}
.node-label{fill:var(--text2);font-size:7px;pointer-events:none}
.node-id{font-size:7.5px;font-weight:700;font-family:'Cinzel',serif;pointer-events:none}
.node-hit{fill:transparent;cursor:default}
.ring{fill:none;stroke-width:1.6;opacity:0;stroke-dasharray:3 3;transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.node-legal .node-circle{filter:drop-shadow(0 0 5px var(--gold));stroke:var(--gold)!important}
.node-legal .node-hit{cursor:pointer}
.node-legal .ring{opacity:1;stroke:var(--gold)}
.node-place .node-circle{filter:drop-shadow(0 0 5px var(--teal));stroke:var(--teal)!important}
.node-place .node-hit{cursor:pointer}
.node-place .ring{opacity:1;stroke:var(--teal)}
.node-target .node-circle{filter:drop-shadow(0 0 6px #8b46c0);stroke:#8b46c0!important}
.node-target .node-hit{cursor:pointer}
.node-target .ring{opacity:1;stroke:#8b46c0}
.node-target.picked .node-circle{fill:#8b46c0}

.zone-band{}
.zone-label{font-family:'Cinzel',serif;opacity:.55}
.cap-label{font-family:'Cinzel',serif;font-size:13px;font-weight:700}

.blockade{pointer-events:none}
.blockade-badge{font-size:13px;font-weight:700;font-family:'Cinzel',serif;paint-order:stroke;stroke:rgba(20,12,4,.85);stroke-width:2.4px}
.stack-ring{fill:none;stroke:#fff;stroke-width:1.4;opacity:.85}
.stack-vanar{fill:var(--vanar)} .stack-asura{fill:var(--asura)}

.token{pointer-events:none}
.token-rama .tk{fill:rgba(154,111,16,.30);stroke:var(--gold)}
.token-ravana .tk{fill:rgba(168,42,24,.28);stroke:var(--red)}
.tk{stroke-width:2.6;filter:drop-shadow(0 1px 2px rgba(60,40,10,.35))}
.tk-label{font-size:14px;font-weight:700;font-family:'Cinzel',serif;fill:var(--text)}
.flyer{pointer-events:none}

.banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:32px;color:var(--gold);
  background:rgba(251,246,232,.82);border-radius:10px;text-align:center;padding:20px}
.banner.lanka{color:var(--red)}
.hidden{display:none!important}

/* ---- HUD ---- */
.hud{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:13px;
  box-shadow:0 2px 14px rgba(120,90,40,.10)}

.turn-card{border:1px solid var(--border);border-radius:9px;padding:10px 14px;text-align:center;
  background:linear-gradient(180deg,rgba(154,111,16,.12),transparent)}
.turn-card.lanka{background:linear-gradient(180deg,rgba(168,42,24,.12),transparent)}
.turn-card .seat-name{font-family:'Cinzel',serif;font-size:20px;color:var(--gold)}
.turn-card.lanka .seat-name{color:var(--red)}
.turn-card .seat-sub{font-size:11px;color:var(--text2);letter-spacing:.08em;text-transform:uppercase}

.dice-row{display:flex;align-items:center;gap:12px}
.die{width:40px;height:40px;border-radius:9px;background:#fff;color:#2a2014;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:700;font-family:'Cinzel',serif;border:1px solid var(--border);box-shadow:inset 0 -3px 0 rgba(120,90,40,.12)}
.roll-control .btn.primary{margin-left:0;padding:7px 11px;font-size:12px}
.die.rolling{animation:wobble .12s linear infinite}
@keyframes wobble{0%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}100%{transform:rotate(-12deg)}}

.btn{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 14px;
  font-family:'Cinzel',serif;font-size:13px;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(.97)} .btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{margin-left:auto;background:linear-gradient(180deg,#e8c060,#c9a040);color:#2a2014;border:1px solid #b8932f;font-weight:700}
.btn.ghost{background:transparent} .btn.wide{width:100%}
.btn.active{background:rgba(168,42,24,.14);border-color:var(--red);color:var(--red);font-weight:700}
.btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}

/* modal */
.modal{position:fixed;inset:0;background:rgba(30,20,8,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-box{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:12px;max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:24px 26px;box-shadow:0 10px 40px rgba(40,25,5,.4)}
.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--text2)}
.modal-box h2{font-family:'Cinzel',serif;color:var(--gold);font-size:20px;margin-bottom:6px}
.modal-box h3{font-family:'Cinzel',serif;color:var(--gold2);font-size:14px;margin:16px 0 6px}
.modal-box p,.modal-box li{font-size:14px;line-height:1.6;color:var(--text)}
.modal-box ul{margin:0 0 4px 18px}
.modal-box a{color:var(--gold)}
.rule-note{font-size:13px;color:var(--text2);font-style:italic}
.modal-box .muted{color:var(--text2)}
.gameid{font-family:monospace;font-weight:700;background:#fff;border:1px solid var(--border);border-radius:6px;padding:2px 8px;user-select:all}
.past-list{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow:auto}
.past-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;border-bottom:1px solid var(--border);padding:3px 0}
.past-row a{color:var(--gold)}

/* token picker */
.mesh-player{border-top:1px solid var(--border);padding:12px 0}
.mesh-player:first-of-type{border-top:none}
.mesh-head{font-family:'Cinzel',serif;font-size:13px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.mesh-head .cur{font-size:22px}
.mesh-grid{display:flex;flex-wrap:wrap;gap:6px}
.mesh-opt{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:var(--panel2);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mesh-opt:hover{filter:brightness(.96)}
.mesh-opt.sel{box-shadow:0 0 0 2px var(--gold) inset}

.msg{font-size:13px;color:var(--text2);min-height:20px;line-height:1.4}.msg b{color:var(--gold)}
.role-line{font-size:13px;color:var(--text);min-height:18px}
.status{font-size:12px;color:var(--text2)}
.timer{font-size:13px;font-weight:700;font-family:'Cinzel',serif;padding:4px 0}
.timer.warn{color:var(--red)}
.howto{border:1px solid var(--border);border-radius:8px;background:var(--panel2);padding:0 12px}
.howto summary{cursor:pointer;font-family:'Cinzel',serif;font-size:13px;color:var(--gold);padding:9px 0;list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"▸ ";color:var(--gold-dim)}
.howto[open] summary::before{content:"▾ "}
.howto-body{font-size:13px;color:var(--text2);line-height:1.55;padding:0 0 10px}
.howto-body p{margin:0 0 7px}.howto-body b{color:var(--text)}
.setup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.setup-row label{font-size:13px}
.setup-row select,.setup-row input{font-family:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);width:140px}
.setup-row input[type=number]{width:90px}
.setup-row input[type=checkbox]{width:auto;transform:scale(1.3)}
.price-head,.price-row{display:grid;grid-template-columns:1fr 64px 64px;gap:8px;align-items:center;margin:3px 0;font-size:12px}
.price-head{color:var(--text2);font-family:'Cinzel',serif;text-align:center}
.price-head span:first-child{text-align:left}
.price-row input{width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text)}
.seed-wrap{display:flex;gap:6px}.seed-wrap input{width:90px}
.role-line .pill{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:6px;padding:2px 9px;margin-right:6px;font-family:'Cinzel',serif;font-size:12px}

.collect{background:rgba(58,123,34,.12);border:1px solid rgba(58,123,34,.4);border-radius:8px;padding:10px}
.collect-msg{font-size:13px;margin-bottom:8px}
.collect-btns{display:flex;gap:8px}

.heroes{border:1px solid rgba(139,70,192,.4);background:rgba(139,70,192,.07);border-radius:8px;padding:10px}
.heroes-head{font-family:'Cinzel',serif;font-size:13px;color:#7a3fb0;margin-bottom:7px;display:flex;justify-content:space-between}
.ladder{font-size:11px;color:var(--text2)}
.hero-list{display:flex;flex-direction:column;gap:6px}
.hero-row{display:flex;align-items:center;gap:8px;font-size:12px}
.hero-row .hname{font-family:'Cinzel',serif;font-size:12px;flex:1}
.hero-row .hmeta{font-size:10px;color:var(--text2)}
.hero-row .btn{padding:5px 10px;font-size:11px}
.hero-row.locked{opacity:.5}
.hero-target{margin-top:8px;font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-target .btn{padding:5px 10px;font-size:11px}

.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team{border:1px solid var(--border);border-radius:9px;padding:10px;background:var(--panel2);font-size:12px}
.team.active{box-shadow:0 0 0 2px var(--gold) inset}
.team.lanka.active{box-shadow:0 0 0 2px var(--red) inset}
.team-head{font-family:'Cinzel',serif;font-size:13px;margin-bottom:7px}
.team.bharat .team-head{color:var(--gold)} .team.lanka .team-head{color:var(--red)}
.team-row{display:flex;justify-content:space-between;align-items:center;margin:3px 0;color:var(--text2)}
.team-row b{color:var(--text);font-size:12px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;vertical-align:0}
.dot.vanar{background:var(--vanar)} .dot.asura{background:var(--asura)}

.legend{font-size:11px;color:var(--text2);border-top:1px solid var(--border);padding-top:10px;line-height:1.5}
.legend .note{margin-top:6px;font-style:italic;opacity:.9}
.chip{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 2px 0 6px;vertical-align:-1px}
.chip.z1{background:var(--z1)}.chip.z2{background:var(--z2)}.chip.z3{background:var(--z3)}.chip.z4{background:var(--z4)}.chip.z5{background:var(--z5)}