/* Tokens are scoped to the portal wrapper so they never leak into the site
   nav/footer that member_shell.html renders around it. */
.xs-portal {
  --ink: #0b0a0c;
  --ink-deep: #070608;
  --panel: rgba(18, 16, 20, .88);
  --panel-soft: rgba(26, 23, 22, .7);
  --line: rgba(236, 228, 211, .12);
  --line-strong: rgba(236, 228, 211, .26);
  --text: #ece4d3;
  --muted: #a99f8f;
  --teal: #9fd8cf;
  --lime: #e7c98a;
  --cyan: #8cddff;
  --amber: #f0bb68;
  --violet: #c7a7ff;
  --mono: "Share Tech Mono", monospace;
  --display: "Cinzel", Georgia, serif;
  --body: "Rajdhani", "Barlow Condensed", sans-serif;
  position: relative;
  color: var(--text);
  font-family: var(--body);
  background:
    radial-gradient(ellipse 70% 50% at 60% 0%, rgba(255, 255, 255, .04), transparent 65%),
    linear-gradient(180deg, rgba(7, 6, 8, .82), rgba(7, 6, 8, .96)),
    url("/static/img/xsoulone/brand/stone-slab.jpg") center / 640px,
    #070608;
  overflow-x: hidden;
}
.xs-portal *, .xs-portal *::before, .xs-portal *::after { box-sizing: border-box; }
.xs-portal a { color: inherit; text-decoration: none; }
.xs-portal button, .xs-portal select { font: inherit; }
.xs-portal ::selection { background: var(--lime); color: var(--ink); }
body.xsoulone-dashboard { background: #070608; }

.dashboard-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmosphere-horizon { position: absolute; width: 100%; height: 34vh; bottom: 0; background: linear-gradient(180deg, transparent, rgba(14, 12, 15, .13)); clip-path: polygon(0 72%, 8% 63%, 14% 67%, 23% 48%, 31% 64%, 38% 52%, 45% 70%, 53% 40%, 58% 63%, 68% 50%, 76% 68%, 83% 44%, 91% 59%, 100% 38%, 100% 100%, 0 100%); }
.atmosphere-grid { position: absolute; inset: 55% -20% -25%; opacity: .16; transform: perspective(420px) rotateX(58deg); background-image: linear-gradient(rgba(236, 228, 211, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 228, 211, .4) 1px, transparent 1px); background-size: 54px 32px; }
.atmosphere-scan { position: absolute; inset: -100% 0; opacity: .07; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.18) 6px); animation: scan 16s linear infinite; }
@keyframes scan { to { transform: translateY(50%); } }

.account-bar { position: relative; z-index: 4; min-height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(14, 12, 15, .88); box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.account-brand { display: flex; align-items: center; gap: 11px; min-width: 224px; }
.brand-glyph { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--teal); color: var(--ink); background: var(--teal); font: 800 .7rem var(--display); letter-spacing: -.08em; clip-path: polygon(0 0, 84% 0, 100% 17%, 100% 100%, 16% 100%, 0 84%); }
.account-brand b, .account-brand small { display: block; }
.account-brand b { color: var(--text); font: 700 .78rem var(--display); letter-spacing: .14em; }
.account-brand small { margin-top: 4px; color: var(--muted); font: .58rem var(--mono); letter-spacing: .1em; }
.account-status { color: var(--muted); font: .61rem var(--mono); letter-spacing: .12em; }
.account-status i, .online-dot, .live-tag i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px rgba(231, 201, 138,.75); }
.account-status span { color: var(--line-strong); padding: 0 8px; }
.account-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; color: var(--muted); font: .61rem var(--mono); letter-spacing: .13em; }
.account-actions a:first-child { padding-right: 18px; border-right: 1px solid var(--line); }
.account-actions a:hover, .account-actions a:focus-visible { color: var(--lime); }
.avatar-link { display: flex; align-items: center; gap: 9px; }
.avatar-link span, .player-avatar { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink); background: var(--lime); font: 700 .58rem var(--display); clip-path: polygon(13% 0, 87% 0, 100% 13%, 100% 87%, 87% 100%, 13% 100%, 0 87%, 0 13%); }

