:root {
  color-scheme: dark;
  --bg: #0c110e;
  --panel: rgba(21, 29, 24, 0.91);
  --panel-strong: #18211b;
  --line: rgba(214, 228, 217, 0.11);
  --text: #f1f5f1;
  --muted: #98a59c;
  --green: #b4e43b;
  --green-strong: #88bd17;
  --amber: #e4ad47;
  --coin-gold: #f0bd3e;
  --coin-highlight: #ffe9a1;
  --coin-ink: #5c3900;
  --blue: #62b7d6;
  --danger: #f17b6e;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 50% -20%, #243427 0, #101713 35%, #0c110e 70%); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { color: #10150e; background: var(--green); }
[hidden] { display: none !important; }
.ambient { position: fixed; z-index: 0; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(110px); opacity: .09; pointer-events: none; }
.ambient-one { top: -12rem; left: -10rem; background: var(--green); }
.ambient-two { right: -14rem; bottom: -16rem; background: #4d9172; }
.eyebrow { margin: 0 0 .65rem; color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
.brand-mark { display: grid; width: 3.35rem; height: 3.35rem; margin-bottom: 1.5rem; place-items: center; border: 1px solid rgba(180, 228, 59, .28); border-radius: 1rem; color: var(--green); background: rgba(180, 228, 59, .08); box-shadow: inset 0 0 24px rgba(180, 228, 59, .05); }
.brand-mark svg { width: 1.55rem; height: 1.55rem; }
.brand-mark.small { width: 2.45rem; height: 2.45rem; margin: 0; border-radius: .75rem; }
.brand-mark.small svg { width: 1.2rem; }
.session-loading { position: relative; z-index: 1; display: grid; min-height: 100vh; padding: 2rem; place-items: center; }
.session-loading-card { position: relative; width: min(100%, 28.5rem); padding: 2.75rem; border: 1px solid var(--line); border-radius: 1.5rem; background: linear-gradient(145deg, rgba(27, 38, 30, .96), rgba(16, 23, 19, .97)); box-shadow: var(--shadow); }
.session-loading-row { display: flex; margin-top: 2rem; align-items: center; gap: .75rem; }
.session-loading-row strong { font-size: .9rem; }
.session-loading-card > p:last-child { margin: .75rem 0 0 1.95rem; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.login-screen { position: relative; z-index: 1; display: grid; min-height: 100vh; padding: 2rem; place-items: center; }
.login-card { position: relative; width: min(100%, 28.5rem); padding: 2.75rem; border: 1px solid var(--line); border-radius: 1.5rem; background: linear-gradient(145deg, rgba(27, 38, 30, .96), rgba(16, 23, 19, .97)); box-shadow: var(--shadow); }
.language-switcher { display: inline-flex; width: max-content; padding: .2rem; border: 1px solid rgba(214,228,217,.12); border-radius: .62rem; background: rgba(4,8,5,.32); }
.session-loading-card > .language-switcher, .login-card > .language-switcher { position: absolute; top: 1.15rem; right: 1.15rem; }
.language-switcher button { min-width: 2.65rem; min-height: 2rem; padding: .35rem .55rem; border: 0; border-radius: .42rem; color: #7e8b82; background: transparent; font-size: .68rem; font-weight: 800; cursor: pointer; }
.language-switcher button:hover { color: #dbe3dd; }
.language-switcher button.active { color: #142005; background: var(--green); }
.language-switcher.compact { flex: 0 0 auto; }
.language-switcher.compact button { min-width: 1.9rem; min-height: 1.8rem; padding: .25rem .35rem; font-size: .62rem; }
.login-card h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.35rem); letter-spacing: -.04em; }
.login-copy { margin: 1rem 0 2rem; color: var(--muted); line-height: 1.7; }
code { padding: .14rem .35rem; border: 1px solid var(--line); border-radius: .35rem; color: #cfe897; background: rgba(255,255,255,.035); }
.login-form { display: grid; gap: .65rem; }
label { color: #d5ddd6; font-size: .82rem; font-weight: 700; }
.input-shell { display: flex; align-items: center; height: 3.2rem; margin-bottom: .65rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(7, 11, 8, .42); transition: .2s ease; }
.input-shell:focus-within { border-color: rgba(180, 228, 59, .55); box-shadow: 0 0 0 3px rgba(180, 228, 59, .08); }
.input-shell > svg { flex: 0 0 auto; width: 1rem; margin-left: 1rem; color: #728078; }
input[type="text"], input[type="password"] { width: 100%; min-width: 0; padding: 0 1rem; border: 0; outline: 0; color: var(--text); background: transparent; }
input::placeholder { color: #667169; }
.password-toggle, .icon-button { display: grid; flex: 0 0 auto; padding: .65rem; border: 0; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.password-toggle svg, .icon-button svg { width: 1.1rem; }
.button { display: inline-flex; min-height: 2.8rem; padding: .72rem 1.05rem; border: 1px solid transparent; border-radius: .7rem; align-items: center; justify-content: center; gap: .55rem; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease, border-color .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.button:disabled { opacity: .5; cursor: wait; }
.button svg { width: 1rem; }
.button.primary { color: #10150e; background: linear-gradient(135deg, #c4ed51, #93c925); box-shadow: 0 8px 25px rgba(144, 199, 36, .13); }
.button.steam { border-color: rgba(167, 202, 220, .2); color: #f4f8fa; background: #19384b; box-shadow: 0 8px 25px rgba(8, 22, 31, .24); text-decoration: none; }
.button.steam svg:last-child { margin-left: auto; }
.button.secondary { border-color: rgba(180, 228, 59, .24); color: #dff3a9; background: rgba(180, 228, 59, .075); }
.button.ghost { border-color: var(--line); color: #c9d2cb; background: rgba(255,255,255,.025); }
.button.danger { border-color: rgba(241, 123, 110, .42); color: #fff; background: #a63f36; }
.button.wide { width: 100%; margin-top: .4rem; }
.form-error { min-height: 1.15rem; margin: 0; color: #ff9f95; font-size: .8rem; }
.steam-login-option > p { margin: .65rem 0 0; color: #85938a; font-size: .75rem; line-height: 1.55; }
.login-divider { display: flex; margin: 1.45rem 0 1.2rem; align-items: center; gap: .8rem; color: #748078; font-size: .7rem; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.login-divider span { flex: 0 0 auto; }
.login-footer { display: flex; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); align-items: center; gap: .55rem; color: #758078; font-size: .73rem; }
.login-footer svg { width: 1rem; color: #7fa535; }

.portal { position: relative; z-index: 1; min-height: 100vh; }
.portal-topbar { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid var(--line); background: rgba(12, 17, 14, .92); box-shadow: 0 12px 38px rgba(0, 0, 0, .18); backdrop-filter: blur(18px); }
.portal-topbar-inner { display: grid; width: min(1440px, calc(100% - 2rem)); min-height: 4.8rem; margin: 0 auto; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.75rem, 1.5vw, 1.5rem); }
.portal-main { min-height: calc(100vh - 4.8rem); }
.topbar-brand { display: flex; width: max-content; align-items: center; gap: .75rem; color: var(--text); text-decoration: none; }
.topbar-brand > span:last-child { display: grid; }
.topbar-brand strong { font-size: .85rem; letter-spacing: .12em; }
.topbar-brand small { color: var(--muted); font-size: .68rem; }
.main-nav { display: flex; min-width: 0; justify-content: center; gap: .18rem; }
.nav-link { position: relative; display: flex; min-width: 0; min-height: 2.85rem; padding: .72rem clamp(.55rem, .75vw, .82rem); border: 0; border-radius: .7rem; align-items: center; gap: .45rem; color: var(--muted); background: transparent; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.nav-link svg { width: 1.05rem; }
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(255,255,255,.05); }
.nav-link.active { background: rgba(180,228,59,.09); }
.nav-link.active::before { position: absolute; right: .75rem; bottom: -.1rem; left: .75rem; height: 2px; border-radius: 1rem; background: var(--green); content: ""; }
.nav-link.active svg { color: var(--green); }
.nav-count { min-width: 1.25rem; padding: .05rem .3rem; border-radius: 1rem; color: #cbe984; background: rgba(180, 228, 59, .1); font-size: .68rem; text-align: center; }
.nav-link .nav-count { margin-left: auto; }
.topbar-account { display: flex; min-width: 0; align-items: center; justify-self: end; gap: .55rem; }
.topbar-wallet { display: flex; min-width: 0; padding: .25rem; border: 1px solid rgba(214,228,217,.1); border-radius: .72rem; align-items: stretch; background: rgba(4,8,5,.34); }
.topbar-balance { display: flex; min-width: 0; padding: .34rem .58rem; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.topbar-balance + .topbar-balance { border-left: 1px solid rgba(214,228,217,.1); }
.topbar-balance > svg { flex: 0 0 auto; width: .92rem; height: .92rem; }
.topbar-balance.currency > svg { color: var(--coin-gold); }
.topbar-balance.fragments > svg { color: #8ed8f2; }
.topbar-balance > span { display: grid; min-width: 0; gap: .02rem; }
.topbar-balance small { max-width: 5.5rem; overflow: hidden; color: #7f8c83; font-size: .55rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.topbar-balance strong { color: #e8eee9; font-size: .72rem; line-height: 1.2; }
.user-chip { display: flex; min-width: 0; align-items: center; gap: .6rem; }
.user-chip > span:first-child { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; place-items: center; color: #171d12; background: var(--green); font-size: .76rem; font-weight: 900; }
.user-chip > span:last-child { display: grid; }
.user-chip strong { max-width: 9rem; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { max-width: 7rem; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; }
.logout-button { display: inline-flex; min-height: 2.6rem; padding: .6rem .75rem; border: 0; border-radius: .65rem; align-items: center; gap: .45rem; color: #aeb8b1; background: transparent; font-size: .75rem; font-weight: 700; cursor: pointer; }
.logout-button:hover { color: #ffaaa1; background: rgba(241,123,110,.07); }
.logout-button svg { width: 1rem; }
.content { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; }
.view { display: none; }
.view.active { display: block; animation: enter .25s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.hero-panel { display: flex; min-height: 12.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.25rem; align-items: end; justify-content: space-between; gap: 2rem; background: radial-gradient(circle at 82% 5%, rgba(180, 228, 59, .14), transparent 30%), linear-gradient(135deg, rgba(31, 44, 34, .96), rgba(17, 24, 20, .96)); overflow: hidden; }
.hero-panel h1, .page-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.15rem); letter-spacing: -.05em; }
.hero-panel p:last-child, .page-heading p:last-child { margin: .85rem 0 0; color: var(--muted); }
.runtime-pill { display: flex; flex: 0 0 auto; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 2rem; align-items: center; gap: .5rem; color: var(--muted); background: rgba(0,0,0,.14); font-size: .73rem; }
.runtime-pill > span { width: .48rem; height: .48rem; border-radius: 50%; background: #7f8982; }
.runtime-pill.online > span { background: var(--green); box-shadow: 0 0 12px rgba(180, 228, 59, .55); }
.runtime-pill.offline > span { background: var(--danger); }
.stat-grid { display: grid; margin: 1rem 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.stat-card { display: flex; min-height: 8.5rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: 1rem; align-items: center; gap: 1rem; background: var(--panel); }
.stat-icon { display: grid; width: 2.8rem; height: 2.8rem; border-radius: .8rem; place-items: center; }
.stat-icon svg { width: 1.25rem; }
.stat-icon.green { color: var(--green); background: rgba(180,228,59,.09); }
.stat-icon.amber { color: var(--amber); background: rgba(228,173,71,.09); }
.stat-icon.blue { color: var(--blue); background: rgba(98,183,214,.09); }
.stat-icon.coin { position: relative; color: var(--coin-ink); background: linear-gradient(145deg, var(--coin-highlight), var(--coin-gold)); box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 5px 14px rgba(176,119,16,.2); overflow: hidden; }
.stat-icon.coin::after { position: absolute; top: .45rem; left: .5rem; width: .72rem; height: .2rem; border-radius: 1rem; background: rgba(255,255,255,.5); content: ""; transform: rotate(-25deg); }
.stat-icon.coin svg { position: relative; z-index: 1; width: 1.35rem; stroke-width: 2.15; filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)); }
.stat-icon.fragment { color: #c4b5fd; background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .09), 0 5px 14px rgba(76, 29, 149, .16); }
.stat-icon.fragment svg { width: 1.35rem; stroke-width: 2; }
.stat-card > div { display: grid; gap: .18rem; }
.stat-card small { color: var(--muted); font-size: .72rem; }
.stat-card strong { font-size: 1.32rem; }
.stat-card div span { color: #707d74; font-size: .68rem; }
.sponsor-section { margin: 1rem 0; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(145deg, rgba(24, 34, 27, .98), rgba(15, 22, 18, .98)); }
.sponsor-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); align-items: center; gap: clamp(1.25rem, 4vw, 3rem); }
.sponsor-heading h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.025em; }
.sponsor-heading > div:first-child > p { max-width: 62ch; margin: .6rem 0 0; color: var(--muted); line-height: 1.65; }
.sponsor-contact-note { display: flex; padding: 1rem 1.05rem; border-radius: .8rem; align-items: flex-start; gap: .75rem; color: #dfe9e1; background: rgba(180, 228, 59, .07); }
.sponsor-contact-note > svg { flex: 0 0 auto; width: 1.05rem; margin-top: .1rem; color: var(--green); }
.sponsor-contact-note div { display: grid; gap: .3rem; }
.sponsor-contact-note strong { font-size: .78rem; }
.sponsor-contact-note span { color: #a9b8ad; font-size: .72rem; line-height: 1.55; }
.sponsor-packages { display: grid; margin-top: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sponsor-package { display: flex; min-width: 0; min-height: 19rem; padding: 1.25rem; border: 1px solid rgba(214, 228, 217, .1); border-radius: .85rem; flex-direction: column; background: rgba(8, 13, 10, .32); }
.sponsor-package.current { border-color: rgba(180, 228, 59, .34); background: rgba(180, 228, 59, .045); }
.sponsor-package-top { display: flex; min-height: 1.5rem; align-items: center; justify-content: space-between; gap: .7rem; color: #a9b8ad; font-size: .69rem; }
.sponsor-package-top > strong { display: inline-flex; align-items: center; gap: .3rem; color: #d9f39a; font-size: .67rem; }
.sponsor-package-top svg { width: .9rem; }
.sponsor-package h3 { margin: .65rem 0 0; font-size: 1.22rem; letter-spacing: -.02em; }
.sponsor-package > p { min-height: 3.15rem; margin: .55rem 0 1.1rem; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.sponsor-package dl { display: grid; margin: 0 0 1.2rem; gap: .7rem; }
.sponsor-package dl > div { display: grid; padding-top: .7rem; border-top: 1px solid rgba(214, 228, 217, .08); gap: .28rem; }
.sponsor-package dt { color: #89968d; font-size: .67rem; }
.sponsor-package dd { display: flex; margin: 0; align-items: center; gap: .45rem; color: #eef5ef; font-size: .78rem; font-weight: 800; }
.sponsor-package dd svg { width: 1rem; color: var(--green); }
.sponsor-package .button { margin-top: auto; }
.sponsor-loading, .sponsor-empty { display: flex; min-height: 8rem; padding: 1.2rem; grid-column: 1 / -1; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); }
.sponsor-empty > svg { width: 1.15rem; color: var(--green); }
.sponsor-empty > div { display: grid; gap: .25rem; }
.sponsor-empty strong { color: var(--text); font-size: .84rem; }
.sponsor-empty span { font-size: .72rem; }
.home-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.feature-card, .account-card { min-height: 17rem; padding: 1.7rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.feature-card { display: grid; grid-template-columns: auto 1fr; align-content: space-between; gap: 1.25rem; }
.feature-card .button { grid-column: 1 / -1; width: max-content; }
.feature-icon { display: grid; width: 3rem; height: 3rem; border: 1px solid rgba(180,228,59,.16); border-radius: .9rem; place-items: center; color: var(--green); background: rgba(180,228,59,.06); }
.feature-card h2, .account-card h2, .vault-toolbar strong { margin: 0; font-size: 1.25rem; }
.feature-card p:not(.eyebrow) { max-width: 30rem; margin: .55rem 0 0; color: var(--muted); line-height: 1.6; }
.section-title { display: flex; justify-content: space-between; }
.section-title > svg { color: var(--green); }
.account-card dl { margin: 1.7rem 0 0; }
.account-card dl div { display: flex; padding: .75rem 0; border-top: 1px solid var(--line); justify-content: space-between; gap: 1rem; }
.account-card dt { color: var(--muted); font-size: .76rem; }
.account-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .78rem; font-weight: 700; text-align: right; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.page-heading > div { max-width: 44rem; }
.task-page-heading { margin-bottom: 1.2rem; }
.task-cycle-note { display: flex; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(180, 228, 59, .18); border-radius: .85rem; align-items: flex-start; gap: .75rem; background: rgba(180, 228, 59, .055); }
.task-cycle-note > svg { flex: 0 0 auto; width: 1.05rem; margin-top: .1rem; color: var(--green); }
.task-cycle-note div { display: grid; gap: .25rem; }
.task-cycle-note strong { font-size: .78rem; }
.task-cycle-note span { color: #96a59a; font-size: .72rem; line-height: 1.55; }
.task-filter { display: flex; margin-bottom: .75rem; padding: .3rem; border: 1px solid var(--line); border-radius: .8rem; gap: .25rem; background: rgba(21, 29, 24, .72); }
.task-filter button { min-height: 2.75rem; padding: .55rem 1.1rem; border: 0; border-radius: .6rem; color: var(--muted); background: transparent; font-size: .76rem; font-weight: 800; cursor: pointer; }
.task-filter button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.task-filter button.active { color: #17200f; background: var(--green); }
.task-list { display: grid; gap: .7rem; }
.task-list-state { display: flex; min-height: 15rem; border: 1px solid var(--line); border-radius: 1rem; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); background: rgba(18, 25, 21, .92); }
.task-list-state > svg { width: 1.1rem; color: var(--green); }
.task-list-state.error > svg { color: var(--danger); }
.task-item { display: grid; min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, .34fr); align-items: stretch; gap: 1rem; background: rgba(18, 25, 21, .92); transition: border-color .16s ease, background-color .16s ease; }
.task-item:hover { border-color: rgba(214, 228, 217, .18); background: rgba(21, 29, 24, .96); }
.task-item.ready { border-color: rgba(180, 228, 59, .32); }
.task-item.claimed { opacity: .76; }
.task-item-icon { display: grid; width: 2.8rem; height: 2.8rem; border-radius: .8rem; place-items: center; color: var(--green); background: rgba(180, 228, 59, .07); }
.task-item.online .task-item-icon { color: #83c8ef; background: rgba(87, 171, 218, .08); }
.task-item.kill .task-item-icon { color: #e09a91; background: rgba(211, 111, 99, .08); }
.task-item-icon svg { width: 1.2rem; }
.task-item-main { min-width: 0; }
.task-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.task-item-heading h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.task-item-meta { display: flex; margin-top: .35rem; gap: .4rem; }
.task-item-meta span, .task-state { display: inline-flex; min-height: 1.5rem; padding: .25rem .55rem; border-radius: 999px; align-items: center; color: #96a49a; background: rgba(255,255,255,.045); font-size: .64rem; font-weight: 800; white-space: nowrap; }
.task-state.ready { color: #dff5a5; background: rgba(180, 228, 59, .1); }
.task-state.claimed { color: #9eaaa1; }
.task-item-main > p { max-width: 68ch; margin: .75rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.task-progress-copy { display: flex; margin-top: 1rem; align-items: baseline; justify-content: space-between; gap: 1rem; }
.task-progress-copy span { color: #78857c; font-size: .66rem; }
.task-progress-copy strong { font-size: .73rem; font-variant-numeric: tabular-nums; }
.task-item progress { display: block; width: 100%; height: .45rem; margin-top: .45rem; border: 0; border-radius: 999px; appearance: none; overflow: hidden; background: rgba(255,255,255,.055); }
.task-item progress::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.055); }
.task-item progress::-webkit-progress-value { border-radius: 999px; background: var(--green); }
.task-item progress::-moz-progress-bar { border-radius: 999px; background: var(--green); }
.task-target-copy { margin-top: .5rem; color: #7f8c83; font-size: .66rem; }
.task-item-reward { display: flex; min-width: 0; padding-left: 1rem; border-left: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: center; gap: .55rem; }
.task-item-reward > span { color: #78857c; font-size: .66rem; }
.task-reward-values { display: grid; gap: .35rem; }
.task-reward-values strong { display: inline-flex; align-items: center; gap: .4rem; font-size: .77rem; }
.task-reward-values svg { width: .95rem; color: var(--green); }
.login-reward-calendar { display: grid; max-height: 20rem; margin-top: .85rem; padding-right: .25rem; overflow-y: auto; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .45rem; }
.login-reward-day { display: grid; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .7rem; gap: .45rem; background: rgba(255,255,255,.018); }
.login-reward-day.current { border-color: rgba(180, 228, 59, .42); background: rgba(180, 228,59,.07); }
.login-reward-day > span { color: var(--muted); font-size: .67rem; font-weight: 800; }
.login-reward-day.current > span { color: var(--green); }
.login-reward-day .task-reward-values { display: flex; flex-wrap: wrap; gap: .35rem; }
.login-reward-day .task-reward-values strong { font-size: .68rem; }
.task-claim-button { width: 100%; margin-top: .25rem; }
.task-claim-button.claimed { color: #9eaaa1; border-color: rgba(214, 228, 217, .08); background: rgba(255,255,255,.03); }
.leaderboard-heading { margin-bottom: 1.5rem; }
.leaderboard-type-switcher { display: grid; margin-bottom: .75rem; padding: .35rem; border: 1px solid var(--line); border-radius: .9rem; grid-template-columns: repeat(3, 1fr); gap: .3rem; background: rgba(21, 29, 24, .72); }
.leaderboard-type-switcher button { display: inline-flex; min-height: 3rem; padding: .65rem 1rem; border: 0; border-radius: .65rem; align-items: center; justify-content: center; gap: .55rem; color: var(--muted); background: transparent; font-size: .8rem; font-weight: 800; cursor: pointer; }
.leaderboard-type-switcher button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.leaderboard-type-switcher button.active { color: #17200f; background: var(--green); }
.leaderboard-type-switcher svg { width: 1rem; }
.leaderboard-toolbar { display: flex; min-height: 3.8rem; padding: .55rem; border: 1px solid var(--line); border-radius: .9rem .9rem 0 0; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(21, 29, 24, .78); }
.period-switcher { display: grid; grid-template-columns: repeat(4, minmax(4.2rem, 1fr)); gap: .25rem; }
.period-switcher button { min-height: 2.55rem; padding: .55rem .9rem; border: 0; border-radius: .65rem; color: var(--muted); background: transparent; font-size: .78rem; font-weight: 800; cursor: pointer; }
.period-switcher button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.period-switcher button.active { color: #17200f; background: var(--green); }
#leaderboard-range { padding-right: .7rem; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.leaderboard-board { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 1rem 1rem; background: rgba(18, 25, 21, .92); overflow: hidden; }
.leaderboard-columns, .leaderboard-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 7rem 7rem; align-items: center; }
.leaderboard-columns { min-height: 2.8rem; padding: 0 1.35rem; border-bottom: 1px solid var(--line); color: #77847b; font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.leaderboard-columns span:nth-last-child(-n+2) { text-align: right; }
.leaderboard-row { min-height: 4.8rem; padding: .55rem 1.35rem; border-bottom: 1px solid rgba(214, 228, 217, .075); transition: background-color .16s ease; }
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row:hover { background: rgba(255,255,255,.025); }
.leaderboard-row.current-player { background: rgba(180, 228, 59, .055); box-shadow: inset 1px 0 var(--green); }
.leaderboard-rank { width: 2.2rem; color: #7d8981; font-size: .92rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.podium-1 .leaderboard-rank { color: #f4ce6a; font-size: 1.2rem; }
.podium-2 .leaderboard-rank { color: #c5d0cb; font-size: 1.08rem; }
.podium-3 .leaderboard-rank { color: #c69368; font-size: 1.02rem; }
.leaderboard-player { display: grid; min-width: 0; gap: .2rem; }
.leaderboard-player strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player small { color: #748078; font-size: .67rem; }
.leaderboard-kills, .leaderboard-deaths, .leaderboard-kd, .leaderboard-record { display: flex; align-items: baseline; justify-content: end; gap: .35rem; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.leaderboard-kills { color: var(--green); }
.leaderboard-deaths { color: #d89088; }
.leaderboard-kd { color: var(--blue); }
.leaderboard-record { color: #d9e0da; font-size: .95rem; }
.leaderboard-kills small, .leaderboard-deaths small, .leaderboard-kd small, .leaderboard-record small { color: #748078; font-size: .64rem; font-weight: 700; }
.leaderboard-status { display: flex; min-height: 15rem; align-items: center; justify-content: center; gap: .75rem; color: var(--muted); font-size: .8rem; }
.leaderboard-status > svg { width: 1.25rem; color: #7f8b83; }
.leaderboard-status.error { color: #d89088; }
.leaderboard-status.error > svg { color: var(--danger); }
.friends-heading { margin-bottom: 1.25rem; }
.friend-add-panel { display: grid; padding: 1.15rem; border: 1px solid rgba(180,228,59,.16); border-radius: 1rem; grid-template-columns: minmax(15rem, .8fr) minmax(20rem, 1.2fr); align-items: center; gap: 1rem 1.5rem; background: linear-gradient(135deg, rgba(180,228,59,.055), rgba(19,29,22,.72)); }
.friend-add-panel > div:first-child { display: flex; min-width: 0; align-items: center; gap: .85rem; }
.friend-add-icon { display: grid; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: .8rem; place-items: center; color: var(--green); background: rgba(180,228,59,.09); }
.friend-add-icon svg { width: 1.1rem; }
.friend-add-panel h2 { margin: 0; font-size: 1rem; }
.friend-add-panel p { margin: .3rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.friend-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
.friend-add-form .input-shell { margin: 0; }
.friend-add-form .button { min-width: 8.6rem; }
.friend-add-panel > .form-error { grid-column: 2; margin-top: -.55rem; }
.friend-state { display: flex; min-height: 16rem; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); font-size: .78rem; }
.friend-state > svg { width: 1rem; color: var(--danger); }
#friend-content { display: grid; margin-top: 1.2rem; gap: 1rem; }
#friend-content[hidden] { display: none; }
.friend-section { padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(20,29,23,.62); }
.friend-section-heading { display: flex; margin-bottom: .85rem; align-items: center; justify-content: space-between; gap: 1rem; }
.friend-section-heading h2 { margin: 0; font-size: 1rem; }
.friend-section-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .67rem; }
.friend-count, .online-count { flex: 0 0 auto; padding: .28rem .55rem; border-radius: 999px; color: #d7e9ac; background: rgba(180,228,59,.08); font-size: .64rem; font-weight: 800; }
.friend-list, .friend-request-list { display: grid; gap: .55rem; }
.friend-card, .friend-request-card { display: grid; min-width: 0; min-height: 4.9rem; padding: .8rem .9rem; border: 1px solid rgba(214,228,217,.09); border-radius: .8rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; background: rgba(5,10,7,.22); }
.friend-card.teleportable { border-color: rgba(180,228,59,.2); background: rgba(180,228,59,.035); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.friend-card.teleportable:hover { border-color: rgba(180,228,59,.4); background: rgba(180,228,59,.065); transform: translateY(-1px); }
.friend-card.teleportable:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.friend-avatar { position: relative; display: grid; width: 2.65rem; height: 2.65rem; border: 1px solid rgba(214,228,217,.11); border-radius: .78rem; place-items: center; color: #d7dfd9; background: #1d2921; font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 800; }
.friend-avatar > i { position: absolute; right: -.12rem; bottom: -.12rem; width: .7rem; height: .7rem; border: 2px solid #172019; border-radius: 50%; background: #69766d; }
.friend-avatar > i.online { background: var(--green); box-shadow: 0 0 8px rgba(180,228,59,.42); }
.friend-identity { display: grid; min-width: 0; gap: .16rem; }
.friend-identity strong, .friend-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-identity strong { color: #e2e8e3; font-size: .78rem; }
.friend-identity > span { color: #7d8980; font-size: .63rem; font-variant-numeric: tabular-nums; }
.friend-identity small { color: #647068; font-size: .59rem; }
.friend-presence { display: flex; margin-top: .12rem; align-items: center; gap: .35rem; color: #7d8980 !important; }
.friend-card.online .friend-presence { color: #b2c883 !important; }
.friend-presence i { width: .4rem; height: .4rem; border-radius: 50%; background: #66736a; }
.friend-card.online .friend-presence i { background: var(--green); }
.friend-dinosaur { display: inline-flex; width: max-content; max-width: 100%; margin-top: .08rem; align-items: center; gap: .35rem; color: #768179 !important; line-height: 1.3; }
.friend-dinosaur svg { width: .72rem; height: .72rem; flex: 0 0 auto; color: #6f7b72; }
.friend-card.online .friend-dinosaur.has-species { color: #cbd8cf !important; }
.friend-card.online .friend-dinosaur.has-species svg { color: #d6f26f; filter: drop-shadow(0 0 5px rgba(180,228,59,.2)); }
.friend-card-actions, .friend-request-actions { display: flex; align-items: center; justify-content: end; gap: .5rem; }
.friend-teleport-hint, .friend-pending { display: inline-flex; align-items: center; gap: .35rem; color: #b7d46f; font-size: .63rem; font-weight: 800; }
.friend-teleport-hint svg, .friend-pending svg { width: .78rem; }
.friend-remove { display: grid; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: .65rem; place-items: center; color: #66736a; background: transparent; cursor: pointer; }
.friend-remove:hover, .friend-remove:focus-visible { color: var(--danger); background: rgba(241,123,110,.07); }
.friend-remove svg { width: .9rem; }
.button.small { min-height: 2.3rem; padding: .48rem .7rem; font-size: .67rem; }
.friend-outgoing { background: rgba(15,22,17,.48); }
.friend-empty { padding: 3rem 1rem; }
.friend-teleport-icon { color: var(--blue); background: rgba(98,183,214,.08); }
.map-heading { margin-bottom: 1.25rem; }
.map-heading-meta { display: grid; flex: 0 0 auto; justify-items: end; gap: .25rem; color: #7d8981; font-size: .68rem; font-variant-numeric: tabular-nums; }
.map-heading-meta span:first-child { color: #cfe897; font-size: .78rem; font-weight: 800; }
.map-shell { display: grid; min-height: 42rem; height: min(72vh, 49rem); border: 1px solid rgba(214, 228, 217, .13); border-radius: 1rem; grid-template-columns: minmax(16rem, 18.5rem) minmax(0, 1fr); background: #0d1410; box-shadow: 0 24px 60px rgba(0, 0, 0, .27); overflow: hidden; }
.map-panel { z-index: 3; min-width: 0; padding: 1.05rem; border-right: 1px solid rgba(214, 228, 217, .1); background: linear-gradient(180deg, #17211a 0%, #111913 100%); overflow: auto; scrollbar-color: rgba(180,228,59,.3) transparent; scrollbar-width: thin; }
.map-panel::-webkit-scrollbar { width: .42rem; }
.map-panel::-webkit-scrollbar-thumb { border-radius: 1rem; background: rgba(180,228,59,.24); }
.map-panel-section { padding: 1rem 0; border-bottom: 1px solid rgba(214, 228, 217, .08); }
.map-panel-section:first-child { padding-top: 0; }
.map-panel-section:last-child { border-bottom: 0; }
.map-panel-section > label { display: block; margin-bottom: .55rem; color: #d7dfd9; font-size: .73rem; }
.map-search-shell { position: relative; display: flex; height: 2.85rem; border: 1px solid rgba(214, 228, 217, .12); border-radius: .75rem; align-items: center; background: rgba(4, 8, 5, .3); }
.map-search-shell:focus-within { border-color: rgba(180, 228, 59, .52); box-shadow: 0 0 0 3px rgba(180, 228, 59, .075); }
.map-search-shell > svg { flex: 0 0 auto; width: .95rem; margin-left: .85rem; color: #718077; }
.map-search-shell input { width: 100%; height: 100%; min-width: 0; padding: 0 .7rem; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .75rem; }
.map-search-shell button { display: grid; flex: 0 0 auto; width: 2.4rem; height: 100%; padding: 0; border: 0; place-items: center; color: #89958d; background: transparent; cursor: pointer; }
.map-search-shell button:hover { color: var(--text); }
.map-search-shell button svg { width: .9rem; }
.map-search-results { max-height: 13.5rem; margin-top: .5rem; border: 1px solid rgba(214, 228, 217, .1); border-radius: .75rem; background: #121a15; overflow: auto; }
.map-search-results button { display: grid; width: 100%; min-height: 2.8rem; padding: .55rem .65rem; border: 0; border-bottom: 1px solid rgba(214, 228, 217, .07); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.map-search-results button:hover, .map-search-results button:focus-visible { background: rgba(180, 228, 59, .06); }
.map-search-results button:last-child { border-bottom: 0; }
.map-search-results button > span { width: .48rem; height: .48rem; border-radius: 50%; background: var(--map-category-color); box-shadow: 0 0 9px color-mix(in srgb, var(--map-category-color) 55%, transparent); }
.map-search-results strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.map-search-results small { color: #758178; font-size: .62rem; }
.map-search-results p { margin: 0; padding: 1rem; color: var(--muted); font-size: .7rem; text-align: center; }
.map-panel-title { display: flex; margin-bottom: .65rem; align-items: center; justify-content: space-between; gap: .7rem; }
.map-panel-title strong { font-size: .72rem; }
.map-panel-title span, .map-panel-title button { color: #77837a; font-size: .62rem; }
.map-panel-title button { padding: .2rem; border: 0; color: #a9bd78; background: transparent; cursor: pointer; }
.map-panel-title button:hover { color: var(--green); }
.map-overlay-grid { display: grid; gap: .45rem; }
.map-control-tile { display: grid; width: 100%; min-height: 3.55rem; padding: .7rem; border: 1px solid rgba(214, 228, 217, .1); border-radius: .75rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; color: #87938a; background: rgba(255,255,255,.02); text-align: left; cursor: pointer; }
.map-control-tile:hover { border-color: rgba(180, 228, 59, .2); color: #c8d1ca; }
.map-control-tile.active { border-color: rgba(180, 228, 59, .25); color: var(--green); background: rgba(180, 228, 59, .065); }
.map-control-tile::after { content: attr(data-state-label); min-width: 1.7rem; padding: .16rem .34rem; border-radius: 999px; color: #78847b; background: rgba(255,255,255,.045); font-size: .55rem; font-weight: 800; text-align: center; }
.map-control-tile.active::after { color: #142005; background: var(--green); }
.map-control-tile > svg { width: 1.05rem; }
.map-control-tile > span { display: grid; gap: .15rem; }
.map-control-tile strong { color: #d8e0da; font-size: .7rem; }
.map-control-tile small { color: #6f7b72; font-size: .6rem; }
.map-category-list { display: grid; gap: .35rem; }
.map-category-group { border: 1px solid transparent; border-radius: .72rem; color: #8b978e; background: transparent; overflow: hidden; }
.map-category-group.active, .map-category-group.expanded { border-color: rgba(214, 228, 217, .1); background: rgba(255,255,255,.025); }
.map-category-header { display: grid; min-height: 3.15rem; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: stretch; }
.map-category-visibility, .map-category-expand, .map-category-point { border: 0; color: inherit; background: transparent; cursor: pointer; }
.map-category-visibility { display: grid; width: 100%; padding: 0; place-items: center; }
.map-category-visibility:hover { background: rgba(180,228,59,.045); }
.map-category-swatch { width: .68rem; height: .68rem; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.map-category-visibility.active .map-category-swatch { border-color: rgba(255,255,255,.78); background: var(--map-category-color); box-shadow: 0 0 10px color-mix(in srgb, var(--map-category-color) 45%, transparent); transform: scale(1.08); }
.map-category-expand { display: grid; min-width: 0; padding: .5rem .62rem .5rem .15rem; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; text-align: left; }
.map-category-expand:hover { color: #cad3cc; background: rgba(255,255,255,.025); }
.map-category-expand > span:first-child { display: grid; min-width: 0; gap: .12rem; }
.map-category-expand strong { overflow: hidden; color: inherit; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.map-category-expand small { overflow: hidden; color: #6d7970; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.map-category-expand b { min-width: 2rem; color: #7b887e; font-size: .61rem; font-variant-numeric: tabular-nums; text-align: right; }
.map-category-chevron, .map-category-point-arrow { width: .42rem; height: .42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.map-category-group.expanded .map-category-chevron { transform: rotate(225deg); }
.map-category-points { max-height: 17rem; border-top: 1px solid rgba(214, 228, 217, .075); background: rgba(3, 8, 5, .18); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(180,228,59,.3) transparent; scrollbar-width: thin; }
.map-category-points::-webkit-scrollbar { width: .38rem; }
.map-category-points::-webkit-scrollbar-thumb { border-radius: 1rem; background: rgba(180,228,59,.24); }
.map-category-point { display: grid; width: 100%; min-height: 2.7rem; padding: .38rem .68rem .38rem .78rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .58rem; border-bottom: 1px solid rgba(214, 228, 217, .055); text-align: left; }
.map-category-point:last-child { border-bottom: 0; }
.map-category-point:hover, .map-category-point.selected { color: #dce5de; background: rgba(180,228,59,.055); }
.map-category-point-dot { width: .42rem; height: .42rem; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; background: var(--map-category-color); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.map-category-point > span:nth-child(2) { display: grid; min-width: 0; gap: .1rem; }
.map-category-point strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.map-category-point small { overflow: hidden; color: #6f7c72; font-size: .55rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.map-category-point-arrow { width: .34rem; height: .34rem; transform: rotate(-45deg); color: #647067; }
.map-category-visibility:focus-visible, .map-category-expand:focus-visible, .map-category-point:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--green); outline-offset: -2px; }
.map-coordinate-form { padding-top: 1rem; }
.map-coordinate-inputs { display: grid; margin-bottom: .65rem; grid-template-columns: 1fr 1fr; gap: .5rem; }
.map-coordinate-inputs label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem; color: #7f8c82; font-size: .65rem; }
.map-coordinate-inputs input { width: 100%; height: 2.4rem; min-width: 0; padding: 0 .55rem; border: 1px solid rgba(214, 228, 217, .11); border-radius: .58rem; outline: 0; color: #dce5de; background: rgba(4, 8, 5, .28); font-size: .7rem; font-variant-numeric: tabular-nums; }
.map-coordinate-inputs input:focus { border-color: rgba(180, 228, 59, .5); }
.map-coordinate-form .button { min-height: 2.55rem; margin-top: 0; font-size: .7rem; }
.map-viewport { position: relative; min-width: 0; min-height: 32rem; background: #07110f; cursor: default; touch-action: none; overscroll-behavior: contain; overflow: hidden; outline: 0; user-select: none; }
.map-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.map-viewport.dragging { cursor: grabbing; }
.map-viewport.dragging .map-world, .map-viewport.dragging .map-marker-layer, .map-viewport.dragging .map-marker { cursor: grabbing; }
.map-viewport::before { position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at center, transparent 50%, rgba(2, 8, 6, .48) 100%); content: ""; pointer-events: none; }
.map-world { position: absolute; z-index: 0; top: 0; left: 0; width: 2048px; height: 2048px; transform-origin: 0 0; contain: layout style; }
.map-world > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.map-water-image { opacity: .78; }
.map-migration-layer, .map-marker-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-migration-layer { z-index: 1; pointer-events: none; }
.map-marker-layer { z-index: 2; }
.map-player-marker { position: absolute; z-index: 5; width: 2rem; height: 2rem; transform: translate(-50%, -50%) scale(var(--map-marker-inverse)); transform-origin: center; pointer-events: none; }
.map-player-marker > span { position: absolute; inset: .18rem; border: 3px solid #fff; border-radius: 50%; background: #ff2d8d; box-shadow: 0 4px 16px rgba(0,0,0,.82), 0 0 0 .22rem rgba(16,8,20,.72), 0 0 18px rgba(255,45,141,.8); }
.map-player-marker > span::before { position: absolute; inset: 32%; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.72); content: ""; }
.map-player-marker > span::after { position: absolute; inset: -.72rem; border: 3px solid rgba(255,45,141,.78); border-radius: 50%; content: ""; animation: map-player-pulse 2.2s ease-out infinite; }
.map-player-marker small { position: absolute; top: 50%; left: 2.35rem; width: max-content; max-width: 20rem; padding: .28rem .48rem; border-radius: .4rem; transform: translateY(-50%); color: #fff; background: rgba(7,13,9,.94); box-shadow: 0 5px 16px rgba(0,0,0,.55); font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes map-player-pulse { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.map-player-status { position: absolute; z-index: 4; top: .85rem; right: .85rem; display: flex; min-height: 2.2rem; max-width: min(20rem, calc(100% - 1.7rem)); padding: .5rem .7rem; border: 1px solid rgba(214,228,217,.12); border-radius: .65rem; align-items: center; gap: .45rem; color: #aab5ad; background: rgba(10,17,12,.9); box-shadow: 0 10px 26px rgba(0,0,0,.28); font-size: .64rem; line-height: 1.35; }
.map-player-status-dot { flex: 0 0 auto; width: .48rem; height: .48rem; border-radius: 50%; background: #738078; }
.map-player-status.online { color: #dce7c4; }
.map-player-status.online .map-player-status-dot { background: #ff2d8d; box-shadow: 0 0 9px rgba(255,45,141,.72); }
.map-player-status.error .map-player-status-dot { background: #e3a754; }
@media (prefers-reduced-motion: reduce) { .map-player-marker > span::after { animation: none; } }
.map-migration-layer polyline { filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); stroke-linecap: round; stroke-linejoin: round; }
.map-migration-layer polyline[data-migration-type="standard"] { stroke-dasharray: 7 5; }
.map-marker { position: absolute; display: block; width: .8rem; height: .8rem; padding: 0; border: 0; transform: translate(-50%, -50%) scale(var(--map-marker-inverse)); transform-origin: center; color: var(--map-marker-color); background: transparent; cursor: pointer; }
.map-marker > span { position: absolute; inset: .12rem; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: var(--map-marker-color); box-shadow: 0 2px 8px rgba(0,0,0,.65), 0 0 9px color-mix(in srgb, var(--map-marker-color) 55%, transparent); transition: transform .16s ease; }
.map-marker:hover > span, .map-marker:focus-visible > span { transform: scale(1.45); }
.map-marker:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.map-marker small { position: absolute; top: 50%; left: 1rem; display: none; width: max-content; max-width: 10rem; padding: .2rem .38rem; border-radius: .35rem; transform: translateY(-50%); color: #f2f6f3; background: rgba(7, 13, 9, .86); box-shadow: 0 3px 10px rgba(0,0,0,.4); font-size: .56rem; font-weight: 800; white-space: nowrap; }
.map-viewport[data-zoomed="true"] .map-marker.show-label small, .map-marker:hover small, .map-marker:focus-visible small { display: block; }
.map-viewport[data-zoomed="false"] .map-marker:not(.show-label) { opacity: .78; }
.map-zoom-controls { position: absolute; z-index: 4; right: .85rem; bottom: .85rem; display: grid; border: 1px solid rgba(214, 228, 217, .14); border-radius: .7rem; background: rgba(10, 17, 12, .9); box-shadow: 0 12px 28px rgba(0,0,0,.3); overflow: hidden; }
.map-zoom-controls button { display: grid; width: 2.65rem; height: 2.45rem; padding: 0; border: 0; border-bottom: 1px solid rgba(214, 228, 217, .1); place-items: center; color: #c5cec7; background: transparent; cursor: pointer; }
.map-zoom-controls button:last-child { border-bottom: 0; }
.map-zoom-controls button:hover { color: var(--green); background: rgba(180, 228, 59, .07); }
.map-zoom-controls svg { width: 1rem; }
.map-coordinate-readout { position: absolute; z-index: 4; right: 4.15rem; bottom: .85rem; display: flex; min-height: 2.45rem; padding: .55rem .75rem; border: 1px solid rgba(214, 228, 217, .12); border-radius: .7rem; align-items: center; gap: .45rem; color: #8f9b92; background: rgba(10, 17, 12, .88); box-shadow: 0 12px 28px rgba(0,0,0,.28); font-size: .65rem; font-variant-numeric: tabular-nums; }
.map-coordinate-readout svg { flex: 0 0 auto; width: .9rem; color: var(--green); }
.map-coordinate-readout strong { margin-right: .35rem; color: #e1e8e2; }
.map-loading { position: absolute; z-index: 5; inset: 0; display: flex; align-items: center; justify-content: center; gap: .7rem; color: #aeb9b1; background: #0b1511; font-size: .75rem; }
.map-loading.error { color: #ffaaa1; }
.map-attribution { display: flex; margin: .8rem 0 0; align-items: center; gap: .45rem; color: #758078; font-size: .65rem; line-height: 1.5; }
.map-attribution svg { flex: 0 0 auto; width: .9rem; }
.map-attribution a { color: #aeca65; text-underline-offset: .18em; }
.map-attribution a:hover { color: var(--green); }
.vault-notice { display: flex; margin: 2rem 0 1rem; padding: 1rem 1.15rem; border: 1px solid rgba(228,173,71,.17); border-radius: .85rem; align-items: center; gap: .8rem; color: #cfa95d; background: rgba(228,173,71,.045); }
.restore-connection-note { margin: 1rem 0 0; padding: .8rem .9rem; border-radius: .7rem; color: var(--muted); background: rgba(255,255,255,.035); font-size: .74rem; line-height: 1.55; }
.dialog-field { display: grid; gap: .4rem; margin-top: 1rem; text-align: left; }
.dialog-field > span { font-size: .75rem; font-weight: 700; }
.dialog-field select { width: 100%; }
.dialog-field small { color: var(--muted); font-size: .68rem; line-height: 1.5; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; white-space: nowrap !important; clip-path: inset(50%) !important; overflow: hidden !important; }
.current-character { min-height: 13rem; margin-top: 1.35rem; border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(125deg, rgba(28, 39, 31, .98), rgba(13, 22, 17, .98)); overflow: hidden; }
.current-character-loading, .current-character-empty { display: flex; min-height: 13rem; padding: 1.4rem; align-items: center; justify-content: center; gap: .8rem; color: var(--muted); font-size: .78rem; }
.current-character-empty { justify-content: flex-start; }
.current-character-empty > div { display: grid; gap: .35rem; }
.current-character-empty strong { color: var(--text); font-size: .95rem; }
.current-character-empty p { max-width: 42rem; margin: 0; line-height: 1.6; }
.current-character:has(.current-character-copy) { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(20rem, 1.1fr); }
.current-character-portrait { position: relative; min-height: 15rem; border-right: 1px solid rgba(214, 228, 217, .08); overflow: hidden; }
.current-character-copy { display: grid; padding: 1.35rem 1.5rem; align-content: center; }
.current-character-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.current-character-heading > div { display: grid; gap: .35rem; }
.current-character-heading > div > span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.current-character-heading > div > strong { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: .01em; }
.current-character-copy .vault-meta { max-width: 30rem; margin-bottom: .75rem; grid-template-columns: repeat(3, 1fr); }
.current-character-copy > .growth-preference { max-width: 30rem; margin-top: .35rem; }
.current-character-deposit { width: fit-content; margin-top: 1rem; }
.growth-preference { position: relative; display: flex; min-width: 0; padding: .72rem .78rem; border-radius: .75rem; align-items: center; justify-content: space-between; gap: .8rem; background: rgba(214, 228, 217, .045); }
.growth-preference-copy { display: flex; min-width: 0; align-items: center; gap: .62rem; }
.growth-preference-copy > svg { flex: 0 0 auto; width: 1rem; color: #9cc55b; }
.growth-preference-copy > span { display: grid; min-width: 0; gap: .18rem; }
.growth-preference-copy strong { color: #dce4de; font-size: .72rem; }
.growth-preference-copy small { color: #839087; font-size: .64rem; line-height: 1.4; overflow-wrap: anywhere; }
.growth-preference-copy em { width: max-content; max-width: 100%; padding: .16rem .4rem; border-radius: 999px; color: #c8d9aa; background: rgba(180, 228, 59, .08); font-size: .57rem; font-style: normal; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.live-dinosaur-actions { display: grid; max-width: 30rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(214, 228, 217, .1); gap: .7rem; }
.live-dinosaur-actions-heading { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.live-dinosaur-actions-heading > div { display: grid; gap: .2rem; }
.live-dinosaur-actions-heading strong { color: #e8eee9; font-size: .76rem; }
.live-dinosaur-actions-heading small { color: #839087; font-size: .64rem; line-height: 1.45; }
.live-dinosaur-actions-heading > span { flex: 0 0 auto; color: var(--coin-highlight); font-size: .67rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.live-feature-button { display: flex; min-width: 0; min-height: 3.25rem; padding: .58rem .65rem; border: 1px solid rgba(214, 228, 217, .12); border-radius: .68rem; align-items: center; gap: .52rem; color: #dce4de; background: rgba(4, 8, 5, .24); text-align: left; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.live-feature-button:hover:not(:disabled) { border-color: rgba(180, 228, 59, .38); background: rgba(180, 228, 59, .07); transform: translateY(-1px); }
.live-feature-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.live-feature-button:disabled { opacity: .48; cursor: not-allowed; }
.live-feature-button > svg { flex: 0 0 auto; width: .95rem; color: #a9d548; }
.live-feature-button > span:not(.spinner) { display: grid; min-width: 0; gap: .12rem; }
.live-feature-button strong { font-size: .68rem; white-space: nowrap; }
.live-feature-button small { color: #89958d; font-size: .59rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-feature-button > .spinner { flex: 0 0 auto; width: .8rem; height: .8rem; margin-left: auto; }
.live-feature-button.danger { border-color: rgba(241, 123, 110, .2); color: #ffb0a8; background: rgba(241, 123, 110, .045); }
.live-feature-button.danger > svg { color: var(--danger); }
.live-feature-button.danger:hover:not(:disabled) { border-color: rgba(241, 123, 110, .45); background: rgba(241, 123, 110, .09); }
.growth-switch { position: relative; flex: 0 0 auto; width: 2.75rem; height: 1.5rem; padding: 0; border: 1px solid rgba(214, 228, 217, .18); border-radius: 999px; outline: 0; background: #242d27; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.growth-switch span { position: absolute; top: .22rem; left: .2rem; width: .95rem; height: .95rem; border-radius: 50%; background: #9aa49d; box-shadow: 0 2px 6px rgba(0, 0, 0, .32); transition: transform .18s cubic-bezier(.2, .8, .2, 1), background-color .18s ease; }
.growth-switch[aria-checked="true"] { border-color: rgba(180, 228, 59, .48); background: rgba(180, 228, 59, .2); }
.growth-switch[aria-checked="true"] span { background: var(--green); transform: translateX(1.26rem); }
.growth-switch:hover:not(:disabled) { border-color: rgba(180, 228, 59, .58); }
.growth-switch:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.growth-switch:disabled { cursor: not-allowed; opacity: .48; }
.portrait-note { margin: 0; color: #78877c; font-size: .62rem; line-height: 1.5; }
.dino-portrait { position: relative; width: 100%; height: 100%; min-height: 8.5rem; container-type: size; background: radial-gradient(circle at 58% 55%, var(--dino-accent, rgba(180,228,59,.12)), transparent 52%), #111a15; overflow: hidden; }
.dino-portrait::before { position: absolute; top: 50%; left: 50%; width: min(100cqw, 177.778cqh); height: min(100cqh, 56.25cqw); background-image: url('/dinosaur-atlas-community.webp?v=20260813-community-source-1'); background-repeat: no-repeat; background-size: 700% 300%; content: ''; filter: saturate(.92) contrast(1.03); transform: translate(-50%, -50%) scale(var(--dino-scale, 1)); transform-origin: center; }
.dino-portrait::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(7, 12, 9, .76)); content: ''; pointer-events: none; }
.dino-portrait[data-species="allosaurus"]::before { background-position: 0% 0%; }
.dino-portrait[data-species="austroraptor"]::before { background-image: url('/dinosaur-austroraptor.webp?v=20260813-austroraptor-1'); background-position: center; background-size: cover; }
.dino-portrait[data-species="beipiaosaurus"]::before { background-position: 16.667% 0%; }
.dino-portrait[data-species="carnotaurus"]::before { background-position: 33.333% 0%; }
.dino-portrait[data-species="ceratosaurus"]::before { background-position: 50% 0%; }
.dino-portrait[data-species="deinosuchus"]::before { background-position: 66.667% 0%; }
.dino-portrait[data-species="diabloceratops"]::before { background-position: 83.333% 0%; }
.dino-portrait[data-species="dilophosaurus"]::before { background-position: 100% 0%; }
.dino-portrait[data-species="dryosaurus"]::before { background-position: 0% 50%; }
.dino-portrait[data-species="gallimimus"]::before { background-position: 16.667% 50%; }
.dino-portrait[data-species="herrerasaurus"]::before { background-position: 33.333% 50%; }
.dino-portrait[data-species="hypsilophodon"]::before { background-position: 50% 50%; }
.dino-portrait[data-species="kentrosaurus"]::before { background-position: 66.667% 50%; }
.dino-portrait[data-species="maiasaura"]::before { background-position: 83.333% 50%; }
.dino-portrait[data-species="omniraptor"]::before { background-position: 100% 50%; }
.dino-portrait[data-species="pachycephalosaurus"]::before { background-position: 0% 100%; }
.dino-portrait[data-species="pteranodon"]::before { background-position: 16.667% 100%; }
.dino-portrait[data-species="stegosaurus"]::before { background-position: 33.333% 100%; }
.dino-portrait[data-species="tenontosaurus"]::before { background-position: 50% 100%; }
.dino-portrait[data-species="triceratops"]::before { background-position: 66.667% 100%; }
.dino-portrait[data-species="troodon"]::before { background-position: 83.333% 100%; }
.dino-portrait[data-species="tyrannosaurus"]::before { background-position: 100% 100%; }
.dino-portrait[data-species="unknown"]::before { display: none; }
.vault-notice > svg { flex: 0 0 auto; width: 1.15rem; }
.vault-notice > div { display: grid; gap: .2rem; }
.vault-notice strong { font-size: .8rem; }
.vault-notice span { color: #897650; font-size: .7rem; }
.vault-toolbar { display: flex; padding: 1.2rem 0; align-items: center; justify-content: space-between; }
.vault-toolbar > div { display: grid; gap: .2rem; }
.vault-toolbar span { color: var(--muted); font-size: .72rem; }
.vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.vault-card { position: relative; min-height: 22rem; padding: 0 1.35rem 1.35rem; border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(145deg, rgba(27, 37, 30, .96), rgba(18, 25, 21, .96)); transition: border-color .18s ease; overflow: hidden; }
.vault-card::after { position: absolute; right: -2rem; bottom: -3.5rem; width: 10rem; height: 10rem; border: 1.5rem solid rgba(180,228,59,.025); border-radius: 50%; content: ""; pointer-events: none; }
.vault-card-open { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.vault-card-open:focus { outline: 0; }
.vault-card:has(.vault-card-open:hover) { border-color: rgba(180, 228, 59, .28); }
.vault-card:has(.vault-card-open:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.vault-card-portrait { position: relative; aspect-ratio: 16 / 9; margin: 0 -1.35rem .85rem; border-bottom: 1px solid rgba(214, 228, 217, .08); overflow: hidden; }
.vault-card-top { position: relative; display: flex; min-height: 1.6rem; align-items: start; justify-content: space-between; gap: .65rem; }
.vault-card-top .portrait-note { max-width: 67%; }
.species-icon { display: grid; width: 2.8rem; height: 2.8rem; border-radius: .8rem; place-items: center; color: var(--green); background: rgba(180,228,59,.075); }
.status-badge { padding: .3rem .5rem; border-radius: 2rem; color: #bedd7a; background: rgba(180,228,59,.075); font-size: .65rem; font-weight: 800; }
.status-badge.error { color: #ff9f95; background: rgba(241,123,110,.08); }
.status-badge.busy { color: #d8b66f; background: rgba(228,173,71,.08); }
.dinosaur-variant-badge { display: inline-flex; width: max-content; min-height: 1.65rem; padding: .3rem .58rem; border-radius: 999px; align-items: center; justify-content: center; color: #dce7df; background: rgba(30, 40, 33, .94); box-shadow: 0 5px 16px rgba(0, 0, 0, .28); font-size: .62rem; font-weight: 900; letter-spacing: .055em; line-height: 1; white-space: nowrap; }
.dinosaur-variant-badge.prime { color: #e0d7ff; background: rgba(74, 53, 119, .94); }
.dinosaur-variant-badge.normal { color: #dff2ae; background: rgba(54, 76, 39, .94); }
.dinosaur-variant-badge.unknown { color: #c4cec6; background: rgba(48, 57, 51, .94); }
.dinosaur-variant-badge.portrait { position: absolute; z-index: 3; top: .7rem; left: .7rem; }
.vault-card .dinosaur-variant-badge { pointer-events: none; }
.dinosaur-variant-badge.compact { min-height: 1.25rem; margin-left: .32rem; padding: .2rem .4rem; box-shadow: none; font-size: .54rem; vertical-align: middle; }
.stat-card .dinosaur-variant-badge.prime { color: #e0d7ff; }
.stat-card .dinosaur-variant-badge.normal { color: #dff2ae; }
.stat-card .dinosaur-variant-badge.unknown { color: #c4cec6; }
.dinosaur-quality-badge { --quality: #8b9890; display: inline-flex; width: max-content; min-height: 1.65rem; max-width: calc(100% - 1.4rem); padding: .3rem .58rem; border: 1px solid color-mix(in srgb, var(--quality) 44%, transparent); border-radius: 999px; align-items: center; justify-content: center; color: color-mix(in srgb, var(--quality) 82%, white); background: color-mix(in srgb, var(--quality) 13%, rgba(8, 13, 10, .94)); box-shadow: 0 5px 16px rgba(0, 0, 0, .28); font-size: .6rem; font-weight: 900; letter-spacing: .045em; line-height: 1; white-space: nowrap; }
.dinosaur-quality-badge.rarity-uncommon { --quality: #76b852; }
.dinosaur-quality-badge.rarity-rare { --quality: #5d9cec; }
.dinosaur-quality-badge.rarity-epic { --quality: #a78bfa; }
.dinosaur-quality-badge.rarity-legendary { --quality: #e2a83c; }
.dinosaur-quality-badge.rarity-unknown { --quality: #768179; }
.dinosaur-quality-badge.portrait { position: absolute; z-index: 3; top: .7rem; right: .7rem; pointer-events: none; }
.vault-card h2 { position: relative; margin: .7rem 0 .25rem; font-size: 1.1rem; }
.vault-species { color: var(--muted); font-size: .73rem; }
.vault-meta { position: relative; display: grid; margin: 1.1rem 0; grid-template-columns: 1fr 1fr; gap: .65rem; }
.vault-meta span { display: grid; gap: .2rem; color: var(--muted); font-size: .67rem; }
.vault-meta strong { color: #dce4de; font-size: .76rem; }
.vault-details { position: relative; margin: .2rem 0 .75rem; border-block: 1px solid rgba(214, 228, 217, .08); }
.vault-details summary { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 1rem; color: #b9c5bc; cursor: pointer; font-size: .72rem; font-weight: 800; list-style: none; }
.vault-details summary::-webkit-details-marker { display: none; }
.vault-details summary:hover { color: var(--green); }
.vault-details summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.vault-details summary svg { width: .9rem; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.vault-details[open] summary svg { transform: rotate(180deg); }
.vault-details-body { display: grid; padding: .2rem 0 1rem; gap: 1rem; }
.vault-detail-section { min-width: 0; }
.vault-detail-section h3 { margin: 0 0 .55rem; color: #dce4de; font-size: .7rem; }
.vault-detail-section dl { display: grid; margin: 0; gap: .45rem; }
.vault-detail-content { min-width: 0; }
.vault-detail-fact { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .75rem; font-size: .68rem; }
.vault-detail-fact dt { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.vault-detail-fact dd { max-width: 12rem; margin: 0; color: #dce4de; text-align: end; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vault-detail-fact.metric dd { display: grid; min-width: 6.5rem; gap: .3rem; }
.vault-meter { display: block; width: 100%; height: .2rem; border-radius: 1rem; background: rgba(214, 228, 217, .09); overflow: hidden; }
.vault-meter i { display: block; width: var(--vault-value); height: 100%; border-radius: inherit; background: var(--green); }
.vault-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.vault-tags span { max-width: 100%; padding: .28rem .45rem; border-radius: 2rem; color: #cfe995; background: rgba(180, 228, 59, .075); font-size: .64rem; overflow-wrap: anywhere; }
.vault-detail-empty { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.vault-card .button { position: relative; z-index: 2; width: 100%; margin-top: .3rem; }
.vault-card-actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.vault-card-actions [data-vault-respec] { grid-column: 1 / -1; }
.vault-card > .growth-preference { z-index: 2; margin: -.25rem 0 .8rem; }
.vault-card-actions .button { min-width: 0; padding-right: .65rem; padding-left: .65rem; font-size: .7rem; }
.vault-loading { display: flex; min-height: 15rem; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); font-size: .8rem; }
.exchange-page-heading { margin-bottom: 1.2rem; align-items: center; }
.exchange-balance { display: grid; min-width: 11.5rem; padding: .9rem 1rem; border-left: 2px solid #a78bfa; gap: .2rem; background: rgba(139, 92, 246, .065); }
.exchange-balance > span, .exchange-balance small { color: #8f9c93; font-size: .68rem; }
.exchange-balance strong { display: flex; align-items: center; gap: .5rem; color: #ded5ff; font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1; }
.exchange-balance strong svg { width: 1.15rem; color: #a78bfa; }
.exchange-rule { display: flex; padding: 1rem 1.1rem; border: 1px solid rgba(180, 228, 59, .18); border-radius: .85rem; align-items: flex-start; gap: .75rem; background: rgba(180, 228, 59, .045); }
.exchange-rule > svg { flex: 0 0 auto; width: 1.05rem; margin-top: .1rem; color: var(--green); }
.exchange-rule div { display: grid; gap: .25rem; }
.exchange-rule strong { color: #c8dc91; font-size: .78rem; }
.exchange-rule span { color: #91a278; font-size: .71rem; line-height: 1.55; }
.exchange-legend { display: grid; margin: 1rem 0; border: 1px solid var(--line); border-radius: .9rem; grid-template-columns: 1fr 1fr; background: rgba(18, 25, 21, .9); overflow: hidden; }
.exchange-legend > div { display: grid; min-height: 5rem; padding: 1rem 1.15rem; align-content: center; gap: .35rem; }
.exchange-legend > div + div { border-left: 1px solid var(--line); }
.exchange-legend strong { color: #b9c5bc; font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; letter-spacing: .05em; }
.exchange-legend span { color: #7f8c83; font-size: .7rem; line-height: 1.5; }
.exchange-legend .prime { background: linear-gradient(120deg, rgba(139, 92, 246, .07), transparent); }
.exchange-legend .prime strong { color: #c4b5fd; }
.exchange-legend > p { grid-column: 1 / -1; margin: 0; padding: .75rem 1.15rem; border-top: 1px solid var(--line); color: #77847b; font-size: .68rem; line-height: 1.5; }
.exchange-toolbar { display: grid; margin-bottom: .8rem; grid-template-columns: minmax(15rem, 1fr) auto auto; align-items: end; gap: .65rem; }
.exchange-search { display: flex; min-height: 2.8rem; border: 1px solid var(--line); border-radius: .72rem; align-items: center; background: rgba(7, 11, 8, .36); }
.exchange-search:focus-within { border-color: rgba(180, 228, 59, .48); box-shadow: 0 0 0 3px rgba(180, 228, 59, .07); }
.exchange-search svg { flex: 0 0 auto; width: 1rem; margin-left: .9rem; color: #748078; }
.exchange-search input { width: 100%; min-width: 0; padding: 0 .85rem; border: 0; outline: 0; color: var(--text); background: transparent; }
.exchange-rarity-filter { display: grid; gap: .35rem; color: #7f8c83; font-size: .64rem; }
.exchange-rarity-filter select { min-height: 2.8rem; padding: 0 2.15rem 0 .85rem; border: 1px solid var(--line); border-radius: .72rem; outline: 0; color: #dce4de; background: #151e18; font-size: .73rem; font-weight: 800; }
.exchange-rarity-filter select:focus { border-color: rgba(180, 228, 59, .48); }
.exchange-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.exchange-state { display: flex; min-height: 16rem; padding: 2rem; border: 1px dashed var(--line); border-radius: 1rem; grid-column: 1 / -1; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); text-align: center; }
.exchange-state > svg { width: 1.2rem; color: var(--green); }
.exchange-state.error { color: #d89088; }
.exchange-state.error > svg { color: var(--danger); }
.exchange-card { --rarity: #8b9890; position: relative; display: grid; min-width: 0; border: 1px solid color-mix(in srgb, var(--rarity) 32%, var(--line)); border-radius: 1rem; outline: 0; grid-template-rows: auto auto auto; background: linear-gradient(150deg, color-mix(in srgb, var(--rarity) 5%, rgba(24, 33, 27, .98)), rgba(15, 22, 18, .98)); cursor: pointer; overflow: hidden; transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.exchange-card:hover:not(.unavailable) { border-color: color-mix(in srgb, var(--rarity) 58%, var(--line)); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.exchange-card:focus-visible { border-color: color-mix(in srgb, var(--rarity) 68%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rarity) 18%, transparent), 0 12px 26px rgba(0, 0, 0, .18); }
.exchange-card.rarity-uncommon { --rarity: #76b852; }
.exchange-card.rarity-rare { --rarity: #5d9cec; }
.exchange-card.rarity-epic { --rarity: #a78bfa; }
.exchange-card.rarity-legendary { --rarity: #e2a83c; }
.exchange-card.unavailable { cursor: not-allowed; filter: saturate(.55); }
.exchange-card-portrait { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid rgba(214, 228, 217, .08); overflow: hidden; }
.exchange-card-portrait .dino-portrait { min-height: 0; }
.exchange-rarity { display: inline-flex; min-height: 1.45rem; padding: .25rem .5rem; border: 1px solid color-mix(in srgb, var(--rarity, #8b9890) 44%, transparent); border-radius: 999px; align-items: center; color: color-mix(in srgb, var(--rarity, #8b9890) 82%, white); background: color-mix(in srgb, var(--rarity, #8b9890) 13%, rgba(8, 13, 10, .88)); font-size: .6rem; font-weight: 900; letter-spacing: .05em; }
.exchange-card-portrait > .exchange-rarity { position: absolute; z-index: 2; top: .7rem; right: .7rem; --rarity: inherit; }
.exchange-rarity.inline { --rarity: #8b9890; }
.exchange-rarity.inline.rarity-uncommon { --rarity: #76b852; }
.exchange-rarity.inline.rarity-rare { --rarity: #5d9cec; }
.exchange-rarity.inline.rarity-epic { --rarity: #a78bfa; }
.exchange-rarity.inline.rarity-legendary { --rarity: #e2a83c; }
.exchange-card-copy { min-height: 5.25rem; padding: 1rem 1.05rem .75rem; }
.exchange-card-copy h2 { margin: 0; font-size: 1.08rem; }
.exchange-card-copy code { display: block; width: fit-content; margin-top: .3rem; padding: 0; border: 0; color: #718078; background: transparent; font-size: .62rem; }
.exchange-unavailable { display: flex; margin: .65rem 0 0; align-items: flex-start; gap: .4rem; color: #b38a84; font-size: .65rem; line-height: 1.45; }
.exchange-unavailable svg { flex: 0 0 auto; width: .85rem; margin-top: .05rem; }
.exchange-card-options { display: grid; padding: 0 .8rem .8rem; grid-template-columns: 1fr 1fr; gap: .5rem; }
.exchange-card-variant { display: grid; min-width: 0; min-height: 3.65rem; padding: .62rem .7rem; border: 1px solid rgba(214, 228, 217, .1); border-radius: .72rem; align-content: space-between; gap: .35rem; color: #d7dfd9; background: rgba(5, 9, 7, .27); }
.exchange-card-variant strong { color: #b8c3bb; font-family: 'Barlow Condensed', sans-serif; font-size: .92rem; letter-spacing: .04em; }
.exchange-card-variant.prime strong { color: #c4b5fd; }
.exchange-card-variant b { display: flex; min-width: 0; align-items: center; gap: .3rem; color: #d8d0f4; font-size: .64rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.exchange-card-variant b svg { flex: 0 0 auto; width: .8rem; color: #a78bfa; }
.exchange-confirmation { margin-top: .8rem; }
.exchange-product-summary { display: flex; min-width: 0; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 1rem; }
.exchange-product-summary > div { min-width: 0; }
.exchange-product-summary h3 { margin: 0; color: #e2e9e3; font-size: 1rem; }
.exchange-product-summary code { display: block; margin-top: .2rem; padding: 0; border: 0; color: #718078; background: transparent; font-size: .62rem; overflow-wrap: anywhere; }
.vault-respec-note { display: flex; margin: .85rem 0 0; padding: .75rem .8rem; border: 1px solid rgba(180, 228, 59, .16); border-radius: .72rem; align-items: flex-start; gap: .55rem; color: #9dad82; background: rgba(180, 228, 59, .04); font-size: .68rem; line-height: 1.55; }
.vault-respec-note svg { flex: 0 0 auto; width: .9rem; height: .9rem; margin-top: .08rem; color: var(--green); }
.exchange-dialog-variants { display: grid; margin-top: .8rem; grid-template-columns: 1fr 1fr; gap: .65rem; }
.exchange-dialog-variant { display: flex; min-width: 0; min-height: 3.4rem; padding: .7rem .85rem; border: 1px solid rgba(214, 228, 217, .12); border-radius: .75rem; outline: 0; align-items: center; justify-content: space-between; gap: .7rem; color: #b8c3bb; background: rgba(5, 9, 7, .27); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.exchange-dialog-variant:hover { border-color: rgba(180, 228, 59, .35); background: rgba(180, 228, 59, .055); }
.exchange-dialog-variant.prime:hover { border-color: rgba(167, 139, 250, .42); background: rgba(139, 92, 246, .07); }
.exchange-dialog-variant:focus-visible { box-shadow: 0 0 0 3px rgba(180, 228, 59, .08); }
.exchange-dialog-variant.active { border-color: rgba(180, 228, 59, .48); background: rgba(180, 228, 59, .085); }
.exchange-dialog-variant.prime.active { border-color: rgba(167, 139, 250, .52); background: rgba(139, 92, 246, .11); }
.exchange-dialog-variant strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: .04em; }
.exchange-dialog-variant.prime strong { color: #c4b5fd; }
.exchange-dialog-variant span { display: flex; min-width: 0; align-items: center; justify-content: end; gap: .35rem; color: #ded5ff; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.exchange-dialog-variant span svg { flex: 0 0 auto; width: .85rem; color: #a78bfa; }
.exchange-dialog { width: min(calc(100% - 2rem), 46rem); max-height: min(90vh, 52rem); overflow: auto; }
.exchange-dialog form { padding-top: 1.35rem; }
.exchange-skill-section { margin-top: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.exchange-skill-heading h3 { margin: 0; color: #dfe7e1; font-size: .86rem; }
.exchange-skill-heading p { max-width: 68ch; margin: .35rem 0 0; color: #89968d; font-size: .68rem; line-height: 1.55; }
.exchange-skill-groups { display: grid; margin-top: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.exchange-skill-group { display: grid; min-width: 0; margin: 0; padding: .85rem; border: 1px solid rgba(214, 228, 217, .1); border-radius: .75rem; gap: .65rem; background: rgba(6, 10, 8, .2); }
.exchange-skill-group legend { display: flex; width: 100%; padding: 0 .1rem; align-items: center; justify-content: space-between; gap: .75rem; }
.exchange-skill-group legend strong { color: #c8d2cb; font-size: .72rem; }
.exchange-skill-group legend span { color: #8f7bc4; font-size: .62rem; font-variant-numeric: tabular-nums; }
.exchange-skill-field { display: grid; min-width: 0; gap: .3rem; }
.exchange-skill-field > span { color: #7e8b82; font-size: .62rem; }
.exchange-skill-field select { width: 100%; min-width: 0; min-height: 2.7rem; padding: 0 2rem 0 .7rem; border: 1px solid var(--line); border-radius: .62rem; outline: 0; color: #dce4de; background: #111813; font-size: .7rem; text-overflow: ellipsis; }
.exchange-skill-field select:focus-visible { border-color: rgba(167, 139, 250, .55); box-shadow: 0 3px 14px rgba(0, 0, 0, .2); }
.exchange-skill-field select:invalid { color: #748078; }
.exchange-skill-preview { display: flex; min-width: 0; min-height: 4.4rem; padding: .72rem .1rem .05rem; border-top: 1px solid rgba(214, 228, 217, .09); align-items: flex-start; gap: .58rem; }
.exchange-skill-preview > svg { flex: 0 0 auto; width: .9rem; height: .9rem; margin-top: .08rem; color: #a78bfa; }
.exchange-skill-preview > div { display: grid; min-width: 0; gap: .22rem; }
.exchange-skill-preview strong { color: #d8d0f4; font-size: .7rem; }
.exchange-skill-preview span { color: #909c94; font-size: .65rem; line-height: 1.5; overflow-wrap: anywhere; }
.exchange-confirm-warning { display: flex; margin-top: .8rem; padding: .8rem; border: 1px solid rgba(180, 228, 59, .16); border-radius: .7rem; align-items: flex-start; gap: .55rem; color: #91a278; background: rgba(180, 228, 59, .04); font-size: .67rem; line-height: 1.5; }
.exchange-confirm-warning svg { flex: 0 0 auto; width: .9rem; margin-top: .05rem; color: var(--green); }
.market-page-heading { margin-bottom: 1.2rem; align-items: center; }
.market-balance { display: grid; min-width: 12rem; padding: .9rem 1rem; border: 1px solid rgba(228, 173, 71, .18); border-radius: .8rem; gap: .2rem; background: rgba(228, 173, 71, .055); }
.market-balance > span, .market-balance small { color: #9a8c70; font-size: .68rem; }
.market-balance strong { display: flex; align-items: center; gap: .5rem; color: #f0d08b; font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1; }
.market-balance strong svg { width: 1.15rem; color: var(--amber); }
.market-rule { display: flex; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(98, 183, 214, .18); border-radius: .85rem; align-items: flex-start; gap: .75rem; background: rgba(98, 183, 214, .04); }
.market-rule > svg { flex: 0 0 auto; width: 1.05rem; margin-top: .1rem; color: var(--blue); }
.market-rule div { display: grid; gap: .25rem; }
.market-rule strong { color: #b9dbe8; font-size: .78rem; }
.market-rule span { max-width: 72ch; color: #839ba3; font-size: .71rem; line-height: 1.55; }
.market-toolbar { display: grid; margin-bottom: .8rem; grid-template-columns: minmax(15rem, 1fr) auto auto; align-items: center; gap: .65rem; }
.market-search { display: flex; min-height: 2.8rem; border: 1px solid var(--line); border-radius: .72rem; align-items: center; background: rgba(7, 11, 8, .36); }
.market-search:focus-within { border-color: rgba(228, 173, 71, .48); box-shadow: 0 3px 14px rgba(0, 0, 0, .18); }
.market-search svg { flex: 0 0 auto; width: 1rem; margin-left: .9rem; color: #837b6b; }
.market-search input { width: 100%; min-width: 0; padding: 0 .85rem; border: 0; outline: 0; color: var(--text); background: transparent; }
.market-filter { display: flex; padding: .25rem; border: 1px solid var(--line); border-radius: .72rem; gap: .2rem; background: rgba(21, 29, 24, .72); }
.market-filter button { min-height: 2.25rem; padding: .45rem .8rem; border: 0; border-radius: .55rem; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 800; cursor: pointer; }
.market-filter button:hover { color: var(--text); }
.market-filter button.active { color: #211b0e; background: var(--amber); }
.market-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.market-state { display: flex; min-height: 16rem; padding: 2rem; border: 1px dashed var(--line); border-radius: 1rem; grid-column: 1 / -1; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); text-align: center; }
.market-state > svg { width: 1.2rem; color: var(--amber); }
.market-state.error { color: #d89088; }
.market-state.error > svg { color: var(--danger); }
.market-card { position: relative; display: flex; min-width: 0; padding: 0 1.1rem 1rem; border: 1px solid var(--line); border-radius: 1rem; flex-direction: column; background: linear-gradient(150deg, rgba(29, 35, 29, .98), rgba(15, 22, 18, .98)); overflow: hidden; }
.market-card.status-sold, .market-card.status-cancelled { opacity: .68; }
.market-card-portrait { position: relative; aspect-ratio: 16 / 9; height: auto; margin: 0 -1.1rem .9rem; border-bottom: 1px solid rgba(214, 228, 217, .08); overflow: hidden; }
.market-card-portrait .dino-portrait { min-height: 0; }
.market-status { position: absolute; z-index: 2; top: .7rem; right: .7rem; padding: .3rem .55rem; border-radius: 999px; color: #f0d08b; background: rgba(19, 16, 9, .82); font-size: .62rem; font-weight: 900; }
.market-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.market-card-heading > div { min-width: 0; }
.market-card-heading h2 { margin: 0; font-size: 1.08rem; }
.market-card-heading span { display: block; margin-top: .28rem; color: #7e8b82; font-size: .65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-card-heading > strong { display: flex; flex: 0 0 auto; align-items: center; gap: .35rem; color: #f0d08b; font-family: 'Barlow Condensed', sans-serif; font-size: 1.28rem; font-variant-numeric: tabular-nums; }
.market-card-heading > strong svg { width: .95rem; color: var(--amber); }
.market-meta { display: grid; margin: 1rem 0 .7rem; grid-template-columns: 1fr 1fr; gap: .65rem; }
.market-meta span { display: grid; gap: .18rem; color: var(--muted); font-size: .65rem; }
.market-meta strong { color: #dce4de; font-size: .73rem; }
.market-card .vault-details { margin-top: auto; }
.market-card > .button { margin-top: .25rem; }
.dinosaur-image-attribution { display: flex; margin: 1rem 0 0; align-items: center; justify-content: center; gap: .35rem; color: #748178; font-size: .62rem; line-height: 1.5; text-align: center; }
.dinosaur-image-attribution svg { flex: 0 0 auto; width: .78rem; height: .78rem; }
.dinosaur-image-attribution a { color: #9fad9f; text-decoration-color: rgba(159, 173, 159, .4); text-underline-offset: .16rem; }
.dinosaur-image-attribution a:hover { color: #c7d2c9; }
.market-cancel-button { color: #d2b87f; }
.market-price-field { display: grid; margin-top: 1rem; gap: .45rem; color: #aeb9b1; font-size: .72rem; font-weight: 800; }
.market-price-field input { width: 100%; height: 3rem; padding: 0 .85rem; border: 1px solid var(--line); border-radius: .7rem; outline: 0; color: var(--text); background: rgba(0, 0, 0, .18); font: inherit; font-variant-numeric: tabular-nums; }
.market-price-field input:focus { border-color: rgba(228, 173, 71, .5); box-shadow: 0 3px 14px rgba(0, 0, 0, .18); }
.market-purchase-summary { margin-top: 1rem; }
.market-purchase-summary dl { display: grid; margin: 0; }
.market-purchase-summary dl > div { display: flex; min-height: 2.6rem; padding: .55rem 0; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 1rem; }
.market-purchase-summary dt { color: #7e8b82; font-size: .7rem; }
.market-purchase-summary dd { margin: 0; color: #e2e9e3; font-size: .76rem; font-weight: 800; text-align: right; }
.market-purchase-warning { display: flex; margin-top: .8rem; padding: .8rem; border: 1px solid rgba(98, 183, 214, .16); border-radius: .7rem; align-items: flex-start; gap: .55rem; color: #8ca8b2; background: rgba(98, 183, 214, .035); font-size: .67rem; line-height: 1.5; }
.market-purchase-warning svg { flex: 0 0 auto; width: .9rem; margin-top: .05rem; color: var(--blue); }
.growth-dialog-icon { color: #b4e43b; background: rgba(180, 228, 59, .09); }
.growth-charge-summary { display: grid; margin: .9rem 0 0; }
.growth-charge-summary > div { display: flex; min-width: 0; min-height: 2.55rem; padding: .55rem 0; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 1rem; }
.growth-charge-summary dt { color: #839087; font-size: .7rem; }
.growth-charge-summary dd { margin: 0; color: #e3eae4; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.growth-charge-summary > div:first-child dd { color: #cde991; }
.growth-charge-warning { display: flex; margin-top: .85rem; padding: .8rem; border: 1px solid rgba(180, 228, 59, .16); border-radius: .7rem; align-items: flex-start; gap: .55rem; color: #9aa88e; background: rgba(180, 228, 59, .035); font-size: .67rem; line-height: 1.5; }
.growth-charge-warning svg { flex: 0 0 auto; width: .9rem; margin-top: .05rem; color: var(--green); }
.market-dialog-icon { color: var(--amber); background: rgba(228, 173, 71, .09); }
.spinner { width: 1.2rem; height: 1.2rem; border: 2px solid rgba(255,255,255,.1); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { padding: 4rem 1rem; border: 1px dashed var(--line); border-radius: 1rem; text-align: center; }
.empty-state > span { display: grid; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 1rem; place-items: center; color: var(--green); background: rgba(180,228,59,.06); }
.empty-state h2 { margin: 0; font-size: 1.15rem; }
.empty-state p { margin: .55rem 0 1.3rem; color: var(--muted); font-size: .78rem; }
dialog { width: min(calc(100% - 2rem), 28rem); padding: 0; border: 1px solid rgba(214,228,217,.16); border-radius: 1.15rem; color: var(--text); background: #171f1a; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(4,7,5,.75); backdrop-filter: blur(5px); }
dialog form { padding: 1.8rem; }
.dialog-icon { display: grid; width: 2.8rem; height: 2.8rem; margin-bottom: 1.1rem; border-radius: .8rem; place-items: center; color: var(--green); background: rgba(180,228,59,.08); }
.dialog-icon.amber { color: var(--amber); background: rgba(228,173,71,.08); }
.dialog-icon.danger { color: var(--danger); background: rgba(241, 123, 110, .09); }
.dialog-icon svg { width: 1.2rem; }
dialog h2 { margin: 0; }
dialog form > p:not(.form-error) { margin: .65rem 0 1.3rem; color: var(--muted); font-size: .78rem; line-height: 1.6; }
dialog input[type="text"] { height: 3rem; margin: .45rem 0 .7rem; border: 1px solid var(--line); border-radius: .7rem; outline: 0; color: var(--text); background: rgba(0,0,0,.18); }
dialog input[type="text"]:focus { border-color: rgba(180,228,59,.45); }
.vault-details-dialog { width: min(calc(100% - 2rem), 46rem); max-height: min(48rem, calc(100dvh - 2rem)); }
.vault-details-dialog form { display: grid; max-height: min(48rem, calc(100dvh - 2rem)); padding: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.vault-details-dialog-header { display: flex; padding: 1.35rem 1.45rem 1rem; border-bottom: 1px solid rgba(214, 228, 217, .09); align-items: start; justify-content: space-between; gap: 1rem; }
.vault-details-dialog-header > div { display: grid; min-width: 0; gap: .3rem; }
.vault-details-dialog-header h2 { font-size: 1.2rem; }
.vault-details-dialog-header p { margin: 0; color: var(--muted); font-size: .72rem; }
.vault-details-dialog-close { display: grid; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: .75rem; place-items: center; color: var(--muted); background: rgba(214, 228, 217, .06); cursor: pointer; }
.vault-details-dialog-close:hover { color: var(--text); background: rgba(214, 228, 217, .1); }
.vault-details-dialog-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.vault-details-dialog-close svg { width: 1rem; }
.vault-details-dialog-body { display: grid; min-height: 0; padding: 1.25rem 1.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 1.25rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
.vault-details-dialog-actions { display: flex; padding: 1rem 1.45rem 1.25rem; border-top: 1px solid rgba(214, 228, 217, .09); justify-content: end; }
.deposit-countdown { display: grid; min-height: 10.25rem; margin-top: .8rem; padding: 1rem; border: 1px solid rgba(180, 228, 59, .14); border-radius: .8rem; align-content: center; gap: .65rem; background: rgba(180, 228, 59, .035); }
.deposit-countdown[hidden] { display: none; }
.deposit-countdown-label { color: #a6b0a9; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.deposit-countdown strong { display: flex; align-items: baseline; gap: .4rem; color: var(--green); font-family: 'Barlow Condensed', sans-serif; font-size: 3.6rem; font-variant-numeric: tabular-nums; line-height: 1; }
.deposit-countdown strong small { color: #87948b; font-family: sans-serif; font-size: .7rem; font-weight: 700; }
.deposit-countdown-track { display: block; height: .32rem; border-radius: 2rem; background: rgba(214, 228, 217, .08); overflow: hidden; }
.deposit-countdown-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .18s linear; }
.deposit-countdown p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.checkbox-line { display: flex; padding: 1rem; border: 1px solid rgba(241,123,110,.16); border-radius: .75rem; align-items: start; gap: .7rem; background: rgba(241,123,110,.035); cursor: pointer; }
.checkbox-line input { margin-top: .2rem; accent-color: var(--danger); }
.checkbox-line > span { display: grid; gap: .25rem; }
.checkbox-line small { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.dialog-actions { display: flex; margin-top: 1.2rem; justify-content: end; gap: .7rem; }
.toast-region { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; display: grid; gap: .6rem; }
.toast { display: flex; width: min(23rem, calc(100vw - 2rem)); padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .75rem; align-items: center; gap: .7rem; color: #dce4de; background: #1b251e; box-shadow: 0 15px 40px rgba(0,0,0,.35); font-size: .78rem; animation: toast-in .2s ease both; }
.toast.success { border-color: rgba(180,228,59,.2); }
.toast.error { border-color: rgba(241,123,110,.25); }
.toast svg { flex: 0 0 auto; width: 1rem; color: var(--green); }
.toast.error svg { color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1480px) {
  .portal-topbar-inner { padding: .75rem 0 .5rem; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; }
  .nav-link { flex: 0 1 auto; }
}
@media (max-width: 850px) {
  .portal-topbar-inner { padding: .75rem 0 .45rem; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: stretch; overflow: hidden; }
  .nav-link { min-width: 0; flex: 1 1 0; justify-content: center; padding-right: .55rem; padding-left: .55rem; }
  .nav-link .nav-count { margin-left: 0; }
  .stat-grid, .vault-grid { grid-template-columns: 1fr 1fr; }
  .sponsor-heading { grid-template-columns: 1fr; }
  .sponsor-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exchange-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .current-character:has(.current-character-copy) { grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1.2fr); }
  .home-grid { grid-template-columns: 1fr; }
  .task-item { grid-template-columns: auto minmax(0, 1fr); }
  .task-item-reward { grid-column: 2; padding: .8rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .map-shell { height: auto; grid-template-columns: 1fr; }
  .map-panel { order: 2; border-top: 1px solid rgba(214, 228, 217, .1); border-right: 0; }
  .map-viewport { min-height: 62vh; }
  .map-category-list { grid-template-columns: 1fr; }
  .friend-add-panel { grid-template-columns: 1fr; }
  .friend-add-panel > .form-error { grid-column: 1; }
}

@media (max-width: 720px) {
  .main-nav { justify-content: stretch; }
  .nav-link { position: relative; min-height: 3rem; padding: .65rem; flex: 1 1 0; justify-content: center; gap: 0; }
  .nav-link svg { display: block; width: 1.15rem; height: 1.15rem; }
  .nav-link .nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; white-space: nowrap; clip-path: inset(50%); overflow: hidden; }
  .nav-link .nav-count { position: absolute; top: .28rem; left: calc(50% + .45rem); min-width: .95rem; height: .95rem; padding: 0 .22rem; margin-left: 0; font-size: .52rem; }
}
@media (min-width: 581px) {
  .vault-details[open] .vault-details-body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
}

@media (max-width: 580px) {
  .login-screen { padding: 1rem; }
  .login-card { padding: 1.5rem; }
  .topbar-brand { display: none; }
  .content { width: min(100% - 1.2rem, 1180px); padding-top: 1.5rem; }
  .hero-panel, .page-heading { align-items: start; flex-direction: column; }
  .hero-panel { min-height: 15rem; }
  .stat-grid, .vault-grid { grid-template-columns: 1fr; }
  .sponsor-packages { grid-template-columns: 1fr; }
  .sponsor-package { min-height: auto; }
  .current-character:has(.current-character-copy) { grid-template-columns: 1fr; }
  .current-character-portrait { min-height: 12rem; border-right: 0; border-bottom: 1px solid rgba(214, 228, 217, .08); }
  .current-character-copy .vault-meta { grid-template-columns: repeat(3, 1fr); }
  .current-character-deposit { width: 100%; }
  .live-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 7.3rem; }
  .page-heading .button { width: 100%; }
  .exchange-page-heading { align-items: stretch; }
  .exchange-balance { width: 100%; }
  .market-page-heading { align-items: stretch; }
  .market-balance { width: 100%; }
  .exchange-legend { grid-template-columns: 1fr; }
  .exchange-legend > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .exchange-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .exchange-search { grid-column: 1 / -1; }
  .exchange-catalog { grid-template-columns: 1fr; }
  .market-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .market-search { grid-column: 1 / -1; }
  .market-filter { min-width: 0; }
  .market-filter button { min-width: 0; padding-right: .55rem; padding-left: .55rem; }
  .market-list { grid-template-columns: 1fr; }
  .vault-card-actions { grid-template-columns: 1fr; }
  .exchange-dialog .dialog-actions .button { font-size: .72rem; white-space: nowrap; }
  .exchange-dialog { width: min(calc(100% - 1rem), 46rem); max-height: calc(100vh - 1rem); }
  .exchange-dialog form { padding: 1.15rem; }
  .exchange-skill-groups { grid-template-columns: 1fr; gap: .8rem; }
  .exchange-skill-field select { min-height: 3rem; font-size: 1rem; }
  .task-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .task-filter button { min-width: 0; padding-right: .35rem; padding-left: .35rem; }
  .task-item { padding: 1rem; grid-template-columns: 1fr; }
  .task-item-icon { width: 2.5rem; height: 2.5rem; }
  .task-item-heading { gap: .6rem; }
  .task-item-reward { grid-column: 1; }
  .leaderboard-type-switcher button { padding-right: .55rem; padding-left: .55rem; }
  .leaderboard-toolbar { align-items: stretch; flex-direction: column; }
  .period-switcher { width: 100%; }
  #leaderboard-range { padding: .15rem .35rem .35rem; }
  .leaderboard-columns, .leaderboard-row { grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem 4.5rem; }
  .leaderboard-columns, .leaderboard-row { padding-right: .85rem; padding-left: .85rem; }
  .friend-add-form { grid-template-columns: 1fr; }
  .friend-add-form .button { width: 100%; }
  .friend-card, .friend-request-card { grid-template-columns: auto minmax(0, 1fr); }
  .friend-card-actions, .friend-request-actions { grid-column: 2; justify-content: start; }
  .friend-teleport-hint { margin-right: auto; }
  .map-heading { gap: .8rem; }
  .map-heading-meta { justify-items: start; }
  .map-shell { border-radius: .85rem; }
  .map-panel { padding: .85rem; }
  .map-viewport { min-height: 58vh; }
  .map-category-list { grid-template-columns: 1fr; }
  .map-coordinate-readout { right: .75rem; bottom: 8.8rem; max-width: calc(100% - 1.5rem); }
  .map-zoom-controls { right: .75rem; bottom: .75rem; }
  .vault-notice { align-items: start; }
  .vault-details-dialog-body { grid-template-columns: 1fr; }
  .vault-details-dialog-actions .button { width: 100%; }
  .dialog-actions .button { flex: 1; }
  .nav-link { position: relative; min-height: 3rem; padding: .65rem; gap: 0; }
  .nav-link svg { display: block; width: 1.15rem; height: 1.15rem; }
  .nav-link .nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; white-space: nowrap; clip-path: inset(50%); overflow: hidden; }
  .nav-link .nav-count { position: absolute; top: .28rem; left: calc(50% + .45rem); min-width: .95rem; height: .95rem; padding: 0 .22rem; font-size: .52rem; }
  .topbar-balance { min-width: 3.2rem; padding: .34rem .42rem; justify-content: center; }
  .topbar-balance small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; white-space: nowrap; clip-path: inset(50%); overflow: hidden; }
  .topbar-balance strong { font-size: .68rem; }
  .logout-button span, .user-chip { display: none; }
  .logout-button { width: 2.6rem; padding: .6rem; justify-content: center; }
}

@media (max-width: 420px) {
  .topbar-account { gap: .35rem; }
  .language-switcher.compact button { min-width: 1.65rem; }
  .leaderboard-type-switcher button { gap: .35rem; font-size: .74rem; }
}

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