/* ═══════════════════════════════════════════════════════════════════
   MOOD SHIFT CITY — GOLDEN HOUR TOON
   Warm, limited palette · rounded minimal UI · cream text, soft shadows.
   The hot-coral accent (#ff5a3c) is reserved for enemies.
   Loaded after style.css and overrides it.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --cream: #fff4e2;
    --cream-dim: rgba(255, 244, 226, 0.72);
    --plum: #3a2733;
    --plum-glass: rgba(58, 39, 51, 0.38);
    --plum-glass-strong: rgba(58, 39, 51, 0.62);
    --peach: #f6c6a4;
    --rose: #c98d9b;
    --teal: #1f4e5a;
    --gold: #ffc857;
    --mint: #8fdcb0;
    --coral: #ff5a3c;
    --soft-shadow: 0 2px 0 rgba(58, 39, 51, 0.28), 0 4px 14px rgba(58, 39, 51, 0.22);

    /* remap the old neon tokens onto the warm palette */
    --bg-dark: #2a1d26;
    --bg-surface: var(--plum-glass);
    --bg-surface-elevated: var(--plum-glass-strong);
    --border-subtle: rgba(255, 244, 226, 0.18);
    --border-accent: rgba(255, 244, 226, 0.4);
    --lime: var(--mint);
    --lime-glow: rgba(58, 39, 51, 0.2);
    --cyan: var(--cream);
    --cyan-glow: rgba(58, 39, 51, 0.2);
    --pink: #ffb199;
    --pink-glow: rgba(58, 39, 51, 0.2);
    --purple: var(--rose);
    --purple-glow: rgba(58, 39, 51, 0.2);
    --amber: var(--gold);
    --text-primary: var(--cream);
    --text-muted: rgba(255, 244, 226, 0.7);
    --text-dim: rgba(255, 244, 226, 0.5);
    --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --font-ui: 'Nunito', system-ui, sans-serif;
    --font-mono: 'Nunito', system-ui, sans-serif;
}

body { background: var(--bg-dark); font-variant-numeric: tabular-nums; }
.scanlines-overlay, #menu-grid, #menu-rain, #menu-ambient-glow, #muzzle-flash { display: none !important; }
button { font-family: var(--font-display); }

/* ── Menu ── */
#menu {
    background: linear-gradient(180deg, #1f4e5a 0%, #6d6b80 34%, #c98d9b 58%, #f6c6a4 82%, #f9d9b8 100%);
    animation: menuIn 0.6s ease both;
}
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }
#menu-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky-sun {
    position: absolute; left: 50%; top: 58%; width: 26vmin; height: 26vmin; transform: translate(-50%, -50%);
    border-radius: 50%; background: #fff1d6;
    box-shadow: 0 0 0 2.4vmin rgba(255, 241, 214, 0.25), 0 0 0 5vmin rgba(255, 241, 214, 0.1);
    animation: sunBreath 6s ease-in-out infinite alternate;
}
@keyframes sunBreath { to { transform: translate(-50%, -52%) scale(1.03); } }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.skyline span { position: absolute; bottom: 0; border-radius: 3px 3px 0 0; }
#skyline-back span { background: #d49a8e; }
#skyline-front { height: 30%; }
#skyline-front span { background: #b77e7e; box-shadow: inset 0 0 0 2px rgba(58, 39, 51, 0.35); }
#menu::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
    background: #e4c29c; box-shadow: 0 -3px 0 rgba(58, 39, 51, 0.35); pointer-events: none;
}
#menu-content { gap: 12px; padding: 22px 20px 70px; max-width: 560px; }
#menu-tag {
    font-family: var(--font-display); font-weight: 600; letter-spacing: 3px; font-size: 12px;
    color: var(--cream); background: var(--plum-glass); border: none; border-radius: 999px; padding: 6px 14px;
}
#menu-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; line-height: 0.9; text-transform: none; font-size: clamp(44px, 8vw, 84px); }
.title-p1, .title-p2 {
    color: var(--cream) !important; -webkit-text-fill-color: var(--cream) !important; background: none !important; filter: none !important;
    text-shadow: 0 4px 0 #3a2733, 0 10px 24px rgba(58, 39, 51, 0.35) !important;
}
.title-p2 { font-size: 1.25em; color: #fff1d6 !important; -webkit-text-fill-color: #fff1d6 !important; letter-spacing: 6px; }
.title-p1 { animation: titleBob 3.4s ease-in-out infinite; }
.title-p2 { animation: titleBob 3.4s ease-in-out infinite 0.25s; }
@keyframes titleBob { 50% { transform: translateY(-4px); } }
.hero-chip { background: transparent; border: none; color: var(--cream-dim); font-family: var(--font-display); letter-spacing: 4px; font-weight: 600; box-shadow: none; }
.menu-stats-bar { gap: 8px; flex-wrap: wrap; justify-content: center; }
.glass-pill { background: var(--plum-glass); border: none; border-radius: 999px; padding: 7px 14px; box-shadow: none; backdrop-filter: blur(6px); }
.glass-pill:hover { transform: translateY(-1px); box-shadow: none; border: none; }
.menu-label { font-family: var(--font-display); font-weight: 600; letter-spacing: 1.5px; color: var(--cream-dim); font-size: 11px; }
.menu-hs-val, .menu-rank-name, .operative-name, .operative-name span, .menu-level-num, #skin-name {
    font-family: var(--font-display) !important; color: var(--cream) !important; font-weight: 700; text-shadow: none !important;
}
.menu-hs-val { font-size: 18px; }
.menu-xp-label { color: var(--cream-dim); }
#menu-rank-bar, #menu-level-bar { background: rgba(255, 244, 226, 0.18); border-radius: 99px; height: 6px; width: 70px; overflow: hidden; }
#menu-rank-prog, #menu-level-fill { background: var(--cream) !important; box-shadow: none !important; height: 100%; border-radius: 99px; }
.menu-level-num { font-size: 18px; }
.menu-next { font-size: 11px; color: var(--cream-dim); font-weight: 700; }
#menu-skin-row { gap: 8px; }
.skin-arrow { background: rgba(255, 244, 226, 0.16); border: none; color: var(--cream); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.skin-arrow:hover { background: rgba(255, 244, 226, 0.3); }
#skin-swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 244, 226, 0.7); }
#skin-swatch.locked { opacity: 0.45; }
#skin-name small { color: var(--cream-dim); font-size: 10px; }
#difficulty-row .menu-label { margin-right: 6px; }
.diff-btn { font-family: var(--font-display); border-radius: 999px; background: var(--plum-glass); border: none; color: var(--cream-dim); box-shadow: none !important; letter-spacing: 1px; }
.diff-btn:hover { color: var(--cream); background: rgba(58, 39, 51, 0.5); }
.diff-btn.active#diff-standard, .diff-btn.active#diff-veteran, .diff-btn.active#diff-ghost { background: var(--cream); color: var(--plum); border: none; box-shadow: none; }
#start-btn {
    font-family: var(--font-display); font-weight: 700; letter-spacing: 4px; font-size: 26px;
    background: var(--cream); color: var(--plum); border-radius: 999px; border: none;
    box-shadow: 0 5px 0 #3a2733, 0 12px 26px rgba(58, 39, 51, 0.3);
    animation: playPulse 2.2s ease-in-out infinite;
}
#start-btn::before { display: none; }
#start-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #3a2733, 0 16px 30px rgba(58, 39, 51, 0.32); }
#start-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #3a2733; }
@keyframes playPulse { 50% { transform: scale(1.025); } }
.secondary-menu-btn, .subtle-menu-btn {
    font-family: var(--font-display); font-weight: 600; border-radius: 999px; border: none; background: var(--plum-glass);
    color: var(--cream); box-shadow: none !important; letter-spacing: 1px;
}
.secondary-menu-btn:hover, .subtle-menu-btn:hover { background: rgba(58, 39, 51, 0.55); color: var(--cream); }
.subtle-menu-btn { background: transparent; color: var(--cream-dim); }
#menu-controls { background: transparent; border: none; }
.menu-section-label { color: var(--cream-dim); font-family: var(--font-display); }
.ctrl-tag { background: var(--plum-glass); border: none; border-radius: 999px; }
.ctrl-key { background: var(--cream); color: var(--plum); border: none; border-radius: 6px; font-family: var(--font-display); box-shadow: none; }
.ctrl-act { color: var(--cream-dim); }

