:root{
  --ink:#241708; --parchment:#e8dcc0; --parchment-dark:#d8c79f;
  --bronze:#8a5a28; --gold:#c9962c; --rune:#2f5d7c; --ok:#3f6b2f;
  --shadow: 5px 5px 0 var(--ink);
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--parchment-dark);
  background-image: radial-gradient(circle at 2px 2px, rgba(36,23,8,0.06) 1px, transparent 0);
  background-size:14px 14px; color:var(--ink);
  font-family: Georgia, 'Iowan Old Style', serif;
}
.masthead{ padding:28px 20px 10px; text-align:center; }
.masthead h1{ margin:0; font-size:2rem; letter-spacing:.5px; }
.masthead .sub{ font-family: system-ui, sans-serif; font-size:.85rem; opacity:.75; margin-top:4px; }

.tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 20px; justify-content:center; }
.tab-btn{
  font-family: system-ui, sans-serif; font-weight:600; font-size:.85rem;
  background:var(--parchment); border:3px solid var(--ink); box-shadow: var(--shadow);
  padding:8px 14px; cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.tab-btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.tab-btn:active, .tab-btn.active{
  background:var(--gold); transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink);
}
#emergencyBtn{ background:#c0392b; color:#fff8ec; margin-left:auto; }

main{ max-width:960px; margin:0 auto; padding:10px 20px 60px; }
.panel{ display:none; animation:fadeUp .25s ease; }
.panel.active{ display:block; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:720px){ .grid2{ grid-template-columns:1fr; } }

.card{ background:var(--parchment); border:3px solid var(--ink); box-shadow: var(--shadow); padding:14px 16px 16px; margin-bottom:20px; }
.card legend{ font-weight:700; padding:2px 10px; background:var(--ink); color:var(--parchment); }

label{ display:flex; flex-direction:column; gap:4px; font-family: system-ui, sans-serif; font-size:.85rem; margin:10px 0; }
.hint{ font-size:.72rem; opacity:.65; font-style:italic; }
input, select{
  font-family: 'Consolas', Menlo, monospace; font-size:.95rem; padding:6px 8px;
  border:2px solid var(--ink); background:#fffaf0; color:var(--ink);
}
input:focus, select:focus{ outline:3px solid var(--rune); }
input:disabled{ opacity:.6; }

.tabnote{ font-family:system-ui, sans-serif; font-size:.85rem; opacity:.8; max-width:640px; margin:8px 0; }

.bonus-list{ display:flex; flex-direction:column; gap:10px; }
.bonus-item{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--parchment); border:2px solid var(--ink); padding:10px 12px;
}
.bonus-item.ineligible{ opacity:.45; }
.bonus-item input{ margin-top:4px; }
.bonus-item .b-name{ font-weight:700; }
.bonus-item .b-meta{ font-family:system-ui, sans-serif; font-size:.78rem; opacity:.75; }

table{ width:100%; border-collapse:collapse; font-family:system-ui, sans-serif; font-size:.82rem; }
th,td{ border:2px solid var(--ink); padding:5px 7px; text-align:left; }
th{ background:var(--ink); color:var(--parchment); }
tr.unlocked{ opacity:.4; }
tr.locked{ opacity:.5; font-style:italic; }
tr.upgrade{ background:var(--gold); font-weight:700; }
tr.optimal{ background:var(--gold); font-weight:700; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.stat{ background:var(--parchment); border:3px solid var(--ink); box-shadow:var(--shadow); padding:18px; text-align:center; }
.stat span{ display:block; font-family:'Consolas',Menlo,monospace; font-size:1.6rem; font-weight:700; color:var(--rune); }
.stat.hero span{ font-size:2.1rem; color:var(--bronze); }
.stat label{ font-family:system-ui, sans-serif; font-size:.8rem; margin-top:6px; opacity:.8; }

/* ---- placeholder / unknown-data badge ---- */
.badge-placeholder{
  display:inline-block; font-family:system-ui, sans-serif; font-size:.68rem; font-weight:700;
  background:#c0392b; color:#fff8ec; padding:2px 6px; border-radius:3px; margin-left:6px;
  vertical-align:middle;
}

/* ---- interactive spotlight tutorial ---- */
.tutorial-overlay{ position:fixed; inset:0; z-index:1000; pointer-events:none; }
.tutorial-overlay[hidden]{ display:none; }

/* four panels dim everything EXCEPT the live target element's rect, which is left
   with no overlay on top of it at all — so it stays genuinely clickable/editable
   during that step. Positioned via inline style (top/left/width/height) by tutorial.js. */
.spotlight-hole{
  position:fixed; background:rgba(36,23,8,.72); pointer-events:auto; z-index:1000;
  transition: all .18s ease;
}

.spotlight-ring{
  position:fixed; border:3px solid var(--gold); border-radius:4px;
  box-shadow:0 0 0 4px rgba(201,150,44,.35); pointer-events:none; z-index:1001;
  transition: all .18s ease;
}
.spotlight-ring[hidden]{ display:none; }

.tutorial-box{
  position:fixed; z-index:1002; pointer-events:auto;
  background:var(--parchment); border:3px solid var(--ink); box-shadow:var(--shadow);
  max-width:380px; width:calc(100% - 40px); padding:18px 20px;
  transition: top .18s ease, left .18s ease;
}
.tutorial-box.centered{ top:50%; left:50%; transform:translate(-50%,-50%); }
.tutorial-step-count{ font-family:system-ui, sans-serif; font-size:.75rem; opacity:.65; margin-bottom:6px; }
.tutorial-box h2{ margin:0 0 10px; font-size:1.2rem; }
.tutorial-box p{ font-family:system-ui, sans-serif; font-size:.88rem; line-height:1.5; }
.tutorial-nav{ display:flex; gap:8px; margin-top:16px; justify-content:space-between; }

/* ---- restore notice toast ---- */
.restore-notice{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ok); color:#fff8ec; font-family:system-ui, sans-serif; font-size:.85rem;
  padding:10px 18px; border:2px solid var(--ink); box-shadow:var(--shadow); z-index:1001;
}
.restore-notice[hidden]{ display:none; }