@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.map-quickbar { position:absolute; z-index:12; bottom:max(10px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; gap:5px; padding:5px; background:rgba(16,28,21,.9); border:1px solid #53664b; border-radius:5px; touch-action:none; }
.map-slot { width:46px; height:45px; padding:3px; border:1px solid #738465; background:#293b2b; color:#e7efd9; display:grid; justify-items:center; align-content:center; gap:2px; touch-action:none; user-select:none; -webkit-touch-callout:none; cursor:pointer; }
.map-slot[aria-pressed="true"] { border-color:#d3f070; background:#445a30; box-shadow:inset 0 0 0 1px #d3f070; }
.map-slot:disabled { color:#9aa48e; border-color:#495645; background:#1b251d; opacity:.7; cursor:default; }
.map-slot small { font:700 8px monospace; }
.map-slot-model { height:22px; font:16px monospace; }
.map-slot-model svg { width:25px; height:22px; fill:currentColor; stroke:currentColor; stroke-width:1.5; }
@media (max-width:700px) { .map-slot { width:35px; height:40px; } .map-quickbar { gap:3px; padding:3px; } }

:root {
    color-scheme: dark;
    --ink: #111713;
    --panel: #19211c;
    --panel-hi: #202b24;
    --paper: #e5e9d9;
    --muted: #98a394;
    --line: rgba(217, 230, 210, .13);
    --acid: #d4f36a;
    --rust: #ed8063;
    --mint: #9dd6b8;
    --violet: #baa8ed;
    --font: 'Space Grotesk', sans-serif;
    --mono: 'DM Mono', monospace;
}

.ammo-storage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.ammo-box { border:1px solid #52634b; background:#141d14; padding:10px; display:flex; flex-direction:column; }
.ammo-box span { font-size:11px; text-transform:uppercase; color:#a9b8a3; }
.ammo-box strong { font-size:22px; color:#d5ec91; }
.ammo-storage > p { grid-column:1/-1; margin:0; font-size:12px; }
.weapon-quantity { margin-left:auto; font:700 14px monospace; color:#d5ec91; }
.gear-card.quantity-stack { box-shadow:3px 3px 0 #233021,6px 6px 0 #3b4935; margin-right:6px; margin-bottom:6px; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--paper); font-family: var(--font); }
body { min-width: 320px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
::selection { background: var(--acid); color: var(--ink); }

.app-shell { min-height: 100dvh; overflow: hidden; position: relative; }
.app-shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.topbar { height: 76px; padding: 0 clamp(20px, 5vw, 76px); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); position:relative; z-index:6; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:-.06em; font-size:19px; }
.brand-mark { height:30px; width:30px; display:grid; place-items:center; border:1px solid var(--acid); color:var(--acid); font:500 14px var(--mono); transform:rotate(-8deg); }
.brand em { color:var(--muted); font-style:normal; font-weight:400; }
.top-meta { color:var(--muted); font:11px var(--mono); letter-spacing:.13em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(212,243,106,.11); }
.sign-out-form { margin:0 0 0 10px; }
.sign-out-button { min-height:36px; padding:0 10px; border:1px solid var(--line); background:transparent; color:var(--paper); cursor:pointer; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.sign-out-button:hover { border-color:var(--acid); color:var(--acid); }
.layout-main { max-width:1360px; margin:0 auto; padding:0 clamp(20px, 5vw, 76px) 72px; }
.page-head { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:42px 0 26px; border-bottom:1px solid var(--line); }
.eyebrow { font:11px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--acid); margin:0 0 10px; }
h1, h2, h3, p { margin-top:0; }
h1 { margin:0; font-size:clamp(35px, 5vw, 64px); line-height:.96; letter-spacing:-.07em; font-weight:600; }
.page-subtitle { color:var(--muted); max-width:460px; font-size:14px; line-height:1.6; margin:10px 0 0; }
.mono { font-family:var(--mono); }
.small-label { color:var(--muted); font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.panel { background:var(--panel); border:1px solid var(--line); }
.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 20px; border:1px solid var(--line); background:transparent; color:var(--paper); cursor:pointer; font-size:13px; font-weight:600; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { transform:translateY(-2px); border-color:rgba(212,243,106,.7); }
.btn-primary { background:var(--acid); border-color:var(--acid); color:var(--ink); }
.btn-primary:hover { background:#e0ff83; }
.btn-quiet { min-height:42px; padding:0 14px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.link-arrow { color:var(--acid); font:12px var(--mono); }
.notice { border-left:2px solid var(--rust); padding:11px 14px; background:rgba(237,128,99,.08); color:#ffd0c3; font-size:13px; }
.status-line { min-height:22px; color:var(--muted); font:11px var(--mono); }
.error-state { color:#ffc5b6; padding:14px; border:1px solid rgba(237,128,99,.35); background:rgba(237,128,99,.06); }
.skeleton { border-radius:2px; background:linear-gradient(90deg, #202a23 25%, #2a362e 48%, #202a23 70%); background-size:240% 100%; animation:shimmer 1.5s ease infinite; }
@keyframes shimmer { to { background-position:-240% 0; } }
.reveal { animation:enter .55s both cubic-bezier(.2,.75,.25,1); }
.reveal-delay { animation-delay:.12s; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.mobile-nav { display:none; }
.rotate-notice { display:none; }

/* Account entry */
.landing { min-height:calc(100dvh - 76px); display:grid; grid-template-columns:1.13fr .87fr; align-items:center; gap:clamp(34px,7vw,112px); padding:clamp(44px,9vh,110px) clamp(20px, 8vw, 120px); max-width:1500px; margin:auto; }
.hero-copy { position:relative; z-index:2; }
.hero-kicker { display:flex; gap:12px; align-items:center; color:var(--acid); font:11px var(--mono); text-transform:uppercase; letter-spacing:.16em; margin-bottom:25px; }
.hero-kicker::before { content:""; width:34px; height:1px; background:var(--acid); }
.hero-title { font-size:clamp(60px, 10vw, 142px); line-height:.77; letter-spacing:-.105em; font-weight:600; max-width:720px; }
.hero-title span { color:var(--acid); display:block; }
.hero-description { max-width:430px; margin:30px 0 31px; color:#aeb8aa; font-size:15px; line-height:1.65; }
.entry-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-footnote { margin-top:26px; color:#7c897d; font:10px var(--mono); letter-spacing:.1em; }
.world-art { position:relative; min-height:440px; display:flex; align-items:center; justify-content:center; }
.world-frame { position:relative; height:min(64vw, 500px); width:min(100%, 520px); min-height:360px; overflow:hidden; border:1px solid rgba(212,243,106,.34); background:#1b2a22; box-shadow:18px 18px 0 rgba(212,243,106,.04); }
.world-frame::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,24,20,.03) 15%,#17221c 92%), radial-gradient(ellipse at 58% 31%,rgba(213,243,106,.13),transparent 38%); }
.world-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(211,241,167,.1) 1px, transparent 1px),linear-gradient(90deg,rgba(211,241,167,.1) 1px, transparent 1px); background-size:36px 36px; transform:perspective(390px) rotateX(56deg) scale(1.6); transform-origin:bottom; }
.moon { position:absolute; width:104px; height:104px; border:1px solid rgba(212,243,106,.58); border-radius:50%; top:17%; right:17%; box-shadow:0 0 70px rgba(212,243,106,.15), inset 0 0 36px rgba(212,243,106,.1); }
.moon::after { content:""; position:absolute; inset:17px; background:var(--acid); border-radius:50%; opacity:.72; }
.terrain { position:absolute; bottom:16%; left:-5%; width:110%; height:42%; background:#28382c; clip-path:polygon(0 58%,15% 50%,25% 67%,37% 29%,48% 43%,58% 18%,69% 39%,78% 25%,90% 54%,100% 42%,100% 100%,0 100%); border-top:2px solid #70865a; }
.platform { position:absolute; background:#91b66a; border:1px solid #d4f36a; height:11px; box-shadow:inset 0 -4px rgba(36,57,39,.65); transform:skewX(-25deg); }
.platform.p1 { width:120px; left:13%; bottom:35%; }
.platform.p2 { width:86px; left:47%; bottom:50%; }
.platform.p3 { width:110px; right:7%; bottom:29%; }
.pixel-runner { position:absolute; bottom:37%; left:35%; width:26px; height:37px; background:var(--rust); box-shadow:0 -11px 0 -2px #f4bc92, -10px 11px 0 -4px var(--paper), 10px 10px 0 -4px var(--paper); animation:bob 2.5s ease-in-out infinite; }
.pixel-runner::before { content:""; position:absolute; width:17px; height:6px; background:#263329; top:10px; left:4px; }
.spark { position:absolute; color:var(--acid); font:14px var(--mono); }
.spark.s1 { top:38%; left:25%; }.spark.s2 { top:57%; right:25%; }.spark.s3 { top:25%; left:48%; }
@keyframes bob { 50% { transform:translateY(-8px); } }
.world-caption { position:absolute; bottom:15px; left:20px; right:20px; display:flex; justify-content:space-between; color:#afbdab; font:10px var(--mono); letter-spacing:.12em; }
.floating-index { position:absolute; top:12%; left:-18px; background:var(--acid); color:var(--ink); padding:9px 12px; font:10px var(--mono); letter-spacing:.1em; transform:rotate(-4deg); }
.stamp { position:absolute; bottom:11%; right:-16px; font:10px var(--mono); letter-spacing:.16em; color:var(--paper); border:1px solid var(--line); padding:9px 11px; background:var(--ink); transform:rotate(3deg); }

/* Auth */
.auth-stage { min-height:calc(100dvh - 76px); display:grid; place-items:center; padding:32px 20px; }
.auth-card { width:min(100%, 520px); padding:clamp(24px,5vw,48px); border:1px solid var(--line); background:linear-gradient(145deg,#202a23,#151d18); }
.auth-title { font-size:clamp(34px,6vw,55px); letter-spacing:-.07em; margin:0 0 12px; }
.auth-form { display:grid; gap:16px; margin-top:24px; }
.auth-field { display:grid; gap:7px; color:var(--muted); font-size:12px; }
.auth-field input { width:100%; box-sizing:border-box; min-height:46px; border:1px solid var(--line); border-radius:0; background:#111813; color:var(--paper); padding:0 13px; font-size:14px; }
.auth-field input:focus { border-color:var(--acid); outline:1px solid var(--acid); }
.remember-row { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; cursor:pointer; }
.remember-row input { width:16px; height:16px; margin:0; accent-color:var(--acid); }
.auth-submit { width:100%; margin-top:2px; }
.mount-help { color:var(--muted); font-size:13px; max-width:300px; line-height:1.5; margin:10px auto 0; }
.auth-policy { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.auth-switch { margin:20px 0 0; color:var(--muted); font-size:13px; }
.auth-switch a { color:var(--acid); text-decoration:underline; text-underline-offset:4px; }
.login-stage { box-sizing:border-box; }
.login-card { padding:24px; background:#151d18; }
.login-card h1 { margin:0 0 10px; font-size:25px; letter-spacing:-.03em; }
.login-description { margin:0 0 18px; font-size:13px; line-height:1.5; color:var(--muted); }
.login-form { grid-template-columns:1fr 1fr; gap:12px; margin-top:0; }
.login-form .remember-row,.login-form .auth-submit { grid-column:1 / -1; }
.login-card .auth-switch { margin-top:14px; }
@media (max-width:540px) {
    .login-form { grid-template-columns:1fr; }
}
@media (orientation:landscape) and (max-height:500px) {
    .login-card { padding:18px 22px; }
    .login-card h1 { font-size:23px; margin-bottom:8px; }
    .login-description { margin-bottom:12px; font-size:12px; }
    .login-form { gap:10px; }
    .login-form .auth-field input { min-height:38px; }
    .login-form .auth-submit { min-height:38px; padding:9px 14px; }
    .login-card .auth-switch { margin-top:10px; }
}

/* Game menu */
.player-emblem { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--acid); color:var(--acid); font:14px var(--mono); transform:rotate(-4deg); flex:none; }
.credits { text-align:right; font:12px var(--mono); color:var(--acid); }
.credits small { display:block; color:var(--muted); font-size:9px; letter-spacing:.12em; margin-bottom:5px; }
.game-menu { width:100%; max-width:none; height:calc(100dvh - 76px); min-height:0; box-sizing:border-box; position:relative; display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,24vw,320px); grid-template-rows:68px minmax(0,1fr); gap:0 clamp(28px,6vw,92px); padding:22px clamp(28px,5vw,78px) 100px; overflow:hidden; }
.game-menu-profile { grid-column:1; grid-row:1; align-self:center; display:flex; align-items:center; gap:14px; min-width:0; }
.menu-emblem { width:42px; height:42px; }
.menu-player-info { min-width:0; display:grid; gap:4px; }
.menu-player-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; letter-spacing:-.04em; }
.menu-player-info .small-label { font-size:9px; margin:0; }
.menu-credits { margin-left:auto; }
.squad-stage { grid-column:1; grid-row:2; min-width:0; min-height:0; position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; padding:8px 0 0; }
.squad-stage::before { content:""; position:absolute; z-index:-2; inset:4% 1% 2%; background:radial-gradient(ellipse at 52% 52%,rgba(173,199,114,.13),transparent 57%),linear-gradient(140deg,transparent 35%,rgba(110,135,92,.055) 35.2%,transparent 35.6%),linear-gradient(34deg,transparent 52%,rgba(110,135,92,.07) 52.2%,transparent 52.6%); }
.stage-signal { position:absolute; z-index:-1; width:min(38vw,380px); aspect-ratio:1; left:52%; top:55%; border:1px solid rgba(212,243,106,.12); border-radius:50%; transform:translate(-50%,-50%); }
.stage-signal::before,.stage-signal::after { content:""; position:absolute; inset:10%; border:1px dashed rgba(212,243,106,.13); border-radius:50%; }
.stage-signal::after { inset:29%; border-style:solid; transform:rotate(45deg); border-radius:3px; }
.squad-stage-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; position:relative; }
.squad-stage-heading .eyebrow { width:100%; margin-bottom:1px; }
.squad-stage-heading h1 { margin:0; font-size:clamp(30px,4vw,52px); line-height:.94; letter-spacing:-.075em; }
.stage-subtitle { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.squad-roster { display:flex; justify-content:center; align-items:stretch; gap:10px; position:relative; width:100%; margin-top:23px; }
.squad-member { flex:1; min-width:0; max-width:174px; min-height:142px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 8px 12px; border:1px solid rgba(207,222,199,.17); background:linear-gradient(160deg,rgba(38,51,39,.72),rgba(18,25,20,.88)); text-align:center; }
.squad-member-index { position:absolute; top:9px; left:10px; color:var(--muted); font:9px var(--mono); letter-spacing:.08em; }
.squad-avatar { width:48px; height:56px; display:grid; place-items:center; border:1px solid rgba(212,243,106,.45); background:linear-gradient(145deg,rgba(212,243,106,.13),rgba(16,22,18,.35)); color:var(--acid); font:14px var(--mono); transform:rotate(-3deg); }
.squad-member strong { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:11px; font-size:12px; letter-spacing:-.02em; }
.squad-member-role { margin-top:5px; color:var(--muted); font:8px var(--mono); letter-spacing:.08em; }
.squad-member.is-current-player { border-color:rgba(212,243,106,.56); box-shadow:inset 0 0 20px rgba(212,243,106,.04); }
.squad-member.is-current-player .squad-member-role { color:var(--acid); }
.squad-open-slot { border-style:dashed; background:rgba(20,28,22,.48); }
.squad-open-slot .squad-avatar { border-style:dashed; border-color:rgba(212,243,106,.22); background:transparent; color:rgba(212,243,106,.54); font-size:19px; }
.stage-find-crew { align-self:center; margin-top:15px; color:var(--acid); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.stage-find-crew span { display:inline-block; margin-left:5px; transition:transform .18s ease; }
.stage-find-crew:hover span { transform:translate(3px,-3px); }
.game-menu-actions { grid-column:2; grid-row:1 / 3; align-self:center; display:flex; flex-direction:column; padding-left:clamp(18px,2.5vw,38px); border-left:1px solid var(--line); }
.action-rail-label { margin:0 0 14px; font-size:9px; }
.menu-action { width:100%; min-height:64px; box-sizing:border-box; display:grid; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:8px; padding:0 4px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--paper); text-align:left; font-size:16px; font-weight:600; letter-spacing:-.03em; text-transform:uppercase; transition:color .18s ease,transform .18s ease,border-color .18s ease; }
.menu-action:hover { color:var(--acid); border-color:rgba(212,243,106,.45); transform:translateX(-4px); }
.menu-action-primary { color:var(--acid); }
.menu-action-index { color:var(--muted); font:9px var(--mono); }
.menu-action-arrow { justify-self:end; color:var(--muted); font-size:15px; }
.menu-action:hover .menu-action-arrow,.menu-action-primary .menu-action-arrow { color:var(--acid); }
.menu-quit-form { margin:0; }
.player-xp-label { display:block; margin-top:5px; color:var(--muted); font:9px var(--mono); letter-spacing:.04em; }
.menu-quit-form button { cursor:pointer; }
.armoury-dock { position:absolute; z-index:2; bottom:23px; left:50%; min-width:min(330px,calc(100% - 40px)); min-height:58px; box-sizing:border-box; display:flex; align-items:center; gap:16px; padding:0 20px; border:1px solid var(--acid); background:var(--acid); color:var(--ink); box-shadow:0 8px 36px rgba(0,0,0,.28); transform:translateX(-50%); transition:background .18s ease,transform .18s ease; }
.armoury-dock:hover { background:#e0fa8e; transform:translate(-50%,-3px); }
.armoury-dock-index { font:8px var(--mono); letter-spacing:.08em; }
.armoury-dock strong { font-size:15px; letter-spacing:.04em; text-transform:uppercase; }
.armoury-dock-arrow { margin-left:auto; font:18px var(--mono); }
.game-menu-loading,.game-menu-error { grid-column:1 / -1; align-self:center; justify-self:center; display:flex; align-items:center; gap:14px; }
.game-menu-loading { color:var(--muted); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.game-menu-loading .player-emblem { flex:none; }
.game-menu-error { flex-direction:column; max-width:460px; text-align:center; }

/* Play / lobbies */
.play-content { display:grid; grid-template-columns:280px 1fr; gap:24px; padding-top:25px; }
.mode-selector { padding:17px; align-self:start; }
.mode-choice { width:100%; min-height:68px; border:1px solid transparent; background:transparent; display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; padding:0 14px; margin-top:8px; }
.mode-choice.selected { border-color:rgba(212,243,106,.55); background:rgba(212,243,106,.07); }
.mode-choice strong { display:block; font-size:15px; }
.mode-choice span { display:block; color:var(--muted); font:10px var(--mono); margin-top:5px; }
.mode-mark { color:var(--acid); font:14px var(--mono); }
.room-area { min-width:0; }
.room-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; }
.room-toolbar h2 { font-size:23px; letter-spacing:-.05em; margin:0; }
.room-list { display:grid; gap:9px; }
.room-row { display:grid; grid-template-columns:minmax(120px,1fr) 100px 90px auto; gap:14px; align-items:center; padding:16px 18px; }
.room-host { font-weight:600; }.room-code { color:var(--acid); font:11px var(--mono); letter-spacing:.13em; }
.room-count { color:var(--muted); font:11px var(--mono); }
.room-mode-tag { color:var(--muted); font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.room-code-input { min-height:42px; width:min(220px,32vw); border:1px solid var(--line); border-radius:0; background:#111813; color:var(--paper); padding:0 12px; font:11px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.room-code-input::placeholder { color:#738073; }
.empty-rooms { min-height:190px; border:1px dashed var(--line); display:grid; place-items:center; text-align:center; padding:25px; color:var(--muted); }
.empty-rooms strong { display:block; color:var(--paper); font-size:17px; margin-bottom:7px; }
.lobby-active { margin-top:18px; padding:20px; border-color:rgba(212,243,106,.4); }
.lobby-active-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lobby-active h3 { margin:0; font-size:20px; }
.player-chips { display:flex; gap:8px; flex-wrap:wrap; margin:17px 0 0; }
.player-chip { padding:8px 11px; background:var(--panel-hi); border:1px solid var(--line); font-size:12px; }
.join-error { margin-top:12px; }

/* Settings */
.settings-content { max-width:850px; padding-top:25px; }
.settings-group { margin-bottom:14px; }
.settings-group-head { padding:18px 22px; border-bottom:1px solid var(--line); }
.settings-group-head h2 { font-size:19px; margin:0; letter-spacing:-.04em; }
.setting-row { min-height:76px; padding:17px 22px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:0; }
.setting-title { font-size:14px; font-weight:600; }.setting-description { margin:4px 0 0; color:var(--muted); font-size:12px; }
.toggle { position:relative; width:54px; height:30px; border:1px solid #526052; background:#253027; border-radius:20px; padding:3px; cursor:pointer; flex:none; transition:background .18s ease; }
.toggle[aria-checked="true"] { background:var(--acid); border-color:var(--acid); }
.toggle::after { content:""; width:22px; height:22px; display:block; background:#8a9989; border-radius:50%; transition:transform .18s ease, background .18s ease; }
.toggle[aria-checked="true"]::after { transform:translateX(23px); background:var(--ink); }
.range-row { display:grid; grid-template-columns:1fr minmax(120px,260px) 42px; gap:18px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); }
input[type=range] { accent-color:var(--acid); width:100%; cursor:pointer; }
.range-value { text-align:right; color:var(--acid); font:11px var(--mono); }
.settings-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }

/* Armoury */
.armoury-page { padding-top:10px; }
.armoury-page .page-head { padding-top:18px; padding-bottom:19px; }
.armoury-page .page-head h1 { font-size:clamp(34px,5vw,54px); }
.armory-workbench { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,290px); gap:14px; align-items:start; }
.armory-inventory,.loadout-panel { min-width:0; border:1px solid var(--line); background:rgba(25,33,26,.76); }
.armory-category-bar { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px; border-bottom:1px solid var(--line); }
.armory-category-bar .eyebrow { margin:0 0 4px; font-size:8px; }
.armory-category-bar h2,.loadout-panel-heading h2 { margin:0; font-size:19px; letter-spacing:-.05em; }
.armory-category-list { display:flex; align-items:center; gap:6px; }
.armory-category { min-height:36px; display:flex; align-items:center; gap:13px; padding:0 12px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font:10px var(--mono); letter-spacing:.07em; text-transform:uppercase; transition:color .16s ease,border-color .16s ease,background .16s ease; }
.armory-category span { color:inherit; opacity:.7; font-size:8px; }
.armory-category:hover,.armory-category.active { border-color:var(--acid); color:var(--acid); }
.armory-category.active { background:rgba(212,243,106,.08); }
.armory-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; padding:10px; }
.gear-card { min-height:168px; padding:12px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; border:1px solid rgba(207,222,199,.14); background:linear-gradient(155deg,rgba(38,51,39,.7),rgba(18,25,20,.9)); }
.gear-card::before { content:""; position:absolute; top:-42px; right:-38px; width:94px; height:94px; border:1px solid var(--rarity); transform:rotate(45deg); opacity:.2; pointer-events:none; }
.gear-card-top { display:flex; align-items:center; justify-content:space-between; }
.gear-icon { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--rarity); color:var(--rarity); font:11px var(--mono); transform:rotate(-4deg); }
.rarity { color:var(--rarity); font:8px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.gear-card-heading { display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; }
.gear-card h3 { margin:0; font-size:15px; line-height:1.15; letter-spacing:-.045em; }
.starter-label { color:var(--acid); font:7px var(--mono); letter-spacing:.08em; }
.gear-description { min-height:25px; margin:0; color:#a3aea1; font-size:10px; line-height:1.35; }
.gear-tags { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:auto; }
.gear-tags span { color:var(--muted); font:7px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.gear-tags .unlimited-ammo { color:var(--acid); }
.loadout-action { min-height:31px; padding:0 9px; border:1px solid rgba(212,243,106,.55); background:transparent; color:var(--acid); cursor:pointer; font:8px var(--mono); letter-spacing:.07em; text-transform:uppercase; transition:background .16s ease,color .16s ease,border-color .16s ease; }
.loadout-action:hover:not(:disabled) { background:var(--acid); color:var(--ink); }
.loadout-action.equipped { border-color:var(--line); color:var(--muted); }
.loadout-action:disabled { opacity:.52; cursor:wait; }
.gear-slot-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.gear-slot-actions .loadout-action { padding:0 4px; font-size:7px; }
.gear-unowned { color:var(--muted); font:8px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.loadout-panel { padding:13px; }
.loadout-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:1px 1px 11px; }
.loadout-panel-heading .eyebrow { margin:0 0 4px; font-size:8px; }
.loadout-live-mark { color:var(--acid); font:7px var(--mono); letter-spacing:.1em; }
.loadout-slot-list { display:grid; gap:5px; }
.loadout-slot { min-height:48px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; gap:4px 8px; padding:7px 9px; border:1px solid rgba(207,222,199,.12); background:rgba(13,19,15,.38); }
.loadout-slot.occupied { border-color:rgba(212,243,106,.35); }
.loadout-slot-name { color:var(--muted); font:7px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.loadout-slot strong { overflow:hidden; color:var(--paper); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.loadout-slot-empty { align-self:center; color:#687368; font:7px var(--mono); letter-spacing:.09em; }
.loadout-slot small { color:var(--acid); font:7px var(--mono); }
.loadout-note { margin:10px 1px 0; color:var(--muted); font-size:9px; line-height:1.4; }
.armory-empty { padding:35px 14px; color:var(--muted); font-size:12px; }
.armoury-loading { min-height:240px; display:flex; align-items:flex-start; gap:10px; padding-top:16px; }
.armoury-loading .skeleton { display:block; }
.armory-status { min-height:15px; margin:8px 0 0; color:var(--acid); font:9px var(--mono); }
.rarity-common { --rarity:#a6b1a2; }.rarity-uncommon { --rarity:#9dd6b8; }.rarity-rare { --rarity:#8cbce0; }.rarity-epic { --rarity:#baa8ed; }.rarity-legendary { --rarity:#f1bd6a; }

@media (max-width: 760px) {
    .topbar { height:64px; padding:0 18px; }
    .top-meta { font-size:9px; }
    .layout-main { padding:0 18px 92px; }
    .page-head { padding:32px 0 21px; align-items:flex-start; flex-direction:column; gap:10px; }
    .landing { min-height:calc(100dvh - 64px); grid-template-columns:1fr; padding:54px 22px 44px; gap:20px; }
    .hero-title { font-size:clamp(65px,18vw,108px); }
    .hero-description { margin:24px 0; }
    .world-art { min-height:300px; }
    .world-frame { height:300px; min-height:0; width:min(100%,460px); }
    .moon { width:76px; height:76px; }
    .game-menu { height:calc(100dvh - 64px); grid-template-columns:minmax(0,1fr) minmax(158px,29vw); grid-template-rows:56px minmax(0,1fr); gap:0 16px; padding:12px 18px 82px; }
    .menu-emblem { width:36px; height:36px; }
    .menu-player-info .small-label { font-size:8px; }
    .menu-player-info strong { font-size:14px; }
    .menu-credits { font-size:10px; }
    .menu-credits small { font-size:8px; }
    .squad-stage-heading { display:block; }
    .squad-stage-heading h1 { margin:3px 0 4px; font-size:clamp(26px,5vw,38px); }
    .squad-stage-heading .eyebrow { font-size:8px; }
    .stage-subtitle { font-size:10px; }
    .squad-roster { gap:6px; margin-top:13px; }
    .squad-member { min-height:116px; padding:17px 4px 9px; }
    .squad-member-index { top:7px; left:6px; font-size:8px; }
    .squad-avatar { width:38px; height:45px; font-size:11px; }
    .squad-member strong { margin-top:8px; font-size:10px; }
    .squad-member-role { font-size:7px; letter-spacing:0; }
    .stage-find-crew { margin-top:9px; font-size:8px; }
    .game-menu-actions { padding-left:14px; }
    .action-rail-label { margin-bottom:9px; font-size:8px; }
    .menu-action { min-height:54px; grid-template-columns:20px minmax(0,1fr) 14px; gap:5px; font-size:12px; }
    .menu-action-index { font-size:8px; }
    .menu-action-arrow { font-size:13px; }
    .armoury-dock { bottom:10px; min-height:48px; gap:10px; padding:0 15px; }
    .armoury-dock-index { font-size:7px; }
    .armoury-dock strong { font-size:12px; }
    .play-content { grid-template-columns:1fr; gap:16px; }
    .mode-selector { padding:12px; }
    .mode-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .mode-choice { margin:7px 0 0; min-height:60px; padding:0 10px; }
    .room-row { grid-template-columns:1fr auto; gap:9px; padding:14px; }
    .room-row .room-count { grid-column:1; }
    .room-row .room-mode-tag { grid-column:1; }
    .room-row .join-btn { grid-column:2; grid-row:1 / span 3; }
    .armory-workbench { grid-template-columns:1fr; }
    .loadout-slot-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .armory-item-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
    .armoury-loading { flex-wrap:wrap; }
    .settings-content { padding-top:18px; }
    .range-row { grid-template-columns:1fr 120px 40px; gap:10px; padding:15px; }
    .setting-row { padding:15px; }
    .settings-group-head { padding:16px 15px; }
    .rotate-notice { display:none; }
    .mobile-nav { position:fixed; display:flex; z-index:7; bottom:0; left:0; right:0; height:66px; padding:6px 12px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; background:rgba(17,23,19,.96); border-top:1px solid var(--line); backdrop-filter:blur(12px); }
    .mobile-nav a { min-width:58px; display:grid; place-items:center; align-content:center; gap:4px; color:var(--muted); font:9px var(--mono); text-transform:uppercase; }
    .mobile-nav a.active { color:var(--acid); }
    .mobile-nav b { font:14px var(--mono); }
}
@media (max-width: 390px) {
    .armory-item-grid { grid-template-columns:1fr; }
    .armory-category-bar { align-items:flex-start; flex-direction:column; }
    .armory-category-list { width:100%; }
    .armory-category { flex:1; justify-content:space-between; }
    .game-menu { grid-template-columns:minmax(0,1fr) minmax(140px,33vw); gap:0 10px; padding-right:12px; padding-left:12px; }
    .game-menu-actions { padding-left:10px; }
    .armoury-dock { min-width:calc(100% - 24px); }
    .range-row { grid-template-columns:1fr 90px 38px; }
}
@media (orientation: portrait) and (max-width: 760px) {
    .rotate-notice { display:flex; position:fixed; z-index:10; top:73px; right:12px; width:min(250px,calc(100vw - 24px)); gap:10px; padding:11px 13px; background:#263227; border:1px solid rgba(212,243,106,.45); box-shadow:0 8px 30px rgba(0,0,0,.3); color:#d9e1d1; font-size:11px; line-height:1.4; }
    .rotate-glyph { color:var(--acid); font:15px var(--mono); }
}
@media (orientation:landscape) and (max-height:500px) {
    .topbar { height:54px; }
    .game-menu { height:calc(100dvh - 54px); grid-template-columns:minmax(0,1fr) clamp(190px,22vw,270px); grid-template-rows:45px minmax(0,1fr); gap:0 clamp(20px,4vw,56px); padding:8px 28px 68px; }
    .menu-emblem { width:34px; height:34px; }
    .menu-player-info .small-label { font-size:7px; }
    .menu-player-info strong { font-size:13px; }
    .squad-stage { padding-top:0; }
    .squad-stage-heading h1 { font-size:clamp(24px,3.5vw,40px); }
    .squad-stage-heading .eyebrow { margin-bottom:0; }
    .squad-roster { gap:8px; margin-top:12px; }
    .squad-member { min-height:102px; padding-top:15px; padding-bottom:7px; }
    .squad-avatar { width:34px; height:39px; }
    .squad-member strong { margin-top:7px; }
    .stage-find-crew { margin-top:7px; }
    .game-menu-actions { padding-left:18px; }
    .menu-action { min-height:50px; }
    .armoury-dock { bottom:9px; min-height:46px; }
    .armoury-page { padding:0 24px 14px; }
    .armoury-page .page-head { flex-direction:row; align-items:center; gap:10px; padding:5px 0 10px; }
    .armoury-page .page-head h1 { font-size:30px; }
    .armoury-page .page-head .eyebrow { margin:0 0 2px; font-size:7px; }
    .armoury-page .page-subtitle { margin:2px 0 0; font-size:9px; }
    .armoury-page .page-head .btn { min-height:34px; padding:0 10px; font-size:9px; }
    .armory-workbench { grid-template-columns:minmax(0,1fr) minmax(220px,260px); gap:8px; }
    .armory-category-bar { min-height:46px; padding:5px 9px; }
    .armory-category-bar h2,.loadout-panel-heading h2 { font-size:15px; }
    .armory-category { min-height:30px; padding:0 8px; font-size:8px; }
    .armory-item-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px; padding:6px; }
    .gear-card { min-height:134px; padding:8px; gap:5px; }
    .gear-icon { width:25px; height:25px; }
    .gear-card h3 { font-size:12px; }
    .gear-description { min-height:21px; font-size:8px; }
    .gear-tags span { font-size:6px; }
    .loadout-panel { padding:8px; }
    .loadout-panel-heading { padding:0 0 6px; }
    .loadout-panel-heading .eyebrow { margin-bottom:2px; font-size:7px; }
    .loadout-live-mark { font-size:6px; }
    .loadout-slot-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
    .loadout-slot { min-height:37px; gap:3px 5px; padding:5px; }
    .loadout-slot-name,.loadout-slot-empty,.loadout-slot small { font-size:6px; }
    .loadout-slot strong { font-size:8px; }
    .loadout-note { margin-top:6px; font-size:7px; }
    .landing { min-height:calc(100dvh - 54px); padding:10px 5vw 8px; gap:20px; grid-template-columns:1fr 1fr; }
    .hero-kicker { margin-bottom:12px; font-size:8px; letter-spacing:.08em; }
    .hero-title { font-size:clamp(46px,6.7vw,58px); }
    .hero-description { margin:14px 0 15px; font-size:13px; line-height:1.4; }
    .hero-footnote { margin-top:12px; font-size:8px; }
    .world-art { min-height:230px; }.world-frame { height:220px; min-height:0; }
    .floating-index { top:7%; }
    .stamp { bottom:7%; }
    .auth-stage { min-height:calc(100dvh - 54px); padding:8px 14px; }
    .auth-card { padding:14px 18px; }
    .auth-title { font-size:34px; }
    .auth-card .page-subtitle { margin-bottom:8px; font-size:12px; }
    .auth-form { gap:9px; margin-top:12px; }
    .auth-field { gap:4px; font-size:11px; }
    .auth-field input { min-height:38px; }
    .remember-row { font-size:10px; }
    .auth-switch { margin-top:10px; }
    .mobile-nav { display:none; }
}

.platform-map-message {
    min-height:calc(100dvh - 76px);
    display:grid;
    place-content:center;
    justify-items:center;
    gap:14px;
    padding:24px;
    background:#121a14;
    color:#e2ead8;
    text-align:center;
}
.platform-map-run {
    position:relative;
    width:100%;
    height:calc(100dvh - 76px);
    min-height:300px;
    overflow:hidden;
    background:#1b291f;
    color:#e2ead8;
    touch-action:none;
    user-select:none;
}
.platform-map-canvas { display:block; width:100%; height:100%; touch-action:none; }
.platform-map-run, .platform-map-run * {
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:none;
}
.platform-map-hud {
    position:absolute;
    z-index:2;
    top:12px;
    left:18px;
    right:18px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    pointer-events:none;
}
.map-camp-link {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid rgba(211,240,112,.4);
    background:rgba(14,22,17,.88);
    color:#e3eccf;
    font:700 9px var(--mono);
    letter-spacing:.08em;
    text-decoration:none;
    pointer-events:auto;
}
.map-camp-link span { color:#d3f070; font-size:15px; }
.map-session-label { display:grid; justify-items:center; gap:4px; font-family:var(--mono); text-align:center; }
.map-session-label span,.map-capacity span { color:#b5c1ac; font-size:8px; letter-spacing:.1em; }
.map-session-label strong { color:#eaf1da; font-size:11px; letter-spacing:.08em; }
.map-capacity {
    min-width:106px;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 10px;
    border:1px solid rgba(211,240,112,.35);
    background:rgba(14,22,17,.88);
    font-family:var(--mono);
}
.map-capacity strong { color:#d3f070; font-size:19px; }
.map-capacity span { max-width:50px; line-height:1.35; }
.platform-map-boundary-note {
    position:absolute;
    z-index:2;
    top:61px;
    left:20px;
    display:flex;
    gap:12px;
    color:rgba(227,236,207,.8);
    font:7px var(--mono);
    letter-spacing:.08em;
    pointer-events:none;
}
.platform-map-help {
    position:absolute;
    z-index:2;
    top:82px;
    left:20px;
    display:flex;
    align-items:center;
    gap:5px;
    color:rgba(227,236,207,.76);
    font:7px var(--mono);
    letter-spacing:.04em;
    pointer-events:none;
}
.platform-map-help span { margin-left:6px; }
.platform-map-help kbd {
    min-width:17px;
    padding:3px 4px;
    border:1px solid rgba(227,236,207,.22);
    background:rgba(14,22,17,.62);
    color:#e5edda;
    font:7px var(--mono);
    text-align:center;
}
.platform-touch-controls {
    position:absolute;
    z-index:3;
    right:24px;
    bottom:20px;
    left:24px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    pointer-events:none;
}
.platform-joystick-group { display:grid; justify-items:center; gap:5px; }
.platform-joystick {
    position:relative;
    width:112px;
    height:112px;
    border:1px solid rgba(218,239,165,.5);
    border-radius:50%;
    background:radial-gradient(circle,rgba(113,145,65,.22) 0 40%,rgba(19,29,22,.72) 41%);
    box-shadow:0 5px 18px rgba(0,0,0,.25);
    pointer-events:auto;
}
.platform-joystick-cross::before,.platform-joystick-cross::after {
    content:""; position:absolute; background:rgba(218,239,165,.2);
}
.platform-joystick-cross::before { top:50%; left:14%; width:72%; height:1px; }
.platform-joystick-cross::after { top:14%; left:50%; width:1px; height:72%; }
.platform-joystick-thumb {
    position:absolute; top:50%; left:50%; width:38px; height:38px;
    margin:-19px; border:1px solid #d3f070; border-radius:50%;
    background:rgba(161,193,92,.85); pointer-events:none;
}
.platform-joystick.is-held { border-color:#d3f070; }
.platform-joystick-label { color:#dce8c2; font:700 8px var(--mono); letter-spacing:.12em; }
.platform-control-button {
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(218,239,165,.56);
    border-radius:4px;
    background:rgba(19,29,22,.75);
    box-shadow:0 5px 18px rgba(0,0,0,.25);
    color:#e6f0d4;
    font:700 24px var(--mono);
    -webkit-tap-highlight-color:transparent;
    touch-action:none;
    pointer-events:auto;
}
.platform-control-button:active,.platform-control-button.is-held { background:rgba(134,169,73,.72); color:#fff; }
.platform-jump-button { width:84px; font-size:11px; letter-spacing:.08em; }
.platform-action-buttons { display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; }
.platform-movement-buttons { display:flex; gap:12px; pointer-events:none; }
.platform-fire-button {
    width:84px; font-size:11px; letter-spacing:.08em;
    border-color:#ff847b; background:#b83431; color:#fff;
}
.platform-fire-button:active,.platform-fire-button.is-held { background:#f34d46; box-shadow:0 0 18px rgba(243,77,70,.4); }
.platform-crouch-button { width:84px; font-size:10px; letter-spacing:.05em; }

@media (max-width:760px) {
    .platform-map-message { min-height:calc(100dvh - 64px); }
    .platform-map-run { height:calc(100dvh - 64px); min-height:0; }
    .platform-map-hud { top:10px; left:12px; right:12px; gap:8px; }
    .map-camp-link { min-height:34px; padding:0 9px; }
    .map-session-label span,.map-capacity span { font-size:7px; }
    .map-session-label strong { font-size:9px; }
    .map-capacity { min-width:90px; min-height:34px; gap:6px; padding:0 7px; }
    .map-capacity strong { font-size:17px; }
    .platform-map-boundary-note { top:53px; left:14px; gap:8px; font-size:6px; }
    .platform-map-help { top:71px; left:14px; font-size:6px; }
    .platform-map-help kbd { min-width:15px; padding:2px 3px; font-size:6px; }
    .platform-touch-controls { right:14px; bottom:max(12px,env(safe-area-inset-bottom)); left:14px; }
    .platform-control-button { width:60px; height:60px; }
    .platform-jump-button { width:78px; font-size:10px; }
}
@media (orientation:landscape) and (max-height:500px) {
    .platform-map-message { min-height:calc(100dvh - 54px); }
    .platform-map-run { height:calc(100dvh - 54px); }
    .platform-map-hud { top:8px; }
    .map-camp-link,.map-capacity { min-height:32px; }
    .platform-map-boundary-note { top:47px; }
    .platform-map-help { top:67px; }
    .platform-touch-controls { bottom:10px; }
    .platform-control-button { width:54px; height:54px; }
    .platform-jump-button { width:74px; }
    .platform-crouch-button { width:74px; }
    .platform-fire-button { width:74px; }
    .platform-joystick { width:100px; height:100px; }
}

.armory-workbench.character-mode { grid-template-columns:minmax(0,1fr); }
.character-customizer {
    display:grid;
    grid-template-columns:minmax(220px,.88fr) minmax(0,1fr);
    min-height:330px;
}
.character-preview-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    padding:16px;
    border-right:1px solid var(--line);
    background:radial-gradient(ellipse at 50% 55%,rgba(211,240,112,.1),transparent 64%),rgba(14,20,16,.46);
}
.character-preview-card > .eyebrow { align-self:flex-start; margin:0; color:var(--muted); font:8px var(--mono); letter-spacing:.08em; }
.character-preview-stage {
    position:relative;
    width:100%;
    min-height:226px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(207,222,199,.1);
    background-image:radial-gradient(rgba(211,240,112,.14) .8px,transparent .8px);
    background-size:16px 16px;
}
.character-preview-figure { width:158px; height:194px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.character-color-code { position:absolute; right:9px; bottom:8px; color:#aab6a3; font:8px var(--mono); letter-spacing:.07em; }
.character-preview-card > strong { color:var(--paper); font-size:15px; }
.character-preview-caption { color:var(--muted); font:7px var(--mono); letter-spacing:.08em; text-align:center; }
.character-color-panel { display:flex; flex-direction:column; justify-content:center; gap:17px; min-width:0; padding:22px; }
.character-color-panel .eyebrow { margin:0 0 6px; color:var(--acid); font:8px var(--mono); letter-spacing:.1em; }
.character-color-panel h3 { margin:0; color:var(--paper); font-size:20px; letter-spacing:-.04em; }
.character-color-description { max-width:330px; margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.character-color-picker { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#dfe6d8; font:9px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.character-color-picker input { width:54px; height:40px; padding:3px; border:1px solid var(--line); background:rgba(12,18,14,.75); cursor:pointer; }
.character-color-options { display:grid; grid-template-columns:repeat(8,minmax(24px,1fr)); gap:7px; }
.character-color-swatch { aspect-ratio:1; display:grid; place-items:center; padding:4px; border:1px solid rgba(207,222,199,.18); background:rgba(12,18,14,.55); cursor:pointer; }
.character-color-swatch span { width:100%; height:100%; background:var(--swatch-color); }
.character-color-swatch.selected,.character-color-swatch:hover:not(:disabled) { border-color:var(--acid); box-shadow:0 0 0 1px var(--acid); }
.character-color-swatch:disabled { opacity:.55; cursor:wait; }
.character-network-note { display:flex; align-items:center; gap:8px; margin:0; color:#aab6a3; font:8px var(--mono); letter-spacing:.035em; }
.character-network-note .live-dot { width:6px; height:6px; }

@media (max-width:760px) {
    .character-customizer { grid-template-columns:1fr; }
    .character-preview-card { padding:12px; border-right:0; border-bottom:1px solid var(--line); }
    .character-preview-stage { min-height:200px; }
    .character-preview-figure { width:140px; height:170px; }
    .character-color-panel { gap:13px; padding:15px; }
    .character-color-options { grid-template-columns:repeat(8,minmax(22px,1fr)); }
}
@media (orientation:landscape) and (max-height:500px) {
    .character-customizer { grid-template-columns:minmax(180px,.75fr) minmax(0,1fr); min-height:180px; }
    .character-preview-card { gap:4px; padding:6px; border-right:1px solid var(--line); border-bottom:0; }
    .character-preview-card > .eyebrow { align-self:center; font-size:6px; }
    .character-preview-stage { min-height:130px; }
    .character-preview-figure { width:100px; height:124px; }
    .character-preview-caption { font-size:6px; }
    .character-preview-card > strong { font-size:11px; }
    .character-color-panel { gap:7px; padding:9px; }
    .character-color-panel h3 { font-size:15px; }
    .character-color-description { margin-top:4px; font-size:8px; }
    .character-color-picker { font-size:7px; }
    .character-color-picker input { width:44px; height:31px; }
    .character-color-options { grid-template-columns:repeat(8,minmax(18px,1fr)); gap:4px; }
    .character-network-note { font-size:7px; }
}

/* Equipment model previews: black silhouettes on a pale plate for legibility */
.gear-icon.gear-model { width:52px; height:34px; padding:4px; background:#cfd8c4; border-color:var(--rarity); transform:rotate(-3deg); }
.gear-icon.gear-model img { display:block; width:100%; height:100%; object-fit:contain; }