.dashboard-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 140px); }
.side-rail { display: flex; flex-direction: column; padding: 26px 16px 18px; border-right: 1px solid var(--line); background: rgba(14, 12, 15, .72); }
.rail-player { display: flex; align-items: center; gap: 9px; padding: 0 6px 24px; border-bottom: 1px solid var(--line); }
.rail-player strong, .rail-player small { display: block; }
.rail-player strong { color: var(--text); font: 700 .69rem var(--display); letter-spacing: .06em; }
.rail-player small { margin-top: 5px; color: var(--teal); font: .57rem var(--mono); letter-spacing: .08em; }
.player-pulse { align-self: flex-start; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--lime); }
.rail-nav { padding-top: 24px; }
.rail-label, .surface-code, .eyebrow, .hero-kicker, .session-readout span { margin: 0; color: var(--teal); font: .58rem var(--mono); letter-spacing: .15em; }
.rail-label { padding: 0 8px 9px; color: #718b8d; }
.rail-label-space { margin-top: 26px; }
.rail-nav a, .rail-footer a { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 8px; border-left: 2px solid transparent; color: #9bb3b3; font: 600 .7rem var(--body); letter-spacing: .08em; transition: background .2s, color .2s, border .2s; }
.rail-nav a span, .rail-footer a span { width: 15px; color: #719395; font-size: .92rem; text-align: center; }
.rail-nav a b { margin-left: auto; color: var(--amber); font: .58rem var(--mono); }
.rail-nav a em { margin-left: auto; padding: 3px 5px; color: var(--ink); background: var(--lime); font: 700 .48rem var(--mono); font-style: normal; letter-spacing: .08em; }
.rail-nav a:hover, .rail-nav a:focus-visible, .rail-nav a.is-active { border-left-color: var(--lime); color: var(--text); background: linear-gradient(90deg, rgba(236, 228, 211,.14), transparent); outline: none; }
.rail-nav a:hover span, .rail-nav a:focus-visible span, .rail-nav a.is-active span { color: var(--lime); }
.rail-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.rail-footer a { color: #738c8d; font-size: .62rem; }

.dashboard-main { width: min(100%, 1460px); padding: 42px clamp(20px, 4vw, 60px) 28px; margin: 0 auto; }
.mobile-route-bar { display: none; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--lime); }
.eyebrow-mark { width: 7px; height: 7px; border: 1px solid var(--lime); transform: rotate(45deg); }
.page-intro h1 { margin: 12px 0 0; color: var(--text); font: 700 clamp(1.55rem, 3vw, 2.5rem) var(--display); letter-spacing: -.03em; }
.intro-copy { max-width: 600px; margin: 10px 0 0; color: var(--muted); font: 500 1rem/1.3 var(--body); }
.session-readout { display: grid; grid-template-columns: auto auto; gap: 4px 12px; min-width: 185px; padding: 11px 14px; border: 1px solid var(--line); border-right: 2px solid var(--teal); background: rgba(14, 12, 15, .62); }
.session-readout strong { color: var(--lime); font: .64rem var(--mono); text-align: right; }
.session-readout small { grid-column: 1 / -1; color: #71898a; font: .53rem var(--mono); letter-spacing: .12em; }

.player-hero { position: relative; min-height: 286px; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr); overflow: hidden; border: 1px solid var(--line-strong); background: linear-gradient(112deg, rgba(14, 12, 15, .8), rgba(14, 12, 15, .9) 59%, rgba(14, 12, 15, .9)); }
.player-hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(236, 228, 211,.16) 19px, transparent 20px 38px); }
.hero-copy { position: relative; z-index: 1; align-self: center; padding: 34px 40px 58px; }
.hero-kicker { color: var(--teal); }
.hero-copy h2 { margin: 12px 0; color: var(--text); font: 700 clamp(1.65rem, 3.5vw, 3.2rem)/.98 var(--display); letter-spacing: -.07em; }
.hero-copy h2 em { color: var(--lime); font-style: normal; }
.hero-copy > p:not(.hero-kicker) { max-width: 310px; color: #acc3c0; font: 500 1rem/1.3 var(--body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.button { display: inline-flex; align-items: center; gap: 14px; min-height: 38px; padding: 0 15px; border: 1px solid var(--line-strong); font: .6rem var(--mono); letter-spacing: .11em; transition: background .2s, color .2s, border .2s, transform .2s; }
.button:hover, .button:focus-visible { transform: translateY(-2px); outline: none; }
.button-primary { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.button-primary:hover, .button-primary:focus-visible { background: var(--teal); border-color: var(--teal); }
.button-quiet { color: var(--text); background: rgba(255,255,255,.03); }
.button-quiet:hover, .button-quiet:focus-visible { color: var(--lime); border-color: var(--lime); }
.hero-visual { position: relative; min-height: 252px; overflow: hidden; border-left: 1px solid rgba(236, 228, 211,.12); }
.hero-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 47%, rgba(236, 228, 211,.18), transparent 28%), radial-gradient(circle at 50% 47%, transparent 0 35%, rgba(236, 228, 211,.08) 36%, transparent 37%); }
.hero-orbit { position: absolute; left: 50%; top: 50%; width: 224px; height: 106px; border: 1px solid rgba(236, 228, 211,.35); transform: translate(-50%, -50%) rotate(-24deg); }
.orbit-b { width: 295px; height: 142px; border-color: rgba(231, 201, 138,.17); transform: translate(-50%, -50%) rotate(42deg); }
.hero-level { position: absolute; left: 50%; top: 49%; display: grid; place-items: center; transform: translate(-50%, -50%); }
.hero-level small, .hero-level span { color: var(--muted); font: .54rem var(--mono); letter-spacing: .19em; }
.hero-level strong { color: var(--lime); font: 800 clamp(3.6rem, 7vw, 6rem) var(--display); line-height: .95; text-shadow: 0 0 27px rgba(231, 201, 138,.23); }
.hero-level span { color: var(--teal); margin-top: 5px; }
.hero-route { position: absolute; height: 1px; width: 155px; left: 12%; top: 67%; background: linear-gradient(90deg, transparent, var(--teal)); transform: rotate(-17deg); transform-origin: right; }
.route-b { left: auto; right: 8%; top: 32%; width: 120px; background: linear-gradient(90deg, var(--amber), transparent); transform: rotate(26deg); }
.hero-node { position: absolute; width: 5px; height: 5px; border: 1px solid var(--lime); border-radius: 50%; background: var(--ink); box-shadow: 0 0 12px var(--lime); }
.node-1 { left: 18%; top: 61%; }.node-2 { right: 15%; top: 38%; border-color: var(--amber); box-shadow: 0 0 12px var(--amber); }.node-3 { left: 75%; bottom: 17%; }
.hero-coordinate { position: absolute; color: #6f9291; font: .5rem var(--mono); letter-spacing: .08em; }.coordinate-1 { left: 16px; bottom: 22px; }.coordinate-2 { right: 16px; top: 17px; color: var(--amber); }
.xp-band { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 14px; }
.xp-label, .xp-meta { display: flex; justify-content: space-between; color: var(--muted); font: .56rem var(--mono); letter-spacing: .08em; }.xp-label strong { color: var(--lime); }.xp-label i { color: var(--muted); font-style: normal; }.xp-track { height: 5px; margin: 7px 0 6px; background: rgba(0,0,0,.36); }.xp-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--lime)); box-shadow: 0 0 12px rgba(231, 201, 138,.4); }.xp-meta { color: #769292; font-size: .5rem; }.xp-meta b { color: var(--lime); font-size: .78rem; }

.wallet-strip { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: center; margin-top: 13px; border: 1px solid var(--line); background: rgba(14, 12, 15, .78); }
.wallet-item { display: flex; align-items: center; gap: 12px; min-height: 77px; padding: 13px 18px; }.wallet-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); color: var(--lime); font: 1.1rem var(--display); }.wallet-icon.shards { color: var(--violet); }.wallet-icon.signal { color: var(--teal); }.wallet-item small, .wallet-item strong { display: block; }.wallet-item small { color: var(--muted); font: .53rem var(--mono); letter-spacing: .1em; }.wallet-item strong { margin-top: 4px; color: var(--text); font: 700 1.35rem var(--display); }.wallet-item a { margin-left: auto; color: var(--teal); font: .53rem var(--mono); letter-spacing: .1em; }.wallet-item a:hover, .wallet-item a:focus-visible { color: var(--lime); }.wallet-divider { height: 34px; background: var(--line); }.wallet-note strong { color: var(--lime); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(320px, .86fr); gap: 13px; margin-top: 13px; }
.surface-panel { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(14, 12, 15, .91), rgba(14, 12, 15, .91)); box-shadow: 0 18px 40px rgba(0,0,0,.13); }
.surface-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px 15px; border-bottom: 1px solid var(--line); }.surface-head h2 { margin: 7px 0 0; color: var(--text); font: 700 .98rem var(--display); letter-spacing: .04em; }.surface-head > a, .surface-head > span { color: var(--teal); font: .55rem var(--mono); letter-spacing: .1em; }.surface-head a:hover, .surface-head a:focus-visible { color: var(--lime); }.surface-head a span { padding-left: 6px; }.live-tag { color: var(--lime) !important; }.live-tag i { width: 5px; height: 5px; margin-right: 5px; }
.quests-panel, .stats-panel { min-height: 333px; }
.quest-row, .stat-row, .activity-row { display: flex; align-items: center; gap: 13px; min-height: 65px; padding: 10px 20px; border-bottom: 1px solid rgba(236, 228, 211,.1); transition: background .2s; }.quest-row:hover, .quest-row:focus-visible, .stat-row:hover, .stat-row:focus-visible, .activity-row:hover, .activity-row:focus-visible { background: rgba(236, 228, 211,.07); outline: none; }.quest-glyph { color: #6e898a; font: .58rem var(--mono); }.quest-info, .stat-info, .activity-row > span:nth-child(2) { min-width: 0; flex: 1; }.quest-info strong, .quest-info small, .stat-info strong, .stat-info small, .activity-row strong, .activity-row small { display: block; }.quest-info strong, .stat-info strong, .activity-row strong { overflow: hidden; color: var(--text); font: 600 .86rem var(--body); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }.quest-info small, .stat-info small, .activity-row small { margin-top: 3px; color: var(--muted); font: .53rem var(--mono); letter-spacing: .07em; }.quest-progress { width: 115px; }.quest-progress i { display: block; height: 4px; background: var(--teal); }.quest-progress small { display: block; margin-top: 5px; color: var(--muted); font: .5rem var(--mono); text-align: right; }.quest-reward { min-width: 68px; color: var(--lime); font: .56rem var(--mono); text-align: right; }.row-arrow { color: #6d8888; font-size: .9rem; }.quest-footer, .activity-footer, .holdings-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; color: #779190; font: .51rem var(--mono); letter-spacing: .08em; }.quest-footer a, .activity-footer a { color: var(--teal); }.quest-footer a:hover, .activity-footer a:hover { color: var(--lime); }
.stat-row { min-height: 57px; gap: 10px; }.stat-bar { width: 3px; height: 30px; background: var(--teal); }.stat-bar.tone-green { background: var(--lime); }.stat-bar.tone-amber { background: var(--amber); }.stat-bar.tone-violet { background: var(--violet); }.stat-info strong { font-size: .76rem; }.stat-row > b { min-width: 70px; color: var(--text); font: 700 1.18rem var(--display); text-align: right; }.radar-readout { display: flex; align-items: center; gap: 19px; padding: 13px 20px; border-top: 1px solid var(--line); }.radar-chart { position: relative; width: 80px; height: 48px; border: 1px solid rgba(236, 228, 211,.32); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(236, 228, 211,.04); }.radar-line { position: absolute; left: 50%; top: -10%; width: 1px; height: 120%; background: var(--line-strong); transform: rotate(64deg); }.line-two { transform: rotate(-64deg); }.radar-point { position: absolute; width: 5px; height: 5px; background: var(--lime); box-shadow: 0 0 10px var(--lime); border-radius: 50%; }.point-one { left: 48%; top: 9%; }.point-two { left: 72%; top: 57%; }.point-three { left: 27%; top: 63%; }.radar-readout p { margin: 0; }.radar-readout span, .radar-readout strong, .radar-readout small { display: block; }.radar-readout span, .radar-readout small { color: var(--muted); font: .52rem var(--mono); letter-spacing: .08em; }.radar-readout strong { margin: 5px 0; color: var(--teal); font: .68rem var(--display); }.radar-readout small { color: #6d8787; font-size: .48rem; }
.holdings-panel { grid-column: 1; }.holding-table { padding: 0 20px; }.holding-head, .holding-row { display: grid; grid-template-columns: minmax(0, 1.5fr) .8fr .8fr; gap: 10px; align-items: center; }.holding-head { min-height: 34px; color: #71898b; font: .49rem var(--mono); letter-spacing: .1em; border-bottom: 1px solid var(--line); }.holding-row { min-height: 53px; border-bottom: 1px solid rgba(236, 228, 211,.1); }.holding-row:hover, .holding-row:focus-visible { background: rgba(236, 228, 211,.06); outline: none; }.holding-row b, .holding-row small { display: block; }.holding-row b { overflow: hidden; color: var(--text); font: 600 .75rem var(--body); text-overflow: ellipsis; white-space: nowrap; }.holding-row small { margin-top: 3px; color: var(--muted); font: .49rem var(--mono); }.holding-row .status { color: var(--teal); font: .5rem var(--mono); }.holding-row .status.tone-amber { color: var(--amber); }.holding-row strong { color: var(--lime); font: .56rem var(--mono); text-align: right; }.holdings-footer { border-top: 1px solid var(--line); }.holdings-footer b { color: var(--text); }.positive { color: var(--lime); }.positive small { color: var(--muted); padding-left: 4px; }.activity-panel { grid-column: 2; }.activity-row { min-height: 58px; padding: 9px 20px; }.activity-row time { color: var(--amber); font: .54rem var(--mono); }.activity-footer { min-height: 39px; border-top: 1px solid var(--line); }.companion-state { color: var(--lime); padding-left: 8px; }
.quick-launch { display: flex; align-items: center; gap: 28px; margin-top: 13px; padding: 16px 20px; border: 1px solid var(--line); background: rgba(14, 12, 15, .73); }.launch-links { display: flex; flex-wrap: wrap; gap: 7px; }.launch-links a { display: flex; align-items: baseline; gap: 8px; padding: 6px 9px; border: 1px solid var(--line); color: var(--text); font: .61rem var(--mono); letter-spacing: .08em; }.launch-links a span { color: var(--teal); font-size: .9rem; }.launch-links a small { color: var(--muted); font: .47rem var(--mono); }.launch-links a:hover, .launch-links a:focus-visible { color: var(--ink); background: var(--lime); border-color: var(--lime); outline: none; }.launch-links a:hover span, .launch-links a:focus-visible span { color: var(--ink); }
.dashboard-footer { display: flex; justify-content: space-between; gap: 16px; padding: 25px 2px 0; color: #587172; font: .5rem var(--mono); letter-spacing: .1em; }.dashboard-footer b { color: var(--teal); padding: 0 5px; }

@media (max-width: 1060px) {
  .side-rail { width: 200px; }.dashboard-layout { grid-template-columns: 200px minmax(0, 1fr); }.account-bar { padding: 0 20px; }.account-status { display: none; }.dashboard-main { padding-inline: 28px; }.content-grid { grid-template-columns: 1fr; }.holdings-panel, .activity-panel { grid-column: auto; }
}
@media (max-width: 760px) {
  .account-bar { min-height: 58px; padding: 0 15px; }.account-brand { min-width: auto; }.account-brand b { font-size: .66rem; }.account-brand small, .account-actions a:first-child { display: none; }.account-actions { gap: 0; }.dashboard-layout { display: block; }.side-rail { display: none; }.dashboard-main { padding: 22px 14px 25px; }.mobile-route-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 23px; }.mobile-route-bar span { color: var(--teal); font: .56rem var(--mono); letter-spacing: .13em; }.mobile-route-bar select { min-width: 188px; padding: 9px; border: 1px solid var(--line-strong); color: var(--text); background: var(--panel); font: .59rem var(--mono); }.page-intro { display: block; margin-bottom: 22px; }.page-intro h1 { font-size: 1.6rem; }.intro-copy { font-size: .94rem; }.session-readout { margin-top: 17px; }.player-hero { display: block; min-height: 510px; }.hero-copy { padding: 28px 22px 0; }.hero-copy h2 { font-size: 2.2rem; }.hero-visual { height: 252px; min-height: 0; border: 0; }.xp-band { left: 22px; right: 22px; bottom: 18px; }.xp-label { gap: 10px; font-size: .5rem; }.xp-label strong { white-space: nowrap; }.wallet-strip { display: block; }.wallet-item { min-height: 68px; padding: 10px 14px; }.wallet-divider { width: calc(100% - 28px); height: 1px; margin: 0 14px; }.content-grid { gap: 12px; }.surface-head { padding: 16px 14px 13px; }.quest-row, .stat-row, .activity-row { padding-inline: 14px; gap: 8px; }.quest-progress { width: 70px; }.quest-reward { min-width: 52px; font-size: .48rem; }.holding-table { padding: 0 14px; }.holding-head, .holding-row { grid-template-columns: minmax(0, 1.35fr) .68fr .75fr; gap: 5px; }.holding-row b { font-size: .68rem; }.holding-row .status, .holding-row strong { font-size: .46rem; }.holdings-footer, .activity-footer, .quest-footer { padding-inline: 14px; }.quick-launch { display: block; padding: 14px; }.launch-links { margin-top: 12px; }.launch-links a { flex: 1 1 130px; }.dashboard-footer { display: block; line-height: 1.8; }.dashboard-footer span { display: block; }.dashboard-footer span + span { margin-top: 5px; }
}

/* Route-specific account surfaces: these are portal views, not browser-game screens. */
.account-status b {
  margin-left: 8px;
  color: var(--lime);
  font-size: .52rem;
}

.section-not-dashboard .player-hero,
.section-not-dashboard .wallet-strip,
.section-not-dashboard .content-grid,
.section-not-dashboard .quick-launch {
  display: none;
}

.portal-surface {
  border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(12, 31, 39, .94), rgba(5, 15, 23, .94));
  box-shadow: 0 22px 48px rgba(0, 0, 0, .16);
}

.portal-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px;
  border-bottom: 1px solid var(--line);
}

.portal-surface-head h2 {
  margin: 8px 0 6px;
  color: var(--text);
  font: 700 1.3rem var(--display);
  letter-spacing: .03em;
}

.portal-surface-head p:not(.surface-code) {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font: 500 1rem/1.45 var(--body);
}

.market-wallet {
  min-width: 180px;
  padding: 14px;
  border-left: 2px solid var(--lime);
  background: rgba(236, 228, 211, .06);
}

.market-wallet span, .market-wallet small {
  display: block;
  color: var(--muted);
  font: .54rem var(--mono);
  letter-spacing: .12em;
}

.market-wallet strong {
  display: block;
  margin: 8px 0;
  color: var(--lime);
  font: 700 1.25rem var(--display);
}

.market-wallet small { color: var(--teal); }

.market-grid, .inventory-grid, .record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.market-card, .inventory-card, .record-grid article {
  position: relative;
  min-height: 215px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(14, 12, 15, .7);
}

.market-art, .inventory-art {
  height: 84px;
  margin: -16px -16px 15px;
  background:
    linear-gradient(135deg, rgba(236, 228, 211, .24), transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(231, 201, 138, .12) 11px 12px);
}

.market-card.tone-violet .market-art, .inventory-card.tone-violet .inventory-art { background-color: rgba(199, 167, 255, .12); }
.market-card.tone-amber .market-art, .inventory-card.tone-amber .inventory-art { background-color: rgba(240, 187, 104, .12); }
.market-card.tone-cyan .market-art, .inventory-card.tone-cyan .inventory-art { background-color: rgba(140, 221, 255, .12); }

.market-type, .inventory-card p, .record-grid article > span {
  margin: 0;
  color: var(--teal);
  font: .55rem var(--mono);
  letter-spacing: .1em;
}

.market-card h3, .inventory-card h3, .record-grid h3 {
  margin: 9px 0 16px;
  color: var(--text);
  font: 700 .88rem var(--display);
}

.market-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
}

