/* Heritage Pack (hp-*) — Heritage Card + Origin Story */
.hp { position: relative; max-width: 1100px; margin: 0 auto clamp(12px, 2vh, 18px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(18px, 3vw, 28px); scroll-margin-top: 110px; }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hp-eyebrow { font: 700 12px var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #D4A843); }
.hp-own, .hp-price { font: 700 11px var(--font-mono, monospace); letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.hp-own { color: #22C55E; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); }
.hp-price { color: var(--gold, #D4A843); background: rgba(212,168,67,.12); border: 1px solid rgba(212,168,67,.35); }
.hp-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--bg-glass2, rgba(255,255,255,.04)); border: 1px solid var(--border); width: fit-content; margin-bottom: 16px; }
.hp-tab { cursor: pointer; border: 0; background: transparent; color: var(--text-md); padding: 8px 16px; border-radius: 999px; font: 700 13px var(--font-body, sans-serif); }
.hp-tab.on { background: linear-gradient(135deg, #F0C96A, #D4A843); color: #1a1408; }
.hp-body { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 22px; align-items: start; }
.hp-body:has(.hp-story-wrap), .hp-body:has(.hp-lockbox) { grid-template-columns: 1fr; }
.hp-canvas { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.35); display: block; aspect-ratio: 1080 / 1350; background: #0d0f16; }
.hp-ctrl { display: grid; gap: 12px; }
.hp-themes { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-th { cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border2); background: transparent; color: var(--text-md); font: 600 12.5px var(--font-body, sans-serif); }
.hp-th.on { border-color: var(--gold, #D4A843); color: var(--text-hi); background: rgba(212,168,67,.14); }
.hp-tg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-md); cursor: pointer; }
.hp-tg input { accent-color: #D4A843; width: 16px; height: 16px; }
.hp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.hp-btn { cursor: pointer; border: 0; border-radius: 999px; padding: 12px 20px; font: 800 13.5px var(--font-body, sans-serif); color: #1a1408; background: linear-gradient(135deg, #F0C96A, #D4A843 55%, #A8791F); box-shadow: 0 8px 22px rgba(212,168,67,.28); }
.hp-btn:hover { filter: brightness(1.05); }
.hp-btn-s { background: transparent; color: var(--text-hi); border: 1px solid var(--border2); box-shadow: none; }
.hp-fine { font-size: 11.5px; color: var(--text-lo); }
.hp-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--text-md); }
.hp-lead b { color: var(--text-hi); }
.hp-regions { display: grid; gap: 8px; margin-bottom: 16px; }
.hp-rg { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 52px; gap: 10px; align-items: center; font-size: 13px; color: var(--text-md); }
.hp-rg-b { height: 8px; border-radius: 5px; background: var(--border); overflow: hidden; } .hp-rg-b i { display: block; height: 100%; background: linear-gradient(90deg, #F0C96A, #D4A843); border-radius: 5px; }
.hp-rg b { text-align: right; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.hp-story { padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-glass2, rgba(255,255,255,.03)); margin-top: 10px; }
.hp-story-h { display: flex; align-items: center; gap: 12px; }
.hp-story-h > div { flex: 1; min-width: 0; } .hp-story-h b { display: block; color: var(--text-hi); font-size: 15px; } .hp-story-h small { color: var(--text-lo); font-size: 12px; }
.hp-flag { font-size: 28px; } .hp-story-p { font: 800 18px var(--font-disp, Syne, sans-serif); color: var(--gold, #D4A843); }
.hp-story p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-md); }
.hp-nb { margin-top: 8px; font-size: 12.5px; color: var(--text-lo); }
.hp-note { margin: 14px 0 0; font-size: 11.5px; color: var(--text-lo); text-align: center; }
.hp-lockbox { position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; }
.hp-blur { filter: blur(7px); opacity: .6; pointer-events: none; user-select: none; }
.hp-lockcta { position: absolute; inset: 0; margin: auto; height: fit-content; width: min(420px, calc(100% - 24px)); text-align: center; background: var(--bg-card); border: 1px solid rgba(212,168,67,.4); border-radius: 18px; padding: 20px 18px; box-shadow: 0 18px 44px rgba(0,0,0,.35); display: grid; gap: 8px; justify-items: center; color: var(--gold, #D4A843); }
.hp-lockcta b { color: var(--text-hi); font: 800 1.05rem var(--font-disp, Syne, sans-serif); } .hp-lockcta span { font-size: 13px; color: var(--text-md); }
.hp-mini { padding: 14px 16px; }
.hp-mini-in { display: flex; align-items: center; gap: 12px; }
.hp-mini-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(212,168,67,.14); color: var(--gold, #D4A843); flex: none; }
.hp-mini-in > div:nth-child(2) { flex: 1; min-width: 0; } .hp-mini-in b { display: block; color: var(--text-hi); font-size: 14px; } .hp-mini-in span { font-size: 12.5px; color: var(--text-lo); }
@media (max-width: 700px) { .hp-body { grid-template-columns: 1fr; } .hp-canvas { max-width: 300px; margin: 0 auto; } .hp-mini-in { flex-wrap: wrap; } .hp-rg { grid-template-columns: 90px 1fr 48px; } }

/* ---- Origin Story v2: deep history ---- */
.hp-gtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.hp-gtab { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border2); background: transparent; color: var(--text-md); font: 700 13px var(--font-body, sans-serif); }
.hp-gtab em { font-style: normal; color: var(--gold, #D4A843); margin-left: 4px; }
.hp-gtab.on { border-color: var(--gold, #D4A843); background: rgba(212,168,67,.14); color: var(--text-hi); }
.hp-pane[hidden] { display: none; }
.hp-pane-head h3 { margin: 0; font: 800 1.35rem var(--font-disp, Syne, sans-serif); color: var(--text-hi); }
.hp-pane-head p { margin: 4px 0 8px; font-size: 14px; color: var(--text-md); }
.hp-read { display: inline-block; font: 600 11.5px var(--font-mono, monospace); color: var(--gold, #D4A843); background: rgba(212,168,67,.12); border-radius: 999px; padding: 4px 10px; }
.hp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.hp-mini-btn { cursor: pointer; border: 1px solid var(--border2); background: transparent; color: var(--text-md); border-radius: 999px; padding: 7px 13px; font: 600 12.5px var(--font-body, sans-serif); }
.hp-mini-btn:hover { border-color: var(--gold, #D4A843); color: var(--text-hi); }
.hp-ch { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-glass2, rgba(255,255,255,.03)); margin-top: 8px; overflow: hidden; }
.hp-ch-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; background: none; border: 0; padding: 14px 16px; font: 700 15px var(--font-disp, Syne, sans-serif); color: var(--text-hi); }
.hp-ch-h i { width: 9px; height: 9px; border-right: 2px solid var(--gold, #D4A843); border-bottom: 2px solid var(--gold, #D4A843); transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: 4px; }
.hp-ch.open .hp-ch-h i { transform: rotate(-135deg); }
.hp-ch-b { display: none; padding: 0 16px 14px; }
.hp-ch.open .hp-ch-b { display: block; }
.hp-ch-b p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var(--text-md); }
.hp-ch-b p:last-child { margin-bottom: 0; }
.hp-block { margin-top: 20px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-glass2, rgba(255,255,255,.03)); }
.hp-block-h { font: 800 14px var(--font-disp, Syne, sans-serif); color: var(--text-hi); margin-bottom: 12px; }
.hp-rail { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.hp-node { position: relative; flex: 1 0 34px; height: 24px; background: none; border: 0; cursor: pointer; padding: 0; }
.hp-node::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--border2); }
.hp-node.past::before, .hp-node.on::before { background: var(--gold, #D4A843); }
.hp-node i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--bg-card); border: 2px solid var(--border2); transition: all .2s; }
.hp-node.past i { border-color: var(--gold, #D4A843); }
.hp-node.on i { width: 18px; height: 18px; background: var(--gold, #D4A843); border-color: var(--gold, #D4A843); box-shadow: 0 0 0 5px rgba(212,168,67,.22); }
.hp-tl-card { min-height: 78px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(212,168,67,.35); background: rgba(212,168,67,.08); display: grid; gap: 4px; }
.hp-tl-card b { font: 800 15px var(--font-disp, Syne, sans-serif); color: var(--gold, #D4A843); }
.hp-tl-card span { font-size: 14.5px; line-height: 1.5; color: var(--text-hi); }
.hp-tl-ctl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hp-warriors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hp-war { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); }
.hp-war b { display: block; color: var(--text-hi); font-size: 14.5px; }
.hp-war small { color: var(--gold, #D4A843); font: 600 11.5px var(--font-mono, monospace); }
.hp-war p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-md); }
.hp-hap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp-hap small { display: block; margin-bottom: 6px; font: 600 11.5px var(--font-mono, monospace); color: var(--text-lo); text-transform: uppercase; letter-spacing: .06em; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chips span { padding: 5px 10px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border2); font-size: 12.5px; color: var(--text-hi); }
.hp-hap-n { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-lo); }
.hp-facts { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--text-md); }
.hp-match { padding: 12px 0; border-top: 1px solid var(--border); }
.hp-match:first-of-type { border-top: 0; padding-top: 0; }
.hp-match-h { display: flex; align-items: center; gap: 10px; } .hp-match-h b { color: var(--text-hi); flex: 1; } .hp-match-h em { font-style: normal; font: 800 15px var(--font-disp, Syne, sans-serif); color: var(--gold, #D4A843); }
.hp-match p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-md); }
.hp-wiki { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--bg-card); border: 1px dashed var(--border2); }
.hp-wiki[hidden] { display: none; }
.hp-wiki small { display: block; font: 600 11px var(--font-mono, monospace); color: var(--text-lo); }
.hp-wiki p { margin: 6px 0; font-size: 13px; line-height: 1.6; color: var(--text-md); }
.hp-wiki a { font-size: 12.5px; color: var(--gold, #D4A843); }
/* locked v2 */
.hp-lockbox-v2 { min-height: 0; padding: 4px 0 0; overflow: visible; }
.hp-preview { position: relative; margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-glass2, rgba(255,255,255,.03)); overflow: hidden; max-height: 150px; }
.hp-ch-static { padding: 0 0 8px; cursor: default; }
.hp-preview p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-md); }
.hp-preview-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, transparent, var(--bg-card)); }
.hp-locklist { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.hp-locklist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 13.5px; color: var(--text-md); }
.hp-locklist svg { width: 16px; height: 16px; color: var(--gold, #D4A843); flex: none; }
.hp-lockcta-row { display: grid; gap: 8px; justify-items: start; } .hp-lockcta-row small { color: var(--text-lo); font-size: 12px; }
@media (max-width: 700px) { .hp-hap { grid-template-columns: 1fr; } .hp-block { padding: 14px 12px; } }