/* v2.12: starting relic pick, gold, shop */
.relics .gold { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(230,176,75,.6); background: rgba(230,176,75,.12); color: var(--brass); font-family: var(--hud); font-weight: 700; font-size: calc(15px * var(--fs)); margin-bottom: 4px; }
.relics .gold i { font-style: normal; font-size: calc(12px * var(--fs)); }
.overlay .card.relicpick { width: 980px; max-width: 96%; gap: 14px; }
.overlay .relicpick .sub { font-size: calc(13px * var(--fs)); color: var(--muted); margin: 0; }
.overlay .relicpick .sub b { font-family: var(--hud); color: var(--brass); letter-spacing: .08em; }
.overlay .relicpick .rp-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.overlay .relicpick .rp-item { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; text-align: left; background: rgba(230,176,75,.08); border: 1px solid rgba(230,176,75,.5); border-radius: 8px; color: var(--text); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.overlay .relicpick .rp-item:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--brass), 0 0 30px rgba(230,176,75,.5); }
.overlay .relicpick .rp-item .rn-name { font-size: calc(20px * var(--fs)); font-weight: 900; letter-spacing: .12em; color: var(--brass); }
.overlay .relicpick .rp-item .rn-desc { font-size: calc(13px * var(--fs)); line-height: 1.5; flex: 1; }
.overlay .relicpick .rp-item .rp-pick { align-self: flex-end; font-size: calc(13px * var(--fs)); letter-spacing: .2em; padding: 5px 14px; border-radius: 4px; background: var(--brass); color: #2A1E08; font-weight: 700; }
.overlay .card.shop { background: #0F1424; width: 1360px; max-width: 96%; max-height: 94%; overflow: auto; padding: 0 24px 0; gap: 14px; align-items: stretch; text-align: left; }
.overlay .shop .ed-head { position: sticky; top: 0; z-index: 3; margin: 0 -24px; padding: 18px 24px 10px; background: #0F1424; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.overlay .shop .ed-head .ttl { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.overlay .shop .ed-head .big { text-align: left; padding-left: 0; letter-spacing: .3em; font-size: calc(30px * var(--fs)); }
.overlay .shop .ed-head .sub { font-size: calc(13px * var(--fs)); color: var(--muted); }
.overlay .shop .ed-head .sub b.warn { color: var(--crimson); }
.overlay .shop .gold-big { display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; border: 1px solid rgba(230,176,75,.6); border-radius: 6px; background: rgba(230,176,75,.1); }
.overlay .shop .gold-big span { font-size: calc(12px * var(--fs)); letter-spacing: .2em; color: var(--muted); }
.overlay .shop .gold-big b { font-family: var(--hud); font-size: calc(28px * var(--fs)); color: var(--brass); }
.overlay .shop .shop-sec { display: flex; flex-direction: column; gap: 10px; }
.overlay .shop .shop-cards { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 14px; }
.overlay .shop .shop-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.overlay .shop .shop-item .cas { width: 150px; height: calc(232px * var(--fs)); overflow: hidden; display: flex; flex-direction: column; }
.overlay .shop .shop-item.sold .cas { opacity: .35; filter: grayscale(.7); }
.overlay .shop button.buy { width: 150px; padding: 7px 0; border-radius: 4px; border: 1px solid var(--brass); background: var(--brass); color: #2A1E08; font-family: var(--hud); font-weight: 700; font-size: calc(16px * var(--fs)); letter-spacing: .08em; }
.overlay .shop button.buy:disabled { background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; opacity: .7; }
.overlay .shop .shop-relics { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.overlay .shop .shop-relic { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 12px 16px; border: 1px solid rgba(230,176,75,.45); border-radius: 8px; background: rgba(230,176,75,.06); }
.overlay .shop .shop-relic .rn-name { font-size: calc(17px * var(--fs)); font-weight: 900; letter-spacing: .1em; color: var(--brass); }
.overlay .shop .shop-relic .rn-desc { font-size: calc(13px * var(--fs)); color: var(--text); grid-column: 1; }
.overlay .shop .shop-relic button.buy { grid-column: 2; grid-row: 1 / 3; width: 110px; }
.overlay .shop .shop-relic.sold { opacity: .45; }
.overlay .shop .empty { color: var(--muted); font-size: calc(13px * var(--fs)); }
.overlay .shop .row-btn.end { position: sticky; bottom: 0; z-index: 3; margin: 0 -24px; padding: 10px 24px 16px; background: #0F1424; border-top: 1px solid var(--line); justify-content: flex-end; }
.overlay .summary .sum-right { display: flex; gap: 10px; }