.market-buy strong {
  color: var(--lime);
  font: .68rem var(--mono);
}

.market-buy button, .inventory-card button {
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font: .5rem var(--mono);
  letter-spacing: .07em;
}

.market-buy .market-buy-button {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--cyan, #48d7ff);
  color: #fff;
  background: rgba(72, 215, 255, .12);
  font: .58rem var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
}
.market-buy .market-buy-button:hover { background: rgba(72, 215, 255, .24); }
.market-buy .market-buy-button:disabled { opacity: .6; cursor: progress; }

.commerce-note {
  display: flex;
  gap: 14px;
  margin: 0 18px 18px;
  padding: 14px;
  border-left: 2px solid var(--amber);
  background: rgba(240, 187, 104, .06);
  color: var(--muted);
  font: .66rem/1.45 var(--mono);
}

.commerce-note strong { color: var(--amber); white-space: nowrap; }
.inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inventory-card { min-height: 240px; }
.inventory-quantity { position: absolute; top: 11px; right: 12px; color: var(--lime); font: .6rem var(--mono); }
.inventory-card button { width: 100%; color: var(--teal); cursor: pointer; }
.record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.record-grid article { min-height: 150px; }
.record-grid article p { color: var(--muted); font: 500 .95rem/1.45 var(--body); }
.text-link { color: var(--lime); font: .58rem var(--mono); letter-spacing: .1em; }
.timeline-list { display: grid; gap: 0; padding: 0 18px 18px; }
.timeline-list article { padding: 18px 0; border-bottom: 1px solid var(--line); }
.timeline-list article span { color: var(--teal); font: .58rem var(--mono); letter-spacing: .1em; }
.timeline-list h3 { margin: 7px 0; color: var(--text); font: 700 .95rem var(--display); }
.timeline-list p { margin: 0; color: var(--muted); font: .95rem/1.4 var(--body); }
.atlas-preview { position: relative; min-height: 360px; margin: 18px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(236, 228, 211, .12), transparent 34%), linear-gradient(145deg, rgba(8, 29, 39, .8), rgba(3, 10, 17, .9)); overflow: hidden; }
.atlas-preview::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; }
.atlas-preview-node { position: absolute; left: calc(12% + (var(--node-index) * 15%)); top: calc(22% + ((var(--node-index) * 17%) % 60%)); display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line-strong); background: rgba(14, 12, 15, .9); color: var(--text); font: .62rem var(--mono); letter-spacing: .06em; }
.atlas-preview-node small { color: var(--muted); font-size: .48rem; }

