:root{
  --parchment:#f5ecd6;
  --ink:#1e1b16;
  --accent:#a26a2a;
  --accent-2:#6b5a3a;
  --stone:#7d7d7d;
  --p1:#2458a8;
  --p2:#a82424;
  --good:#2c8a3e;
  --bad:#b02020;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:#0e0e0e; color:var(--ink); }
body { font-family: "Georgia", "Times New Roman", serif; }

.site-header { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:linear-gradient(#3b321e,#221b12); color:#f6f2e9; border-bottom:3px solid #000; }
.site-header .title { display:flex; align-items:center; gap:10px; }
.site-header .title h1 { margin:0; font-weight:700; letter-spacing:0.5px; text-shadow:0 2px 0 #000; }
.logo { width:32px; height:32px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.meta { display:flex; gap:8px; align-items:center; }
.version { opacity:0.8; margin-right:6px; font-size:14px; }

.parchment { background:var(--parchment); border:2px solid #3a2c18; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 0 40px rgba(0,0,0,.07); }

.layout { display:grid; grid-template-columns:280px 1fr 320px; gap:10px; padding:10px; min-height:calc(100vh - 64px); background:url('assets/stone.png'); background-size:128px 128px; }

.panel { padding:10px; display:flex; flex-direction:column; gap:10px; }
.panel h2 { margin:0 0 8px; }
.panel .status { display:flex; justify-content:space-between; }
.panel .money .coins .wallet { display:flex; align-items:center; gap:6px; margin:6px 0; }
.panel .money img { width:18px; height:18px; }
.panel .transfer { display:flex; gap:4px; margin-left:auto; }
.wallet.earnings { font-weight:700; }

.center { display:flex; flex-direction:column; gap:10px; }
.hud { display:flex; justify-content:space-between; align-items:center; padding:10px; }
.board { width:100%; aspect-ratio:12/8; display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:repeat(8, 1fr); background:#949494; border:4px solid #000; position:relative; overflow:hidden; }
.tile { border:1px solid rgba(0,0,0,.25); position:relative; user-select:none; }
.tile.dark { background:rgba(0,0,0,.06); }
.tile.castle::after { content:""; position:absolute; inset:2px; border:2px dashed #111; border-radius:4px; background:linear-gradient(45deg, rgba(255,255,255,.25), rgba(0,0,0,.09)); }
.tile .xmark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; color:#ff2d2d; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.tile.highlight { outline:3px solid rgba(255,255,0,.8); animation:pulse 1s infinite alternate; }
@keyframes pulse { 0%{outline-color:rgba(255,255,0,.35)} 100%{outline-color:rgba(255,255,0,.85)} }

.unit { position:absolute; width:calc(100% - 8px); height:calc(100% - 8px); inset:4px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:rgba(0,0,0,.06); transition: transform .18s ease, opacity .18s ease; cursor:grab; }
.unit:active { cursor:grabbing; }
.unit img { width:70%; height:70%; object-fit:contain; pointer-events:none; }
.unit.p1 { box-shadow: 0 0 0 3px var(--p1) inset; }
.unit.p2 { box-shadow: 0 0 0 3px var(--p2) inset; }
.unit .hp { position:absolute; bottom:2px; right:4px; font-size:12px; padding:1px 4px; border-radius:4px; background:#000; color:#fff; opacity:.85; }
.unit .dir { position:absolute; top:2px; right:4px; font-size:14px; opacity:.8; }

.explosion { position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,210,80,.85), rgba(255,80,0,.7), rgba(0,0,0,0)); transform:scale(0); animation:boom .6s ease-out forwards; }
@keyframes boom { to{ transform:scale(1.8); opacity:0; } }

.legend { display:grid; grid-template-columns:1fr; gap:4px; background:rgba(255,255,255,.6); border-radius:8px; padding:8px; border:1px solid #333; }
.legend-row { display:flex; align-items:center; gap:8px; font-size:14px; }
.legend-row img { width:22px; height:22px; }

.log { padding:8px; max-height:160px; overflow:auto; font-size:14px; }
.log .entry { border-top:1px solid rgba(0,0,0,.15); padding:4px 0; }
.log .entry:first-child { border-top:none; }

.shop .shop-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.card { display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; padding:8px; border:2px solid #2b2217; border-radius:8px; background:linear-gradient(#fff, #f1e7cd); cursor:pointer; transition:transform .12s ease; min-height:86px; }
.card:hover { transform:translateY(-2px); }
.card img { width:40px; height:40px; }
.card small { opacity:0.8; }
.actions { display:flex; gap:8px; margin-top:8px; }

.reserve, .graveyard, .discard { display:flex; gap:6px; flex-wrap:wrap; min-height:46px; padding:4px; background:rgba(255,255,255,.6); border:1px dashed #333; border-radius:6px; }
.token { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:#ece8d4; border:1px solid #333; }
.token img { width:28px; height:28px; }

.btn { padding:6px 10px; border:2px solid #2b2217; background:linear-gradient(#fff, #e1d6bb); border-radius:6px; cursor:pointer; font-weight:700; }
.btn.primary { background:linear-gradient(#ffd37a,#e1a34b); }
.btn.xs { padding:4px 6px; font-size:12px; }
.btn.xsmall { padding:2px 4px; font-size:12px; }

.info { background:rgba(255,255,255,.6); padding:8px; border:1px solid #333; border-radius:6px; min-height:120px; }

.blog-nav { margin-top:auto; display:flex; }
.blog-nav .btn { width:100%; text-align:center; }

.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.65); z-index:1000; }
.modal.hidden { display:none; }
.modal .modal-content { width:min(800px, 90vw); padding:16px; }
.modal .grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }

.popup-opt { display:block; margin-top:10px; font-size:14px; }

.hint { position:absolute; bottom:6px; left:6px; font-size:12px; opacity:.8; background:rgba(255,255,255,.7); padding:2px 6px; border-radius:4px; }

.fow .unit.enemy .hp { filter:blur(4px); }
.valid { outline:3px solid var(--good); }
.invalid { outline:3px solid var(--bad); }

@media (max-width: 1100px) {
  .layout { grid-template-columns:1fr; }
  .panel.left, .panel.right { order:1; }
  .center { order:0; }
}

/* Typography & general look */
body { font-family: "LoM-Runes", "IM FELL English", "Garamond", "Georgia", serif; }
h1, h2, h3 { letter-spacing: 0.5px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.site-header { background: radial-gradient(140% 100% at 50% 0%, #4b3823, #241a12 60%); }

/* Board polish */
.board { background: linear-gradient(#a8a8a8, #8d8d8d); }
.tile { background: rgba(255,255,255,.05); }
.tile.dark { background: rgba(0,0,0,.08); }
.tile.valid::after { content:""; position:absolute; inset:3px; border:2px solid rgba(34, 156, 64, .9); border-radius:6px; box-shadow:0 0 12px rgba(34,156,64,.6) inset; }
.tile.target::after { content:""; position:absolute; inset:3px; border:2px solid rgba(236, 71, 71, .95); border-radius:6px; box-shadow:0 0 12px rgba(236,71,71,.6) inset; }
.unit.selected { outline:3px solid #ffd37a; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.unit.enemy { filter: saturate(.9) contrast(.95); }
.unit.hit { animation: hitflash .22s ease-in-out; }
@keyframes hitflash { 0%{box-shadow:0 0 0 0 rgba(255,0,0,.8) inset} 100%{box-shadow:0 0 0 12px rgba(255,0,0,0) inset} }

/* Action Bar */
.action-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0; padding:8px; border:2px solid #2b2217; border-radius:8px; }
.action-bar.hidden { display:none; }
.action-bar .ab-actions { display:flex; gap:8px; }
.action-bar .ab-help { opacity:.8; font-size:0.9rem; }

/* Buttons polish */
.btn { transition: transform .08s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Parchment texture intensify */
.parchment { background-image: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.4), rgba(0,0,0,.06)), linear-gradient(#f9f0d8, #efe2bf); }

/* Glow on active player panels already present via .turn; ensure visible */
#panelP1.turn, #panelP2.turn { background-image: radial-gradient(100% 80% at 50% 0%, rgba(255,255,255,.4), rgba(0,0,0,.04)), linear-gradient(#fff3cf, #f0e0b7); }

/* Legend refactor */
.legend { background: rgba(255,255,255,.7); border-color: #2b2217; }
.legend-row { padding:2px 0; }