@import url("/design-tokens.css");

:root {
  --ink: var(--bryk-ink);
  --paper: var(--bryk-paper);
  --white: var(--bryk-white);
  --orange: var(--bryk-orange);
  --pink: var(--bryk-pink);
  --cyan: var(--bryk-cyan);
  --lime: var(--bryk-lime);
  --violet: var(--bryk-violet);
  --line: var(--bryk-line);
  --max: var(--bryk-content-max);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--white); background: var(--ink); font-family: Inter, Arial, Helvetica, sans-serif; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 75% 10%, rgba(121,108,255,.3), transparent 27%),
    radial-gradient(circle at 5% 75%, rgba(255,100,0,.2), transparent 30%);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.portal-shell { min-height: 100vh; overflow: clip; }
.portal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 230px 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: 82px;
  padding: 10px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(5,7,9,.88);
  backdrop-filter: blur(18px);
}
.portal-brand { display: flex; width: 180px; align-items: center; }
.portal-brand img { width: 104px; height: 66px; object-fit: contain; object-position: left center; filter: drop-shadow(4px 5px 0 rgba(255,100,0,.42)); }
.portal-nav { display: flex; flex-wrap: wrap; gap: 5px 16px; justify-content: center; }
.portal-nav a { padding: 10px 0; color: rgba(255,255,255,.66); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.portal-nav a:hover, .portal-nav a[aria-current="page"] { color: var(--white); text-shadow: 0 0 14px var(--orange); }
.metro-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--orange); color: #101010; background: var(--orange); font-size: 9px; font-weight: 950; letter-spacing: .12em; text-decoration: none; transform: rotate(-1deg); }
.city-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.city-more-menu { position:relative; }
.city-more-menu > summary { display:grid; min-height:40px; padding:0 12px; place-items:center; border:1px solid var(--line); color:var(--white); background:#0a0d10; cursor:pointer; list-style:none; font-size:9px; font-weight:900; letter-spacing:.1em; }
.city-more-menu > summary::-webkit-details-marker { display:none; }
.city-more-menu[open] > summary { color:#08090a; border-color:var(--lime); background:var(--lime); }
.city-more-menu > nav { position:absolute; z-index:120; top:calc(100% + 8px); right:0; display:grid; width:min(280px,calc(100vw - 24px)); max-height:calc(100dvh - 92px); padding:8px; overflow-y:auto; overscroll-behavior:contain; border:1px solid rgba(255,255,255,.24); background:#090c0f; box-shadow:9px 9px 0 rgba(255,100,0,.25); }
.city-more-menu > nav a { display:flex; align-items:center; min-height:44px; padding:0 11px; border-bottom:1px solid rgba(255,255,255,.1); color:#c7cdd1; text-decoration:none; font-size:10px; font-weight:850; letter-spacing:.07em; }
.city-more-menu > nav a:hover,.city-more-menu > nav a:focus-visible { color:#08090a; background:var(--orange); }
.property-example{margin:14px 0;border:1px solid rgba(255,255,255,.15);background:#080b0d}.property-example summary{min-height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;cursor:pointer;list-style:none;font-size:8px;font-weight:950;letter-spacing:.1em}.property-example summary::-webkit-details-marker{display:none}.property-example summary::after{content:"+";color:var(--orange);font-size:17px}.property-example[open] summary::after{content:"−"}.property-example p{display:grid;gap:8px;margin:0;padding:11px;border-top:1px dashed rgba(255,255,255,.15)}.property-example b{color:#fff;font-size:10px}.property-example span{color:#8e969c;font-size:9px;line-height:1.5}

.portal-main { width: min(100%, var(--max)); margin: 0 auto; padding: 0 clamp(18px, 4vw, 64px) 90px; }
.portal-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(28px, 6vw, 90px); align-items: end; min-height: 38vh; padding: clamp(48px, 7vw, 105px) 0 42px; border-bottom: 1px solid var(--line); }
.portal-hero::after { content: attr(data-stamp); position: absolute; right: 0; bottom: 30px; color: rgba(255,255,255,.035); font-size: clamp(58px, 13vw, 180px); font-weight: 1000; line-height: .75; letter-spacing: -.08em; pointer-events: none; }
.eyebrow { display: inline-flex; gap: 10px; align-items: center; margin: 0 0 18px; color: var(--orange); font-size: 10px; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 32px; height: 4px; background: currentColor; box-shadow: 9px 7px 0 currentColor; transform: skew(-18deg); }
.portal-hero h1, .section-heading h2, .character-info h1 { margin: 0; font-size: clamp(54px, 9vw, 136px); font-weight: 1000; line-height: .78; letter-spacing: -.065em; text-transform: uppercase; }
.portal-hero h1 span, .section-heading h2 span, .character-info h1 span { color: var(--orange); -webkit-text-stroke: 1px var(--orange); text-shadow: 6px 6px 0 rgba(121,108,255,.6); }
.hero-note { position: relative; z-index: 1; padding: 24px; border: 1px solid var(--line); background: rgba(10,12,14,.7); box-shadow: 13px 13px 0 rgba(255,100,0,.12); }
.hero-note p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.7; }
.hero-note b { display: block; margin-bottom: 12px; color: var(--white); font-size: 11px; letter-spacing: .14em; }

.portal-section { padding: 75px 0 0; }
.section-heading { display: flex; gap: 36px; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.section-heading h2 { font-size: clamp(42px, 6vw, 92px); }
.section-heading > p { width: min(100%, 420px); margin: 0; color: rgba(255,255,255,.58); line-height: 1.6; }

.collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.character-card { position: relative; min-height: 480px; overflow: hidden; border: 1px solid var(--line); color: var(--white); background: #101316; text-decoration: none; isolation: isolate; }
.character-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.96) 92%); }
.character-card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.08) 9px); transition: opacity .25s ease; }
.character-card:hover::after { opacity: .38; }
.character-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.character-card:hover img { transform: scale(1.06) rotate(.5deg); }
.character-card.is-upcoming img { filter: saturate(.35) contrast(1.2); }
.character-card.is-concept img { filter: saturate(.72) contrast(1.08); }
.character-card.is-mystery img { filter: grayscale(1) brightness(.25) contrast(1.6) blur(8px); transform: scale(1.12); }
.character-card.is-mystery:hover img { filter: grayscale(1) brightness(.38) contrast(1.6) blur(5px); transform: scale(1.15); }
.character-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.character-status, .edition-chip { padding: 7px 9px; color: #0a0b0d; background: var(--orange); font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.character-card.is-upcoming .character-status { background: var(--lime); }
.character-card.is-concept .character-status { color:#fff; background:#37414a; }
.character-card.is-founding { border-color:rgba(0,168,255,.72); box-shadow:0 0 0 1px rgba(0,168,255,.18),13px 13px 0 rgba(0,98,196,.14); }
.character-card.is-founding .character-status { color:#fff; background:#006dce; }
.character-card.is-founding img { object-fit:contain; background:#fff; }
.character-card.is-mystery .character-status { color: white; background: var(--violet); }
.edition-chip { color: white; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.22); }
.character-meta { position: absolute; inset: auto 18px 18px; z-index: 2; }
.character-meta small { color: var(--orange); font-weight: 950; letter-spacing: .15em; }
.character-meta h3 { margin: 8px 0 5px; font-size: clamp(25px, 2.5vw, 40px); font-weight: 1000; line-height: .88; letter-spacing: -.04em; }
.character-meta p { margin: 0; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.character-meta .card-route { display: flex; margin-top: 18px; justify-content: space-between; color: white; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 15px; }
.countdown span { padding: 7px 4px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.68); text-align: center; }
.countdown b { display: block; font: 950 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.countdown small { color: rgba(255,255,255,.5); font-size: 6px; letter-spacing: .12em; }

.founding-release { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:clamp(28px,5vw,76px); align-items:center; }
.founding-release__visual { position:relative; min-height:430px; overflow:hidden; border:1px solid rgba(0,168,255,.6); background:#2f2f2f; box-shadow:16px 16px 0 rgba(0,97,196,.16); }
.founding-release__visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(0,168,255,.12),transparent 42%),repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,255,255,.035) 8px); }
.founding-release__visual img { display:block; width:100%; height:100%; min-height:430px; object-fit:contain; background:#2f2f2f; }
.founding-release__visual span { position:absolute; z-index:2; left:16px; bottom:16px; padding:9px 11px; color:#fff; background:#006dce; font-size:9px; font-weight:950; letter-spacing:.13em; box-shadow:6px 6px 0 rgba(0,0,0,.65); }
.founding-release__copy h2 { margin:0; font-size:clamp(58px,8vw,110px); line-height:.76; letter-spacing:-.065em; }
.founding-release__copy h2 span { color:#00a8ff; text-shadow:5px 5px 0 rgba(255,60,145,.45); }
.founding-release__copy>p:not(.eyebrow) { color:rgba(255,255,255,.68); font-size:14px; line-height:1.75; }
.founding-release__copy dl { display:grid; gap:1px; margin:22px 0; }
.founding-release__copy dl div { display:grid; grid-template-columns:115px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.founding-release__copy dt { color:#00a8ff; font-size:8px; font-weight:950; letter-spacing:.13em; }
.founding-release__copy dd { margin:0; font-size:10px; font-weight:900; }

.drops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.drop-card { position: relative; display: grid; grid-template-columns: 170px 1fr; min-height: 250px; overflow: hidden; border: 1px solid var(--line); background: rgba(13,16,18,.88); }
.drop-card::after { content: attr(data-drop); position: absolute; right: -4px; bottom: -15px; color: rgba(255,255,255,.035); font-size: 70px; font-weight: 1000; }
.drop-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.drop-card.is-mystery img { filter: grayscale(1) brightness(.25) blur(5px); }
.drop-copy { position: relative; z-index: 1; padding: 25px; }
.drop-copy > small { color: var(--lime); font-size: 9px; font-weight: 950; letter-spacing: .15em; }
.drop-copy h3 { margin: 10px 0 8px; font-size: 28px; line-height: .9; }
.drop-copy p { color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.6; }
.prelaunch-notice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; margin:22px clamp(18px,4vw,64px) 0; padding:18px 20px; border:1px solid rgba(185,242,39,.45); border-left:5px solid var(--lime); background:linear-gradient(110deg,rgba(185,242,39,.1),rgba(10,13,16,.96) 46%); box-shadow:var(--bryk-shadow-soft); }
.prelaunch-notice b { color:#fff; font-size:11px; letter-spacing:.1em; }
.prelaunch-notice p { margin:0; color:#b5bdc2; font-size:12px; line-height:1.6; }
.prelaunch-notice a { color:var(--lime); font-size:9px; font-weight:950; letter-spacing:.1em; text-decoration:none; white-space:nowrap; }
.release-concept { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:clamp(28px,5vw,74px); align-items:center; }
.release-concept picture { display:block; min-height:520px; overflow:hidden; border:1px solid rgba(242,191,50,.54); background:#07090b; box-shadow:16px 16px 0 rgba(242,191,50,.1); }
.release-concept picture img { display:block; width:100%; height:100%; min-height:520px; object-fit:cover; }
.release-concept h2 { margin:8px 0 18px; font-size:clamp(54px,7vw,104px); line-height:.78; letter-spacing:-.06em; }
.release-concept h2 span { color:#f2bf32; text-shadow:4px 4px 0 rgba(255,100,0,.28); }
.release-concept>div>p:not(.eyebrow) { color:#b9c0c4; font-size:14px; line-height:1.7; }
.release-concept dl { display:grid; gap:1px; margin:22px 0; background:var(--line); }
.release-concept dl div { display:grid; grid-template-columns:145px 1fr; gap:14px; padding:13px; background:#0a0d10; }
.release-concept dt { color:#f2bf32; font-size:8px; font-weight:950; letter-spacing:.1em; }
.release-concept dd { margin:0; color:#fff; font-size:10px; font-weight:900; line-height:1.4; }
.release-concept__note { padding:14px; border-left:3px solid var(--orange); background:rgba(255,100,0,.07); }

.urban-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 19px; border: 1px solid var(--orange); color: #08090a; background: var(--orange); cursor: pointer; font-size: 9px; font-weight: 1000; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; box-shadow: 6px 6px 0 rgba(121,108,255,.48); }
.urban-button:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 rgba(121,108,255,.48); }
.urban-button.secondary { color: white; background: transparent; border-color: rgba(255,255,255,.35); box-shadow: none; }
.urban-button.small { min-height: 36px; padding: 0 12px; font-size: 8px; }

.portal-form { display: grid; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-form label { display: grid; gap: 7px; color: rgba(255,255,255,.65); font-size: 8px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.portal-form input, .portal-form textarea, .portal-form select { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 0; color: white; background: #0c0f11; outline: 0; }
.portal-form textarea { min-height: 110px; resize: vertical; }
.portal-form input:focus, .portal-form textarea:focus, .portal-form select:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,100,0,.13); }
.portal-form .interest-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }
.portal-form .consent-check { display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px; align-items:start; color:#c4cacf; font-size:11px; line-height:1.55; letter-spacing:0; text-transform:none; }
.portal-form .consent-check input { width:20px; min-height:20px; height:20px; margin:1px 0 0; padding:0; accent-color:var(--orange); }
.portal-form .consent-check a { color:var(--lime); }
.form-message { min-height: 20px; margin: 0; color: var(--lime); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.form-message.is-error { color: #ff7272; }
.form-panel { padding: clamp(22px, 4vw, 42px); border: 1px solid var(--line); background: rgba(11,14,16,.85); box-shadow: 18px 18px 0 rgba(255,100,0,.08); }

.waitlist-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(330px, 1.15fr); gap: clamp(30px, 7vw, 100px); align-items: start; }
.waitlist-tape { display: grid; gap: 7px; transform: rotate(-1.5deg); }
.waitlist-tape span { padding: 13px 16px; color: #111; background: var(--paper); font-size: 10px; font-weight: 950; letter-spacing: .12em; box-shadow: 8px 8px 0 rgba(255,60,145,.65); }

.member-layout { display: grid; grid-template-columns: minmax(310px, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
#metroMount { position: sticky; top: 105px; perspective: 1400px; }
.metro-card-module { --metro-gold:#f2bf32; --metro-gold-deep:#d99d18; --metro-blue:#16549a; --metro-blue-deep:#083a75; position:relative; color:#111; }
.metro-card-module[data-card-style="cyan-line"] { --metro-blue:#007f8f; --metro-blue-deep:#005362; }
.metro-card-module[data-card-style="violet-night"] { --metro-blue:#3f4388; --metro-blue-deep:#222653; }
.metro-card-flipper { position:relative; aspect-ratio:1.586 / 1; transform-style:preserve-3d; transition:transform .58s cubic-bezier(.2,.72,.22,1); }
.metro-card-flipper.is-flipped { transform:rotateY(180deg); }
.metro-card { position:absolute; inset:0; overflow:hidden; padding:clamp(13px,2.3vw,23px); border:1px solid #f6d87c; border-radius:16px; color:#111; background:linear-gradient(112deg,#f7cc48 0 48%,var(--metro-gold) 48% 82%,var(--metro-gold-deep) 100%); box-shadow:0 24px 65px rgba(0,0,0,.46),0 2px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(116,73,0,.2) inset; backface-visibility:hidden; transform:none; }
.metro-card::before { content:""; position:absolute; right:-9%; bottom:-44%; width:54%; height:88%; background:var(--metro-blue); transform:rotate(-17deg); opacity:.96; }
.metro-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:multiply; background:repeating-linear-gradient(102deg,transparent 0 14px,rgba(91,55,0,.2) 15px),radial-gradient(circle at 30% 20%,transparent 0 2px,rgba(84,50,0,.28) 3px,transparent 4px); background-size:auto,35px 31px; }
.metro-card > * { position:relative; z-index:1; }
.metro-card-front { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto auto 1fr; gap:clamp(3px,.7vw,8px); }
.metro-card-grid { position:absolute; inset:0; z-index:0; opacity:.4; background:linear-gradient(170deg,rgba(255,255,255,.28),transparent 42%),linear-gradient(90deg,transparent 0 8%,rgba(122,73,0,.15) 8.3%,transparent 8.6%); }
.metro-card-head { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; min-height:27px; }
.metro-transit-seal { display:grid; width:clamp(28px,4.2vw,42px); height:clamp(28px,4.2vw,42px); border-radius:50%; place-items:center; color:#fff; background:var(--metro-blue); font:1000 clamp(8px,1.2vw,12px)/1 Arial,sans-serif; letter-spacing:-.05em; }
.metro-agency { color:#222; font:950 clamp(5px,.8vw,8px)/1.05 Arial,sans-serif; letter-spacing:.08em; }
.metro-agency small { display:block; margin-top:3px; color:var(--metro-blue-deep); font-size:.78em; letter-spacing:.16em; }
.metro-card-head img { width:clamp(43px,6vw,67px); height:clamp(27px,4vw,43px); object-fit:contain; object-position:right center; filter:grayscale(1) contrast(1.4); }
.metro-wordmark { display:flex; align-items:baseline; gap:clamp(5px,1vw,10px); min-width:0; color:var(--metro-blue); white-space:nowrap; }
.metro-wordmark span { padding:4px 6px; color:#fff; background:var(--metro-blue); font:1000 clamp(7px,1vw,11px)/1 Arial,sans-serif; letter-spacing:.04em; }
.metro-wordmark strong { font:italic 1000 clamp(26px,5.4vw,62px)/.74 Arial Black,Arial,sans-serif; letter-spacing:-.075em; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.metro-wordmark small { align-self:center; padding-left:7px; border-left:2px solid currentColor; font:950 clamp(5px,.75vw,8px)/1.1 Arial,sans-serif; letter-spacing:.12em; }
.metro-rider { min-width:0; padding:clamp(4px,.7vw,8px) 0; border-top:1px solid rgba(42,28,0,.38); border-bottom:1px solid rgba(42,28,0,.3); }
.metro-kicker { margin:0 0 3px; color:var(--metro-blue-deep); font:950 clamp(4px,.7vw,7px)/1 monospace; letter-spacing:.12em; }
.metro-name { margin:0; max-width:84%; overflow:hidden; font-size:clamp(15px,2.9vw,33px); font-weight:1000; line-height:.85; letter-spacing:-.045em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.metro-handle { display:flex; gap:8px; justify-content:space-between; margin-top:3px; max-width:87%; font:900 clamp(5px,.75vw,8px)/1.1 monospace; letter-spacing:.06em; }
.metro-handle span { opacity:.7; }
.metro-line { position:relative; display:grid; grid-template-columns:repeat(8,1fr); align-items:start; margin:2px 9% 0 0; }
.metro-line::before { content:""; position:absolute; left:4%; right:4%; top:6px; height:3px; background:var(--metro-blue); box-shadow:0 3px 0 rgba(255,255,255,.28); }
.metro-stop { position:relative; display:grid; justify-items:center; gap:2px; }
.metro-stop i { z-index:1; width:clamp(10px,1.7vw,16px); height:clamp(10px,1.7vw,16px); border:2px solid #111; border-radius:50%; background:#f4df91; }
.metro-stop.is-owned i { background:#fff; box-shadow:0 0 0 3px var(--metro-blue); }
.metro-stop.is-home i { border-color:#fff; background:#111; box-shadow:0 0 0 3px var(--orange); }
.metro-stop small { font:950 clamp(4px,.6vw,6px)/1 monospace; }
.metro-stats { display:grid; grid-template-columns:repeat(4,1fr); margin-right:9%; border-top:1px solid rgba(0,0,0,.45); }
.metro-stats span { padding-top:clamp(3px,.6vw,7px); }
.metro-stats b { display:block; color:var(--metro-blue-deep); font-size:clamp(10px,1.8vw,20px); }
.metro-stats small { display:block; max-width:82px; font-size:clamp(4px,.55vw,6px); font-weight:950; letter-spacing:.06em; }
.metro-swipe { position:absolute; right:2.2%; bottom:5%; display:grid; width:8%; justify-items:center; color:#fff; transform:rotate(-90deg); transform-origin:center; }
.metro-swipe b,.metro-swipe span { font:950 clamp(4px,.55vw,6px)/1 monospace; letter-spacing:.09em; white-space:nowrap; }
.metro-swipe i { width:42px; height:3px; margin:3px 0; background:#fff; }
.metro-card-back { display:grid; grid-template-rows:auto auto auto auto 1fr auto; gap:clamp(4px,1vw,10px); background:linear-gradient(112deg,#f7cc48,var(--metro-gold) 68%,var(--metro-gold-deep)); transform:rotateY(180deg); }
.metro-card-back::before { right:-22%; bottom:-70%; }
.metro-magstripe { height:clamp(33px,6.5vw,66px); margin:0 clamp(-23px,-2.3vw,-13px); background:linear-gradient(#111 0 74%,#343434 74% 84%,#080808 84%); box-shadow:inset 0 2px 0 rgba(255,255,255,.2); }
.metro-back-copy { display:flex; align-items:center; justify-content:space-between; font:950 clamp(5px,.75vw,8px)/1 monospace; letter-spacing:.08em; }
.metro-back-copy span { color:var(--metro-blue-deep); }
.metro-token-track { display:grid; gap:5px; }
.metro-token-track div { display:flex; justify-content:space-between; gap:10px; font:950 clamp(5px,.8vw,9px)/1 monospace; }
.metro-token-track small { font-size:clamp(4px,.65vw,7px); }
.metro-token-track > i { height:clamp(8px,1.4vw,12px); border:2px solid #111; background:linear-gradient(90deg,var(--metro-blue) 0 var(--metro-progress),rgba(0,0,0,.13) var(--metro-progress)); }
.metro-route-key { display:flex; gap:10px; font:950 clamp(4px,.6vw,6px)/1 monospace; }
.metro-route-key span { display:flex; gap:4px; align-items:center; }
.metro-route-key i { width:9px; height:9px; border:2px solid #111; border-radius:50%; background:#f4df91; }
.metro-route-key i.is-home { background:#111; box-shadow:0 0 0 2px var(--orange); }
.metro-route-key i.is-owned { background:#fff; box-shadow:0 0 0 2px var(--metro-blue); }
.metro-serials { display:grid; align-content:start; gap:3px; margin:0; padding:0; list-style:none; font:850 clamp(4px,.65vw,7px)/1.15 monospace; }
.metro-serials li { display:flex; justify-content:space-between; padding-bottom:3px; border-bottom:1px dashed rgba(0,0,0,.38); }
.metro-serials li.is-empty { justify-content:center; padding:9px; border:1px dashed rgba(0,0,0,.38); }
.metro-card-legal { align-self:end; margin:0; max-width:90%; font:800 clamp(3px,.47vw,5px)/1.25 monospace; letter-spacing:.055em; }
.metro-card-controls { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0; }
.metro-card-controls div { display: flex; }
.metro-card-controls button, .metro-card-controls a { min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.72); background: #0d1012; cursor: pointer; font-size: 7px; font-weight: 950; letter-spacing: .1em; text-decoration: none; }
.metro-card-controls button[aria-pressed="true"] { color: #111; background: var(--orange); border-color: var(--orange); }
.metro-card-controls a { display: inline-flex; align-items: center; color: #111; background: var(--lime); border-color: var(--lime); }
.metro-card-status { min-height: 12px; margin: 8px 0 0 12px; color: rgba(255,255,255,.48); font: 850 7px/1 monospace; letter-spacing: .11em; }
.member-stack { display: grid; gap: 18px; }
.receipt { width: min(100%, 520px); margin: 0 auto; padding: 27px 22px 38px; color: #171717; background: var(--paper); box-shadow: 12px 12px 0 var(--pink); clip-path: polygon(0 0,100% 0,100% 97%,96% 100%,92% 97%,88% 100%,84% 97%,80% 100%,76% 97%,72% 100%,68% 97%,64% 100%,60% 97%,56% 100%,52% 97%,48% 100%,44% 97%,40% 100%,36% 97%,32% 100%,28% 97%,24% 100%,20% 97%,16% 100%,12% 97%,8% 100%,4% 97%,0 100%); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.receipt h3 { margin: 0; text-align: center; font-size: 22px; }
.receipt .receipt-rule { margin: 13px 0; border-top: 2px dashed #222; }
.receipt a { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #777; color: inherit; text-decoration: none; }
.receipt img { width: 50px; height: 50px; object-fit: cover; filter: contrast(1.1); }
.receipt a span { flex: 1; }
.receipt small { display: block; color: #555; }
.receipt-empty { padding: 25px 0; text-align: center; }
.token-rules { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.token-rules li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: rgba(255,255,255,.62); font-size: 11px; }
.token-rules b { color: var(--lime); font-size: 18px; }

.property-notice { margin:0 0 16px; padding:13px 16px; border:1px solid var(--lime); color:#111; background:var(--lime); font-size:12px; font-weight:950; letter-spacing:.05em; transform:rotate(-.25deg); }
.property-wallet { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-bottom:14px; border:1px solid var(--line); background:var(--line); }
.property-wallet span { padding:17px; background:#0b0e10; }
.property-wallet b { display:block; color:var(--lime); font-size:clamp(24px,3vw,42px); line-height:1; }
.property-wallet small { display:block; margin-top:6px; color:rgba(255,255,255,.55); font-size:8px; font-weight:950; letter-spacing:.1em; }
.property-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); gap:14px; }
.property-map { position:relative; min-height:520px; overflow:hidden; border:1px solid var(--line); background:#090b0c; isolation:isolate; }
.property-map::after { content:"CITY DEED GRID // LIVE CLAIM SIGNALS"; position:absolute; left:15px; top:15px; z-index:3; padding:7px 9px; color:#111; background:var(--orange); font:950 8px/1 monospace; letter-spacing:.1em; }
.property-map > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72) brightness(.62) contrast(1.15); transform:scale(1.02); }
.property-marker { position:absolute; z-index:2; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); display:grid; justify-items:center; padding:0; border:0; color:white; background:transparent; cursor:pointer; transform:translate(-50%,-50%); }
.property-marker span { display:grid; place-items:center; width:31px; height:31px; border:2px solid #fff; border-radius:50%; color:#111; background:var(--lime); box-shadow:0 0 0 7px rgba(185,242,39,.14),0 0 22px rgba(185,242,39,.65); font-weight:1000; animation:marketPulse 2.2s ease-in-out infinite; }
.property-marker b { margin-top:4px; padding:4px 5px; color:#111; background:rgba(185,242,39,.9); font:950 6px/1 monospace; letter-spacing:.06em; white-space:nowrap; }
.property-marker.is-mine span { color:white; background:var(--orange); box-shadow:0 0 0 7px rgba(255,100,0,.18),0 0 22px rgba(255,100,0,.7); }
.property-marker.is-mine b { background:var(--orange); }
.property-marker.is-claimed span,.property-marker.is-reserved span { color:#777; border-color:#777; background:#151719; box-shadow:none; animation:none; }
.property-marker.is-claimed b,.property-marker.is-reserved b { color:#aaa; background:#24272a; }
.property-map-key { position:absolute; left:14px; bottom:13px; z-index:3; display:flex; flex-wrap:wrap; gap:9px; padding:8px; background:rgba(4,6,8,.84); backdrop-filter:blur(8px); }
.property-map-key span { display:flex; gap:4px; align-items:center; font-size:7px; font-weight:950; }
.property-map-key i { width:8px; height:8px; border-radius:50%; background:var(--lime); }.property-map-key span:nth-child(2) i { background:var(--orange); }.property-map-key span:nth-child(3) i { background:#555; }
.token-use-menu { padding:clamp(20px,3vw,34px); border:1px solid rgba(255,100,0,.45); background:linear-gradient(155deg,rgba(255,100,0,.14),rgba(11,14,16,.94) 42%); }
.token-use-menu h3 { margin:7px 0 18px; font-size:clamp(27px,3.4vw,46px); line-height:.86; }
.token-use-menu ol { display:grid; gap:11px; margin:0; padding:0; counter-reset:token-use; list-style:none; }
.token-use-menu li { position:relative; padding:0 0 10px 35px; border-bottom:1px solid var(--line); counter-increment:token-use; }
.token-use-menu li::before { content:counter(token-use,decimal-leading-zero); position:absolute; left:0; top:0; color:var(--orange); font:950 11px/1 monospace; }
.token-use-menu li b,.token-use-menu li span { display:block; }.token-use-menu li b { font-size:11px; }.token-use-menu li span { margin-top:3px; color:rgba(255,255,255,.56); font-size:10px; line-height:1.45; }
.token-use-menu > p:last-child { margin:19px 0 0; color:rgba(255,255,255,.67); font-size:10px; line-height:1.55; }
.property-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:14px; }
.property-card { position:relative; min-height:300px; padding:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(155deg,#15191c,#090b0c 70%); }
.property-card::after { content:""; position:absolute; right:-45px; bottom:-60px; width:145px; height:145px; border:18px solid rgba(255,100,0,.08); border-radius:50%; pointer-events:none; }
.property-card.is-mine { border-color:var(--orange); background:linear-gradient(155deg,rgba(255,100,0,.17),#090b0c 64%); }
.property-card-top { display:flex; gap:8px; justify-content:space-between; color:rgba(255,255,255,.48); font-size:7px; font-weight:950; letter-spacing:.1em; }.property-card-top b { color:var(--lime); }
.property-card h3 { margin:25px 0 9px; font-size:clamp(24px,2.5vw,37px); line-height:.88; text-transform:uppercase; }.property-card p { min-height:58px; color:rgba(255,255,255,.58); font-size:10px; line-height:1.55; }
.property-card dl { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:17px 0; background:var(--line); }.property-card dl div { padding:9px; background:#0b0e10; }.property-card dt { color:rgba(255,255,255,.4); font-size:6px; letter-spacing:.1em; }.property-card dd { margin:4px 0 0; color:var(--orange); font-size:10px; font-weight:950; }
.property-card .urban-button { position:relative; z-index:2; width:100%; min-height:42px; padding:0 8px; font-size:8px; }.property-card .urban-button:disabled { color:#777; border-color:#333; background:#17191b; cursor:not-allowed; }
.property-stamp { display:inline-block; margin-top:9px; padding:8px 11px; border:2px solid currentColor; color:var(--orange); font:950 8px/1 monospace; letter-spacing:.1em; transform:rotate(-2deg); }
.deed-heading { margin-top:55px; }.deed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.deed-card { padding:24px; border:1px solid rgba(255,100,0,.5); background:linear-gradient(145deg,rgba(255,100,0,.13),rgba(121,108,255,.08)); box-shadow:8px 8px 0 rgba(255,100,0,.08); }.deed-card > small,.deed-card > b,.deed-card > span { display:block; }.deed-card > small { color:var(--orange); font-size:8px; font-weight:950; letter-spacing:.1em; }.deed-card > b { margin:13px 0 6px; font-size:25px; line-height:.92; text-transform:uppercase; }.deed-card > span { color:rgba(255,255,255,.52); font-size:8px; }.deed-card form { display:grid; gap:8px; margin-top:19px; }.deed-card label { color:rgba(255,255,255,.55); font-size:7px; font-weight:950; letter-spacing:.1em; }.deed-card input { width:100%; margin-top:6px; padding:11px; border:1px solid var(--line); color:white; background:#07090a; font:850 12px/1.2 system-ui,sans-serif; }.deed-card .urban-button { justify-self:start; }.deed-card .form-message { margin:0; }

.bodega-stage { position: relative; min-height: 690px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: #090b0c; isolation: isolate; }
.bodega-stage video, .bodega-stage > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bodega-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.75), transparent 45%, rgba(0,0,0,.18)), linear-gradient(0deg, rgba(0,0,0,.76), transparent 40%); }
.bodega-title { position: absolute; left: clamp(18px, 4vw, 55px); top: clamp(18px, 4vw, 50px); width: min(440px, 78%); }
.bodega-title h1 { margin: 0; font-size: clamp(55px, 8vw, 115px); font-weight: 1000; line-height: .74; letter-spacing: -.07em; }
.bodega-title h1 span { color: var(--lime); }
.bodega-title p { width: min(100%, 340px); color: rgba(255,255,255,.76); line-height: 1.6; }
.listing-hotspot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 36px; height: 36px; padding: 0; border: 2px solid white; border-radius: 50%; color: #111; background: var(--lime); cursor: pointer; box-shadow: 0 0 0 8px rgba(185,242,39,.18), 0 0 35px rgba(185,242,39,.8); transform: translate(-50%,-50%); animation: marketPulse 2.2s ease-in-out infinite; }
.listing-hotspot b { position: absolute; left: 44px; top: 7px; padding: 5px 8px; color: #111; background: var(--lime); font-size: 7px; letter-spacing: .08em; white-space: nowrap; }
.market-drawer { position: absolute; right: 18px; bottom: 18px; z-index: 4; width: min(400px, calc(100% - 36px)); padding: 22px; border: 1px solid var(--orange); background: rgba(4,7,8,.94); backdrop-filter: blur(16px); transform: translateY(calc(100% + 30px)); transition: transform .3s ease; }
.market-drawer.is-open { transform: translateY(0); }
.market-drawer button[data-close] { float: right; border: 0; color: white; background: transparent; cursor: pointer; }
.market-drawer h3 { margin: 8px 0; font-size: 31px; line-height: .92; }
.market-drawer dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
.market-drawer dl div { padding: 9px; border: 1px solid var(--line); }
.market-drawer dt { color: rgba(255,255,255,.45); font-size: 7px; letter-spacing: .1em; }
.market-drawer dd { margin: 5px 0 0; font-weight: 950; }
.trade-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.trade-board { display: grid; gap: 9px; }
.trade-ticket { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.trade-ticket small { display: block; color: rgba(255,255,255,.45); font-size: 7px; letter-spacing: .11em; }
.trade-ticket b { display: block; margin-top: 3px; font-size: 12px; }
.trade-ticket > i { color: var(--orange); font-style: normal; }

.character-page { display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(320px, .95fr); gap: clamp(30px, 6vw, 90px); min-height: calc(100vh - 82px); align-items: center; padding: 55px 0; }
.character-portrait { position: relative; min-height: min(75vh, 800px); overflow: hidden; border: 1px solid var(--line); background: #111; }
.character-portrait img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.character-portrait.is-upcoming img { filter: saturate(.25) contrast(1.2); }
.character-portrait.is-concept img { filter: saturate(.72) contrast(1.08); }
.character-portrait.is-founding { border-color:rgba(0,168,255,.72); background:#fff; }
.character-portrait.is-founding img { object-fit:contain; background:#fff; }
.character-portrait.is-mystery img { filter: grayscale(1) brightness(.19) contrast(1.5) blur(12px); transform: scale(1.08); }
.character-portrait::after { content: attr(data-mark); position: absolute; right: 20px; bottom: 10px; color: rgba(255,255,255,.72); font: 950 12px/1 monospace; letter-spacing: .12em; }
.character-info h1 { font-size: clamp(58px, 8vw, 122px); }
.character-info .tagline { margin: 18px 0 30px; color: var(--orange); font-size: 13px; font-weight: 950; letter-spacing: .16em; }
.character-intro { max-width: 720px; color: rgba(255,255,255,.78); font-size: clamp(16px, 2vw, 23px); font-weight: 720; line-height: 1.45; }
.character-quote { margin: 23px 0; padding: 18px 20px; border-left: 5px solid var(--orange); color: var(--paper); background: linear-gradient(90deg, rgba(255,100,0,.14), transparent); font-size: clamp(17px, 2.2vw, 27px); font-weight: 950; line-height: 1.2; transform: rotate(-.4deg); }
.character-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 0 25px; background: var(--line); }
.character-facts div { padding: 14px; background: #0b0e10; }
.character-facts dt { color: rgba(255,255,255,.4); font-size: 7px; letter-spacing: .12em; }
.character-facts dd { margin: 5px 0 0; font-size: 13px; font-weight: 900; }
.character-release-panel { margin: 0 0 24px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.character-release-panel > span { display: inline-block; padding: 6px 9px; color: #101010; background: var(--lime); font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.character-release-panel p { margin: 11px 0; color: rgba(255,255,255,.66); line-height: 1.55; }
.character-release-panel small { color: var(--orange); font-weight: 900; letter-spacing: .08em; }
.character-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.character-story-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.character-story-grid article, .character-story-grid aside { padding: clamp(23px, 4vw, 44px); border: 1px solid var(--line); background: rgba(12,15,17,.8); }
.character-story-grid article > p:last-child { margin: 0; color: rgba(255,255,255,.72); font-size: clamp(17px, 2.1vw, 25px); line-height: 1.62; }
.character-story-grid aside { background: linear-gradient(145deg, rgba(255,100,0,.16), rgba(121,108,255,.1)); }
.character-story-grid dl { display: grid; gap: 16px; margin: 0; }
.character-story-grid dl div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.character-story-grid dt { color: rgba(255,255,255,.42); font-size: 7px; font-weight: 950; letter-spacing: .14em; }
.character-story-grid dd { margin: 6px 0 0; font-weight: 950; }
.ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ability-card { position: relative; min-height: 230px; overflow: hidden; padding: 27px; border: 1px solid var(--line); background: #0d1012; }
.ability-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -55px; bottom: -75px; border: 14px solid rgba(255,100,0,.14); border-radius: 50%; }
.ability-card small { color: var(--orange); font-size: 10px; font-weight: 950; }
.ability-card h3 { margin: 55px 0 10px; font-size: clamp(24px, 3vw, 42px); line-height: .9; }
.ability-card p { margin: 0; color: rgba(255,255,255,.58); line-height: 1.6; }
.character-connection { display: grid; grid-template-columns: 1fr minmax(240px, .6fr); gap: 22px; align-items: stretch; }
.character-connection > div { display: grid; align-content: center; justify-items: start; padding: clamp(28px, 5vw, 68px); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(121,108,255,.18), rgba(255,100,0,.1)); }
.character-connection h2 { margin: 0; font-size: clamp(43px, 7vw, 100px); font-weight: 1000; line-height: .82; letter-spacing: -.06em; }
.character-connection p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.65); line-height: 1.6; }
.character-connection img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; filter: saturate(.7) contrast(1.1); }

.portal-footer { display: flex; gap: 20px; justify-content: space-between; padding: 28px clamp(18px, 4vw, 64px); border-top: 1px solid var(--line); color: rgba(255,255,255,.38); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.portal-footer a { color:rgba(255,255,255,.74); text-decoration:none; }
.portal-footer a:hover,.portal-footer a:focus-visible { color:var(--lime); }
.bodega-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.bodega-preview-grid article { min-height:245px; padding:24px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,100,0,.08),#0a0d10 45%); }
.bodega-preview-grid article>b { color:var(--orange); font-size:34px; }
.bodega-preview-grid h3 { margin:36px 0 10px; font-size:24px; line-height:.92; }
.bodega-preview-grid p { color:#adb5ba; font-size:13px; line-height:1.65; }
.bodega-preview-grid a { display:inline-block; margin-top:16px; color:var(--lime); font-size:9px; font-weight:950; letter-spacing:.1em; text-decoration:none; }
.demo-note { padding: 12px; border-left: 3px solid var(--violet); color: rgba(255,255,255,.58); background: rgba(121,108,255,.09); font-size: 10px; line-height: 1.6; }
.figure-passport-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.figure-passport{position:relative;display:grid;grid-template-columns:minmax(115px,.62fr) 1fr;min-height:245px;overflow:hidden;color:white;border:1px solid rgba(255,101,0,.5);background:linear-gradient(145deg,rgba(255,101,0,.14),rgba(121,108,255,.12) 45%,#090c0f);box-shadow:8px 8px 0 rgba(255,101,0,.08);text-decoration:none}.figure-passport::after{content:"PROFILE CARD // CLAIMED";position:absolute;right:-34px;top:27px;padding:5px 38px;color:#080a0c;background:var(--lime);font:950 6px/1 monospace;letter-spacing:.08em;transform:rotate(45deg)}.figure-passport figure{position:relative;margin:0;overflow:hidden}.figure-passport figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.08)}.figure-passport figure>span{position:absolute;left:8px;bottom:8px;padding:6px;color:#080a0c;background:var(--lime);font:950 7px/1 monospace;letter-spacing:.08em}.figure-passport>div{display:grid;align-content:center;padding:22px 18px}.figure-passport>div>small{color:var(--orange);font-size:7px;font-weight:950;letter-spacing:.12em}.figure-passport>div>b{margin:13px 0 9px;font-size:clamp(22px,2.4vw,36px);line-height:.86}.figure-passport p{margin:0;color:rgba(255,255,255,.62);font-size:10px;line-height:1.55}.figure-passport dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:17px 0 0;background:var(--line)}.figure-passport dl span{padding:9px;background:#090c0e}.figure-passport dt{color:rgba(255,255,255,.38);font-size:6px;letter-spacing:.09em}.figure-passport dd{margin:5px 0 0;color:var(--lime);font-size:9px;font-weight:950}.figure-passport.is-sealed figure img{filter:grayscale(1) brightness(.22) blur(6px);transform:scale(1.07)}.figure-passport.is-sealed::after{content:"REVEAL QUEUED";background:#555;color:white}.passport-empty{grid-column:1/-1;padding:46px;border:1px dashed rgba(255,255,255,.25);text-align:center}.passport-empty b,.passport-empty small{display:block}.passport-empty small{margin-top:8px;color:rgba(255,255,255,.5)}

.secret-figure { position: fixed; right: -54px; bottom: 18%; z-index: 40; width: 92px; height: 118px; overflow: visible; padding: 0; border: 0; color: white; background: transparent; cursor: crosshair; opacity: .28; transition: right .35s ease, opacity .35s ease, filter .35s ease; filter: grayscale(1) brightness(.35); }
.secret-figure:hover, .secret-figure:focus-visible, .secret-figure.is-found { right: 12px; opacity: 1; filter: none; }
.secret-figure img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(9% 5%,93% 0,100% 86%,78% 100%,0 92%,4% 18%); }
.secret-figure span { position: absolute; right: 80%; bottom: 20px; display: none; width: 150px; padding: 8px; color: #111; background: var(--lime); font-size: 7px; font-weight: 950; letter-spacing: .11em; }
.secret-figure.is-found span { display: block; }

@keyframes marketPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(185,242,39,.14), 0 0 18px rgba(185,242,39,.7); } 50% { box-shadow: 0 0 0 14px rgba(185,242,39,0), 0 0 40px rgba(185,242,39,.9); } }

@media (max-width: 1100px) {
  .portal-header { grid-template-columns: 170px 1fr auto; }
  .portal-nav { gap:4px 10px; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .character-card { min-height: 560px; }
  .member-layout, .trade-layout { grid-template-columns: 1fr; }
  .release-concept { grid-template-columns:1fr; }
  .bodega-preview-grid { grid-template-columns:1fr 1fr; }
  .property-grid { grid-template-columns:repeat(2,1fr); }.deed-grid { grid-template-columns:repeat(2,1fr); }
  #metroMount { position: relative; top: auto; }
  .figure-passport-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .founding-release { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .portal-header { position: relative; grid-template-columns: 1fr auto; padding-block: 8px; }
  .portal-brand { width: 145px; }
  .portal-nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 7px; }
  .portal-nav a { white-space: nowrap; }
  .metro-link { min-height: 34px; padding-inline: 10px; }
  .portal-hero, .waitlist-layout, .character-page { grid-template-columns: 1fr; }
  .prelaunch-notice { grid-template-columns:1fr; margin-inline:14px; }
  .portal-hero { min-height: 0; padding-top: 70px; }
  .section-heading { display: grid; }
  .collection-grid, .drops-grid { grid-template-columns: 1fr; }
  .character-card { min-height: 520px; }
  .drop-card { grid-template-columns: 115px 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .metro-card-flipper { aspect-ratio: 1.586 / 1; }
  .metro-card { padding: 11px; border-radius: 12px; }
  .metro-card-head img { width: 40px; height: 25px; }
  .metro-agency { font-size: 5px; }
  .metro-wordmark small { display: none; }
  .metro-name { font-size: clamp(15px, 5vw, 22px); }
  .metro-swipe { display: grid; }
  .metro-card-controls { margin-left: 0; }
  .metro-card-back { gap: 4px; }
  .metro-card-back .metro-serials li:nth-child(n+3) { display: none; }
  .property-wallet { grid-template-columns:repeat(2,1fr); }.property-layout { grid-template-columns:1fr; }.property-map { min-height:420px; }.property-grid,.deed-grid { grid-template-columns:1fr; }.property-card { min-height:0; }.property-marker b { display:none; }
  .character-story-grid, .ability-grid, .character-connection { grid-template-columns: 1fr; }
  .founding-release__visual,.founding-release__visual img { min-height:300px; }
  .founding-release__visual img { object-fit:contain; background:#2f2f2f; }
  .release-concept picture,.release-concept picture img { min-height:520px; }
  .release-concept dl div { grid-template-columns:1fr; }
  .bodega-preview-grid { grid-template-columns:1fr; }
  .character-connection img { min-height: 330px; }
  .bodega-stage { min-height: 610px; }
  .listing-hotspot b { display: none; }
  .trade-ticket { grid-template-columns: 1fr auto 1fr; }
  .trade-ticket .urban-button { grid-column: 1 / -1; }
  .portal-footer { display: grid; }
  .figure-passport-grid{grid-template-columns:1fr}.figure-passport{grid-template-columns:120px 1fr}.figure-passport>div{padding:18px 14px}
}

.collection-group { position: relative; border-top: 1px solid color-mix(in srgb, var(--collection-accent, var(--orange)) 65%, transparent); }
.collection-group::before { content: ""; position: absolute; top: -4px; left: clamp(16px, 6vw, 90px); width: min(250px, 38vw); height: 7px; background: var(--collection-accent, var(--orange)); box-shadow: 18px 6px 0 color-mix(in srgb, var(--collection-accent, var(--orange)) 35%, transparent); transform: skewX(-18deg); }
.collection-group .section-heading h2 span { color: var(--collection-accent, var(--orange)); }

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

.bryk-demo-notice {
  margin: 0;
  padding: 12px 20px;
  color: #111;
  background: #f5ce47;
  text-align: center;
  font: 700 12px/1.5 system-ui, sans-serif;
}

/* Responsive disclosure navigation and touch-first proportions shared by portal routes. */
.portal-nav-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:46px;
  min-height:44px;
  padding:0 11px;
  border:1px solid var(--line);
  color:var(--white);
  background:#0d1013;
  cursor:pointer;
}
.portal-nav-toggle span { display:block; width:17px; height:2px; background:currentColor; }
.portal-nav-toggle b { margin-left:5px; font-size:9px; letter-spacing:.12em; }

@media (max-width:900px) {
  .portal-header {
    position:sticky;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
    min-height:68px;
    padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
  }
  .portal-brand { width:auto; min-width:0; }
  .portal-brand img { width:82px; height:50px; }
  .portal-nav-toggle { display:inline-flex; }
  .portal-nav {
    position:absolute;
    top:100%;
    right:0;
    left:0;
    display:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    max-height:calc(100dvh - 68px - env(safe-area-inset-top));
    padding:10px max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    overflow-y:auto;
    overscroll-behavior:contain;
    border-bottom:1px solid var(--line);
    background:rgba(5,7,9,.985);
    box-shadow:0 24px 50px rgba(0,0,0,.62);
  }
  .portal-header.nav-open .portal-nav { display:grid; }
  .portal-nav a,.portal-nav a:nth-child(2),.portal-nav a:nth-child(5) {
    display:flex;
    align-items:center;
    min-height:50px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.13);
    background:#0c0f12;
    white-space:normal;
  }
  .portal-nav a[aria-current="page"] { border-color:color-mix(in srgb,var(--orange) 60%,transparent); background:rgba(255,100,0,.09); }
  .city-header-actions { gap:5px; }
  .city-more-menu > summary { min-height:44px; }
  .city-more-menu > nav { max-height:calc(100dvh - 76px - env(safe-area-inset-top)); }
  .metro-link { min-height:44px; padding-inline:11px; white-space:nowrap; transform:none; }
  .portal-main { padding-right:max(18px,env(safe-area-inset-right)); padding-left:max(18px,env(safe-area-inset-left)); }
  .portal-hero,.waitlist-layout,.character-page { grid-template-columns:1fr; }
  .portal-hero { min-height:0; padding-top:clamp(58px,9vw,78px); }
  .portal-form input,.portal-form textarea,.portal-form select { min-height:50px; font-size:16px; }
  .deed-card input { font-size:16px; }
  .urban-button,.portal-form button { min-height:48px; }
}

@media (max-width:760px) {
  .portal-main { padding-right:max(14px,env(safe-area-inset-right)); padding-bottom:max(68px,env(safe-area-inset-bottom)); padding-left:max(14px,env(safe-area-inset-left)); }
  .portal-hero { gap:24px; padding-top:clamp(48px,14vw,70px); padding-bottom:38px; }
  .portal-hero h1,.character-info h1 { max-width:100%; font-size:clamp(44px,15vw,72px); overflow-wrap:anywhere; }
  .section-heading h2 { max-width:100%; font-size:clamp(38px,12vw,62px); overflow-wrap:anywhere; }
  .hero-note { padding:19px; box-shadow:8px 8px 0 rgba(255,100,0,.12); }
  .hero-note p,.section-heading > p { font-size:13px; line-height:1.65; }
  .portal-section { padding-top:clamp(48px,13vw,68px); }
  .character-card { min-height:clamp(430px,125vw,540px); }
  .character-meta { inset:auto 15px 15px; }
  .character-meta h3 { font-size:clamp(29px,9vw,40px); }
  .form-panel { padding:clamp(20px,6vw,30px); box-shadow:10px 10px 0 rgba(255,100,0,.08); }
  .character-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .character-actions .urban-button { min-width:0; padding-inline:10px; text-align:center; }
  .portal-footer { padding-right:max(14px,env(safe-area-inset-right)); padding-bottom:max(24px,env(safe-area-inset-bottom)); padding-left:max(14px,env(safe-area-inset-left)); line-height:1.55; }
  .secret-figure { right:-66px; bottom:88px; transform:scale(.82); transform-origin:right center; }
}

@media (max-width:560px) {
  .portal-header { grid-template-columns:minmax(58px,1fr) auto auto; }
  .portal-brand img { width:68px; height:44px; }
  .portal-nav-toggle { min-width:44px; padding-inline:9px; }
  .portal-nav-toggle b { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .portal-nav { grid-template-columns:1fr; }
  .portal-nav a { min-height:48px; }
  .city-header-actions { min-width:0; }
  .city-more-menu > summary { min-width:44px; padding-inline:8px; font-size:8px; }
  .metro-link { max-width:94px; padding-inline:8px; font-size:8px; line-height:1.15; letter-spacing:.06em; white-space:normal; text-align:center; }
  .portal-hero::after { right:-3px; bottom:18px; font-size:30vw; }
  .eyebrow { font-size:8px; line-height:1.35; letter-spacing:.14em; }
  .eyebrow::before { width:24px; }
  .drop-card { grid-template-columns:104px minmax(0,1fr); min-height:230px; }
  .drop-copy { min-width:0; padding:19px 16px; }
  .drop-copy h3 { font-size:24px; overflow-wrap:anywhere; }
  .countdown b { font-size:14px; }
  .metro-card-flipper { height:clamp(220px,68vw,280px); aspect-ratio:auto; }
  .metro-card-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .profile-actions,.character-actions { display:grid; grid-template-columns:1fr; }
  .trade-ticket { grid-template-columns:1fr; }
  .trade-ticket .urban-button { grid-column:auto; }
  .property-wallet { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:400px) {
  .portal-main { padding-right:max(12px,env(safe-area-inset-right)); padding-left:max(12px,env(safe-area-inset-left)); }
  .portal-brand img { width:58px; }
  .metro-link { max-width:78px; font-size:7px; }
  .drop-card { grid-template-columns:1fr; }
  .drop-card img { width:100%; height:210px; }
  .character-card { min-height:420px; }
  .countdown { gap:2px; }
  .countdown span { padding-inline:2px; }
}

@media (min-width:700px) and (max-width:960px) and (max-height:600px) and (orientation:landscape) {
  .portal-header { min-height:60px; padding-top:max(6px,env(safe-area-inset-top)); padding-right:max(12px,env(safe-area-inset-right)); padding-bottom:6px; padding-left:max(12px,env(safe-area-inset-left)); }
  .portal-nav { max-height:calc(100dvh - 60px - env(safe-area-inset-top)); }
  .city-more-menu > nav { max-height:calc(100dvh - 68px - env(safe-area-inset-top)); }
  .portal-main { padding-right:max(18px,env(safe-area-inset-right)); padding-left:max(18px,env(safe-area-inset-left)); }
  .portal-hero { padding-top:38px; padding-bottom:30px; }
  .portal-section { padding-top:44px; }
  .character-card { min-height:430px; }
}

@media (hover:none),(pointer:coarse) {
  .portal-nav a,.metro-link,.city-more-menu > summary,.city-more-menu > nav a,.urban-button,.character-card,.drop-card,button { touch-action:manipulation; }
  .portal-nav a,.metro-link,.city-more-menu > summary,.city-more-menu > nav a,.metro-card-controls button,.metro-card-controls a,.property-example summary { min-height:44px; }
  .portal-form input,.portal-form textarea,.portal-form select,.deed-card input { font-size:16px; }
  .urban-button.small,.listing-hotspot { min-width:44px; min-height:44px; }
  .character-card:hover img,.character-card.is-mystery:hover img { transform:none; }
  .character-card:hover::after { opacity:0; }
  .urban-button:hover { transform:none; box-shadow:6px 6px 0 rgba(121,108,255,.48); }
}

@media (max-width:760px) {
  .eyebrow,.portal-form label,.character-meta small,.drop-copy > small { font-size:10px; line-height:1.35; }
  .urban-button,.metro-link,.character-meta .card-route { font-size:10px; line-height:1.3; }
  .character-meta p,.drop-copy p,.demo-note,.form-message { font-size:11px; }
  .portal-footer { font-size:9px; }
}

/* Production refinement: shared hierarchy, editorial heroes, quieter surfaces. */
body { font-family:var(--bryk-font-ui); line-height:1.5; }
.portal-hero h1,.section-heading h2,.character-info h1,.character-meta h3,.drop-copy h3 { font-family:var(--bryk-font-display); }
.portal-header { border-color:var(--bryk-line); box-shadow:0 8px 30px rgba(0,0,0,.2); }
.portal-nav a { font-size:11px; letter-spacing:.1em; }
.metro-link,.urban-button { box-shadow:4px 4px 0 rgba(121,108,255,.34); transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
.portal-hero--editorial { min-height:clamp(500px,64vh,720px); margin-top:24px; padding:clamp(42px,7vw,90px) clamp(20px,4vw,58px); overflow:hidden; border:1px solid var(--bryk-line-strong); isolation:isolate; }
.portal-hero--editorial::before { content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(90deg,rgba(4,6,8,.97) 0%,rgba(4,6,8,.78) 38%,rgba(4,6,8,.18) 74%,rgba(4,6,8,.4) 100%),linear-gradient(0deg,rgba(4,6,8,.88),transparent 54%),var(--hero-art); background-position:center; background-size:cover; }
.portal-hero--editorial::after { z-index:-1; color:rgba(255,255,255,.055); }
.portal-hero--collection { --hero-art:url("/assets/editorial/collection-archive-night-v1.webp"); }
.portal-hero--drops { --hero-art:url("/assets/editorial/collector-starter-kit-v1.webp"); }
.portal-hero--editorial .hero-note { align-self:end; border-color:var(--bryk-line-strong); background:rgba(7,9,11,.84); box-shadow:0 18px 50px rgba(0,0,0,.34); backdrop-filter:blur(12px); }
.portal-hero--editorial h1 span { text-shadow:4px 4px 0 rgba(121,108,255,.46); }
.section-heading h2 span,.character-info h1 span { -webkit-text-stroke:0; text-shadow:3px 3px 0 rgba(121,108,255,.34); }
.hero-note,.form-panel,.character-card,.drop-card,.deed-card,.ability-card { border-color:var(--bryk-line); box-shadow:var(--bryk-shadow-soft); }
.character-card::after { display:none; }
.character-card:hover { border-color:var(--bryk-line-strong); }
.character-card:hover img { transform:scale(1.035); }
.character-status,.edition-chip,.character-meta small,.character-meta p,.character-meta .card-route,.drop-copy>small { font-size:max(.68rem,11px); }
.drop-copy p,.property-card p,.figure-passport p { font-size:max(.875rem,14px); }
.portal-form label,.property-card dt,.figure-passport dt { font-size:max(.68rem,11px); }

@media (max-width:760px) {
  .portal-hero--editorial { grid-template-columns:1fr; min-height:650px; margin-top:12px; padding:36px 18px 22px; align-content:space-between; }
  .portal-hero--editorial::before { background-image:linear-gradient(180deg,rgba(4,6,8,.9) 0%,rgba(4,6,8,.22) 46%,rgba(4,6,8,.94) 78%),var(--hero-art-compact); background-position:center; }
  .portal-hero--collection { --hero-art-compact:url("/assets/editorial/collection-archive-night-v1-compact.webp"); }
  .portal-hero--drops { --hero-art-compact:url("/assets/editorial/collector-starter-kit-v1-compact.webp"); }
  .portal-hero--editorial .hero-note { padding:18px; }
  .section-heading { gap:18px; }
}

#gold-signal { scroll-margin-top:calc(var(--bryk-header-height,82px) + 44px); }