@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #060609;
  --panel: rgba(15, 15, 20, .74);
  --panel-solid: #111116;
  --line: rgba(255, 255, 255, .1);
  --line-bright: rgba(255, 218, 145, .34);
  --text: #f5f1e8;
  --muted: #9b98a6;
  --gold: #f1bd67;
  --gold-soft: #ffe2a2;
  --violet: #9a68ff;
  --cyan: #69deff;
  --green: #65d6a0;
  --danger: #ff697e;
  --serif: 'Cinzel', 'Palatino Linotype', serif;
  --sans: 'Manrope', 'Segoe UI', sans-serif;
  --shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: var(--ink); color: var(--text); font-family: var(--sans); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 10px 16px; background: var(--gold); color: #13100a; border-radius: 8px; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 16px; }

.cosmos { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(circle at 70% 4%, #261d37 0, transparent 28%), radial-gradient(circle at 15% 110%, #112c39 0, transparent 36%), linear-gradient(145deg, #060608, #0d0c13 55%, #06070a); }
.cosmos::after { content: ''; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.stars { position: absolute; inset: -50%; background-repeat: repeat; transform: rotate(5deg); }
.stars-a { opacity: .38; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px); background-size: 83px 83px; animation: starDrift 90s linear infinite; }
.stars-b { opacity: .22; background-image: radial-gradient(circle, #bda7ff 0 1px, transparent 1.5px); background-size: 137px 137px; animation: starDrift 140s linear reverse infinite; }
.aurora { position: absolute; width: 65vw; height: 65vw; border: 1px solid rgba(165, 112, 255, .12); border-radius: 50%; left: 62%; top: -25%; box-shadow: 0 0 100px rgba(126, 64, 232, .08), inset 0 0 80px rgba(245, 185, 90, .05); animation: breathe 8s ease-in-out infinite; }

.auth-gate { min-height: 100svh; display: grid; grid-template-columns: minmax(320px, 620px) minmax(260px, 460px); align-items: center; justify-content: center; gap: clamp(35px, 7vw, 120px); padding: clamp(24px, 6vw, 90px); position: relative; overflow: hidden; }
.auth-gate::before { content: ''; position: absolute; width: min(72vw, 980px); aspect-ratio: 1; left: -28%; top: -38%; border-radius: 50%; border: 1px solid rgba(241,189,103,.11); box-shadow: 0 0 140px rgba(154,104,255,.08), inset 0 0 90px rgba(241,189,103,.05); }
.auth-aura { position: absolute; width: 48vw; height: 48vw; min-width: 520px; min-height: 520px; right: -14vw; bottom: -27vw; border-radius: 50%; background: conic-gradient(from 40deg, transparent, rgba(241,189,103,.16), transparent 24%, rgba(154,104,255,.12), transparent 55%); filter: blur(4px); animation: corona 34s linear infinite; }
.auth-aura span, .auth-aura i { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.auth-aura i { inset: 29%; box-shadow: 0 0 70px rgba(241,189,103,.15); }
.auth-panel { position: relative; z-index: 2; width: 100%; padding: clamp(28px, 4vw, 58px); border: 1px solid rgba(255,226,162,.17); border-radius: 26px; background: linear-gradient(145deg, rgba(24,21,29,.9), rgba(7,7,11,.85)); box-shadow: 0 40px 120px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(28px); }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: clamp(36px, 6vw, 72px); }
.auth-brand > span:last-child { display: grid; }
.auth-brand strong { font: 600 15px var(--serif); letter-spacing: .2em; }
.auth-brand small { color: var(--muted); font-size: 7px; letter-spacing: .22em; }
.auth-panel h1 { margin: 12px 0 16px; font: 600 clamp(38px, 5.4vw, 72px)/.98 var(--serif); letter-spacing: -.045em; }
.auth-panel > p { max-width: 520px; color: #b6b1bb; font-size: 13px; line-height: 1.75; }
.login-form { display: grid; gap: 14px; margin-top: 28px; }
.login-form label { display: grid; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.login-form input, .vault-control { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); color: white; padding: 0 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.login-form input:hover, .vault-control:hover { border-color: rgba(255,255,255,.2); }
.login-form input:focus, .vault-control:focus { background: rgba(255,255,255,.055); border-color: var(--gold); box-shadow: 0 0 24px rgba(241,189,103,.08); }
.login-form .primary-button { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.login-status { min-height: 18px; margin: 0 !important; color: var(--danger) !important; font-size: 10px !important; }
.login-status.ok { color: var(--green) !important; }
.auth-foot { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; color: var(--muted); font-size: 9px; }
.auth-foot a { color: var(--gold-soft); text-decoration: none; }
.auth-card-preview { position: relative; z-index: 2; width: min(28vw, 380px); aspect-ratio: .7; transform: rotate(5deg); filter: drop-shadow(0 50px 70px #000); perspective: 900px; }
.auth-card-back { width: 100%; height: 100%; border-radius: 24px; background: #09090d url('assets/cards/eclipse-card-back.webp') center/cover no-repeat; border: 1px solid rgba(255,221,154,.45); box-shadow: inset 0 0 0 8px #08080c, inset 0 0 0 9px rgba(255,226,162,.24), 0 0 60px rgba(154,104,255,.13); animation: float 7s ease-in-out infinite; }

.gate { min-height: 100svh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(390px, .8fr); align-items: center; gap: clamp(30px, 6vw, 110px); max-width: 1520px; margin: auto; padding: clamp(34px, 6vw, 96px); position: relative; overflow: hidden; }
.gate-art { position: absolute; left: 53%; top: 46%; width: 68vw; height: 68vw; max-width: 1000px; max-height: 1000px; transform: translate(-50%, -50%); pointer-events: none; opacity: .72; }
.eclipse-orb { position: absolute; inset: 17%; border-radius: 50%; background: #020204; box-shadow: 0 0 0 1px rgba(255, 226, 162, .3), 0 0 24px #f2b558, 0 0 80px rgba(241, 189, 103, .35), 0 0 180px rgba(154, 104, 255, .16); }
.eclipse-orb::before { content: ''; position: absolute; inset: -8%; border-radius: inherit; background: conic-gradient(from 120deg, transparent 0 20%, rgba(255, 232, 181, .95) 30%, transparent 35% 73%, rgba(195, 123, 255, .65) 83%, transparent 89%); filter: blur(14px); animation: corona 18s linear infinite; }
.eclipse-orb::after { content: ''; position: absolute; inset: -17%; border: 1px solid rgba(255,255,255,.08); border-radius: inherit; }
.eclipse-orb i { position: absolute; width: 4px; height: 4px; border-radius: 50%; right: -26%; top: 38%; background: white; box-shadow: 0 0 18px 5px var(--gold); }
.orbit { position: absolute; inset: 4%; border: 1px solid rgba(255, 218, 145, .12); border-radius: 50%; transform: rotate(28deg); }
.orbit::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); left: 20%; top: 8%; box-shadow: 0 0 20px var(--gold); }
.orbit-b { inset: 10%; transform: rotate(-42deg) scaleY(.55); border-color: rgba(154,104,255,.22); }
.orbit-b::after { left: 80%; top: 86%; background: var(--violet); box-shadow: 0 0 20px var(--violet); }
.gate-content { position: relative; z-index: 2; align-self: center; max-width: 650px; animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 800; color: var(--gold-soft); display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.gate h1 { margin: 20px 0 18px; font: 600 clamp(42px, 6.7vw, 100px)/.82 var(--serif); letter-spacing: -.06em; text-transform: uppercase; text-shadow: 0 3px 30px #000; }
.gate h1 small { display: block; font-size: .38em; letter-spacing: .48em; margin: 0 0 20px .14em; color: var(--gold-soft); }
.tagline { margin: 0 0 30px; color: #c5c0c7; font: 400 clamp(17px, 1.5vw, 22px)/1.5 var(--serif); letter-spacing: .03em; }
.gate-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.primary-button { border: 1px solid rgba(255, 227, 171, .55); background: linear-gradient(135deg, #f5c778, #a8682a); color: #171006; min-height: 52px; padding: 0 22px; border-radius: 5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; cursor: pointer; box-shadow: 0 8px 30px rgba(236, 165, 66, .2), inset 0 1px rgba(255,255,255,.4); transition: transform .2s, box-shadow .2s, filter .2s; position: relative; overflow: hidden; }
.primary-button::after { content: ''; position: absolute; top: -100%; bottom: -100%; width: 30px; left: -40%; background: rgba(255,255,255,.55); transform: rotate(25deg); transition: left .55s; filter: blur(4px); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 44px rgba(236, 165, 66, .35); filter: saturate(1.15); }
.primary-button:hover::after { left: 130%; }
.primary-button:active { transform: translateY(1px) scale(.98); }
.primary-button:disabled { filter: grayscale(.6); opacity: .45; cursor: not-allowed; transform: none; }
.primary-button kbd { margin-left: 20px; border-left: 1px solid rgba(0,0,0,.2); padding-left: 16px; font-family: inherit; }
.text-button { background: none; border: none; color: #c9c3ce; padding: 12px 4px; cursor: pointer; font-weight: 700; }
.text-button span { color: var(--gold); margin-left: 8px; }
.text-button:hover { color: white; }
.gate-proof { display: flex; gap: clamp(22px, 4vw, 54px); border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; }
.gate-proof div { display: grid; }
.gate-proof strong { font: 500 22px var(--serif); color: var(--gold-soft); }
.gate-proof span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-top: 5px; }
.gate-card-stack { width: min(34vw, 430px); aspect-ratio: .72; position: relative; z-index: 2; justify-self: center; perspective: 1200px; filter: drop-shadow(0 42px 60px rgba(0,0,0,.65)); animation: float 7s ease-in-out infinite; }
.hero-card { position: absolute; inset: 0; border-radius: 22px; border: 1px solid rgba(255, 220, 157, .5); background: #0c0b0f; overflow: hidden; transform-origin: 50% 100%; }
.hero-card-back { transform: translate(-15%, 4%) rotate(-11deg); opacity: .72; background: #08080c url('assets/cards/eclipse-card-back.webp') center/cover no-repeat; }
.hero-card-mid { transform: translate(13%, 2%) rotate(8deg); opacity: .72; background: radial-gradient(circle at 50% 30%, #2b2012, #08070a 60%); }
.hero-card-front { transform: rotate(-1deg); background: #0a090c; box-shadow: inset 0 0 0 6px #0b0907, inset 0 0 0 8px rgba(255, 216, 134, .5); }
.hero-card-front img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-front::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255, 233, 187, .45); border-radius: 15px; box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
.hero-card-shine { position: absolute; inset: -80% -100%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.35) 47%, rgba(197,133,255,.16) 50%, transparent 55%); transform: translateX(-20%); animation: foil 6s ease-in-out infinite; }
.hero-card-copy { position: absolute; inset: auto 9% 8%; padding: 18px; background: linear-gradient(135deg, rgba(4,4,5,.82), rgba(16,11,8,.64)); border-top: 1px solid rgba(255, 216, 139, .6); backdrop-filter: blur(12px); text-shadow: 0 2px 8px #000; }
.hero-card-copy span { display: block; font-size: 9px; letter-spacing: .22em; color: var(--gold-soft); }
.hero-card-copy strong { font: 600 clamp(20px,2.4vw,36px) var(--serif); text-transform: uppercase; }

.shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 40; height: 74px; display: grid; grid-template-columns: 220px 1fr 330px; align-items: center; padding: 0 clamp(18px,3vw,50px); border-bottom: 1px solid var(--line); background: rgba(7,7,10,.76); backdrop-filter: blur(24px) saturate(1.2); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.brand-mark { width: 34px; height: 34px; border: 1px solid rgba(255,217,145,.55); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 22px rgba(241,189,103,.13); }
.brand-mark i { width: 17px; height: 17px; display: block; border-radius: 50%; background: #030304; box-shadow: 3px 0 0 -1px var(--gold), 4px 0 12px var(--gold); }
.brand > span:last-child { display: grid; }
.brand strong { font: 600 15px var(--serif); letter-spacing: .18em; }
.brand small { color: var(--muted); font-size: 7px; letter-spacing: .28em; }
.main-nav { justify-self: center; display: flex; gap: 6px; height: 100%; }
.main-nav button, .main-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 96px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #9996a2; cursor: pointer; font-size: 11px; font-weight: 700; text-decoration: none; transition: color .2s, background .2s, border .2s; }
.main-nav button:hover, .main-nav a:hover { color: white; background: rgba(255,255,255,.03); }
.main-nav button.active { color: var(--gold-soft); border-bottom-color: var(--gold); background: linear-gradient(0deg, rgba(241,189,103,.08), transparent 70%); }
.nav-rune { color: var(--gold); margin-right: 8px; }
.player-strip { justify-self: end; display: flex; align-items: center; gap: 9px; }
.icon-button { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.04); border: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.icon-button:hover { color: white; border-color: var(--line-bright); }
.currency { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 12px; }
.currency span { color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.profile-chip { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
.profile-chip > span:last-child { display: grid; }
.profile-chip strong { font-size: 11px; }
.profile-chip small { color: var(--muted); font-size: 9px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #19100a; background: radial-gradient(circle at 30% 20%, #fff0c8, #c18037); border: 1px solid var(--gold-soft); font: 700 14px var(--serif); box-shadow: 0 0 18px rgba(241,189,103,.2); }
#main { min-height: calc(100vh - 74px); }
.view { width: min(1500px, 100%); margin: 0 auto; padding: clamp(26px, 4vw, 60px); animation: viewIn .42s ease both; }
.mobile-nav { display: none; }

.realm-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 22px; }
.realm-banner { min-height: 460px; position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: #0c0c11; box-shadow: var(--shadow); }
.realm-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,9,.92) 0 36%, rgba(6,6,9,.3) 70%, rgba(6,6,9,.75)), linear-gradient(0deg, rgba(6,6,9,.92), transparent 60%); pointer-events: none; }
.realm-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: saturate(.85) contrast(1.08); transform: scale(1.02); }
.realm-banner-content { position: relative; z-index: 2; padding: clamp(30px,5vw,72px); max-width: 610px; }
.kicker { color: var(--gold); text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.realm-banner h2 { margin: 14px 0; font: 600 clamp(34px,4.4vw,68px)/.98 var(--serif); letter-spacing: -.04em; }
.realm-banner p { color: #b9b5bd; font-size: 14px; line-height: 1.7; max-width: 490px; }
.quest-line { display: flex; align-items: center; gap: 14px; margin: 28px 0; }
.quest-line > span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(241,189,103,.35); color: var(--gold); background: rgba(0,0,0,.3); }
.quest-line div { display: grid; gap: 4px; }
.quest-line strong { font-size: 12px; }
.quest-line small { color: var(--muted); }
.side-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.glass-panel { background: linear-gradient(145deg, rgba(24,23,30,.78), rgba(10,10,14,.75)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.daily-panel, .history-panel { padding: 26px; position: relative; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.panel-heading h3 { margin: 0; font: 600 17px var(--serif); letter-spacing: .05em; }
.panel-heading span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.daily-panel::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; right: -70px; top: -70px; background: var(--violet); filter: blur(80px); opacity: .2; }
.objective { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; margin: 15px 0; font-size: 11px; }
.objective-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(154,104,255,.12); color: #c29fff; }
.objective-copy { display: grid; gap: 3px; }
.objective-copy small { color: var(--muted); }
.reward { color: var(--gold-soft); font-weight: 700; }
.progress { height: 3px; background: rgba(255,255,255,.07); border-radius: 5px; overflow: hidden; grid-column: 2 / -1; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--gold)); box-shadow: 0 0 10px var(--violet); }
.history-stat { display: flex; align-items: end; gap: 12px; margin: 8px 0 20px; }
.history-stat strong { font: 500 42px var(--serif); color: var(--gold-soft); }
.history-stat span { color: var(--muted); font-size: 11px; padding-bottom: 7px; }
.sparkline { height: 44px; display: flex; align-items: flex-end; gap: 5px; }
.sparkline i { flex: 1; min-width: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(0deg, rgba(241,189,103,.18), var(--gold)); opacity: .75; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: clamp(34px,5vw,64px) 0 20px; }
.section-heading h2 { margin: 0; font: 600 clamp(24px,3vw,38px) var(--serif); letter-spacing: -.03em; }
.section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.section-heading button { background: none; border: 0; color: var(--gold-soft); cursor: pointer; font-size: 11px; font-weight: 700; }
.region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.region-card { min-height: 190px; border: 1px solid var(--line); border-radius: 15px; background: #111116; padding: 22px; position: relative; overflow: hidden; cursor: pointer; text-align: left; transition: transform .25s, border .25s, box-shadow .25s; }
.region-card:hover { transform: translateY(-5px); border-color: var(--line-bright); box-shadow: 0 20px 45px rgba(0,0,0,.35); }
.region-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.62); transition: transform .5s, filter .4s; }
.region-card:hover img { transform: scale(1.05); filter: saturate(.9) brightness(.7); }
.region-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(20deg, #08080c 8%, transparent 72%); }
.region-card > span, .region-card > strong, .region-card > small { position: relative; z-index: 1; display: block; }
.region-card > span { color: var(--gold-soft); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.region-card > strong { margin-top: 65px; font: 600 20px var(--serif); }
.region-card > small { margin-top: 5px; color: #b9b5be; }

.collection-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-bottom: 30px; }
.page-title .kicker { margin-bottom: 8px; }
.page-title h1 { margin: 0; font: 600 clamp(34px,5vw,64px)/1 var(--serif); letter-spacing: -.04em; }
.page-title p { color: var(--muted); font-size: 12px; }
.collection-summary { display: flex; gap: 22px; padding: 18px 22px; }
.collection-summary div { display: grid; min-width: 80px; }
.collection-summary strong { font: 500 23px var(--serif); color: var(--gold-soft); }
.collection-summary span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 25px; }
.filter-button { padding: 9px 15px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.filter-button:hover { color: white; border-color: rgba(255,255,255,.2); }
.filter-button.active { color: #181108; background: var(--gold-soft); border-color: var(--gold-soft); }
.search-wrap { margin-left: auto; position: relative; }
.search-wrap input { width: min(270px, 60vw); height: 38px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.035); color: white; padding: 0 38px 0 15px; font-size: 11px; }
.search-wrap span { position: absolute; right: 14px; top: 8px; color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 25px); }
.game-card { --realm-color: var(--gold); position: relative; aspect-ratio: .7; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--realm-color), transparent 52%); background: #0a090c; overflow: hidden; box-shadow: 0 16px 36px rgba(0,0,0,.38), inset 0 0 0 5px #09090c, inset 0 0 0 6px color-mix(in srgb, var(--realm-color), transparent 60%); cursor: pointer; text-align: left; isolation: isolate; transform-style: preserve-3d; transition: transform .24s, box-shadow .24s, border .24s; }
.game-card:hover { transform: translateY(-7px) rotateX(1deg); box-shadow: 0 24px 55px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb, var(--realm-color), transparent 82%); border-color: color-mix(in srgb, var(--realm-color), white 25%); }
.game-card.selected { box-shadow: 0 0 0 2px var(--gold-soft), 0 0 35px rgba(241,189,103,.28); transform: translateY(-9px); }
.game-card.disabled { filter: grayscale(.65) brightness(.6); cursor: not-allowed; transform: none; }
.card-art { position: absolute; inset: 0; width: 100%; height: 72%; object-fit: cover; object-position: var(--crop, center); }
.game-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, #08080b 9%, rgba(8,8,11,.84) 27%, transparent 58%), linear-gradient(90deg, rgba(0,0,0,.38), transparent 15% 85%, rgba(0,0,0,.38)); pointer-events: none; }
.card-foil { position: absolute; inset: -80%; z-index: 2; opacity: 0; background: conic-gradient(from 20deg, transparent, rgba(116,224,255,.2), rgba(244,168,255,.2), rgba(255,226,134,.24), transparent 35%); transition: opacity .3s; pointer-events: none; mix-blend-mode: screen; animation: foilRotate 7s linear infinite; }
.game-card:hover .card-foil, .rarity-Mythic .card-foil, .rarity-Legendary .card-foil { opacity: .55; }
.card-cost { position: absolute; z-index: 4; top: 12px; left: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #101016; background: radial-gradient(circle at 35% 25%, #fff, var(--realm-color) 50%, #5a5050); border: 1px solid white; box-shadow: 0 3px 12px #000; font: 800 15px var(--serif); }
.card-rarity { position: absolute; z-index: 3; right: 14px; top: 16px; padding: 5px 8px; border-radius: 9px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); font-size: 7px; text-transform: uppercase; letter-spacing: .15em; color: white; }
.card-copy { position: absolute; z-index: 3; inset: auto 13px 12px; }
.card-copy .realm { display: block; color: var(--realm-color); font-size: 7px; text-transform: uppercase; letter-spacing: .19em; font-weight: 800; }
.card-copy h3 { margin: 5px 0 1px; font: 600 clamp(13px,1.4vw,20px)/1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-copy p { margin: 5px 0 10px; color: #aaa7b2; font-size: clamp(7px,.64vw,9px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-stats { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid color-mix(in srgb, var(--realm-color), transparent 65%); padding-top: 8px; font: 700 11px var(--serif); }
.card-stats span:first-child { color: #ffad7c; }
.card-stats span:last-child { color: #8fe4c0; }
.realm-Solar { --realm-color: #f2bc62; }
.realm-Void { --realm-color: #a978ff; }
.realm-Verdant { --realm-color: #67d69b; }
.realm-Frost { --realm-color: #71ddff; }

.vault-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sync-pill { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(101,214,160,.28); border-radius: 20px; background: rgba(101,214,160,.06); color: #a4ebc8; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.sync-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }
.vault-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 22px; }
.vault-panel { padding: clamp(20px, 3vw, 32px); min-width: 0; }
.vault-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.vault-panel-head h2 { margin: 0 0 5px; font: 600 22px var(--serif); }
.vault-panel-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.deck-list, .trade-list { display: grid; gap: 10px; }
.deck-row, .trade-row { position: relative; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(130deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.deck-row { grid-template-columns: 1fr auto; align-items: center; }
.deck-row.active { border-color: rgba(241,189,103,.4); box-shadow: inset 3px 0 var(--gold); }
.deck-copy { display: grid; gap: 4px; }
.deck-copy strong { font: 600 14px var(--serif); }
.deck-copy span, .trade-meta { color: var(--muted); font-size: 9px; }
.deck-actions, .trade-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.vault-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.035); color: #d3cfd7; cursor: pointer; font-size: 9px; font-weight: 700; }
.vault-button:hover { border-color: var(--line-bright); color: white; background: rgba(241,189,103,.07); }
.vault-button.primary { color: #171006; background: var(--gold-soft); border-color: var(--gold-soft); }
.deck-builder { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.deck-builder-line { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.deck-picker { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; max-height: 350px; overflow: auto; padding-right: 4px; }
.deck-pick { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); cursor: pointer; text-align: left; }
.deck-pick:hover { border-color: color-mix(in srgb, var(--pick-color), white 10%); }
.deck-pick.selected { border-color: var(--gold); background: rgba(241,189,103,.08); box-shadow: inset 0 0 20px rgba(241,189,103,.04); }
.deck-pick strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px var(--serif); }
.deck-pick span { color: var(--muted); font-size: 8px; }
.builder-count { color: var(--gold-soft); font: 600 12px var(--serif); }
.trade-compose { display: grid; gap: 11px; margin-bottom: 22px; }
.trade-pair { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 8px; }
.trade-pair > span { color: var(--gold); text-align: center; }
.vault-control { min-height: 42px; font-size: 10px; }
select.vault-control { appearance: auto; }
.trade-row { grid-template-columns: 1fr auto; align-items: center; }
.trade-swap { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.trade-swap strong { color: var(--gold-soft); font-family: var(--serif); }
.trade-swap i { color: var(--violet); font-style: normal; }
.trade-status { align-self: start; padding: 5px 8px; border-radius: 12px; color: var(--gold-soft); background: rgba(241,189,103,.08); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.trade-row[data-status='accepted'] .trade-status { color: #a4ebc8; background: rgba(101,214,160,.08); }
.empty-vault { padding: 24px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 10px; }

.duel-view-wrap { max-width: 1320px; margin: auto; }
.duel-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.duel-topline h1 { margin: 0; font: 600 clamp(23px,3vw,38px) var(--serif); }
.round-chip { padding: 8px 13px; border: 1px solid var(--line-bright); border-radius: 20px; background: rgba(241,189,103,.06); color: var(--gold-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .15em; }
.duel-board { position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(128,72,194,.18), transparent 28%), linear-gradient(155deg, rgba(27,25,33,.96), rgba(8,8,11,.97)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.duel-board::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at center, transparent 0 55px, rgba(255,255,255,.025) 56px 57px); pointer-events: none; }
.fighter-row { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; z-index: 3; padding: 12px 20px; }
.fighter { display: flex; align-items: center; gap: 12px; min-width: 250px; }
.fighter.rival { flex-direction: row-reverse; text-align: right; }
.fighter-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #392451, #0b0910); border: 1px solid #9f76d2; font: 700 18px var(--serif); box-shadow: 0 0 24px rgba(154,104,255,.2); }
.fighter.player .fighter-avatar { background: linear-gradient(135deg, #e3ae59, #33210e); border-color: var(--gold-soft); }
.fighter-copy { display: grid; gap: 5px; min-width: 155px; }
.fighter-copy strong { font: 600 12px var(--serif); }
.health-track { position: relative; width: 100%; height: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; background: #070709; }
.health-track i { display: block; width: var(--hp); height: 100%; background: linear-gradient(90deg, #a42e49, #ff7185); transition: width .35s; }
.health-track b { position: absolute; right: 4px; top: -4px; font-size: 7px; }
.rival .health-track i { margin-left: auto; }
.vs-mark { color: var(--muted); font: 500 12px var(--serif); letter-spacing: .2em; }
.mana-row { display: flex; gap: 4px; align-items: center; color: var(--cyan); font-size: 8px; }
.mana-row i { width: 9px; height: 9px; display: block; transform: rotate(45deg); background: #143442; border: 1px solid #34728a; }
.mana-row i.full { background: var(--cyan); border-color: #d4f6ff; box-shadow: 0 0 7px var(--cyan); }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; position: relative; z-index: 2; }
.lane { min-width: 0; border-left: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); display: grid; grid-template-rows: 1fr 32px 1fr; align-items: center; justify-items: center; min-height: 365px; position: relative; }
.lane::after { content: ''; position: absolute; inset: 8% 4%; border: 1px solid rgba(255,255,255,.025); transform: rotate(45deg) scale(.65); pointer-events: none; }
.lane-name { align-self: center; z-index: 2; color: #6f6c77; font: 600 8px var(--serif); text-transform: uppercase; letter-spacing: .3em; }
.slot { width: min(112px, 78%); aspect-ratio: .72; border-radius: 10px; position: relative; z-index: 3; display: grid; place-items: center; }
.slot.empty { border: 1px dashed rgba(255,255,255,.1); background: rgba(255,255,255,.015); }
.slot.empty.player-slot.ready { border-color: rgba(241,189,103,.58); background: rgba(241,189,103,.05); cursor: pointer; animation: slotPulse 1.6s ease-in-out infinite; }
.slot.empty.player-slot.ready::after { content: '+'; color: var(--gold); font-size: 24px; }
.slot .game-card { width: 100%; height: 100%; }
.slot .game-card { cursor: default; }
.slot .card-copy p, .slot .card-rarity { display: none; }
.slot .card-copy h3 { font-size: 11px; }
.slot .card-cost { width: 25px; height: 25px; top: 7px; left: 7px; font-size: 10px; }
.unit-health { position: absolute; z-index: 8; bottom: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #173c2b; border: 1px solid #74dbaa; color: white; font: 800 10px var(--serif); }
.hand-area { padding: 14px 18px 18px; position: relative; z-index: 4; border-top: 1px solid var(--line); background: rgba(3,3,5,.38); }
.hand-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hand-toolbar span { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }
.hand-toolbar strong { color: var(--cyan); }
.end-turn { min-height: 38px; padding: 0 17px; }
.hand { display: flex; justify-content: center; align-items: end; gap: 8px; min-height: 150px; overflow-x: auto; padding: 8px 8px 3px; scroll-snap-type: x mandatory; }
.hand .game-card { width: 102px; flex: 0 0 102px; scroll-snap-align: center; }
.hand .game-card:hover, .hand .game-card.selected { transform: translateY(-8px); }
.duel-status { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; margin-top: 13px; }
.combat-log { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-log strong { color: var(--gold-soft); }
.duel-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ghost-button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; font-size: 9px; }
.ghost-button:hover { color: white; border-color: rgba(255,255,255,.25); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(2,2,4,.74); backdrop-filter: blur(14px); animation: fadeIn .2s ease; }
.modal { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line-bright); border-radius: 18px; background: linear-gradient(145deg, #18161d, #0a0a0e); box-shadow: 0 34px 100px #000; position: relative; animation: modalIn .3s ease; }
.modal-close { position: absolute; z-index: 3; right: 14px; top: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(0,0,0,.35); cursor: pointer; }
.modal-body { padding: clamp(25px,5vw,46px); }
.modal-body h2 { margin: 0 0 10px; font: 600 clamp(26px,5vw,42px) var(--serif); }
.modal-body > p { color: var(--muted); line-height: 1.7; font-size: 12px; }
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; }
.how-step { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: rgba(255,255,255,.02); }
.how-step span { color: var(--gold); font: 600 20px var(--serif); }
.how-step strong { display: block; margin: 10px 0 5px; font: 600 12px var(--serif); }
.how-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.detail-modal { display: grid; grid-template-columns: minmax(190px,.72fr) 1fr; gap: 28px; }
.detail-modal .game-card { width: 100%; cursor: default; }
.detail-modal .game-card:hover { transform: none; }
.detail-info { align-self: center; }
.detail-info .kicker { margin-bottom: 8px; }
.detail-info h2 { font-size: clamp(24px,4vw,38px); }
.detail-title { color: var(--gold-soft) !important; font-family: var(--serif); }
.stat-block { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 20px 0; }
.stat-block div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; display: grid; text-align: center; }
.stat-block strong { font: 600 20px var(--serif); }
.stat-block span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.lore { font-family: var(--serif); font-style: italic; color: #c9c5ce !important; }
.result-modal { text-align: center; }
.result-sigil { width: 90px; height: 90px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; font-size: 34px; color: var(--gold); background: radial-gradient(circle, rgba(241,189,103,.14), transparent 65%); border: 1px solid var(--line-bright); box-shadow: 0 0 45px rgba(241,189,103,.1); }
.reward-card { margin: 22px auto; max-width: 320px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--gold-soft); }
.toast-root { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: grid; gap: 9px; }
.toast { min-width: 260px; padding: 14px 17px; border: 1px solid var(--line-bright); border-radius: 10px; background: rgba(18,16,22,.94); box-shadow: 0 16px 40px rgba(0,0,0,.4); backdrop-filter: blur(14px); font-size: 11px; animation: toastIn .3s ease; }
.toast strong { color: var(--gold-soft); }

@keyframes starDrift { to { transform: rotate(5deg) translate3d(100px, 80px, 0); } }
@keyframes corona { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .7; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(.4deg); } }
@keyframes foil { 0%,25% { transform: translateX(-25%); } 65%,100% { transform: translateX(32%); } }
@keyframes foilRotate { to { transform: rotate(360deg); } }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes slotPulse { 50% { box-shadow: inset 0 0 25px rgba(241,189,103,.09), 0 0 20px rgba(241,189,103,.08); } }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 190px 1fr 155px; }
  .main-nav button { min-width: 76px; padding: 0 8px; }
  .profile-chip > span:last-child { display: none; }
  .realm-hero { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vault-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .auth-gate { display: flex; min-height: 100svh; padding: 18px; }
  .auth-panel { padding: 26px 22px; }
  .auth-brand { margin-bottom: 38px; }
  .auth-panel h1 { font-size: clamp(38px, 12vw, 56px); }
  .auth-card-preview { display: none; }
  .auth-foot { flex-direction: column; gap: 7px; }
  .gate { display: flex; align-items: flex-end; padding: 30px 24px 52px; }
  .gate-art { left: 67%; top: 28%; width: 125vw; height: 125vw; }
  .gate-card-stack { position: absolute; right: -8%; top: 6%; width: 55vw; opacity: .58; }
  .gate-content { margin-top: 60vh; }
  .gate h1 { font-size: clamp(42px,15vw,70px); }
  .gate h1 small { font-size: .28em; }
  .gate-proof { gap: 20px; }
  .gate-proof div:last-child { display: none; }
  .topbar { height: 60px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .main-nav { display: none; }
  .currency { display: none; }
  .profile-chip > span:last-child { display: none; }
  .logout-button { display: none; }
  #main { min-height: calc(100vh - 126px); padding-bottom: 68px; }
  .view { padding: 22px 16px; }
  .mobile-nav { position: fixed; z-index: 50; display: grid; grid-template-columns: repeat(5,1fr); left: 10px; right: 10px; bottom: 9px; height: 58px; padding: 4px; border-radius: 16px; border: 1px solid var(--line); background: rgba(9,9,12,.9); backdrop-filter: blur(20px); box-shadow: 0 14px 40px #000; }
  .mobile-nav button, .mobile-nav a { display: block; padding: 4px 2px; border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: 8px; font-weight: 700; text-align: center; text-decoration: none; }
  .mobile-nav button span, .mobile-nav a span { display: block; margin-bottom: 3px; font-size: 15px; }
  .mobile-nav button.active { color: var(--gold-soft); background: rgba(241,189,103,.09); }
  .realm-banner { min-height: 490px; }
  .realm-banner::after { background: linear-gradient(0deg, rgba(6,6,9,.97) 0 40%, rgba(6,6,9,.15) 85%); }
  .realm-banner-content { padding-top: 220px; }
  .side-stack { grid-template-columns: 1fr; }
  .region-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 5px; }
  .region-card { flex: 0 0 78vw; scroll-snap-align: center; }
  .collection-header { grid-template-columns: 1fr; }
  .collection-summary { justify-content: space-around; }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
  .card-copy p { display: none; }
  .card-copy h3 { font-size: 13px; }
  .search-wrap { width: 100%; margin: 5px 0 0; }
  .search-wrap input { width: 100%; }
  .duel-view-wrap { margin: -5px; }
  .duel-topline .page-title-copy { display: none; }
  .fighter-row { min-height: 68px; padding: 9px; }
  .fighter { min-width: 0; flex: 1; }
  .fighter-copy { min-width: 0; flex: 1; }
  .fighter-avatar { width: 38px; height: 38px; flex: 0 0 38px; }
  .vs-mark { display: none; }
  .lanes { gap: 4px; padding: 0 5px; }
  .lane { min-height: 310px; grid-template-rows: 1fr 23px 1fr; }
  .slot { width: 90%; }
  .slot .card-copy h3 { font-size: 8px; }
  .slot .card-stats { font-size: 8px; }
  .hand-area { padding: 10px 7px 12px; }
  .hand { justify-content: start; min-height: 141px; }
  .hand .game-card { width: 94px; flex-basis: 94px; }
  .duel-status { align-items: flex-start; }
  .combat-log { white-space: normal; }
  .detail-modal { grid-template-columns: minmax(140px,.7fr) 1fr; gap: 16px; }
  .detail-info .effect { font-size: 10px; }
  .stat-block { gap: 4px; }
  .stat-block div { padding: 7px; }
  .vault-header { align-items: start; flex-direction: column; }
  .vault-panel { padding: 18px 14px; }
  .deck-picker { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trade-pair { grid-template-columns: 1fr; }
  .trade-pair > span { transform: rotate(90deg); }
  .trade-row { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .gate-actions { align-items: stretch; flex-direction: column; }
  .gate-actions .text-button { text-align: left; }
  .profile-chip > span:last-child { display: none; }
  .collection-summary { gap: 10px; padding: 12px; }
  .collection-summary div { min-width: auto; }
  .detail-modal { grid-template-columns: 1fr; }
  .detail-modal .game-card { width: min(210px, 70%); margin: auto; }
  .how-grid { grid-template-columns: 1fr; }
}

/* Eclipse Cycle — competitive expansion */
.cycle-mini { display: flex; align-items: center; gap: 6px; margin: 21px 0 23px; }
.cycle-mini span { display: grid; justify-items: center; gap: 3px; min-width: 54px; padding: 8px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #7e7985; background: rgba(8,8,12,.5); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cycle-mini span b { color: #aaa4b1; font: 18px var(--serif); }
.cycle-mini span.active { color: var(--gold-soft); border-color: rgba(241,189,103,.36); background: rgba(241,189,103,.08); box-shadow: 0 0 26px rgba(241,189,103,.09); }
.cycle-mini span.active b { color: var(--gold); text-shadow: 0 0 16px rgba(241,189,103,.6); }
.daily-draw-panel { position: relative; display: grid; grid-template-columns: 1fr 100px; align-items: center; min-height: 190px; padding: 25px; overflow: hidden; }
.daily-draw-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 45%, rgba(154,104,255,.15), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.025), transparent); }
.daily-draw-panel.available { border-color: rgba(241,189,103,.28); box-shadow: inset 0 0 44px rgba(241,189,103,.025), 0 22px 60px rgba(0,0,0,.2); }
.daily-copy { position: relative; z-index: 2; }
.daily-copy h3 { margin: 7px 0 6px; font: 600 23px var(--serif); }
.daily-copy p { max-width: 260px; margin: 0 0 16px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.next-draw { color: var(--gold-soft); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.daily-card-back { position: relative; z-index: 2; width: 76px; aspect-ratio: .7; justify-self: end; border: 1px solid rgba(255,224,166,.4); border-radius: 9px; background: #09090d url('assets/cards/eclipse-card-back.webp') center/cover; box-shadow: -12px 18px 38px #000, 0 0 30px rgba(154,104,255,.2); transform: rotate(6deg); }
.daily-card-back::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; }
.daily-draw-panel.available .daily-card-back { animation: dailyFloat 3.5s ease-in-out infinite; }
@keyframes dailyFloat { 50% { transform: translateY(-7px) rotate(3deg); filter: brightness(1.2); } }
.ranked-panel { padding: 22px 25px; }
.rank-orbit { position: relative; display: grid; place-items: center; align-content: center; width: 118px; height: 118px; margin: 6px auto 11px; border: 1px solid rgba(169,120,255,.25); border-radius: 50%; background: radial-gradient(circle, rgba(169,120,255,.1), transparent 66%); box-shadow: inset 0 0 30px rgba(169,120,255,.07), 0 0 40px rgba(169,120,255,.06); }
.rank-orbit::before, .rank-orbit::after { content: ''; position: absolute; inset: 9px; border: 1px dashed rgba(241,189,103,.18); border-radius: 50%; animation: corona 24s linear infinite; }
.rank-orbit::after { inset: -7px; border-style: solid; border-color: transparent rgba(169,120,255,.18); animation-direction: reverse; }
.rank-orbit span { color: var(--violet-soft); font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
.rank-orbit strong { font: 600 27px var(--serif); }
.rank-orbit small { color: var(--muted); font-size: 7px; }
.rank-record { display: flex; justify-content: center; gap: 17px; margin-bottom: 14px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.rank-record b { color: white; }
.ranked-panel > .ghost-button { width: 100%; }
.region-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.keyword-line { display: flex; gap: 3px; min-height: 11px; margin-bottom: 4px; }
.keyword-line i { padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--realm-color), transparent 55%); border-radius: 8px; color: color-mix(in srgb, var(--realm-color), white 35%); background: rgba(0,0,0,.42); font-size: 5px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.game-card.resonant { border-color: #fff0b8; box-shadow: 0 0 0 1px var(--gold), 0 0 28px rgba(241,189,103,.3), inset 0 0 20px rgba(241,189,103,.11); }
.game-card.locked { cursor: default; filter: saturate(.18); }
.game-card.locked .card-art, .game-card.locked .card-copy, .game-card.locked .card-cost, .game-card.locked .card-rarity { opacity: .28; }
.game-card.locked:hover { transform: none; }
.locked-mark { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; background: radial-gradient(circle, rgba(8,8,11,.28), rgba(8,8,11,.72)); }
.locked-mark::before { content: '◒'; color: var(--gold); font: 25px var(--serif); }
.locked-mark b { color: #d5cedc; font-size: 7px; letter-spacing: .18em; }
.locked-mark small { color: #77717e; font-size: 6px; line-height: 1.5; }
.unit-state { position: absolute; z-index: 6; left: 5px; top: 5px; min-height: 18px; padding: 3px 5px; border-radius: 10px; color: white; background: rgba(5,5,8,.82); font-size: 9px; text-shadow: 0 0 8px white; }
.identity-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 15px 0; }
.identity-grid span { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.identity-grid small { color: var(--muted); font-size: 6px; letter-spacing: .12em; text-transform: uppercase; }
.identity-grid strong { overflow: hidden; color: var(--gold-soft); font: 600 9px var(--serif); text-overflow: ellipsis; }
.draw-reveal { display: grid; justify-items: center; text-align: center; }
.draw-reveal h2 { margin: 7px 0 18px; }
.draw-reveal .game-card { width: min(260px,70vw); cursor: default; animation: revealCard .65s cubic-bezier(.2,.9,.25,1.1) both; }
.draw-reveal .game-card:hover { transform: none; }
.draw-reveal > p { max-width: 480px; color: var(--muted); font-size: 10px; line-height: 1.7; }
@keyframes revealCard { from { opacity: 0; transform: scale(.7) rotateY(100deg); filter: brightness(2); } }

.builder-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.builder-hero h2 { margin: 5px 0 4px; font: 600 27px var(--serif); }
.builder-hero p { margin: 0; color: var(--muted); font-size: 8px; }
.synergy-dial { --synergy: 0; position: relative; display: grid; place-content: center; justify-items: center; flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at center, #121017 55%, transparent 57%), conic-gradient(var(--gold) calc(var(--synergy) * 1%), rgba(255,255,255,.07) 0); box-shadow: 0 0 30px rgba(241,189,103,.07); }
.synergy-dial strong { font: 600 23px var(--serif); }
.synergy-dial span { color: var(--muted); font-size: 6px; letter-spacing: .1em; text-transform: uppercase; }
.deck-analysis { display: grid; grid-template-columns: minmax(190px,1.1fr) minmax(180px,1fr) minmax(170px,1fr); gap: 9px; }
.curve-chart, .realm-balance, .deck-verdict { min-height: 92px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.curve-chart { display: flex; align-items: end; justify-content: space-around; gap: 5px; }
.curve-chart span { display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; height: 67px; color: var(--muted); font-size: 7px; }
.curve-chart i { width: 10px; height: var(--height); max-height: 45px; min-height: 3px; border-radius: 4px 4px 1px 1px; background: linear-gradient(var(--gold-soft), rgba(169,120,255,.4)); box-shadow: 0 0 10px rgba(241,189,103,.13); }
.curve-chart b { color: white; font-size: 7px; }
.curve-chart small { font-size: 6px; }
.realm-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.realm-balance span { position: relative; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; }
.realm-balance i { width: 6px; height: 6px; border-radius: 50%; background: var(--realm); box-shadow: 0 0 8px var(--realm); }
.realm-balance b { color: #bdb7c2; font-size: 7px; }
.realm-balance small { color: white; }
.deck-verdict { display: flex; flex-direction: column; justify-content: center; gap: 6px; border-left: 3px solid #8a6571; }
.deck-verdict.legal { border-left-color: #65d6a0; box-shadow: inset 20px 0 40px rgba(101,214,160,.025); }
.deck-verdict strong { font: 600 14px var(--serif); }
.deck-verdict span { color: var(--muted); font-size: 7px; line-height: 1.5; }
.builder-tools { display: grid; grid-template-columns: auto minmax(140px,1fr) auto auto; gap: 7px; align-items: center; }
.builder-filters { display: flex; gap: 3px; }
.builder-filter { min-height: 31px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 7px; }
.builder-filter.active { color: #171006; border-color: var(--gold); background: var(--gold); }
.builder-search { display: flex; align-items: center; min-width: 0; height: 33px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); }
.builder-search input { width: 100%; border: 0; outline: 0; color: white; background: transparent; font-size: 8px; }
.deck-picker { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 390px; }
.deck-pick { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 48px; padding: 7px; }
.pick-cost { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid color-mix(in srgb,var(--pick-color),transparent 35%); border-radius: 50%; color: var(--pick-color); background: rgba(0,0,0,.35); font: 600 11px var(--serif); }
.pick-copy { min-width: 0; }
.pick-copy strong, .pick-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-copy strong { font-size: 10px; }
.pick-copy small { margin-top: 3px; color: var(--muted); font-size: 6px; }
.pick-stats { color: #bdb7c2; font: 600 8px var(--serif); white-space: nowrap; }
.pick-stats i { color: var(--pick-color); font-style: normal; font-size: 6px; }
.deck-pick:disabled { opacity: .35; cursor: not-allowed; }

.arena-lobby { position: relative; display: grid; place-items: center; align-content: center; min-height: calc(100svh - 170px); padding: clamp(25px,5vw,70px); overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: radial-gradient(circle at 50% 42%, rgba(169,120,255,.16), transparent 26%), repeating-radial-gradient(circle at center, transparent 0 78px, rgba(255,255,255,.022) 79px 80px), linear-gradient(150deg,#141219,#07070a 70%); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.arena-lobby::before { content: '◉'; position: absolute; color: rgba(241,189,103,.025); font: 520px/.8 var(--serif); pointer-events: none; }
.arena-heading { position: relative; z-index: 1; max-width: 700px; margin-bottom: 33px; text-align: center; }
.arena-heading h1 { margin: 10px 0; font: 600 clamp(38px,5vw,70px)/1 var(--serif); letter-spacing: -.04em; }
.arena-heading p { max-width: 620px; margin: auto; color: var(--muted); font-size: 11px; line-height: 1.75; }
.arena-choices { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; width: min(850px,100%); gap: 14px; }
.arena-choice { position: relative; min-height: 270px; padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; color: white; background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014)); cursor: pointer; text-align: left; transition: transform .25s,border-color .25s,box-shadow .25s; }
.arena-choice:hover { transform: translateY(-7px); border-color: rgba(241,189,103,.4); box-shadow: 0 24px 60px rgba(0,0,0,.4),inset 0 0 50px rgba(241,189,103,.025); }
.arena-choice.ranked { background: radial-gradient(circle at 90% 5%,rgba(169,120,255,.18),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014)); }
.choice-sigil { display: block; margin-bottom: 35px; color: var(--gold); font: 42px var(--serif); text-shadow: 0 0 25px rgba(241,189,103,.3); }
.arena-choice small { display: block; color: var(--muted); font-size: 7px; letter-spacing: .17em; text-transform: uppercase; }
.arena-choice strong { display: block; margin: 7px 0 9px; font: 600 25px var(--serif); }
.arena-choice p { min-height: 42px; margin: 0 0 19px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.arena-choice > b { color: var(--gold-soft); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.live-pulse { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; gap: 6px; color: #83eab9; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.live-pulse i { width: 6px; height: 6px; border-radius: 50%; background: #65d6a0; box-shadow: 0 0 10px #65d6a0; animation: pulse 1.5s infinite; }
.arena-contract { position: relative; z-index: 1; display: flex; gap: 28px; margin-top: 24px; color: var(--muted); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.arena-contract b { color: white; font: 600 13px var(--serif); }
.matchmaking-orbit { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; width: 260px; height: 260px; margin-bottom: 28px; border: 1px solid rgba(169,120,255,.2); border-radius: 50%; background: radial-gradient(circle,rgba(169,120,255,.13),transparent 63%); }
.matchmaking-orbit::before,.matchmaking-orbit::after,.matchmaking-orbit i { content: ''; position: absolute; inset: 17px; border: 1px dashed rgba(241,189,103,.2); border-radius: 50%; animation: corona 8s linear infinite; }
.matchmaking-orbit::after { inset: -14px; border-style: solid; border-color: transparent rgba(169,120,255,.22); animation-duration: 14s; animation-direction: reverse; }
.matchmaking-orbit i { inset: 47px; animation-duration: 5s; }
.matchmaking-orbit > span { color: var(--gold); font: 46px var(--serif); text-shadow: 0 0 30px rgba(241,189,103,.4); }
.matchmaking-orbit strong { margin: 8px 0 4px; font: 600 22px var(--serif); }
.matchmaking-orbit small { color: var(--muted); font-size: 8px; }
.matchmaking-orbit small b { color: #65d6a0; }
.cycle-forecast { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 8px; }
.cycle-forecast > div { display: grid; grid-template-columns: 23px auto 1fr; align-items: center; gap: 5px; min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: #67626d; background: rgba(255,255,255,.018); }
.cycle-forecast > div span { font: 17px var(--serif); }
.cycle-forecast > div b { font: 600 8px var(--serif); }
.cycle-forecast > div small { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.cycle-forecast > div.active { color: var(--gold-soft); border-color: rgba(241,189,103,.42); background: rgba(241,189,103,.07); box-shadow: inset 0 0 22px rgba(241,189,103,.04); }
.cycle-forecast > div.next { color: #a69fac; border-style: dashed; }
.lane.ascendant { position: relative; }
.lane.ascendant::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg,transparent,rgba(241,189,103,.055),transparent); animation: slotPulse 2.4s infinite; pointer-events: none; }
.lane.ascendant .lane-name { color: var(--gold-soft); text-shadow: 0 0 12px rgba(241,189,103,.25); }
.lane-name b { display: block; margin-top: 2px; font-size: 5px; letter-spacing: .09em; }
.resonance-row { display: flex; gap: 3px; margin-top: 3px; }
.resonance-row i { display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: #67616d; font-size: 6px; font-style: normal; }
.resonance-row i.awake { color: white; border-color: var(--res); background: color-mix(in srgb,var(--res),transparent 77%); box-shadow: 0 0 9px color-mix(in srgb,var(--res),transparent 45%); }
.keyword-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 15px 0 22px; }
.keyword-guide span { padding: 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 8px; }
.keyword-guide b { color: var(--gold-soft); }

@media (max-width: 1050px) {
  .region-grid { grid-template-columns: repeat(2,1fr); }
  .deck-analysis { grid-template-columns: 1fr 1fr; }
  .deck-verdict { grid-column: span 2; min-height: 60px; }
  .builder-tools { grid-template-columns: 1fr auto auto; }
  .builder-filters { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .cycle-mini { overflow-x: auto; padding-bottom: 4px; }
  .daily-draw-panel { grid-template-columns: 1fr 76px; }
  .daily-card-back { width: 62px; }
  .region-grid { display: flex; }
  .keyword-line { display: none; }
  .identity-grid { grid-template-columns: 1fr; }
  .builder-hero { align-items: flex-start; }
  .synergy-dial { flex-basis: 68px; width: 68px; height: 68px; }
  .deck-analysis { grid-template-columns: 1fr; }
  .deck-verdict { grid-column: auto; }
  .builder-tools { grid-template-columns: 1fr 1fr; }
  .builder-filters { grid-column: 1 / -1; overflow-x: auto; }
  .builder-search { grid-column: 1 / -1; }
  .deck-picker { grid-template-columns: 1fr; }
  .arena-lobby { min-height: calc(100svh - 158px); padding: 28px 15px; }
  .arena-heading { margin-bottom: 22px; }
  .arena-heading h1 { font-size: 39px; }
  .arena-heading p { font-size: 9px; }
  .arena-choices { grid-template-columns: 1fr; }
  .arena-choice { min-height: 190px; padding: 22px; }
  .choice-sigil { margin-bottom: 14px; font-size: 28px; }
  .arena-choice p { min-height: auto; }
  .arena-contract { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .matchmaking-orbit { width: 210px; height: 210px; }
  .cycle-forecast { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .cycle-forecast > div { flex: 0 0 145px; scroll-snap-align: start; }
  .fighter-copy > strong { font-size: 8px; }
  .resonance-row i { width: 12px; height: 12px; }
  .lane { min-height: 326px; }
  .lane-name b { font-size: 4px; }
  .slot .keyword-line { display: none; }
  .hand-toolbar > span { max-width: 55%; font-size: 7px; }
}

@media (max-width: 430px) {
  .daily-copy p { max-width: 210px; }
  .builder-hero h2 { font-size: 22px; }
  .deck-builder-line { grid-template-columns: 1fr; }
  .arena-contract { width: 100%; }
  .cycle-forecast > div { flex-basis: 132px; }
  .identity-grid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}