.atlas-digest { margin: -18px; background: rgba(3, 11, 17, .55); }
.atlas-hero { position: relative; display: flex; justify-content: space-between; gap: 30px; min-height: 230px; padding: 34px 34px 30px; overflow: hidden; border-bottom: 1px solid var(--line-strong); background: linear-gradient(110deg, rgba(13, 49, 52, .82), rgba(6, 19, 29, .93) 58%, rgba(8, 14, 27, .95)); }
.atlas-hero::after { content: ""; position: absolute; width: 58%; height: 260px; right: -5%; top: -105px; border: 1px solid rgba(236, 228, 211,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(236, 228, 211,.03), 0 0 0 62px rgba(236, 228, 211,.025), 0 0 80px rgba(236, 228, 211,.12); transform: rotate(-12deg); pointer-events: none; }
.atlas-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.atlas-kicker { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--lime); font: .58rem var(--mono); letter-spacing: .15em; }
.atlas-kicker span { width: 8px; height: 8px; border: 1px solid var(--lime); transform: rotate(45deg); }
.atlas-hero h2 { margin: 15px 0 10px; color: var(--text); font: 700 clamp(1.5rem, 3.3vw, 2.8rem) var(--display); letter-spacing: -.04em; }
.atlas-hero h2 em { color: var(--teal); font-style: normal; }
.atlas-lede { max-width: 650px; margin: 0; color: #b2c5c1; font: 500 1.08rem/1.4 var(--body); }
.atlas-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; color: #749494; font: .56rem var(--mono); letter-spacing: .12em; }
.atlas-hero-readout { position: relative; z-index: 1; align-self: flex-start; min-width: 180px; padding: 12px 14px; border-left: 2px solid var(--lime); background: rgba(2, 11, 16, .62); }
.atlas-hero-readout span, .atlas-hero-readout small { display: block; color: var(--muted); font: .53rem var(--mono); letter-spacing: .13em; }
.atlas-hero-readout strong { display: block; margin: 6px 0 8px; color: var(--lime); font: .76rem var(--mono); letter-spacing: .1em; }
.atlas-hero-readout i { display: block; width: 7px; height: 7px; margin-top: 16px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }
.atlas-table, .journey-planner, .dossier-section, .world-pillars { padding: 26px 34px 0; }
.atlas-table-head, .section-rule { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.atlas-table h3, .section-rule h3 { margin: 7px 0 0; color: var(--text); font: 700 1rem var(--display); letter-spacing: .04em; }
.atlas-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px; color: #89a5a3; font: .52rem var(--mono); letter-spacing: .08em; }
.atlas-legend span { display: inline-flex; align-items: center; gap: 5px; }
.atlas-legend i { display: inline-block; width: 7px; height: 7px; border: 1px solid currentColor; }
.legend-stable { color: var(--teal); background: var(--teal); }.legend-build { color: var(--cyan); background: var(--cyan); }.legend-spike { color: var(--amber); background: var(--amber); }.legend-seam { color: var(--violet); border-radius: 50%; }.legend-hub { color: var(--lime); transform: rotate(45deg); }
.atlas-scene { position: relative; min-height: 480px; margin-top: 20px; overflow: hidden; border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 48% 55%, rgba(75, 157, 139, .2), transparent 38%), linear-gradient(145deg, rgba(9, 38, 44, .82), rgba(2, 10, 18, .98)); isolation: isolate; }
.atlas-scene::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(236, 228, 211,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 228, 211,.45) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 94%); z-index: -1; }
.atlas-scene::after { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(circle at 23% 58%, rgba(231, 201, 138,.45), transparent 2px), radial-gradient(circle at 73% 26%, rgba(240,187,104,.45), transparent 2px), radial-gradient(circle at 85% 78%, rgba(199,167,255,.5), transparent 2px); background-size: 105px 83px, 145px 101px, 119px 91px; pointer-events: none; z-index: -1; }
.atlas-contours { position: absolute; border: 1px solid rgba(236, 228, 211,.22); border-radius: 47% 53% 42% 58%; transform: rotate(-17deg); pointer-events: none; }
.contour-a { inset: 13% 20% 18% 12%; }.contour-b { inset: 24% 10% 9% 27%; transform: rotate(17deg); border-color: rgba(231, 201, 138,.14); }.contour-c { inset: 7% 37% 31% 4%; transform: rotate(34deg); border-color: rgba(199,167,255,.15); }
.atlas-route { position: absolute; height: 1px; transform-origin: left center; border-top: 1px solid rgba(231, 201, 138,.66); filter: drop-shadow(0 0 4px rgba(231, 201, 138,.4)); z-index: 1; }
.route-hub-verdant { left: 25%; top: 66%; width: 25%; transform: rotate(-8deg); }.route-verdant-frost { left: 24%; top: 61%; width: 48%; transform: rotate(-37deg); }.route-frost-neon { left: 49%; top: 25%; width: 37%; transform: rotate(38deg); }.route-neon-rift { left: 73%; top: 52%; width: 25%; transform: rotate(-64deg); }.route-rift-hub { left: 51%; top: 69%; width: 35%; border-top-style: dashed; transform: rotate(12deg); opacity: .55; }
.atlas-scanline { position: absolute; inset: -30% 0; width: 1px; background: linear-gradient(transparent, rgba(231, 201, 138,.55), transparent); box-shadow: 0 0 34px 13px rgba(236, 228, 211,.12); transform: rotate(16deg) translateX(10%); animation: atlas-scan 8s ease-in-out infinite; z-index: 2; pointer-events: none; }
@keyframes atlas-scan { 0%, 100% { left: 8%; opacity: .1; } 48% { opacity: .9; } 55% { left: 91%; opacity: .25; } }
.atlas-node { position: absolute; left: var(--node-x); top: var(--node-y); display: grid; grid-template-columns: 14px auto; gap: 2px 7px; width: 145px; padding: 9px 10px; border: 1px solid rgba(236, 228, 211,.4); background: rgba(3, 12, 19, .88); color: var(--text); box-shadow: 0 10px 26px rgba(0,0,0,.32); transition: border-color .2s, transform .2s, background .2s; transform: translate(-50%, -50%); }
.atlas-node:hover, .atlas-node:focus-visible { z-index: 4; border-color: var(--lime); background: rgba(10, 38, 40, .96); outline: none; transform: translate(-50%, -50%) translateY(-4px); }
.atlas-node .node-pulse, .atlas-node .node-core { grid-row: 1 / span 3; grid-column: 1; align-self: center; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; }
.atlas-node .node-pulse { animation: beacon 2.2s ease-out infinite; opacity: .35; }.atlas-node .node-core { background: currentColor; box-shadow: 0 0 12px currentColor; }
@keyframes beacon { 0% { transform: scale(.8); opacity: .75; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.atlas-node b, .atlas-node small { grid-column: 2; color: var(--muted); font: .48rem var(--mono); letter-spacing: .08em; }.atlas-node strong { grid-column: 2; font: 700 .7rem var(--display); letter-spacing: .02em; }.atlas-node.tone-teal { color: var(--teal); }.atlas-node.tone-cyan { color: var(--cyan); }.atlas-node.tone-amber { color: var(--amber); }.atlas-node.tone-violet { color: var(--violet); }.atlas-node.tone-green { color: var(--lime); }
.atlas-coordinates { position: absolute; color: #668887; font: .5rem var(--mono); letter-spacing: .12em; }.coord-north { top: 16px; right: 18px; }.coord-south { bottom: 14px; left: 18px; }
.atlas-caption { margin: 11px 0 0; color: #789291; font: .64rem/1.45 var(--mono); }.atlas-caption strong { color: var(--lime); margin-right: 8px; }.atlas-caption b { color: var(--amber); }
.section-rule { padding-bottom: 15px; border-bottom: 1px solid var(--line); }.section-rule > span { color: #6f8d8e; font: .52rem var(--mono); letter-spacing: .12em; }
.journey-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 18px 0 5px; }
.journey-stop { position: relative; min-height: 128px; padding: 0 14px 0 0; border-right: 1px solid var(--line); }.journey-stop + .journey-stop { padding-left: 14px; }.journey-stop:last-child { border-right: 0; }
.journey-index { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); background: var(--teal); font: .58rem var(--mono); }.journey-stop.tone-green .journey-index { background: var(--lime); }.journey-stop.tone-cyan .journey-index { background: var(--cyan); }.journey-stop.tone-amber .journey-index { background: var(--amber); }.journey-stop.tone-violet .journey-index { background: var(--violet); }
.journey-line { position: absolute; top: 11px; left: 29px; right: 14px; border-top: 1px dashed var(--line-strong); }.journey-stop strong { display: block; margin-top: 15px; color: var(--text); font: 700 .7rem var(--display); }.journey-stop small { display: block; margin-top: 5px; color: var(--lime); font: .54rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }.journey-stop p { margin: 9px 0 0; color: var(--muted); font: .85rem/1.25 var(--body); }
.dossier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 0 5px; }.dossier-card { position: relative; padding: 18px; border: 1px solid var(--line); background: rgba(14, 12, 15, .68); border-top: 2px solid currentColor; color: var(--teal); }.dossier-card.tone-cyan { color: var(--cyan); }.dossier-card.tone-amber { color: var(--amber); }.dossier-card.tone-violet { color: var(--violet); }.dossier-card.tone-green { color: var(--lime); }.dossier-card header { display: flex; justify-content: space-between; gap: 15px; }.dossier-code { color: currentColor; font: .52rem var(--mono); letter-spacing: .1em; }.dossier-card h4 { margin: 6px 0 0; color: var(--text); font: 700 1rem var(--display); }.dossier-status { padding: 4px 6px; align-self: start; border: 1px solid currentColor; color: currentColor; font: .48rem var(--mono); letter-spacing: .06em; text-align: right; }.dossier-mood { margin: 10px 0 0; color: #90aaa8; font: .66rem var(--mono); }.dossier-mood b { color: currentColor; }.dossier-fantasy { min-height: 41px; margin: 13px 0; color: var(--text); font: 600 .94rem/1.3 var(--body); }.dossier-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }.dossier-card dl div { padding-top: 8px; border-top: 1px solid var(--line); }.dossier-card dt { color: #6f8d8e; font: .48rem var(--mono); letter-spacing: .1em; }.dossier-card dd { margin: 4px 0 0; color: #afc2bf; font: .8rem/1.25 var(--body); }.dossier-card footer { display: grid; gap: 5px; margin-top: 15px; padding-top: 11px; border-top: 1px solid var(--line); }.dossier-card footer span { color: currentColor; font: .55rem var(--mono); letter-spacing: .04em; }.dossier-card footer strong { color: var(--text); font: .57rem var(--mono); letter-spacing: .08em; }.dossier-card footer small { color: #668181; font: .5rem var(--mono); }
.world-pillars { padding-bottom: 30px; }.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 0; }.pillar-grid article { display: grid; grid-template-columns: 28px 1fr; gap: 10px; min-height: 155px; padding: 14px; border-left: 1px solid var(--line-strong); background: rgba(10, 27, 35, .52); }.pillar-grid article > span { color: var(--lime); font: .58rem var(--mono); }.pillar-grid small { color: var(--teal); font: .5rem var(--mono); letter-spacing: .1em; }.pillar-grid h4 { margin: 7px 0 5px; color: var(--text); font: 700 .82rem var(--display); }.pillar-grid p { margin: 0; color: var(--muted); font: .84rem/1.3 var(--body); }.atlas-note { display: flex; gap: 14px; padding: 13px 15px; border-left: 2px solid var(--amber); background: rgba(240,187,104,.06); color: #96aaa7; font: .63rem/1.45 var(--mono); }.atlas-note strong { flex: 0 0 auto; color: var(--amber); }

@media (max-width: 760px) {
  .portal-surface-head { display: block; padding: 18px; }
  .market-wallet { margin-top: 16px; }
  .market-grid, .inventory-grid, .record-grid { grid-template-columns: 1fr; padding: 12px; }
  .commerce-note { display: block; margin: 0 12px 12px; }
  .commerce-note strong { display: block; margin-bottom: 6px; }
  .atlas-digest { margin: -12px; }.atlas-hero { display: block; min-height: 0; padding: 25px 18px 22px; }.atlas-hero-readout { margin-top: 22px; }.atlas-table, .journey-planner, .dossier-section, .world-pillars { padding: 22px 18px 0; }.atlas-table-head, .section-rule { display: block; }.atlas-legend { justify-content: flex-start; margin-top: 15px; }.atlas-scene { min-height: 445px; margin-top: 16px; }.atlas-node { width: 126px; padding: 8px; }.atlas-node strong { font-size: .59rem; }.atlas-node small { font-size: .43rem; }.atlas-caption { font-size: .57rem; }.journey-track { display: block; padding-top: 15px; }.journey-stop, .journey-stop + .journey-stop { min-height: 0; padding: 0 0 22px 38px; border: 0; }.journey-line { top: 30px; bottom: 0; left: 11px; right: auto; height: auto; border-top: 0; border-left: 1px dashed var(--line-strong); }.journey-stop:last-child .journey-line { display: none; }.journey-index { position: absolute; left: 0; top: 0; }.journey-stop strong { margin-top: 0; }.dossier-grid, .pillar-grid { grid-template-columns: 1fr; }.dossier-card dl { grid-template-columns: 1fr; }.dossier-fantasy { min-height: 0; }.atlas-note { display: block; }.atlas-note strong { display: block; margin-bottom: 6px; }.section-rule > span { display: block; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Orders & receipts */
.orders-table-wrap { margin: 0 18px 18px; overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font: .62rem var(--mono); letter-spacing: .04em; }
.orders-table th { text-align: left; color: var(--muted); font-weight: 400; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.orders-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: top; }
.orders-table td small { display: block; color: var(--muted); }
.orders-table code { font: inherit; color: var(--cyan); }
.orders-table .order-refunded td { color: var(--muted); text-decoration-color: rgba(255, 255, 255, .25); }
.market-buy .market-buy-button[disabled]:not([data-buy-sku]) { border-color: var(--line); background: transparent; color: var(--muted); cursor: default; opacity: 1; }

/* ── Profile + brand additions ─────────────────────────────────────────────── */
.xs-portal .player-avatar { overflow: hidden; color: var(--ink); background: var(--lime); }
.xs-portal .player-avatar.has-image { background: #1a1714; }
.xs-portal .player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xs-portal .rail-signin { width: 100%; justify-content: center; margin: 4px 0 18px; padding: 10px 12px; font-size: .68rem; letter-spacing: .14em; }
.xs-portal .hero-skin { position: absolute; right: 6%; bottom: 0; height: 92%; max-width: 46%; object-fit: contain; filter: drop-shadow(0 0 22px rgba(0, 0, 0, .8)); opacity: .9; z-index: 1; pointer-events: none; }
.xs-portal .hero-level { z-index: 2; }
.xs-portal .quest-progress small { color: var(--muted); font: .62rem var(--mono); letter-spacing: .12em; }
.xs-portal .quest-footer span { color: var(--muted); font: .64rem var(--mono); letter-spacing: .06em; }
.xs-portal .stat-row { cursor: default; }
.xs-portal .xs-empty { display: grid; gap: 6px; margin: 18px 0 8px; padding: 18px; border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, .25); }
.xs-portal .xs-empty strong { color: var(--lime); font: .74rem var(--mono); letter-spacing: .18em; }
.xs-portal .xs-empty span { color: var(--muted); line-height: 1.5; }
.xs-portal .xs-empty a, .xs-portal .commerce-note a { color: var(--lime); text-decoration: underline; }
.xs-portal .page-intro h1 { font-family: var(--display); letter-spacing: .08em; }
.xs-portal .button-quiet { border-color: var(--line-strong); color: var(--text); }
.xs-portal .hero-copy { padding-bottom: 96px; }
.xs-portal .player-hero::after { opacity: .42; }
.xs-portal .hero-actions .button { padding: 10px 16px; letter-spacing: .14em; font-size: .7rem; }
.xs-portal .button-quiet { background: rgba(0, 0, 0, .35); }
@media (max-width: 980px) { .xs-portal .hero-skin { display: none; } }