/* Kaos Missions page */
.page-missions { --accent: #5cff8a; --hazard: #ffd35c; background:
  radial-gradient(1100px 600px at 85% -10%, rgba(92,255,138,.07), transparent 60%),
  radial-gradient(900px 600px at -10% 45%, rgba(255,211,92,.06), transparent 60%), #06090a; }
.page-missions .grad { background: linear-gradient(92deg, #5cff8a, #b8ff5c 45%, #ffd35c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-missions .stat b { text-shadow: 0 0 24px rgba(92,255,138,.45); }
.page-missions .hero .shade { background:
  linear-gradient(90deg, rgba(6,9,10,.9) 0%, rgba(6,9,10,.5) 40%, rgba(6,9,10,0) 70%),
  linear-gradient(0deg, #06090a 0%, rgba(6,9,10,0) 35%); }
.hazard-bar { height: 12px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 12px, #111 12px 24px); opacity: .9; }

/* ---------- Daily offers ---------- */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } }
.offer { --oc: var(--accent); display: grid; gap: 12px; padding: 18px; text-align: left; color: var(--text); font: inherit; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--oc); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.offer:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px var(--oc); }
.offer[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--oc), 0 16px 30px -18px var(--oc); }
.offer .top { display: flex; gap: 12px; align-items: center; }
.offer img { width: 44px; height: 44px; background: rgba(0,0,0,.35); padding: 4px; }
.offer .kind { font: 9px var(--font-pixel); letter-spacing: .12em; color: var(--oc); }
.offer h3 { font-size: 20px; }
.offer .map { position: relative; height: 110px; background:
  radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(255,255,255,.08) 18.5% 19%, transparent 19.5% 38%, rgba(255,255,255,.06) 38.5% 39%, transparent 39.5%),
  linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 12px 12px, #0b100d; overflow: hidden; }
.offer .map i { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); }
.offer .map .you { left: 50%; top: 50%; background: #2ef2ff; }
.offer .map .obj { background: var(--oc); box-shadow: 0 0 10px var(--oc); animation: blink 1.2s steps(2) infinite; }
.offer dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.offer dt { font: 9px var(--font-pixel); color: var(--muted); letter-spacing: .08em; padding-top: 3px; }
.offer dd { margin: 0; }
.offer .pay { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 10px; }
.offer .pay b { font: 700 24px var(--font-display); color: var(--hazard); }
.day-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.day-bar b { font: 10px var(--font-pixel); letter-spacing: .14em; color: var(--muted); }

/* ---------- Dossier ---------- */
.dossier-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.dossier-tabs button { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px 8px 8px; background: transparent; border: 1px solid var(--line); color: var(--muted); font: 600 14px var(--font-display); letter-spacing: .04em; cursor: pointer; transition: all .2s; }
.dossier-tabs button img { width: 26px; height: 26px; }
.dossier-tabs button[aria-pressed="true"] { color: #06090a; background: var(--tc); border-color: var(--tc); }
.dossier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
@media (max-width: 900px) { .dossier { grid-template-columns: 1fr; } }
.dossier .shot { aspect-ratio: 16 / 10; }
.dossier .shot img { inset: 0; height: 100%; }
.dossier h3 { font-size: clamp(28px, 3.6vw, 42px); text-transform: uppercase; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 16px 30px; font-size: 14px; color: var(--text); }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 5px; width: 10px; height: 10px; background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.timeline li::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li b { display: block; font: 10px var(--font-pixel); letter-spacing: .1em; color: var(--tc); margin-bottom: 2px; }
.threats { display: flex; flex-wrap: wrap; gap: 6px; }
.threats span { font: 10px var(--font-pixel); letter-spacing: .06em; padding: 5px 8px; border: 1px solid rgba(255,77,94,.5); color: #ff9aa4; }
.dpay { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.dpay b { font: 700 40px var(--font-display); color: var(--hazard); }
.dpay small { color: var(--muted); }

/* ---------- Sims ---------- */
.sims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
@media (max-width: 900px) { .sims { grid-template-columns: 1fr; } }
.sim { padding: clamp(20px, 3vw, 30px); display: grid; gap: 16px; align-content: start; }
.sim h3 { font-size: 22px; text-transform: uppercase; }
.sim p { margin: 0; font-size: 14px; color: var(--muted); }
.node-view { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.node { width: 128px; height: 128px; position: relative; image-rendering: pixelated; }
.node img { width: 100%; height: 100%; }
.node.shake { animation: nshake .25s steps(3) 1; }
@keyframes nshake { 33% { transform: translate(-3px, 1px); } 66% { transform: translate(3px, -1px); } }
.node.burst::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(46,242,255,.55), transparent 60%); animation: burst .5s ease-out forwards; }
@keyframes burst { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stages i { height: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line); transition: background .2s; }
.stages i.on { background: #2ef2ff; box-shadow: 0 0 10px #2ef2ff; }
.holdbtn { position: relative; overflow: hidden; padding: 16px; background: rgba(0,0,0,.35); border: 1px solid var(--accent); color: var(--accent); font: 700 15px var(--font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; user-select: none; touch-action: none; }
.holdbtn .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(92,255,138,.22); pointer-events: none; }
.holdbtn span { position: relative; }
.simlog { font: 13px/1.5 ui-monospace, Menlo, monospace; color: #cfd6e0; min-height: 2.6em; }
.simlog.bad { color: #ff7a86; } .simlog.good { color: #8dffb0; }

.relay-view { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.mast { width: 90px; height: 170px; position: relative; }
.mast svg { width: 100%; height: 100%; }
.wave-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.wave-list span { text-align: center; padding: 6px 2px; font: 8px var(--font-pixel); letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); }
.wave-list span.on { background: var(--hazard); color: #06090a; border-color: var(--hazard); }
.wave-list span.done { color: var(--accent); border-color: rgba(92,255,138,.5); }
.integ { display: grid; gap: 6px; }
.integ .row { display: flex; justify-content: space-between; font: 10px var(--font-pixel); color: var(--muted); letter-spacing: .1em; }
.integ .row b { font: 600 15px var(--font-display); color: var(--text); letter-spacing: 0; }
.integ .tr { height: 12px; background: rgba(0,0,0,.5); border: 1px solid var(--line); overflow: hidden; }
.integ .tr i { display: block; height: 100%; transition: width .15s, background .3s; }
.sim-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sim-btns button { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--text); font: 600 13px var(--font-display); cursor: pointer; }
.sim-btns button:hover { border-color: var(--accent); }
.sim-btns button:disabled { opacity: .35; cursor: not-allowed; }
.sim-btns button img { width: 26px; height: 26px; }
.sim-btns button small { font: 8px var(--font-pixel); color: var(--muted); letter-spacing: .06em; }

/* ---------- Payload rules ---------- */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.rule { padding: 18px; display: grid; gap: 8px; align-content: start; }
.rule .ic { font: 700 22px var(--font-display); color: var(--hazard); }
.rule h3 { font-size: 17px; }
.rule p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- Payout calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); padding: clamp(20px, 3vw, 32px); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
.calc label { display: grid; gap: 6px; font-size: 14px; }
.calc select, .calc input[type=range] { width: 100%; accent-color: var(--accent); }
.calc select { padding: 8px; background: #0b100d; color: var(--text); border: 1px solid var(--line); font: 600 14px var(--font-display); }
.calc .chk { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.calc .chk input { accent-color: var(--accent); width: 18px; height: 18px; }
.receipt { font: 14px/1.8 ui-monospace, Menlo, monospace; background: #0b100d; border: 1px solid var(--line); padding: 16px 18px; }
.receipt .ln { display: flex; justify-content: space-between; gap: 12px; }
.receipt .ln.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px; font-weight: 700; color: var(--hazard); font-size: 18px; }
.receipt .ln .dim { color: var(--muted); }

/* ---------- Uplink ---------- */
.uplink-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
@media (max-width: 860px) { .uplink-row { grid-template-columns: 1fr; } }
.uplink-block { padding: 0; overflow: hidden; }
.uplink-block canvas { display: block; width: 100%; aspect-ratio: 1.3; cursor: grab; touch-action: pan-y; background: radial-gradient(circle at 50% 60%, rgba(92,255,138,.14), transparent 60%); }
.recipe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.recipe img { width: 44px; height: 44px; background: rgba(0,0,0,.35); padding: 4px; border: 1px solid var(--line); }
.recipe .plus { font: 700 20px var(--font-display); color: var(--muted); }
.recipe .txt { font-size: 13px; color: var(--muted); padding: 8px 10px; border: 1px dashed var(--line); }

.broker { width: 100%; border-collapse: collapse; font-size: 14px; }
.broker td, .broker th { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.broker th { font: 10px var(--font-pixel); letter-spacing: .12em; font-weight: 400; color: var(--muted); }
.broker td:nth-child(2), .broker th:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.broker td img { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-right: 8px; image-rendering: pixelated; }
.broker small { display: block; color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; }
@keyframes blink { 50% { opacity: 0; } }