/* === ANVILHOLD — cabinet skin for the inner pages ===
   Loaded after each page's own <style>, so these rules win on equal specificity.
   The home page (brands/anvilhold/pages/index.html) carries its own layout. */
:root { --font-pixel: 'Press Start 2P', var(--font-ui); --bezel: #242c35; --ink: #0a0d10; --silver: #b8c4c8; --bronze: #b8623c; }

/* ---------- Nav: cabinet buttons ---------- */
.nav { background: var(--dark); border-bottom: 2px solid var(--surface-2); }
.nav-links { gap: 6px; }
.nav-links a {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.04em; font-weight: 400;
  padding: 12px 14px; border: 2px solid var(--surface-2); border-bottom-color: var(--ink);
  background: var(--surface); color: var(--muted); border-radius: 0;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); border-bottom-color: var(--ink); }
.mobile-drawer a { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.04em; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.04em; font-weight: 400; line-height: 1.6;
  padding: 13px 18px; border-radius: 0; text-shadow: none;
  background: var(--highlight); color: var(--black);
  border: 2px solid var(--highlight-bright); border-right-color: var(--highlight-dim); border-bottom-color: var(--highlight-dim);
  box-shadow: none;
}
.btn:hover { background: var(--highlight-bright); box-shadow: 0 0 22px rgba(var(--highlight-rgb), 0.3); transform: none; }
.btn:active { transform: translateY(2px); }
.btn-secondary { background: var(--surface); color: var(--highlight); border: 2px solid var(--highlight-dim); }
.btn-secondary:hover { background: var(--surface-2); color: var(--highlight-bright); border-color: var(--highlight-dim); box-shadow: none; }
.btn-compact { padding: 11px 14px; font-size: 9px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Shared type ---------- */
.eyebrow { font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.04em; color: var(--accent); }
.h1, .h2, .h3 { font-weight: 900; letter-spacing: 0.02em; }
.divider-flame { background: var(--surface-2); height: 2px; }
.divider-thin { background: var(--surface-2); opacity: 1; height: 2px; }

/* Page heroes (store, leaderboard, terms): solid brass title on a bezel band */
.page-hero, .page-header { padding: 132px 0 44px; }
.page-hero::before, .page-header::after { display: none; }
.page-hero h1, .page-header .h2 {
  background: none; -webkit-text-fill-color: var(--highlight); color: var(--highlight);
  font-weight: 900; letter-spacing: 0.02em; font-size: clamp(36px, 6vw, 60px);
}
.page-hero p, .page-header p { font-style: normal; opacity: 0.85; }

/* ---------- Panels: one cabinet tile treatment ---------- */
.cur-pack, .card, .cur-custom, .season, .pod, .table-wrap, .search, .filter, .server-pick,
details, .cart, .pay-box, .card-box, .currency-badge, .pdf-frame-wrap, .prize, .page-btn {
  border-radius: 0; border: 2px solid var(--surface-2); background: var(--surface); box-shadow: none;
}
.cur-pack::before, .card::before, .pdf-frame-wrap::before { height: 3px; background: var(--accent); }
.cur-pack:hover, .card:hover { border-color: var(--surface-2); box-shadow: 0 0 0 2px var(--accent); transform: none; }
.cur-pack.selected { border-color: var(--highlight); box-shadow: 0 0 0 2px var(--highlight); background: var(--surface-2); }
.cur-pack.selected::after, .cur-pack .ep-badge { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.04em; }
.cur-pack .ep-badge { background: var(--highlight); color: var(--black); padding: 6px 10px; top: -2px; }
.cur-pack .ep-label, .card .type, .badge-label, .cur-custom-label small, .cur-price-preview small,
.pod-class, .season .label, .cart-item .ci-meta, .pay-label, .label, .strength-label, .live-check, .top-back {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.6;
}
.cur-pack .ep-price { color: var(--highlight); font-family: var(--font-ui); }
.cur-pack .ep-btn, .card .add, .add-cart-btn, .page-btn, .cart-trigger, .cur-qty-wrap button {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.04em; font-weight: 400;
  background: var(--surface); color: var(--highlight); border: 2px solid var(--highlight-dim); border-radius: 0;
}
.cur-pack .ep-btn:hover, .card .add:hover, .add-cart-btn:hover, .page-btn:hover, .cart-trigger:hover {
  background: var(--highlight); color: var(--black); border-color: var(--highlight-bright);
}
.page-btn.active { background: var(--highlight); color: var(--black); border-color: var(--highlight-bright); box-shadow: none; }
.cur-qty-wrap { border: 2px solid var(--surface-2); }
.cur-qty-wrap button { border: none; width: 40px; }
.cur-qty-wrap input { background: var(--dark); border-left: 2px solid var(--surface-2); border-right: 2px solid var(--surface-2); font-family: var(--font-pixel); font-size: 12px; }
.cart-trigger .count { border-radius: 0; background: var(--accent); color: var(--black); font-family: var(--font-pixel); font-size: 8px; }
.item-icon { background: var(--dark); border: 2px solid var(--ink); }
.item-icon::after { background: radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.18), transparent 60%); }
.card .price .cur-icon, .badge-cur-img, .cur-pack img, .cur-custom img, .cart-item .ci-icon img { image-rendering: auto; }
.card .name { font-size: 15px; }
.currency-badge { top: 96px; }

