/* ==========================================================
   METAL LAYER — gold & silver finishes (taken from the card frames)
   Loaded after arcana.css.
   ========================================================== */
:root {
  --gold: #d9b35a;
  --gold-2: #f3dc8f;
  --gold-dim: rgba(217, 179, 90, .16);
  --metal-gold: linear-gradient(115deg, #8a6420 0%, #f9e7a1 22%, #c99a3b 42%, #fff4c2 58%, #b3862c 78%, #f0d27e 100%);
  --metal-silver: linear-gradient(115deg, #8c93a3 0%, #ffffff 22%, #b9c0cd 42%, #f4f6fa 58%, #9aa2b2 78%, #e8ebf2 100%);
  --metal-chrome: linear-gradient(115deg, #b9a2f0 0%, #f3dc8f 25%, #e2d4ff 50%, #9b7be0 75%, #b9a2f0 100%);
  --hair-gold: linear-gradient(135deg, rgba(249,231,161,.85), rgba(201,154,59,.22) 35%, rgba(185,192,205,.14) 65%, rgba(244,246,250,.65));
  --tex-gold: url("../img/textures/glitter-gold.webp");
  --tex-silver: url("../img/textures/glitter-silver.webp");
  --c-common: #f0f0f0;
  --c-rare: #c4c8d0;
  --c-epic: #dfe4ec;
  --c-legendary: #e9bf55;
  --c-mythic: #ffd76a;
}

/* ---------- metallic typography ---------- */
.metal-gold, .welcome-area h1 .gradient-text, .counter-box .counter, .eyebrow, .single-footer h3, .timeline.active .card h3,
.section-title .gradient-text, .display-5 .gradient-text, .welcome-area h2 strong.gradient-text {
  background: var(--metal-gold); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.metal-silver, .section-title, .welcome-area h1, .display-4, .display-5, .display-6 {
  background: var(--metal-silver); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome-area h1, .welcome-area h1 .gradient-text, .section-title, .counter-box .counter, .eyebrow { animation: metal-shift 9s ease-in-out infinite; }
@keyframes metal-shift { 50% { background-position: 100% 0; } }
.gradient-text { color: var(--gold-2); }
.counter-box .counter.text-legendary { background: var(--tex-gold) center / 80px; -webkit-background-clip: text; background-clip: text; }

/* eyebrow with ornaments */
.eyebrow { display: inline-block; letter-spacing: .28em; font-size: .78rem; font-weight: 700; }
.text-center > .eyebrow { position: relative; padding: 0 54px; }
.text-center > .eyebrow::before, .text-center > .eyebrow::after { content: "" !important; position: absolute; top: 50%; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, #d9b35a); }
.text-center > .eyebrow::before { left: 0; }
.text-center > .eyebrow::after { right: 0; transform: scaleX(-1); }

/* ornament under section titles */
.section-title::after { content: ""; display: block; width: 170px; height: 14px; margin: 18px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d9b35a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f9e7a1'/%3E%3Cstop offset='1' stop-color='%23d9b35a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='6.5' width='170' height='1' fill='url(%23g)'/%3E%3Cpath d='M85 1l6 6-6 6-6-6z' fill='%23f9e7a1'/%3E%3Cpath d='M85 4l3 3-3 3-3-3z' fill='%230a0d23'/%3E%3Ccircle cx='68' cy='7' r='1.5' fill='%23d9b35a'/%3E%3Ccircle cx='102' cy='7' r='1.5' fill='%23d9b35a'/%3E%3C/svg%3E") center / contain no-repeat; }
.section-title.text-start::after { margin-left: 0; }

/* ---------- buttons: polished gold, violet, silver outline ---------- */
.btn-arcana-gold { background: var(--metal-gold); background-size: 180% 100%; color: #1d1405 !important; border: 0; font-weight: 700;
  box-shadow: 0 10px 30px rgba(217,179,90,.28), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(90,60,10,.35); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn-arcana-gold:hover, .btn-arcana-gold:focus { background: var(--metal-gold); background-size: 180% 100%; background-position: 100% 0; color: #1d1405 !important;
  box-shadow: 0 12px 40px rgba(217,179,90,.45), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-arcana-gold::after { background: linear-gradient(110deg, transparent, rgba(255,255,255,.8), transparent); }
.btn-arcana { background: linear-gradient(180deg, #7f5bc4, #6f4cb1 50%, #5a3c94); color: #fefee2; box-shadow: 0 10px 28px rgba(111,76,177,.4), inset 0 1px 0 rgba(255,255,255,.25); border: 0; }
.btn-arcana:hover, .btn-arcana:focus { background: linear-gradient(180deg, #8c68d1, #7552bb 50%, #5f409c); color: #fff; box-shadow: 0 12px 34px rgba(111,76,177,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-arcana-outline { border: 1px solid transparent; background: linear-gradient(#0c0f29, #0c0f29) padding-box, var(--metal-silver) border-box; color: #eef0f6; }
.btn-arcana-outline:hover, .btn-arcana-outline:focus { border: 1px solid transparent; background: linear-gradient(#141834, #141834) padding-box, var(--metal-gold) border-box; color: #fff; }

/* ---------- framed panels: gold → silver hairline ---------- */
.counter-box, .glass, .timeline .card, .tx-box, .pbar, .auth-box {
  border: 1px solid transparent !important;
  background: linear-gradient(var(--color-darkblue), var(--color-darkblue)) padding-box, var(--hair-gold) border-box !important;
}
.counter-box { position: relative; overflow: hidden; }
.counter-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(217,179,90,.09), transparent 70%); }
.counter-box p { color: #b3ae9c !important; }
.counter-box:hover { box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 30px rgba(217,179,90,.14); }

/* ---------- nav & footer hairlines ---------- */
.arcana-nav { border-bottom: 0 !important; }
.arcana-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,179,90,.55), rgba(244,246,250,.45), rgba(217,179,90,.55), transparent); }
.arcana-nav .nav-link:hover, .arcana-nav .nav-link.active { color: var(--gold-2); }
.arcana-nav .nav-link.active::after { background: var(--metal-gold); height: 2px; }
.pack-pill { border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--metal-gold) border-box; }
.pack-pill i { color: var(--gold-2); }
.arcana-footer { border-top: 0 !important; position: relative; }
.arcana-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,179,90,.6), rgba(244,246,250,.5), rgba(217,179,90,.6), transparent); }
.single-footer h3 { letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }
.single-footer ul li a:hover { color: var(--gold-2); }

/* ---------- rarity chart with the real frame finishes ---------- */
.chart span { box-shadow: 0 0 34px -8px currentColor, inset 0 1px 0 rgba(255,255,255,.6); }
.chart .bg-common { background: linear-gradient(180deg, #ffffff, #d9d9d9); }
.chart .bg-rare { background: linear-gradient(180deg, #e9ecf1, #9ea4ae); }
.chart .bg-epic { background: var(--tex-silver) center / 120px, #bfc5cf; }
.chart .bg-legendary { background: var(--tex-gold) center / 120px, #b68a2c; }
.chart .bg-mythic { background: var(--metal-chrome); background-size: 300% 100%; animation: draw 1.4s cubic-bezier(.2,.8,.2,1) both, metal-shift 5s ease-in-out infinite; }
.chart .text-common { color: #f0f0f0; } .chart .text-rare { color: #c4c8d0; } .chart .text-epic { color: #dfe4ec; }
.chart .text-legendary { color: #e9bf55; } .chart .text-mythic { color: #ffd76a; }

/* ---------- rarity badges ---------- */
.badge-rarity { border: 0; color: #1a1406 !important; padding: .42em 1em; text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.3); }
.badge-common { background: linear-gradient(180deg, #ffffff, #d6d6d6); }
.badge-rare { background: linear-gradient(180deg, #eceff4, #a3a9b3); }
.badge-epic { background: var(--metal-silver); }
.badge-legendary { background: var(--metal-gold); }
.badge-mythic { background: var(--metal-chrome); background-size: 300% 100%; animation: metal-shift 5s ease-in-out infinite; }
.text-legendary { color: #e9bf55 !important; } .text-epic { color: #dfe4ec !important; } .text-mythic { color: #ffd76a !important; } .text-rare { color: #c4c8d0 !important; }

/* ---------- roadmap: gold spine & dots ---------- */
.main-timeline::after { background: linear-gradient(180deg, #f9e7a1, #c99a3b 40%, rgba(185,192,205,.35)) !important; width: 2px !important; margin-left: -1px !important; }
.timeline::after { background: var(--color-darkblue) !important; border: 1px solid rgba(217,179,90,.5) !important; box-shadow: none !important; }
.timeline.active::after { background: var(--tex-gold) center / 60px !important; border: 1px solid #f9e7a1 !important; box-shadow: 0 0 16px rgba(217,179,90,.6) !important; }
.timeline .list-group-item[data-status="finalized"]::before { color: #e9bf55; }
.timeline .list-group-item[data-status="ongoing"]::before { color: #f3dc8f; }

/* ---------- welcome ---------- */
.pack-halo { background: radial-gradient(circle, rgba(217,179,90,.3), rgba(111,76,177,.35) 40%, transparent 68%) !important; }
.welcome-pack { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(217,179,90,.28)) !important; }
.welcome-area::after { background:
  radial-gradient(ellipse 50% 60% at 78% 50%, rgba(217,179,90,.16), transparent 70%),
  radial-gradient(ellipse 60% 70% at 78% 50%, rgba(111,76,177,.5), transparent 72%),
  linear-gradient(90deg, rgba(10,13,35,.97) 0%, rgba(10,13,35,.88) 45%, rgba(10,13,35,.55) 100%),
  linear-gradient(0deg, var(--bg) 0%, transparent 25%) !important; }

/* ---------- cards ---------- */
.rarity-legendary { --glow: rgba(233,191,85,.45); } .rarity-epic { --glow: rgba(223,228,236,.3); } .rarity-mythic { --glow: rgba(255,215,106,.5); }
.tcg-card.mystery.rarity-legendary { box-shadow: 0 8px 24px rgba(2,4,20,.5), 0 0 0 2px #c99a3b; }
.tcg-card.mystery.rarity-epic { box-shadow: 0 8px 24px rgba(2,4,20,.5), 0 0 0 2px #b9c0cd; }
.tcg-card.mystery.rarity-mythic { box-shadow: 0 8px 24px rgba(2,4,20,.5), 0 0 0 2px #ffd76a, 0 0 30px rgba(255,215,106,.35); }
.tcg-card.mystery .mystery-mark { background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(217,179,90,.55)); }
.tcg-card.mystery.rarity-epic .mystery-mark, .tcg-card.mystery.rarity-rare .mystery-mark, .tcg-card.mystery.rarity-common .mystery-mark { background: var(--metal-silver); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 12px rgba(244,246,250,.4)); }

/* spotlight display case (gold glitter frame) */
.display-case { position: relative; padding: 12px; border-radius: 22px; background: var(--tex-gold) center / 140px; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(217,179,90,.25); }
.display-case::before { content: ""; position: absolute; inset: 5px; border-radius: 18px; background: var(--color-darkblue); }
.display-case > * { position: relative; }
.spot-wrap { position: relative; }
.spot-light { position: absolute; left: 50%; top: -140px; width: 460px; height: 560px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 40% 60% at 50% 0%, rgba(249,231,161,.16), transparent 70%); }

/* misc */
.discovery-track span { background: var(--metal-gold) !important; }
.effect-item { border-left: 2px solid #d9b35a !important; background: linear-gradient(90deg, rgba(217,179,90,.08), transparent) !important; }
.feature .ico, .counter-box .bi.text-violet { color: #f3dc8f !important; }
.stars i { color: #e9bf55; }
.chip-check input:checked + span { background: var(--metal-gold) !important; border-color: transparent !important; color: #1d1405 !important; font-weight: 600; }
.form-control:focus, .form-select:focus { border-color: #d9b35a !important; box-shadow: 0 0 0 .2rem rgba(217,179,90,.18) !important; }
.packs-counter { border: 1px solid transparent !important; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--metal-gold) border-box !important; color: #f3dc8f !important; }
.cro-balance { background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.new-tag { background: var(--metal-gold) !important; color: #1d1405 !important; }
.legend-banner { background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none; filter: drop-shadow(0 6px 30px rgba(217,179,90,.6)); }
.go-title { background: var(--metal-gold) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.defeat .go-title { background: var(--metal-silver) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* arena accents */
.tok.selected, .hcard.selected .hc-in { box-shadow: 0 0 0 2px #e9bf55, 0 0 26px rgba(217,179,90,.45) !important; }
.phase-track span.on { color: #f3dc8f; border-bottom-color: #d9b35a; }
.actions .act-title { background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.d-eff { border-left-color: #d9b35a; }
.turn-pill.mine { background: linear-gradient(#0c0f29, #0c0f29) padding-box, var(--metal-gold) border-box !important; border: 1px solid transparent !important; color: #f3dc8f; }