.mute-btn {
    position: fixed; z-index: 30; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--plum-glass); color: var(--cream); font-size: 17px; line-height: 40px; padding: 0;
    backdrop-filter: blur(6px); pointer-events: auto;
}
.mute-btn.is-muted { opacity: 0.7; }
#mute-btn-menu { position: absolute; top: 14px; right: 14px; }
#mute-btn-hud { display: none; top: 16px; left: 50%; transform: translateX(170px); }
body.in-run #mute-btn-hud { display: block; }

/* ── HUD ── */
#ui { font-family: var(--font-ui); padding: 16px 20px; animation: hudIn 0.5s ease both; }
#ui[style*="block"] { display: grid !important; }
#nexus-btn { bottom: 226px !important; right: auto !important; left: 24px !important; }
#nexus-train-btn { bottom: 180px !important; right: auto !important; left: 24px !important; }
@keyframes hudIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hud-vitality, .hud-score-panel { background: var(--plum-glass); border: none; border-radius: 18px; box-shadow: none; backdrop-filter: blur(6px); }
.hud-op-tag { font-family: var(--font-display); color: var(--cream-dim); background: none; border: none; letter-spacing: 2px; font-weight: 600; }
.vitality-num, #score-val, #ammo-val, #reserve-val, .wave-badge, .score-label { font-family: var(--font-display); color: var(--cream); text-shadow: var(--soft-shadow); }
.vitality-pct { color: var(--cream-dim); }
.vitality-bar-track { background: rgba(255, 244, 226, 0.2); border-radius: 99px; height: 8px; border: none; }
.vitality-bar-fill { background: var(--mint) !important; box-shadow: none !important; border-radius: 99px; transition: width 0.15s ease; }
.vitality-bar-fill.low { background: #ffb199 !important; animation: lowBar 0.6s ease-in-out infinite alternate; }
@keyframes lowBar { to { opacity: 0.55; } }
.wave-badge { background: var(--plum-glass); border: none; border-radius: 999px; box-shadow: none; font-weight: 700; letter-spacing: 2px; }
.enemies-pill { background: none; border: none; color: var(--cream-dim); font-family: var(--font-display); letter-spacing: 1.5px; box-shadow: none; text-shadow: var(--soft-shadow); }
.score-label { font-size: 10px; letter-spacing: 2px; color: var(--cream-dim); text-shadow: none; }
#score-val { font-weight: 700; display: inline-block; }
#score-val.bump { animation: bump 0.25s ease; }
@keyframes bump { 40% { transform: scale(1.22); } }
.combo-pill { background: var(--cream); color: var(--plum); border: none; border-radius: 999px; font-family: var(--font-display); font-weight: 700; box-shadow: none; text-shadow: none; animation: bump 0.3s ease; }
#combo-meter { width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 244, 226, 0.15); overflow: hidden; opacity: 0; transition: opacity 0.2s; margin-top: 2px; }
#combo-meter.on { opacity: 1; }
#combo-meter-fill { height: 100%; background: var(--gold); transform-origin: left; border-radius: 99px; }
.ammo-counter { background: var(--plum-glass); border: none; border-radius: 18px; box-shadow: none; backdrop-filter: blur(6px); }
.ammo-slash { color: var(--cream-dim); }
#reserve-val { color: var(--cream-dim); }
.secondary-ammo-pill, #reload-msg { background: var(--plum-glass); border: none; border-radius: 999px; color: var(--cream); font-family: var(--font-display); box-shadow: none; text-shadow: none; }
#reload-msg { animation: lowBar 0.5s ease-in-out infinite alternate; }
.key-hint { color: var(--cream-dim); }
.boost-tag { background: var(--plum-glass); border: none; border-radius: 999px; color: var(--cream); font-family: var(--font-display); box-shadow: none; text-shadow: none; }

/* Thin crosshair */
#crosshair { width: 26px; height: 26px; }
.ch-line { background: rgba(255, 244, 226, 0.92) !important; box-shadow: 0 0 0 1px rgba(58, 39, 51, 0.35) !important; }
.ch-center { background: var(--cream) !important; box-shadow: 0 0 0 1px rgba(58, 39, 51, 0.4) !important; }
.hit-marker::before, .hit-marker::after { background: var(--cream) !important; box-shadow: 0 0 0 1px rgba(58, 39, 51, 0.5) !important; }
.hit-marker.crit::before, .hit-marker.crit::after { background: var(--gold) !important; }

/* Damage numbers, score pops, callouts */
.dmg-num {
    position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cream);
    text-shadow: 0 2px 0 var(--plum), 0 0 1px var(--plum); transform: translate(-50%, -50%);
    animation: dmgRise 0.75s ease-out forwards; white-space: nowrap;
}
.dmg-num.head { color: var(--gold); font-size: 26px; }
@keyframes dmgRise {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    18% { opacity: 1; transform: translate(-50%, -70%) scale(1.25); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -260%) scale(0.9); }
}
.score-pop {
    position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--cream);
    text-shadow: 0 3px 0 var(--plum); transform: translate(-50%, -50%); animation: scoreRise 1s ease-out forwards; white-space: nowrap;
}
.score-pop small { font-size: 0.7em; color: var(--gold); }
@keyframes scoreRise {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
    20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}
