/* HeroQuest (Tronsoft recreation) - game.css
   Uses system font stacks only; no external font imports. Relative asset paths. */

:root{
  --bg:#141013; --panel:#1e1a1d; --panel2:#262024; --ink:#eae2d6;
  --muted:#a99f92; --gold:#e6c34a; --accent:#c0392b; --line:#3a3238;
  --parchment:#d9c7a3;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:normal;letter-spacing:.02em}
button{font-family:inherit}

/* ---- shared buttons ---- */
.btn{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:#332a30;border-color:#5a4a52}
.btn.primary{background:var(--accent);border-color:#7d271c;color:#fff}
.btn.primary:hover{background:#d84a3a}
.btn.ghost{background:transparent}
.btn.big{font-size:18px;padding:12px 26px;background:var(--accent);border-color:#7d271c;color:#fff}
.btn.big:hover{background:#d84a3a}

/* ---- setup ---- */
#setup{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(192,57,43,.25),transparent 60%),
    linear-gradient(180deg,#191216,#0e0b0d),
    url("../images/background.jpg");
  background-size:cover;background-position:center;background-blend-mode:multiply;
  padding:30px;
}
.setup-inner{max-width:900px;width:100%;text-align:center;
  background:rgba(20,16,19,.82);border:1px solid var(--line);border-radius:14px;padding:34px}
.title{font-size:64px;margin:0;color:var(--parchment);text-shadow:0 3px 0 #000,0 0 26px rgba(230,195,74,.25);letter-spacing:.06em}
.title span{color:var(--accent)}
.subtitle{color:var(--muted);font-size:17px;margin:6px 0 26px}
.pick-h{color:var(--gold);font-size:20px;margin:0 0 14px}
.heropick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.heropick{
  background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:16px;cursor:pointer;
  transition:border-color .15s,transform .1s;text-align:left
}
.heropick:hover{transform:translateY(-2px)}
.heropick.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(230,195,74,.2)}
.heropick .glyph{display:inline-flex;width:34px;height:34px;border-radius:50%;color:#fff;
  align-items:center;justify-content:center;font-weight:bold;font-size:18px}
.hp-name{font-size:19px;margin:8px 0 4px;color:var(--parchment)}
.hp-stats{font-size:12px;color:var(--muted);margin-bottom:8px}
.hp-blurb{font-size:13px;color:var(--ink);opacity:.85;line-height:1.4}
.setup-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hint{color:var(--muted);font-size:13px;margin-top:18px}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;gap:18px;padding:10px 18px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.brand{font-size:24px;color:var(--parchment);letter-spacing:.05em}
.brand span{color:var(--accent)}
.objbox{flex:1;font-size:14px;color:var(--ink)}
.obj-label{color:var(--gold)}
.top-right{display:flex;align-items:center;gap:16px}
.phase{padding:5px 12px;border-radius:20px;font-size:13px;border:1px solid var(--line)}
.phase.hero{background:rgba(41,128,185,.18);color:#7cc0f0}
.phase.monster{background:rgba(192,57,43,.2);color:#f0937c}
.gold{color:var(--gold);font-size:14px}

/* ---- layout ---- */
.layout{display:grid;grid-template-columns:270px 1fr 300px;gap:0;height:calc(100vh - 53px)}
.sidebar{background:var(--panel);overflow-y:auto;padding:14px;border-right:1px solid var(--line)}
.sidebar.right{border-right:none;border-left:1px solid var(--line)}
.sidebar h3{color:var(--gold);font-size:16px;margin:6px 0 12px;border-bottom:1px solid var(--line);padding-bottom:6px}

/* ---- hero cards ---- */
.herocard{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px;cursor:pointer}
.herocard.selected{border-color:var(--gold);box-shadow:0 0 0 1px rgba(230,195,74,.3)}
.herocard.dead{opacity:.4;filter:grayscale(1)}
.hc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hc-top .glyph{width:26px;height:26px;border-radius:50%;color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-weight:bold;font-size:14px}
.hc-name{font-size:16px;color:var(--parchment)}
.stat{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:12px}
.stat .lbl{width:36px;color:var(--muted)}
.stat .bar{flex:1;height:8px;background:#000;border-radius:4px;overflow:hidden}
.stat .fill{display:block;height:100%}
.stat .num{width:40px;text-align:right;color:var(--ink)}
.mini{font-size:12px;color:var(--muted);margin:4px 0}
.items,.spells{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.chip{background:#2c2430;border:1px solid var(--line);color:var(--ink);font-size:11px;
  padding:3px 7px;border-radius:12px;cursor:pointer}
.chip:hover{background:#3a3040}
.chip.spell{border-color:#3d5a7a;color:#9ecbf0}
.chip.spent{opacity:.35;text-decoration:line-through;cursor:default}

/* ---- board ---- */
.boardwrap{display:flex;flex-direction:column;background:#0e0b0d}
.board-scroll{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;position:relative;padding:14px}
#board{background:#0a0a0d;border:2px solid #2a2118;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.6);cursor:pointer;max-width:100%}
.actionbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap}
.actionbar .spacer{flex:1}

/* ---- flash ---- */
.flash{position:absolute;top:22px;left:50%;transform:translateX(-50%);
  background:rgba(20,16,19,.92);border:1px solid var(--gold);color:var(--gold);
  padding:8px 16px;border-radius:6px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.flash.show{opacity:1}

/* ---- dice ---- */
.dicebox{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px;min-height:70px;font-size:13px;margin-bottom:10px}
.dicebox em{color:var(--muted)}
.drow{margin:4px 0}
.drow b{display:inline-block;width:56px;color:var(--muted);font-weight:normal}
.die{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;
  border-radius:4px;margin:0 2px;font-size:14px;border:1px solid #000}
.die.skull{background:#7d1f1f;color:#ffdede}
.die.white{background:#e8e2d4;color:#333}
.die.black{background:#222;color:#bbb}
.dsum{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--ink)}

/* ---- log ---- */
.logbox{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;
  font-size:12.5px;line-height:1.5;height:calc(100vh - 360px);min-height:160px;overflow-y:auto;color:var(--ink)}
.logbox div{padding:2px 0;border-bottom:1px dotted rgba(255,255,255,.05)}

/* ---- banner ---- */
.banner{position:fixed;inset:0;background:rgba(6,4,6,.85);display:none;align-items:center;justify-content:center;z-index:50}
.banner.show{display:flex}
.banner-card{text-align:center;background:var(--panel);border:2px solid var(--accent);border-radius:14px;padding:40px 54px;max-width:520px}
.banner.win .banner-card{border-color:var(--gold)}
.b-title{font-size:52px;color:var(--accent);letter-spacing:.08em}
.banner.win .b-title{color:var(--gold)}
.b-sub{color:var(--ink);font-size:16px;margin:12px 0 24px;line-height:1.5}

/* ---- responsive ---- */
@media (max-width:1080px){
  .layout{grid-template-columns:220px 1fr 240px}
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto}
  .sidebar{border:none;border-bottom:1px solid var(--line);max-height:none}
  .logbox{height:200px}
  .boardwrap{min-height:60vh}
}