/* ==========================================================================
   PAGES — banners, home, dashboard, collection, card detail, battle, ranks, settings.
   ========================================================================== */
.acc-violet { --accent: var(--violet); } .acc-pink { --accent: var(--pink); } .acc-gold { --accent: var(--gold); }
.acc-cyan { --accent: var(--cyan); } .acc-green { --accent: var(--green); } .acc-red { --accent: var(--red); } .acc-orange { --accent: var(--orange); }
.flip { transform: scaleX(-1); }
.small-note { font-size: .8rem; }
.err-page { max-width: 560px; margin: 4rem auto; }

/* ---- Banner (home hero + shop): split-art frame with a fan of cards ----------------------------------- */
.banners { position: relative; }
.bn-radio { position: absolute; opacity: 0; pointer-events: none; }
.banner { position: relative; border: 1px solid rgba(245, 181, 61, .6); background: #08080a; overflow: hidden; box-shadow: 0 0 50px rgba(245, 181, 61, .07); }
.slide { display: none; position: relative; min-height: 500px; animation: fade .35s both; }
.slide.solo, #bn1:checked ~ .banner .s1, #bn2:checked ~ .banner .s2, #bn3:checked ~ .banner .s3 { display: block; }
.b-art { position: absolute; inset: 0; overflow: hidden; background: #08080a; }
.b-art svg, .b-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.b-art img { opacity: .55; transform: scale(1.04); }
/* readable text on the left, art fades out toward the featured card on the right */
.b-art::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, #08080a 0, rgba(8, 8, 10, .88) 28%, rgba(8, 8, 10, .35) 60%, rgba(8, 8, 10, .1) 100%), linear-gradient(0deg, #08080a 0, transparent 30%); }
/* one large featured card built from the real artwork */
.b-feature { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; padding: 2rem 7% 2rem 0; pointer-events: none; }
.bf { width: clamp(210px, 20vw, 290px); pointer-events: auto; animation: floaty 6s ease-in-out infinite; }
.bf .tcard { box-shadow: 0 30px 60px rgba(0, 0, 0, .7); }
.b-caption { display: block; margin-top: .9rem; text-align: center; font: 700 .68rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: #d6d6dd; }
.b-caption b { display: block; font: 400 1.25rem var(--display); letter-spacing: .04em; color: #fff; }
.b-content { position: relative; z-index: 3; max-width: 640px; padding: 4.6rem 3.4rem 2.6rem; display: flex; flex-direction: column; gap: 1rem; }
.b-title { font: 400 clamp(3.6rem, 8vw, 6.4rem)/.88 var(--display); letter-spacing: .01em; margin: 0; text-transform: uppercase; }
.b-sub { color: #d6d6dd; max-width: 31rem; margin: 0; }
.b-rates { font: 700 .76rem var(--body); letter-spacing: .08em; color: #e8e8ee; }
.b-rates:hover { color: var(--gold); }
.b-buttons { display: flex; gap: .6rem; flex-wrap: wrap; }
.pity { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; max-width: 30rem; font: 800 .64rem var(--body); letter-spacing: .18em; color: #e8e8ee; }
.pity-note { font-size: .74rem; color: #b8b8c2; max-width: 30rem; margin: 0; }
.b-timer { font-size: .78rem; color: #d6d6dd; margin: 0; }
.b-timer b { color: #fff; }
.b-chips { position: absolute; z-index: 5; left: 1.4rem; top: 1.2rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.bchip { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .85rem .35rem .4rem; border: 1px solid var(--line2); border-radius: 999px; background: rgba(0, 0, 0, .7); font: 700 .72rem var(--body); color: #cfcfd6; cursor: pointer; transition: border-color .2s, color .2s; }
.bchip:hover { color: #fff; border-color: #fff; }
.bchip i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #14100a; background: linear-gradient(135deg, #ffd98a, var(--orange)); }
.bchip i .ico { width: 12px; height: 12px; stroke-width: 2.4; }
#bn1:checked ~ .banner label[for=bn1], #bn2:checked ~ .banner label[for=bn2], #bn3:checked ~ .banner label[for=bn3] { border-color: var(--gold); color: #fff; box-shadow: 0 0 0 1px var(--gold) inset; }
.bnav { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; }
.bnav:hover { border-color: var(--gold); color: var(--gold); }
.bnav.prev { left: .6rem; } .bnav.next { right: .6rem; }
.bnav.prev .ico { transform: scaleX(-1); }
@media (max-width: 860px) {
    .slide { min-height: 0; }
    .b-content { padding: 4.4rem 1.4rem 1rem; max-width: none; }
    .b-art::before { background: linear-gradient(180deg, rgba(8, 8, 10, .55), #08080a 72%); }
    .b-feature { position: relative; inset: auto; justify-content: center; padding: .4rem 0 1.6rem; }
    .bf { width: min(62vw, 240px); }
    .bnav { top: 8.4rem; }
}

/* ---- numbered steps -------------------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; padding: .6rem .2rem; }
.step .num { display: block; font: 400 2.6rem/1 var(--display); color: var(--orange); margin-bottom: .4rem; }
.step h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---- Live "big pulls" strip ---------------------------------------------------------------------------------- */
.pulls { padding: 1.1rem 1.2rem 1.3rem; border: 1px solid var(--line); background: #0b0b0e; }
.live-tag { display: inline-flex; align-items: center; gap: .5rem; font: 800 .6rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: halo 1.6s ease-in-out infinite; }
.pulls h3 { margin: .2rem 0 .9rem; font-size: 1.5rem; }
.pull-row { display: flex; gap: .4rem; overflow-x: auto; padding: 10px 6px 6px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.pull { flex: none; width: 150px; }
.pull-who { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .72rem; }
.pull-who b { font-weight: 700; } .pull-who small { color: var(--muted); display: block; font-size: .64rem; }

/* ---- Home extras ------------------------------------------------------------------------------------------------ */
.section-head { margin-bottom: .6rem; }
.cta { padding: 2.8rem 1.5rem; }

/* ---- Dashboard ---------------------------------------------------------------------------------------------------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.dash-grid > .stack > * + * { margin-top: 1.2rem; }
.quest { display: flex; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.quest:first-of-type { border-top: 0; }
.quest-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: #17171c; color: var(--orange); border: 1px solid var(--line); }
.quest.done .quest-ico { background: rgba(61, 220, 132, .12); color: var(--green); border-color: rgba(61, 220, 132, .4); }
.quest.done b { text-decoration: line-through; opacity: .65; }
.quest progress { margin: .45rem 0 .2rem; }
.reward { display: inline-flex; gap: .3rem; align-items: center; color: var(--gold); font-weight: 700; font-size: .82rem; }
.feature-card { width: min(250px, 100%); margin: 0 auto 1rem; }
.team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.team-row.big { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 1.6rem; }
.slot { display: flex; flex-direction: column; gap: .5rem; }
.skel-note { font-size: .88rem; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---- Collection ------------------------------------------------------------------------------------------------------ */
.rar-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-top: 1rem; }
.rs { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border: 1px solid var(--line); background: #0b0b0e; color: #fff; font-size: .85rem; transition: border-color .2s, background .2s; }
.rs:hover { color: #fff; border-color: var(--c1); background: color-mix(in srgb, var(--c1) 10%, #0b0b0e); }
.rs i { min-width: 1.7rem; padding: .22rem .3rem; text-align: center; font: italic 800 .66rem var(--body); color: #14100a; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.filters { display: flex; flex-direction: column; gap: 1rem; }
.filters .search { min-width: 200px; }
.filters input[type=search] { width: 100%; }

/* ---- Card detail ---------------------------------------------------------------------------------------------------------- */
.detail { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.detail-art { position: sticky; top: calc(var(--nav-h) + 1.4rem); padding: 1rem; }
.bar { display: grid; grid-template-columns: 90px 1fr 48px; gap: .8rem; align-items: center; margin: .6rem 0; }
.bar span { color: var(--muted); font: 700 .66rem var(--body); letter-spacing: .14em; text-transform: uppercase; }
.bar b { text-align: right; font: 400 1.5rem/1 var(--display); }
.skill { display: flex; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.skill:first-of-type { border-top: 0; }
.skill-n { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: linear-gradient(180deg, #ffe0a0, #f2b53f); color: #1a1100; font: 400 1.3rem var(--display); }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; } .detail-art { position: static; } }

/* ---- Rates modal -------------------------------------------------------------------------------------------------------------- */
.rates { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.rate-row { display: grid; grid-template-columns: 140px 1fr 56px; gap: .8rem; align-items: center; }
.rate-row.off { opacity: .35; }
.rate-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Battle ------------------------------------------------------------------------------------------------------------------------ */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.mode { text-align: center; display: flex; flex-direction: column; gap: .5rem; transition: border-color .25s, transform .25s var(--ease); }
.mode:hover { transform: translateY(-3px); border-color: var(--accent); }
.mode p { flex: 1; }
.mode-ico { width: 64px; height: 64px; margin: 0 auto .4rem; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.mode-ico .ico { width: 32px; height: 32px; }
.how { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }

/* ---- Leaderboard ------------------------------------------------------------------------------------------------------------------------ */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; align-items: end; gap: .8rem; margin: 1.6rem 0 .4rem; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding-top: 1rem; text-align: center; }
.pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pod-score { font: 400 1.7rem var(--display); color: var(--gold); }
.pod-score small { font: 700 .6rem var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.pod-step { width: 100%; display: grid; place-items: center; font: 400 2.4rem var(--display); color: rgba(255, 255, 255, .9); background: linear-gradient(180deg, rgba(245, 181, 61, .22), rgba(245, 181, 61, .02)); border: 1px solid var(--line2); border-bottom: 0; }
.pod-1 .pod-step { height: 120px; background: linear-gradient(180deg, rgba(245, 181, 61, .5), rgba(245, 181, 61, .04)); border-color: var(--gold); }
.pod-2 .pod-step { height: 88px; } .pod-3 .pod-step { height: 64px; }
.pod-1 .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.crown { width: 32px; height: 32px; color: var(--gold); animation: floaty 3s ease-in-out infinite; }
.rk { font: 400 1.3rem var(--display); color: var(--muted); }

/* ---- Profile + Settings ------------------------------------------------------------------------------------------------------------------------ */
.profile-banner { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.profile-banner h1 { margin: 0; }
.bio { margin: .6rem 0 0; color: #dcdce2; }
.showcase-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 230px)); gap: 1.4rem; justify-content: center; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice > span { display: block; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line2); background: #0b0b0e; transition: border-color .2s, background .2s; }
.choice b { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.choice small { color: var(--muted); }
.choice:hover > span { border-color: #fff; }
.choice input:checked + span { border-color: var(--gold); background: rgba(245, 181, 61, .07); box-shadow: 0 0 0 1px var(--gold) inset; }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Rarity guide (/rarities) ------------------------------------------------------------------------ */
.rar-list { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
.rar-row { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: 2rem; align-items: center; padding: 1.4rem; border: 1px solid var(--line2); background: #0a0a0d; }
.rar-card { padding: 1rem; }
.rar-text h2 { margin: .2rem 0 .6rem; }
.rar-facts { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; color: var(--muted); font-size: .88rem; }
.rar-facts b { display: inline-block; min-width: 9.5rem; color: #fff; font-weight: 700; letter-spacing: .04em; }
.rswatch { display: inline-flex; vertical-align: middle; }
.rswatch i { width: 22px; height: 22px; display: block; }
.rswatch .c1 { background: var(--c1); } .rswatch .c2 { background: var(--c2); } .rswatch .c3 { background: var(--c3); }
@media (max-width: 640px) { .rar-row { grid-template-columns: 1fr; gap: 1rem; } .rar-card { max-width: 260px; margin: 0 auto; } }