:root {
    --ink: #111313;
    --ink-deep: #080b0c;
    --paper: #efe1c1;
    --paper-soft: #c9b992;
    --paper-dim: #8d836b;
    --gold: #e2b862;
    --red: #a83427;
    --red-bright: #d1543a;
    --line: rgba(226,184,98,.3);
    --line-soft: rgba(239,225,193,.15);
    --panel: rgba(16,20,19,.72);
    --panel-heavy: rgba(12,15,15,.93);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --ease: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: clip; background: var(--ink-deep); }
body { min-height: 100dvh; color: var(--paper); font-family: Outfit, system-ui, sans-serif; user-select: none; touch-action: none; }
button, input, select { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.game-shell { position: fixed; inset: 0; overflow: hidden; background: #1c1b18; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: 0; touch-action: none; }
.app-logo { display: flex; align-items: center; gap: .55rem; color: var(--paper); font: 700 .9rem/1 Cinzel, Georgia, serif; letter-spacing: .05em; }
.brand-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #2a1d12; background: radial-gradient(circle at 35% 30%, #ffe5a4, #bd4226 73%); box-shadow: 0 0 17px rgba(198,65,34,.55); font-size: .7rem; }
.vignette { position: absolute; inset: 0; z-index: 18; pointer-events: none; background: radial-gradient(110% 90% at 50% 42%, transparent 40%, rgba(3,5,6,.08) 66%, rgba(3,5,6,.72) 100%); }
.damage-veil, .focus-veil { position: absolute; inset: 0; z-index: 19; pointer-events: none; transition: opacity .2s; }
.damage-veil { background: radial-gradient(ellipse at center, transparent 35%, rgba(164,28,19,.58) 100%); opacity: 0; }
.focus-veil { background: radial-gradient(ellipse at center, transparent 37%, rgba(209,174,112,.18) 70%, rgba(8,9,10,.44) 100%); mix-blend-mode: screen; }
[hidden] { display: none !important; }
.hud { position: absolute; inset: 0; z-index: 24; pointer-events: none; }
.location, .mission, .weapon-hud, .rider-hud, .hud-actions { position: absolute; pointer-events: auto; }
.location { top: calc(4.15rem + var(--safe-top)); left: calc(1.3rem + var(--safe-left)); display: grid; gap: .18rem; max-width: min(32vw, 300px); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.location strong { overflow: hidden; color: var(--paper); font: 600 clamp(1rem, 2vw, 1.35rem)/1.15 Cinzel, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.location > span:last-child { color: var(--paper-dim); font: .68rem/1 monospace; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--gold); font: 700 .62rem/1 Outfit, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { width: 18px; height: 1px; background: var(--gold); content: ''; }
.hud-actions { top: calc(4.15rem + var(--safe-top)); right: calc(1.3rem + var(--safe-right)); display: flex; gap: .45rem; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel); backdrop-filter: blur(16px); font-size: 1rem; }
.icon-button[aria-pressed="false"] { color: var(--paper-dim); opacity: .65; }
.mission { top: calc(4.15rem + var(--safe-top)); left: 50%; width: min(360px, 42vw); transform: translateX(-50%); text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,.72); }
.mission .eyebrow { justify-content: center; }
.mission .eyebrow::before { display: none; }
.mission strong { display: block; margin: .38rem 0 .24rem; color: var(--paper); font: 600 clamp(1rem, 2vw, 1.25rem)/1.15 Cinzel, Georgia, serif; }
.mission > span:not(.eyebrow) { display: block; color: var(--paper-soft); font-size: .78rem; line-height: 1.35; }
.mark-pips { display: flex; justify-content: center; gap: 6px; margin-top: .65rem; }
.mark-pips i { display: block; width: 7px; height: 7px; border: 1px solid var(--paper-dim); border-radius: 50%; background: transparent; }
.mark-pips i[data-on="true"] { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 9px rgba(226,184,98,.65); }
.rider-hud { bottom: calc(1.35rem + var(--safe-bottom)); left: calc(1.3rem + var(--safe-left)); display: flex; align-items: end; gap: 12px; }
#minimap { width: 124px; height: 124px; border-radius: 50%; background: rgba(15,20,19,.66); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.vitals { display: grid; gap: 8px; width: 152px; padding-bottom: 3px; }
.vital { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 7px; color: var(--paper-dim); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
meter { width: 100%; height: 4px; border: 0; background: rgba(239,225,193,.17); }
meter::-webkit-meter-bar { border: 0; background: rgba(239,225,193,.17); }
meter::-webkit-meter-optimum-value { background: var(--gold); }
.vital:nth-child(1) meter::-webkit-meter-optimum-value { background: var(--red-bright); }
.vital:nth-child(3) meter::-webkit-meter-optimum-value { background: #79a8b4; }
.ride-info { color: var(--paper-dim); font-size: .7rem; letter-spacing: .04em; }
.ride-info b { color: var(--paper); font: 600 1.25rem/1 Cinzel, Georgia, serif; }
.ride-info span { margin-left: .35rem; text-transform: uppercase; }
.weapon-hud { right: calc(1.3rem + var(--safe-right)); bottom: calc(1.4rem + var(--safe-bottom)); display: grid; gap: .3rem; min-width: 130px; text-align: right; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.weapon-hud .eyebrow { justify-content: end; }
.weapon-hud .eyebrow::before { display: none; }
.weapon-hud div { color: var(--paper-dim); font: 1rem monospace; }
.weapon-hud strong { color: var(--paper); font: 700 2rem/1 Cinzel, Georgia, serif; }
.weapon-hud b { margin-left: 1rem; color: var(--gold); font: .82rem Outfit, sans-serif; }
.weapon-hud > span:last-child { color: var(--paper-dim); font: .66rem monospace; }
.message { position: absolute; bottom: calc(8.5rem + var(--safe-bottom)); left: 50%; max-width: min(88vw, 490px); margin: 0; transform: translateX(-50%); color: var(--paper); font: 600 clamp(.9rem, 2vw, 1.15rem)/1.35 Cinzel, Georgia, serif; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.9); opacity: 0; transition: opacity .35s var(--ease); }
.message[data-show="true"] { opacity: 1; }
.prompt { position: absolute; bottom: calc(.75rem + var(--safe-bottom)); left: 50%; margin: 0; transform: translateX(-50%); color: rgba(239,225,193,.62); font-size: .66rem; letter-spacing: .09em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.interaction { position: absolute; bottom: calc(4.3rem + var(--safe-bottom)); left: 50%; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .65rem 1rem; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 999px; color: var(--paper); background: var(--panel-heavy); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .76rem; backdrop-filter: blur(14px); }
.interaction:disabled { border-color: rgba(239,225,193,.18); color: var(--paper-dim); }
kbd { display: inline-grid; min-width: 1.45rem; height: 1.35rem; place-items: center; padding: 0 .28rem; border: 1px solid var(--line); border-radius: 4px; color: var(--gold); background: rgba(0,0,0,.28); font: 700 .65rem monospace; }
.waypoint { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%); color: var(--gold); filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); pointer-events: none; }
.waypoint i { font: normal 2rem/1 Cinzel, Georgia, serif; animation: waypoint 1.6s ease-in-out infinite; }
.waypoint span { color: var(--paper); font: .65rem monospace; }
@keyframes waypoint { 50% { transform: translateY(-4px) scale(1.08); } }
.reticle { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); opacity: .6; transition: width .18s, height .18s, opacity .18s; }
.reticle i, .reticle::before, .reticle::after { position: absolute; content: ''; background: var(--paper); }
.reticle i { top: 9px; left: 9px; width: 4px; height: 4px; border-radius: 50%; }
.reticle::before, .reticle::after { top: 10px; width: 6px; height: 1px; }
.reticle::before { right: 0; } .reticle::after { left: 0; }
.reticle b { position: absolute; top: 0; left: 10px; width: 1px; height: 6px; background: var(--paper); box-shadow: 0 16px 0 var(--paper); }
.reticle[data-target="true"] { width: 31px; height: 31px; opacity: 1; }
.reticle[data-target="true"] i { background: var(--gold); }
.reticle.threat { filter: drop-shadow(0 0 5px var(--red-bright)); }
.hit-marker { position: absolute; top: 50%; left: 50%; color: var(--paper); font: 1.8rem/1 Outfit, sans-serif; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.hit-marker[data-show="true"] { animation: hit .18s ease-out; }
@keyframes hit { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.touch-controls { position: absolute; inset: 0; display: none; pointer-events: none; }
.stick { position: absolute; bottom: calc(1.2rem + var(--safe-bottom)); left: calc(1.25rem + var(--safe-left)); display: grid; width: 126px; height: 126px; place-items: center; border: 1px solid rgba(239,225,193,.28); border-radius: 50%; background: rgba(12,15,15,.35); pointer-events: auto; touch-action: none; }
.stick::before { position: absolute; inset: 17px; border: 1px solid rgba(239,225,193,.12); border-radius: 50%; content: ''; }
.stick i { z-index: 1; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: rgba(226,184,98,.8); box-shadow: 0 4px 15px rgba(0,0,0,.35); transition: transform .08s; }
.stick span { position: absolute; bottom: 9px; color: var(--paper-dim); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.look-zone { position: absolute; inset: 20% 0 20% 35%; pointer-events: auto; touch-action: none; }
.touch-buttons { position: absolute; right: calc(1.1rem + var(--safe-right)); bottom: calc(1.1rem + var(--safe-bottom)); display: grid; grid-template-columns: repeat(2, 64px); gap: 8px; pointer-events: auto; }
.pad { min-width: 64px; min-height: 52px; border: 1px solid var(--line-soft); border-radius: 12px; color: var(--paper); background: var(--panel); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(12px); }
.pad:active, .pad[aria-pressed="true"] { border-color: var(--gold); background: rgba(130,72,29,.7); }
.pad-fire { border-color: rgba(209,84,58,.55); color: #efb5a3; }
.overlay { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) calc(1rem + var(--safe-left)); background: rgba(7,9,9,.58); backdrop-filter: blur(18px) saturate(.8); }
.overlay-card, .menu-card, .loading-card { width: min(100%, 510px); border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(29,28,23,.97), rgba(11,14,14,.97)); box-shadow: 0 32px 90px rgba(0,0,0,.5); }
.menu-card { position: relative; width: min(900px, 100%); padding: clamp(1.45rem, 4vw, 3rem); overflow: hidden; }
.menu-card::before { position: absolute; top: -35%; right: -10%; width: 55%; height: 120%; background: radial-gradient(ellipse, rgba(163,70,37,.22), transparent 68%); content: ''; pointer-events: none; }
.menu-head, .journey-preview, .menu-actions, .settings, .menu-foot { position: relative; z-index: 1; }
.menu-card .menu-head { display: block; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; }
.menu-card .menu-head h1 { grid-area: auto; width: auto; }
.menu-head h1, .compact-card h2, .loading-card h1 { margin: .75rem 0 .3rem; color: var(--paper); font: 700 clamp(2.2rem, 7vw, 4.7rem)/.88 Cinzel, Georgia, serif; letter-spacing: -.035em; }
.menu-head h1 span { color: var(--gold); }
.menu-tagline { margin: .65rem 0 0; color: var(--red-bright); font: italic 1rem/1.2 Georgia, serif; }
.lede { max-width: 47ch; margin: 1.15rem 0 0; color: var(--paper-soft); font-size: .9rem; line-height: 1.55; }
.journey-preview { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 2rem 0 1.35rem; padding: 1rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); color: var(--paper-dim); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.journey-preview b { display: block; margin-bottom: .25rem; color: var(--gold); font: 700 1.5rem/1 Cinzel, Georgia, serif; }
.menu-actions, .card-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.2rem; }
.primary-button, .ghost-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .65rem; padding: .7rem 1.15rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.primary-button { color: #21170d; background: linear-gradient(120deg, #f1cf83, #bd6936); box-shadow: 0 8px 22px rgba(161,83,37,.24); }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ghost-button { border: 1px solid var(--line-soft); color: var(--paper-soft); background: rgba(239,225,193,.04); }
.section-note { margin: .75rem 0 0; color: var(--paper-dim); font-size: .7rem; }
.settings { margin-top: 1.3rem; border-top: 1px solid var(--line-soft); padding-top: .85rem; }
.settings summary { display: flex; justify-content: space-between; cursor: pointer; color: var(--paper-soft); font-size: .75rem; list-style: none; }
.settings summary::-webkit-details-marker { display: none; }
.settings-content { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; margin-top: 1rem; }
.keys { display: grid; gap: .45rem; color: var(--paper-dim); font-size: .7rem; line-height: 1.4; }
.settings-grid { display: grid; gap: .72rem; }
.field, .check-field { display: grid; gap: .34rem; color: var(--paper-dim); font-size: .67rem; }
.field span { display: flex; justify-content: space-between; }
select, input[type="range"] { width: 100%; min-height: 30px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(0,0,0,.24); }
select { padding: .35rem; }
input[type="range"] { accent-color: var(--gold); }
.check-field { grid-template-columns: auto 1fr; align-items: center; line-height: 1.3; }
.check-field input { accent-color: var(--gold); }
.menu-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.1rem; color: var(--paper-dim); font: .62rem monospace; letter-spacing: .04em; }
.menu-foot b { color: var(--gold); }
.loading-card { width: min(390px, 100%); padding: 2.2rem; text-align: center; }
.loading-card h1 { margin-top: 1rem; font-size: 2.2rem; }
.loading-card .eyebrow { justify-content: center; }
.loading-card .eyebrow::before { display: none; }
.loading-card > p:not(.eyebrow) { color: var(--paper-dim); font-size: .8rem; }
.sun-loader { display: block; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe7a0, #bd3c24 72%); box-shadow: 0 0 30px rgba(194,62,34,.65); animation: sunpulse 1.7s ease-in-out infinite; }
@keyframes sunpulse { 50% { transform: scale(1.08); filter: brightness(1.15); } }
.loading-bar { height: 5px; margin-top: 1.25rem; overflow: hidden; border-radius: 99px; background: rgba(239,225,193,.1); }
.loading-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--red-bright)); transition: width .25s; }
.compact-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.compact-card h2 { font-size: clamp(2rem, 6vw, 3.3rem); }
.compact-card .lede { margin-top: .7rem; }
.scene-caption { position: absolute; right: calc(2rem + var(--safe-right)); bottom: calc(2rem + var(--safe-bottom)); display: grid; gap: .35rem; color: rgba(239,225,193,.78); font: .72rem Cinzel, Georgia, serif; letter-spacing: .16em; text-align: right; }
.scene-caption span { color: var(--paper-dim); font: .65rem Outfit, sans-serif; letter-spacing: .04em; }
body[data-state="play"] .lab-foot { display: none; }
@media (max-width: 800px) {
    .settings-content { grid-template-columns: 1fr; }
    .mission { width: min(360px, 42vw); }
    .location { max-width: 34vw; }
    .scene-caption { right: 1rem; bottom: 1rem; }
}
@media (max-width: 600px) {
    .location { top: calc(3.7rem + var(--safe-top)); left: calc(.85rem + var(--safe-left)); max-width: 45vw; }
    .hud-actions { top: calc(3.7rem + var(--safe-top)); right: calc(.85rem + var(--safe-right)); }
    .mission { top: calc(8.15rem + var(--safe-top)); width: min(88vw, 360px); }
    .rider-hud { bottom: calc(1rem + var(--safe-bottom)); left: calc(.75rem + var(--safe-left)); }
    #minimap { width: 96px; height: 96px; }
    .vitals { width: 120px; gap: 6px; }
    .vital { grid-template-columns: 43px 1fr; font-size: .57rem; }
    .weapon-hud { right: calc(.85rem + var(--safe-right)); bottom: calc(1rem + var(--safe-bottom)); min-width: 110px; }
    .weapon-hud strong { font-size: 1.6rem; }
    .prompt { display: none; }
    .message { bottom: calc(12.2rem + var(--safe-bottom)); max-width: 86vw; }
    .interaction { bottom: calc(7.4rem + var(--safe-bottom)); max-width: 84vw; font-size: .7rem; }
    .scene-caption { display: none; }
    .menu-card { max-height: min(92dvh, 760px); overflow-y: auto; padding: 1.35rem; }
    .menu-head h1 { font-size: clamp(2.5rem, 14vw, 4rem); }
    .journey-preview { gap: 1rem; margin-top: 1.4rem; }
    .journey-preview span:last-child { width: 100%; }
    .menu-foot { margin-top: 1.5rem; }
}
@media (pointer: coarse) {
    .touch-controls { display: block; }
    .reticle { display: none; }
    .hud-actions { pointer-events: auto; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .location, .hud-actions { top: calc(.7rem + var(--safe-top)); }
    .mission { top: calc(.75rem + var(--safe-top)); left: 50%; }
    .mission strong { margin: .2rem 0; font-size: .9rem; }
    .mission > span:not(.eyebrow), .mark-pips { display: none; }
    .rider-hud, .weapon-hud { bottom: calc(.6rem + var(--safe-bottom)); }
    #minimap { width: 84px; height: 84px; }
    .vitals { gap: 4px; }
    .interaction { bottom: calc(2.8rem + var(--safe-bottom)); }
    .message { bottom: calc(4.7rem + var(--safe-bottom)); }
    .touch-buttons { grid-template-columns: repeat(4, 58px); gap: 5px; bottom: calc(.6rem + var(--safe-bottom)); right: calc(.6rem + var(--safe-right)); }
    .pad { min-width: 58px; min-height: 44px; }
    .stick { width: 92px; height: 92px; bottom: calc(.55rem + var(--safe-bottom)); left: calc(.65rem + var(--safe-left)); }
    .stick i { width: 36px; height: 36px; }
    .menu-card { max-height: min(92dvh, 350px); overflow-y: auto; }
    .menu-head h1 { font-size: 2.5rem; }
    .menu-tagline, .lede { margin-top: .5rem; font-size: .78rem; }
    .journey-preview { margin: .7rem 0; padding: .6rem 0; }
    .settings-content { grid-template-columns: 1fr 1fr; }
    .scene-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* agent-responsive-768 */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
  .hud, .overlay, .menu-overlay, .overlay-card {
    max-width: 100%;
  }
}