#callout {
    position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.6); z-index: 19; pointer-events: none;
    text-align: center; opacity: 0; transition: opacity 0.2s ease;
}
#callout.show { opacity: 1; animation: calloutIn 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes calloutIn { 0% { transform: translate(-50%, -50%) scale(0.4); } 100% { transform: translate(-50%, -50%) scale(1); } }
.co-main { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.4vw, 58px); color: var(--cream); letter-spacing: 1px; text-shadow: 0 4px 0 var(--plum), 0 10px 26px rgba(58, 39, 51, 0.35); white-space: nowrap; }
.co-sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 1.8vw, 18px); color: var(--cream); letter-spacing: 3px; text-shadow: 0 2px 0 var(--plum); margin-top: 2px; opacity: 0.9; }
#callout.gold .co-main { color: var(--gold); }
#callout.small .co-main { font-size: clamp(22px, 3.4vw, 34px); color: var(--gold); }
#wave-bonus { display: none !important; font-family: var(--font-display); color: var(--cream); text-shadow: 0 4px 0 var(--plum); letter-spacing: 1px; }
#modifier-banner { display: none !important; font-family: var(--font-display) !important; background: var(--plum-glass) !important; color: var(--cream) !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; text-shadow: none !important; letter-spacing: 2px; }

#kill-feed { top: 96px; right: 20px; }
.kf-entry { font-family: var(--font-display); font-weight: 600; font-size: 13px; background: var(--plum-glass); border: none !important; border-radius: 999px; padding: 4px 12px; text-shadow: none; box-shadow: none; }
.kf-entry b { color: var(--cream); }
.kf-entry i { color: var(--gold); font-style: normal; }

#achievement-toast { background: var(--plum-glass-strong); border: none; box-shadow: none; border-radius: 22px; backdrop-filter: blur(8px); }
.ach-label { color: var(--gold) !important; font-family: var(--font-display); }
.ach-name { color: var(--cream) !important; font-family: var(--font-display); text-shadow: none !important; }
.ach-desc { color: var(--cream-dim) !important; }

#damage-overlay { box-shadow: inset 0 0 110px 40px rgba(170, 40, 30, 0.55); }
body.low-hp #ui::after {
    content: ''; position: fixed; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 120px 30px rgba(140, 30, 30, 0.45); animation: lowBar 0.9s ease-in-out infinite alternate;
}

#boss-bar-wrapper { font-family: var(--font-display); }
#boss-label, #boss-phase-label { color: var(--cream) !important; text-shadow: var(--soft-shadow) !important; font-family: var(--font-display) !important; }
#boss-bar-track { background: var(--plum-glass) !important; border: none !important; border-radius: 99px !important; box-shadow: none !important; }
#boss-bar-fill { background: var(--coral) !important; box-shadow: none !important; border-radius: 99px; }

