/* ============================================================
   Crucible Cards — shared stylesheet for the static pages
   (/precons/*, /how-to-play.html, /mtg-basics.html).
   Mirrors the app's look: the wordmark from .nav-logo, .hbtn-gold,
   the gold-bordered home hero, Spectral headings over Inter body.
   ============================================================ */
:root{
  --bg:#0c0c0f;--elev:#141418;--surface:#1a1a1f;--surface2:#222228;--border:#2a2a30;--border2:#3a3a42;
  --text:#e8e8ec;--muted:#8c8c96;--dim:#55555e;--gold:#c9a227;--gold-hi:#FFD700;
  --gold-border:rgba(201,162,39,.22);--gold-glow:rgba(201,162,39,.10)
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:
  radial-gradient(ellipse 80% 50% at 50% -10%,rgba(201,162,39,.07),transparent 70%),var(--bg);
  color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
h1,h2,h3{font-family:Spectral,Georgia,serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px 64px}

/* top bar + wordmark (mirrors .nav-logo in css/home.css) */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 22px}
.logo{display:inline-block;text-decoration:none;font-family:Spectral,serif;font-weight:800;font-size:22px;letter-spacing:1px;line-height:1}
.logo .l1{color:#e8e6e3;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.logo .l2{color:var(--gold);text-shadow:0 0 20px rgba(201,162,39,.4),0 0 40px rgba(201,162,39,.1)}
.logo .glow{display:block;margin-top:8px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.45),transparent)}
.nav{display:flex;align-items:center;gap:18px;font-size:14px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover,.nav a.on{color:var(--text)}
.nav a.btn-gold,.nav a.btn-gold:hover{color:#000}

/* buttons (mirrors .hbtn / .hbtn-gold) */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:all .25s;font-family:Inter,sans-serif}
.btn-gold{background:linear-gradient(135deg,var(--gold),#e4c555);color:#000;box-shadow:0 0 24px rgba(201,162,39,.15)}
.btn-gold:hover{background:linear-gradient(135deg,#d6ae2e,#f0d468);color:#000;transform:translateY(-1px);box-shadow:0 0 40px rgba(201,162,39,.3)}
.btn-sm{padding:8px 14px;font-size:13px}

/* hero panel — commander art behind, like the home hero */
.hero{position:relative;overflow:hidden;border:1px solid rgba(201,162,39,.26);border-radius:18px;
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:34px;
  background:#0c1410}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:blur(2px) saturate(1.1);transform:scale(1.04);opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,10,16,.92) 0%,rgba(8,10,16,.78) 45%,rgba(8,10,16,.55) 100%),
  linear-gradient(180deg,rgba(8,10,16,0) 40%,rgba(6,8,14,.85) 100%)}
.hero>*:not(.hero-bg){position:relative;z-index:1}
.cmd-card{width:230px;border-radius:12px;display:block;box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
.cmd-stack{display:flex;gap:10px}
.cmd-stack .cmd-card{width:180px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.hero h1{font-weight:800;font-size:46px;line-height:1.05;margin:8px 0 10px;color:#f1ece0;text-shadow:0 3px 22px rgba(0,0,0,.85)}
.hero .desc{color:#ece2d8;font-size:16px;max-width:520px;margin:0 0 16px;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;
  background:rgba(12,12,15,.7);border:1px solid var(--border2);color:#d8d6de}
.chip b{color:var(--text)}
.chip .pip{width:15px;height:15px}
.small{font-size:12.5px;color:var(--muted);margin-top:10px}

/* sections */
.section{margin-top:34px}
.section h2{font-weight:700;font-size:24px;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.section h2 small{font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:var(--muted)}
.panel{background:var(--elev);border:1px solid var(--border);border-radius:14px;padding:20px 22px}

/* decklist */
.deck{columns:3 260px;column-gap:28px}
.grp{break-inside:avoid;margin:0 0 18px}
.grp h3{font-size:15px;font-weight:700;color:var(--gold);margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--gold-border);display:flex;justify-content:space-between}
.grp h3 span{font-family:Inter,sans-serif;font-weight:600;color:var(--muted);font-size:12px}
.grp ul{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:center;gap:8px;padding:3px 6px;margin:0 -6px;border-radius:6px;font-size:14px;cursor:default}
.row:hover{background:var(--gold-glow)}
.row .q{min-width:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .mc{display:inline-flex;gap:1px;flex:0 0 auto}
.row .mc .pip{width:14px;height:14px}

/* mana curve */
.curve{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:6px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bar i{display:block;width:100%;max-width:46px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#e4c555,var(--gold));box-shadow:0 0 18px rgba(201,162,39,.18)}
.bar b{font-size:12px;color:var(--text)}
.bar span{font-size:12px;color:var(--muted)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}

/* precon tiles (mirrors the in-app precon browser rows) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tile{display:flex;gap:14px;align-items:center;padding:12px;border-radius:12px;text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:all .15s}
.tile:hover{border-color:var(--gold-border);background:rgba(201,162,39,.08);transform:translateY(-2px)}
.tile img.th{flex:0 0 auto;width:72px;aspect-ratio:488/680;border-radius:5px;background:rgba(0,0,0,.25);object-fit:cover}
.tile .tn{font-family:Spectral,serif;font-weight:700;font-size:16px;line-height:1.2}
.tile .tc{color:var(--gold);font-size:12.5px;margin-top:2px}
.tile .tt{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tile .tp{display:flex;gap:3px;margin-top:6px}
.tile .tp .pip{width:15px;height:15px}

.setdate{font-size:13px;color:var(--muted);margin:-8px 0 14px}
.intro{padding:30px 34px}
.intro h1{font-weight:800;font-size:42px;margin:6px 0 8px;line-height:1.08}
.intro p{color:#d8d6de;max-width:640px;margin:0 0 18px}

/* hover preview */
.pv{position:fixed;z-index:50;width:250px;pointer-events:none;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.75);display:none}

footer{margin-top:48px;padding-top:18px;border-top:1px solid var(--border);color:var(--dim);font-size:12.5px;line-height:1.7}
footer a{color:var(--muted)}
footer .links{margin-top:6px}
footer .links a{margin-right:14px}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:22px;gap:20px}
  .cmd-card{width:180px}.cmd-stack .cmd-card{width:140px}
  .hero h1{font-size:34px}
  .two{grid-template-columns:1fr}
  .nav .hide-sm{display:none}
  .intro{padding:22px}.intro h1{font-size:32px}
}

/* ── Guide pages (how-to-play, mtg-basics) ── */
.guide h2{font-weight:700;font-size:24px;margin:36px 0 12px}
.guide p.body-text,.guide>p{color:#d8d6de;font-size:15.5px;margin:6px 0 0}
.guide b{color:var(--text)}
.steps{background:var(--elev);border:1px solid var(--border);border-radius:14px;padding:4px 22px}
.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:0}
.num{flex:0 0 38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#e4c555);
  color:#000;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(201,162,39,.18)}
.step .body{flex:1}
.step h3{margin:6px 0 6px;font-size:18px;font-weight:700}
.step p{color:#d8d6de;font-size:15.5px;margin:0}
.step p + p{margin-top:7px}
.guide .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.guide .card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px 18px;transition:all .15s}
.guide .card:hover{border-color:var(--gold-border);background:rgba(201,162,39,.06)}
.guide .card>b{color:var(--gold);font-family:Spectral,serif;font-size:17px}
.guide .card p{color:var(--muted);font-size:14px;margin:6px 0 0}
.kbd{display:inline-block;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:1px 7px;font-size:13px;color:var(--text);font-family:ui-monospace,monospace}
.note{background:linear-gradient(135deg,rgba(201,162,39,.10),rgba(201,162,39,.03));border:1px solid var(--gold-border);border-radius:14px;padding:18px 22px;color:#d8d6de;font-size:15px;margin-top:30px}
.colors{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.color{flex:1 1 130px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;text-align:center}
.color .dot{width:36px;height:36px;margin:0 auto 8px;display:block}
.color b{font-family:Spectral,serif;font-size:16px}
.color p{color:var(--muted);font-size:12.5px;margin:4px 0 0}
@media (max-width:620px){.guide .grid{grid-template-columns:1fr}.step{gap:14px}}