/* Cart drawer + payment modal */
.cart { border-left: 2px solid var(--surface-2); border-top: 3px solid var(--accent); background: var(--dark); }
.cart-head h3, .pay-summary-name { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.04em; }
.cart-item .ci-icon { border: 2px solid var(--surface-2); }
.pay-box { background: var(--dark); border-top: 3px solid var(--accent); }
.pay-input, .input, .search, .filter, .server-pick select, .cur-qty-wrap input {
  border-radius: 0; border: 2px solid var(--surface-2); background: var(--dark); color: var(--text);
}
.pay-input:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); }
.pay-error { border-radius: 0; background: rgba(217,122,122,0.12); border: 2px solid rgba(217,122,122,0.4); }
.pay-success-icon, .status-icon.ok, .success-icon { color: var(--accent); }

/* FAQ */
details { margin-bottom: 10px; }
details[open] { border-color: var(--surface-2); box-shadow: inset 4px 0 0 var(--accent); }
summary { font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.04em; line-height: 1.6; color: var(--text); }
summary::after { color: var(--highlight); }

/* ---------- Leaderboard ---------- */
.season { border-top: 3px solid var(--accent); }
.season h3 { font-weight: 900; }
.prize { border-radius: 0; }
.prize.gold { border-color: var(--highlight); box-shadow: none; }
.podium { align-items: stretch; }
.pod.first { border: 2px solid var(--highlight); box-shadow: 0 0 0 2px var(--highlight); }
.pod.first::before { text-shadow: none; }
.pod .rank { font-family: var(--font-pixel); font-size: 32px; }
.pod-avatar, .pl-av { border-radius: 0; background: var(--dark); box-shadow: none; }
.pod-name, .pl-name { font-weight: 700; }
thead th { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.04em; font-weight: 400; border-bottom: 2px solid var(--surface-2); }
tbody tr:nth-child(odd) { background: var(--dark); }
tbody tr:nth-child(even) { background: var(--surface); }
tbody td:first-child { font-family: var(--font-pixel); font-size: 12px; }
.search input { font-family: var(--font-ui); }
.server-pick { font-family: var(--font-pixel); font-size: 8px; }

/* ---------- Auth ---------- */
.world::before { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--accent-rgb), 0.16), transparent 65%); }
.world .logo { width: min(100%, 480px); height: auto; }
.logo-img { border-radius: 0; object-fit: contain; }   /* shared.css rounds .logo-img to 50%, which clipped the wordmark's corners (A and D) */
.world .logo-img { width: 100%; height: auto; box-shadow: none; }
.world .warrior, .logo-runes { display: none; }
.world-tag { font-style: italic; opacity: 0.9; margin: 20px 0 0; }
.form-side { border-left: 2px solid var(--surface-2); background: var(--dark); }
@media (max-width: 900px) { .form-side { border-left: none; border-top: 2px solid var(--surface-2); } }
.auth-tabs { border: 2px solid var(--surface-2); background: var(--dark); padding: 4px; border-radius: 0; }
.auth-tab { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.04em; font-weight: 400; border-radius: 0; opacity: 1; color: var(--muted); }
.auth-tab.active { background: var(--highlight); color: var(--black); box-shadow: none; }
.form-title { font-weight: 900; letter-spacing: 0.02em; }
.input { padding: 13px 14px; }
.check { border: 2px solid var(--surface-2); background: var(--dark); }
.checkmark { background: var(--highlight); color: var(--black); }
.forgot { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.04em; }
.strength .s { border: 1px solid var(--surface-2); background: var(--dark); }
.strength.l1 .s:nth-child(-n+1) { background: var(--danger); }
.strength.l3 .s:nth-child(-n+3) { background: var(--accent-2); }
.strength.l4 .s { background: var(--accent); box-shadow: none; }
.success h2 { text-shadow: none; }
.success-logo { width: 320px !important; height: auto !important; }
.progress { border: 2px solid var(--surface-2); background: var(--dark); border-radius: 0; height: 10px; }
.progress > div { background: var(--accent); box-shadow: none; }

/* ---------- Verify / reset cards ---------- */
.center-wrap::before { background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(var(--accent-rgb), 0.12), transparent 60%); }
.card-box { border-top: 3px solid var(--accent); background: var(--dark); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.card-box .logo { width: 200px; height: auto; }
.card-box .logo-img { width: 100%; height: auto; }
.card-box h1 { font-weight: 900; letter-spacing: 0.02em; }
.spinner { border: 3px solid var(--surface-2); border-top-color: var(--accent); border-radius: 0; animation-timing-function: steps(8, end); }

/* ---------- Terms ---------- */
.pdf-frame-wrap { background: var(--dark); }

/* ---------- Footers on inner pages ---------- */
footer { border-top: 2px solid var(--surface-2); background: var(--dark); }
.footer-bottom { border-top: none; }