#minimap { border: 3px solid rgba(255, 244, 226, 0.75); box-shadow: 0 4px 14px rgba(58, 39, 51, 0.3); background: rgba(58, 39, 51, 0.4); }

/* ── Perk modal ── */
#perk-modal {
    position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: rgba(58, 39, 51, 0.45); backdrop-filter: blur(4px); padding: 16px;
}
#perk-modal.show { display: flex; animation: menuIn 0.25s ease both; }
.perk-head { text-align: center; }
.perk-kicker { font-family: var(--font-display); letter-spacing: 3px; color: var(--cream-dim); font-size: 13px; }
.perk-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 42px); color: var(--cream); text-shadow: 0 3px 0 var(--plum); }
.perk-cards { display: flex; gap: 14px; flex-wrap: nowrap; justify-content: center; }
.perk-card {
    position: relative; width: clamp(140px, 22vw, 200px); padding: 18px 14px 16px; border: none; border-radius: 22px; cursor: pointer;
    background: var(--cream); color: var(--plum); display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: 0 5px 0 var(--plum), 0 14px 30px rgba(58, 39, 51, 0.3);
    animation: cardIn 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: var(--d);
    transition: transform 0.12s ease;
}
.perk-card:hover { transform: translateY(-4px) rotate(-1deg); }
.perk-card:active { transform: translateY(2px); }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(0.85); } }
.perk-icon { font-size: 34px; line-height: 1; }
.perk-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; }
.perk-name em { font-style: normal; color: #b0627a; }
.perk-desc { font-family: var(--font-ui); font-weight: 700; font-size: 13px; opacity: 0.75; text-align: center; }
.perk-key { position: absolute; top: 8px; left: 12px; font-family: var(--font-display); font-size: 12px; opacity: 0.45; }

/* ── Run over ── */
#gameover {
    position: fixed; inset: 0; z-index: 35; align-items: center; justify-content: center; padding: 14px;
    background: rgba(58, 39, 51, 0.5) !important; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.35s ease;
}
#gameover.show { opacity: 1; }
#go-card {
    width: min(520px, 100%); max-height: 100%; overflow-y: auto; text-align: center; padding: 22px 22px 18px; border-radius: 28px;
    background: rgba(58, 39, 51, 0.55); color: var(--cream); display: flex; flex-direction: column; align-items: center; gap: 10px;
    animation: cardIn 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.go-kicker { font-family: var(--font-display); letter-spacing: 3px; font-size: 13px; color: var(--cream-dim); }
.go-score { font-family: var(--font-display); font-weight: 700; font-size: clamp(52px, 9vw, 84px); line-height: 1; text-shadow: 0 5px 0 var(--plum); }
#go-card.is-best .go-score { color: var(--gold); }
.go-tease { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--cream); background: rgba(255, 244, 226, 0.12); padding: 5px 14px; border-radius: 999px; }
#go-card.is-best .go-tease { background: var(--gold); color: var(--plum); animation: bump 0.6s ease 0.4s; }
.go-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.go-row div { display: flex; flex-direction: column; align-items: center; background: rgba(255, 244, 226, 0.08); border-radius: 14px; padding: 7px 2px; }
.go-row b { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.go-row span { font-size: 10px; letter-spacing: 1px; color: var(--cream-dim); text-transform: uppercase; font-weight: 800; }
.go-perks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.go-perk { font-family: var(--font-display); font-size: 12px; background: rgba(255, 244, 226, 0.12); padding: 3px 10px; border-radius: 999px; }
.go-xp { width: 100%; }
.go-xp-top { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 13px; color: var(--cream-dim); margin-bottom: 5px; }
.go-xp-top b { color: var(--cream); }
.go-xp-track { height: 10px; border-radius: 99px; background: rgba(255, 244, 226, 0.15); overflow: hidden; }
.go-xp-fill { height: 100%; background: var(--cream); border-radius: 99px; transition: width 0.9s cubic-bezier(0.3, 0.8, 0.3, 1); }
.go-unlock { font-family: var(--font-display); font-size: 14px; margin-top: 6px; min-height: 18px; opacity: 0; transform: scale(0.8); transition: all 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
.go-unlock.show { opacity: 1; transform: none; }
.go-unlock b { color: var(--gold); }
.go-again {
    margin-top: 4px; width: 100%; padding: 16px; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: 3px;
    border: none; border-radius: 999px; cursor: pointer; background: var(--cream); color: var(--plum);
    box-shadow: 0 5px 0 #24161f, 0 14px 30px rgba(0, 0, 0, 0.25); animation: playPulse 2s ease-in-out infinite 1s;
}
.go-again:active { transform: translateY(3px); box-shadow: 0 2px 0 #24161f; }
.go-menu { background: none; border: none; color: var(--cream-dim); font-family: var(--font-display); letter-spacing: 2px; cursor: pointer; padding: 6px 16px; font-size: 13px; }
.go-hint { font-size: 11px; color: var(--cream-dim); letter-spacing: 1px; }

/* ── Pause / settings / codex / tutorial: same warm glass ── */
#pause-menu, #settings, #codex, #tutorial-overlay { background: linear-gradient(180deg, rgba(31, 78, 90, 0.92), rgba(201, 141, 155, 0.92) 60%, rgba(246, 198, 164, 0.95)) !important; }
#pause-content, #settings-card, .rotate-box { background: var(--plum-glass) !important; border: none !important; border-radius: 26px !important; box-shadow: none !important; }
#pause-title, #settings-title-text, #codex-title-text, .tut-title, .rotate-title, .info-name { font-family: var(--font-display) !important; color: var(--cream) !important; text-shadow: 0 3px 0 var(--plum) !important; -webkit-text-fill-color: var(--cream) !important; background: none !important; }
#pause-tag, .settings-section-label, .tut-tag, #preview-label, .info-tag, .item-tag { color: var(--cream-dim) !important; font-family: var(--font-display) !important; }
.pause-btn, .tut-next-btn, .select-op-btn, .settings-toggle.on, .codex-tab.active {
    background: var(--cream) !important; color: var(--plum) !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--font-display) !important;
}
.pause-btn.secondary, .tut-skip-btn, .settings-toggle, .codex-tab, .back-link { background: var(--plum-glass) !important; color: var(--cream) !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--font-display) !important; }
.codex-item, #codex-preview-area, #codex-info-area, .tut-row, .info-perks { background: var(--plum-glass) !important; border: none !important; border-radius: 18px !important; box-shadow: none !important; }
.codex-item.active, .codex-item.selected-operative { background: rgba(255, 244, 226, 0.22) !important; }
.stat-fill, .tut-pip-on { background: var(--cream) !important; box-shadow: none !important; }
.stat-track, .tut-pip { background: rgba(255, 244, 226, 0.2) !important; }
.tut-hl, .tut-key, .ctrl-key { color: var(--plum) !important; background: var(--cream) !important; }
.settings-slider { accent-color: #fff4e2; }
#rotate-overlay { background: linear-gradient(180deg, #1f4e5a, #c98d9b 60%, #f6c6a4) !important; }
#tut-hint { font-family: var(--font-display) !important; background: var(--plum-glass) !important; color: var(--cream) !important; border: none !important; box-shadow: none !important; border-radius: 999px !important; }

/* ── Mobile controls ── */
#joystick-container { background: rgba(58, 39, 51, 0.28); border: 3px solid rgba(255, 244, 226, 0.55); }
#joystick-knob { background: var(--cream); box-shadow: 0 3px 0 rgba(58, 39, 51, 0.45); }
.touch-btn { font-family: var(--font-display); backdrop-filter: blur(4px); }
.touch-btn-fire { background: rgba(255, 244, 226, 0.88); color: var(--plum); border: none; box-shadow: 0 4px 0 rgba(58, 39, 51, 0.5); width: 104px; height: 104px; font-weight: 700; letter-spacing: 2px; }
.touch-btn-fire.held { transform: scale(0.92); background: var(--gold); }
.touch-btn-reload, .touch-btn-rocket { background: rgba(58, 39, 51, 0.35); border: 3px solid rgba(255, 244, 226, 0.6); color: var(--cream); box-shadow: none; }
#pause-touch-btn { background: var(--plum-glass); border: none; color: var(--cream); box-shadow: none; font-family: var(--font-display); }

/* AI co-pilot buttons (from ai-player.js) in the same warm style */
#nexus-btn, #nexus-train-btn { background: var(--plum-glass) !important; border: none !important; color: var(--cream) !important; font-family: var(--font-display) !important; border-radius: 999px !important; box-shadow: none !important; }
#nexus-hud, #nexus-train-hud { background: rgba(58, 39, 51, 0.72) !important; border: none !important; font-family: var(--font-ui) !important; box-shadow: none !important; }

/* ── Phones / touch ── */
@media (pointer: coarse), (max-height: 520px) {
    #menu-content { gap: 7px; padding: 10px 14px 44px; }
    #menu-title { font-size: clamp(30px, 7vh, 46px); flex-direction: row; gap: 12px; align-items: baseline; }
    .title-p2 { font-size: 1em; letter-spacing: 2px; }
    #menu-sub, #menu-controls, #tutorial-btn { display: none !important; }
    #menu-tag { font-size: 10px; padding: 4px 10px; }
    .glass-pill { padding: 5px 11px; }
    .menu-label { font-size: 9px; }
    .menu-hs-val, .menu-level-num { font-size: 15px; }
    #menu-rank-row { display: none; }
    #start-btn { padding: 10px 18px; font-size: 21px; }
    .secondary-menu-btn { padding: 7px 12px; font-size: 11px; }
    .diff-btn { padding: 5px 12px; font-size: 11px; }
    #difficulty-row { flex-direction: row; gap: 6px; align-items: center; }

    /* HUD: minimap off the joystick, top-left under vitality */
    #minimap-wrapper { top: 74px; left: 14px; bottom: auto; }
    #minimap { width: 84px !important; height: 84px !important; border-width: 2px; }
    #boosts-hud { top: 166px; left: 14px; }
    #ui { padding: 10px 12px; }
    .hud-vitality { min-width: 130px; padding: 6px 10px; }
    .hud-score-panel { padding: 6px 12px; margin-right: 52px; }
    .hud-munitions { margin-bottom: 128px; margin-right: 4px; }
    #kill-feed { top: 70px; right: 64px; }
    .kf-entry { font-size: 11px; padding: 3px 9px; }
    #mute-btn-hud { top: 64px; right: 14px; left: auto; transform: none; width: 36px; height: 36px; line-height: 36px; font-size: 15px; }
    #callout { top: 26%; }
    #achievement-toast { bottom: 12px; padding: 6px 18px; border-radius: 16px; }
    .ach-name { font-size: 15px !important; }
    .ach-label, .ach-desc { font-size: 9px !important; }
    .perk-cards { gap: 8px; }
    .perk-card { width: 30vw; max-width: 190px; padding: 12px 8px; border-radius: 18px; gap: 3px; }
    .perk-icon { font-size: 24px; }
    .perk-name { font-size: 13px; }
    .perk-desc { font-size: 11px; }
    .perk-head { margin-bottom: -6px; }
    #go-card { padding: 12px 14px 10px; gap: 6px; border-radius: 22px; }
    .go-score { font-size: 46px; }
    .go-tease { font-size: 13px; }
    .go-row b { font-size: 14px; }
    .go-row span { font-size: 8px; }
    .go-row div { padding: 4px 1px; border-radius: 10px; }
    .go-again { padding: 11px; font-size: 20px; }
    .go-perks { display: none; }
    /* AI buttons: tuck them into the top-left so they never cover FIRE */
    body.in-run #nexus-btn, body.in-run #nexus-train-btn { display: none !important; }
    #nexus-btn { bottom: auto !important; top: 12px !important; right: auto !important; left: 12px !important; transform: scale(0.85); transform-origin: left top; }
    #nexus-train-btn { bottom: auto !important; top: 46px !important; right: auto !important; left: 12px !important; transform: scale(0.85); transform-origin: left top; }
}

#tut-hint span, #tut-hint b, #tut-hint strong { color: var(--gold) !important; text-shadow: none !important; }
.tut-hl { padding: 0 4px; border-radius: 4px; }
.vitality-header { gap: 10px; }


/* ═══════════════════════════════════════════════════════════════════
   v12 — Intel & Loadout (codex) in Golden Hour Toon, AI menu, iOS hint
   ═══════════════════════════════════════════════════════════════════ */
#codex .menu-grid-bg, #codex .scanlines-overlay { display: none !important; }
#codex { background: linear-gradient(180deg, #1f4e5a 0%, #7c6a7d 38%, #c98d9b 62%, #f6c6a4 100%) !important; backdrop-filter: none !important; color: var(--cream); font-family: var(--font-ui); }
#codex-header { background: transparent !important; border: none !important; padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left)) !important; gap: 12px; }
#codex-title-text { font-size: 18px !important; letter-spacing: 1.5px !important; }
.codex-tab { font-family: var(--font-display) !important; font-size: 12px !important; letter-spacing: 1px !important; padding: 7px 14px !important; }
.codex-tab.active { background: var(--cream) !important; color: var(--plum) !important; }
.back-link { padding: 7px 14px !important; font-size: 12px !important; cursor: pointer; white-space: nowrap; }
#codex-body { display: grid !important; grid-template-columns: minmax(150px, 24%) minmax(170px, 34%) 1fr; gap: 10px; padding: 0 max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); min-height: 0; flex: 1; }
#codex-sidebar { width: auto !important; background: transparent !important; border: none !important; padding: 0 !important; gap: 6px !important; overflow-y: auto; min-height: 0; }
.codex-item { padding: 8px 10px !important; gap: 9px !important; cursor: pointer; transition: background .15s; }
.codex-item .item-dot { width: 14px !important; height: 14px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px var(--plum) !important; flex-shrink: 0; }
.codex-item .item-name { color: var(--cream) !important; font-family: var(--font-display) !important; font-size: 14px !important; letter-spacing: .5px; text-shadow: none !important; }
.codex-item .item-tag { font-size: 9px !important; letter-spacing: .5px; }
.codex-item .item-check { color: var(--plum) !important; background: var(--gold); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; margin-left: auto; text-shadow: none !important; }
#codex-main { display: contents !important; }
#codex-preview-area { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 4px !important; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(255, 241, 214, 0.55), rgba(255, 241, 214, 0.08) 65%), var(--plum-glass) !important; }
#preview-canvas { display: block; max-width: 100%; border: none !important; }
#preview-label { font-family: var(--font-display) !important; color: var(--cream) !important; font-size: 13px !important; letter-spacing: 2px !important; margin-top: 2px; }
#codex-info-area { padding: 12px 14px !important; overflow-y: auto; min-height: 0; }
#codex-info .info-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
#codex-info .info-name { font-size: 26px !important; line-height: 1 !important; display: flex; align-items: center; gap: 8px; margin: 0 !important; }
#codex-info .info-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px var(--plum); display: inline-block; }
#codex-info .info-tag { display: inline-block; color: var(--plum) !important; border: none !important; border-radius: 999px; padding: 3px 10px; font-size: 10px !important; letter-spacing: 1px; margin-bottom: 8px; font-family: var(--font-display) !important; }
#codex-info .info-desc { color: var(--cream) !important; font-size: 13px !important; line-height: 1.4 !important; margin-bottom: 10px !important; opacity: .92; }
#codex-info .info-stats { gap: 6px !important; margin-bottom: 10px !important; }
#codex-info .info-stat-row { gap: 8px !important; }
#codex-info .stat-lbl, #codex-info .stat-num { color: var(--cream) !important; font-family: var(--font-display) !important; font-size: 11px !important; }
#codex-info .stat-track { height: 9px !important; border-radius: 999px !important; background: rgba(58, 39, 51, 0.35) !important; overflow: hidden; }
#codex-info .stat-fill { border-radius: 999px !important; box-shadow: none !important; }
#codex-info .info-perks { padding: 8px 12px !important; display: flex; flex-direction: column; gap: 3px; }
#codex-info .perk-item { color: var(--cream) !important; font-size: 12px !important; border: none !important; padding: 0 0 0 14px !important; position: relative; font-family: var(--font-ui) !important; }
#codex-info .perk-item::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
#codex-info .select-op-btn { width: auto !important; margin: 0 !important; padding: 9px 16px !important; font-size: 13px !important; flex-shrink: 0; }
#codex-info .select-op-btn.already-selected { background: var(--mint) !important; color: var(--plum) !important; }
#menu-selected-char { display: inline-flex; align-items: center; gap: 6px; }
#menu-selected-char .op-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 244, 226, .8); }
#menu-selected-char small { font-size: 9px; color: var(--cream-dim); letter-spacing: 1px; }
#menu-operative-row { cursor: pointer; }
@media (max-height: 520px) {
    #codex-header { padding-top: 8px !important; padding-bottom: 6px !important; }
    #codex-title-text { display: none; }
    #codex-body { grid-template-columns: minmax(130px, 22%) minmax(150px, 32%) 1fr; gap: 8px; }
    .codex-item { padding: 6px 8px !important; }
    .codex-item .item-name { font-size: 12px !important; }
    .codex-item .item-tag { display: none; }
    #codex-info-area { padding: 9px 11px !important; }
    #codex-info .info-name { font-size: 20px !important; }
    #codex-info .info-desc { font-size: 11.5px !important; margin-bottom: 7px !important; }
    #codex-info .info-perks { padding: 6px 10px !important; }
    #codex-info .perk-item { font-size: 11px !important; }
    #codex-info .select-op-btn { padding: 7px 12px !important; font-size: 12px !important; }
}
@media (pointer: coarse) { .skin-arrow { width: 32px; height: 32px; font-size: 20px; } }

/* ── AI: one button, one compact panel ── */
#nexus-btn, #nexus-train-btn, #nexus-hud, #nexus-train-hud { display: none !important; }
#ai-btn { position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); z-index: 60; display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border: none; border-radius: 999px; background: var(--plum-glass-strong); color: var(--cream); font-family: var(--font-display); font-size: 14px; letter-spacing: 1px; cursor: pointer; }
#ai-btn .ai-ico { font-size: 16px; }
#ai-btn.on { background: var(--gold); color: var(--plum); }
#ai-btn.hidden-by-setting, body.in-run #ai-btn { display: none; }
#ai-chip { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin-top: 58px; z-index: 61; display: none; align-items: center; gap: 7px; padding: 5px 12px; border: none; border-radius: 999px; background: rgba(58, 39, 51, 0.78); color: var(--cream); font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; white-space: nowrap; cursor: pointer; }
#ai-chip b { background: var(--cream); color: var(--plum); border-radius: 999px; padding: 2px 8px; font-weight: 600; }
#ai-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: aiDot .9s infinite alternate; }
@keyframes aiDot { to { opacity: .25; } }
#ai-panel { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(42, 29, 38, 0.45); padding: 10px; }
#ai-panel.show { display: flex; }
#pause-menu.under-ai #pause-content { visibility: hidden; }
.ai-card { width: min(440px, 94vw); max-height: calc(100dvh - 20px); overflow-y: auto; background: linear-gradient(180deg, rgba(58, 39, 51, 0.96), rgba(88, 58, 74, 0.96)); color: var(--cream); border-radius: 22px; padding: 12px 14px; font-family: var(--font-ui); box-shadow: var(--soft-shadow); }
.ai-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; margin-bottom: 6px; }
.ai-x { border: none; background: rgba(255, 244, 226, 0.14); color: var(--cream); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; cursor: pointer; }
.ai-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 244, 226, 0.12); }
.ai-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ai-txt b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.ai-txt span { font-size: 11.5px; line-height: 1.3; color: var(--cream-dim); }
.ai-tog { min-width: 70px; padding: 8px 12px; border: none; border-radius: 999px; background: rgba(255, 244, 226, 0.16); color: var(--cream); font-family: var(--font-display); font-size: 13px; letter-spacing: 1px; cursor: pointer; }
.ai-tog.on { background: var(--gold); color: var(--plum); }
.ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 244, 226, 0.12); }
#ai-mem { font-size: 10.5px; color: var(--cream-dim); line-height: 1.3; }
.ai-reset { border: none; background: transparent; color: var(--cream-dim); font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
@media (max-height: 420px) {
    .ai-card { padding: 9px 12px; border-radius: 18px; }
    .ai-head { font-size: 15px; margin-bottom: 2px; }
    .ai-row { padding: 6px 0; }
    .ai-txt b { font-size: 13.5px; }
    .ai-txt span { font-size: 10.5px; }
    .ai-tog { min-width: 62px; padding: 7px 10px; font-size: 12px; }
}

/* ── iPhone: Add-to-Home-Screen hint for real fullscreen ── */
#ios-fs-hint { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 300; width: min(460px, 92vw); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 18px; background: rgba(58, 39, 51, 0.94); color: var(--cream); font-family: var(--font-ui); font-size: 12px; box-shadow: var(--soft-shadow); }
#ios-fs-hint > b { font-family: var(--font-display); font-size: 14px; width: 100%; }
#ios-fs-hint span { flex: 1; line-height: 1.35; }
#ios-fs-hint .ios-share { font-style: normal; display: inline-block; padding: 0 4px; border-radius: 5px; background: rgba(255, 244, 226, 0.18); }
#ios-fs-hint button { border: none; border-radius: 999px; padding: 7px 14px; background: var(--gold); color: var(--plum); font-family: var(--font-display); font-size: 12px; cursor: pointer; }

#codex-preview-area, #codex-info-area, #codex-sidebar { min-width: 0; }
#preview-canvas { width: calc(100% - 8px) !important; height: calc(100% - 30px) !important; flex: 1 1 auto; min-height: 0; }
#codex-preview-area { width: auto !important; height: auto !important; }
#codex-info-area { width: auto !important; }

/* callout tags: merged secondary events (HEADSHOT, STREAK…) under the headline */
.co-tags { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.co-tags span { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 1.4vw, 14px); letter-spacing: 2px; color: var(--gold); background: var(--plum-glass); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
/* kill feed below the top-right HUD, never under the callout card */
.kf-entry { white-space: nowrap; }
/* AI run note on the run-over screen */
.go-ai-note { margin: 6px auto 0; display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--cream); background: var(--plum-glass); border-radius: 999px; padding: 4px 12px; }


/* ══ Fix round 4: crosshair, melee, settings notes ══ */
/* Crosshair: cream strokes with a thick plum ink outline (toon look) so it reads on
   the bright sand/sky AND on dark enemies; a small gap in the middle keeps the
   target visible; one size that scales with the screen. */
#crosshair { width: clamp(30px, 4.6vmin, 40px) !important; height: clamp(30px, 4.6vmin, 40px) !important; z-index: 15; }
#crosshair .ch-line { position: absolute; background: #fff4e2 !important; border-radius: 3px; box-shadow: 0 0 0 2px #3a2733 !important; }
#crosshair .ch-top, #crosshair .ch-bottom { left: calc(50% - 2px) !important; width: 4px !important; height: 28% !important; }
#crosshair .ch-top    { top: 0 !important; bottom: auto !important; }
#crosshair .ch-bottom { bottom: 0 !important; top: auto !important; }
#crosshair .ch-left, #crosshair .ch-right { top: calc(50% - 2px) !important; height: 4px !important; width: 28% !important; }
#crosshair .ch-left  { left: 0 !important; right: auto !important; }
#crosshair .ch-right { right: 0 !important; left: auto !important; }
#crosshair .ch-center { width: 6px !important; height: 6px !important; background: #ffc857 !important; box-shadow: 0 0 0 2px #3a2733 !important; }
#crosshair .ch-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1.5px solid rgba(58, 39, 51, 0.28); }
#crosshair .hit-marker::before, #crosshair .hit-marker::after { height: 3px !important; background: #fff4e2 !important; box-shadow: 0 0 0 2px #3a2733 !important; }
#crosshair .hit-marker.crit::before, #crosshair .hit-marker.crit::after { background: #ffc857 !important; }
body.melee-mode #crosshair .ch-line { opacity: 0.35; }
body.melee-mode #crosshair .ch-ring { inset: -10%; border: 3px solid rgba(255, 244, 226, 0.75); box-shadow: 0 0 0 2px rgba(58, 39, 51, 0.5); }

/* Melee button (touch) + pill (desktop HUD) */
.touch-btn-melee { bottom: 46px; right: 300px; width: 62px; height: 62px; flex-direction: column; gap: 0; line-height: 1;
    background: rgba(58, 39, 51, 0.35); border: 3px solid rgba(255, 244, 226, 0.6); color: #fff4e2; box-shadow: none; }
.touch-btn-melee .mb-ico { font-size: 22px; }
.touch-btn-melee .mb-lbl { font-size: 10px; letter-spacing: 1px; margin-top: 2px; }
.touch-btn-melee.on { background: #ffc857; color: #3a2733; border-color: #3a2733; box-shadow: 0 3px 0 rgba(58, 39, 51, 0.5); }
.touch-btn-melee.on .mb-lbl::after { content: ' ✓'; }
#melee-pill { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
#melee-pill .mp-bat { display: none; }
body.melee-mode #melee-pill { background: #ffc857 !important; color: #3a2733 !important; }
body.melee-mode #melee-pill .mp-gun { display: none; }
body.melee-mode #melee-pill .mp-bat { display: inline; }
body.melee-mode .ammo-counter { opacity: 0.55; }
@media (pointer: coarse) { #melee-pill { display: none !important; } }

.settings-note { display: block; font-size: 10px; letter-spacing: 0.5px; opacity: 0.7; text-transform: none; font-weight: 400; margin-top: 2px; }
.settings-mini { margin-left: 8px; font: inherit; font-size: 10px; padding: 3px 8px; border-radius: 999px; border: none; background: rgba(255, 244, 226, 0.85); color: #3a2733; cursor: pointer; }
.floating-pop.pop-warn { color: #ffc857; font-family: var(--font-display); font-weight: 700; text-shadow: 0 2px 0 #3a2733; }

/* ── Fullscreen toggle (⛶) + full-window game canvas ── */
#game-canvas { position: fixed; left: 0; top: 0; display: block; z-index: 0; }
.fs-btn {
    position: fixed; z-index: 30; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--plum-glass); color: var(--cream); font-size: 20px; line-height: 40px; padding: 0;
    backdrop-filter: blur(6px); pointer-events: auto; font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;
}
.fs-btn:hover { filter: brightness(1.15); }
.fs-btn.is-fs { background: var(--cream); color: var(--plum); }
#fs-btn-menu { position: absolute; top: 14px; right: 62px; }
#fs-btn-hud { display: none; top: 16px; left: 50%; transform: translateX(218px); }
body.in-run #fs-btn-hud { display: block; }
body.in-run #fs-btn-hud.fs-off { display: none; }
@media (pointer: coarse), (max-height: 520px) {
    #fs-btn-hud { top: 106px; right: 14px; left: auto; transform: none; width: 36px; height: 36px; line-height: 36px; font-size: 17px; }
}