:root {
  color-scheme: dark;
  --bg: #101310;
  --panel: #1a1e1a;
  --panel-2: #222822;
  --line: #343b33;
  --ink: #f1ecd9;
  --muted: #aaa995;
  --accent: #ffb454;
  --accent-2: #e36f3d;
  --power: #f8d15b;
  --heat: #ed704a;
  --shield: #73b8b2;
  --good: #9dcc73;
  --danger: #dd5b56;
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 86% 5%, rgba(227, 111, 61, .12), transparent 26rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 100% 5px, auto;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { font: inherit; }
button:disabled { opacity: .42; }

.app-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px 146px;
}

.topbar, .section-heading, .name-row, .combatant, .resource-row, .slot-controls,
.compact-actions, .action-dock { display: flex; align-items: center; }

.topbar { justify-content: space-between; margin: 4px 2px 14px; }
.topbar h1 { margin: 0; font-size: 24px; letter-spacing: .02em; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.sync-status { color: var(--muted); font: 700 8px ui-monospace, monospace; }
.sync-status.synced { color: var(--good); }
.sync-status.pending { color: var(--accent); }
.eyebrow { margin: 0 0 3px; color: var(--accent); font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .16em; }

.icon-button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--ink); background: var(--panel); font-weight: 800;
}

.status-panel, .machine-section, .inventory-section {
  border: 1px solid var(--line);
  background: rgba(26, 30, 26, .94);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

.status-panel { border-radius: 18px; padding: 13px; }
.combatant { gap: 10px; }
.portrait {
  width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 21px; font-weight: 900;
}
.machine-face { color: var(--accent); }
.enemy-face { color: var(--danger); }
.combatant-info { flex: 1; min-width: 0; }
.name-row { justify-content: space-between; gap: 8px; font-size: 13px; }
.name-row span, .enemy-panel small { display: block; color: var(--muted); font-size: 10px; }
#enemyStats { margin-top: 5px; color: #d7cda9; font-family: ui-monospace, monospace; }
.bar { height: 7px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #090b09; }
.bar i { display: block; width: 100%; height: 100%; border-radius: inherit; transition: width .22s ease; }
.hp-bar i { background: linear-gradient(90deg, #72aa65, #abd379); }
.enemy-hp-bar i { background: linear-gradient(90deg, #a63d3b, #e56a58); }
.enemy-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.resource-row { justify-content: space-between; gap: 5px; margin: 12px 0 2px 50px; }
.resource {
  flex: 1; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  justify-content: center; column-gap: 5px; padding: 6px 4px; border-radius: 9px;
  background: #131713; border: 1px solid #292f28;
}
.resource span { grid-row: 1 / 3; align-self: center; font-size: 15px; }
.resource strong { font: 800 14px/1 ui-monospace, monospace; }
.resource small { color: var(--muted); font-size: 8px; }
.resource.power span { color: var(--power); }
.resource.heat span { color: var(--heat); }
.resource.shield span { color: var(--shield); }
.resource.scrap span { color: var(--accent); }

.machine-section, .inventory-section { margin-top: 12px; border-radius: 16px; padding: 13px; }
.section-heading { justify-content: space-between; margin-bottom: 10px; }
.section-heading > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.section-heading span { color: var(--accent); font: 800 10px ui-monospace, monospace; }
.section-heading h2 { margin: 0; font-size: 15px; }
.section-heading small { color: var(--muted); font-size: 9px; }

.machine-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.machine-slot {
  position: relative; min-width: 0; min-height: 88px; border: 1px dashed #4b5449;
  border-radius: 11px; background: #111411; color: var(--ink); padding: 6px 3px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.machine-slot::after {
  content: ""; position: absolute; top: 50%; right: -7px; width: 7px; height: 1px; background: #596157;
}
.machine-slot:last-child::after { display: none; }
.machine-slot.filled { border-style: solid; }
.machine-slot.selected { border-color: var(--accent); background: #2c281d; transform: translateY(-2px); }
.machine-slot.pending { border-color: var(--good); background: rgba(157,204,115,.08); }
.machine-slot.active { border-color: #fff1bd; background: #3b321d; transform: translateY(-4px); box-shadow: 0 0 18px rgba(255,180,84,.35); }
.slot-number { position: absolute; top: 4px; left: 5px; color: #687066; font: 700 8px ui-monospace, monospace; }
.part-icon { display: block; margin: 10px auto 4px; font-size: 22px; line-height: 1; }
.part-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 800; }
.part-short { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.25; }
.empty-mark { color: #565d54; font-size: 22px; }

.slot-controls { gap: 6px; margin-top: 8px; }
.slot-controls button, .quiet-button {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink);
  padding: 7px 9px; font-size: 10px; font-weight: 700;
}
.slot-controls button { flex: 1; }
.build-hint { margin: 9px 0 0; color: var(--muted); font-size: 9px; text-align: center; }

.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.part-card, .reward-card {
  position: relative; text-align: left; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); color: var(--ink); padding: 10px;
}
.part-card { min-height: 92px; }
.part-card.selected { border-color: var(--accent); background: #30291d; }
.part-card .part-icon, .reward-card .part-icon { display: inline-grid; place-items: center; margin: 0 7px 0 0; width: 30px; height: 30px; border-radius: 8px; background: #141714; }
.part-card strong, .reward-card strong { font-size: 12px; vertical-align: top; }
.part-card p, .reward-card p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.part-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.part-tags i { padding: 2px 5px; border-radius: 99px; background: #151815; color: #c8c2ab; font: normal 7px ui-monospace, monospace; }

.inspector { margin-top: 8px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--accent); background: #2b251a; }
.inspector strong { font-size: 12px; }
.inspector p { margin: 4px 0 8px; color: #d0cab4; font-size: 10px; line-height: 1.45; }
.inspector-actions { display: flex; gap: 6px; }
.inspector-actions button { flex: 1; padding: 7px; border: 1px solid #57482c; border-radius: 8px; color: var(--ink); background: #3b311f; font-size: 9px; }

.action-dock {
  position: fixed; z-index: 5; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 520px); flex-direction: column; gap: 8px; padding: 10px 14px var(--safe-bottom);
  background: linear-gradient(transparent, rgba(16,19,16,.96) 22%, var(--bg) 52%);
}
.reaction-button {
  position: fixed; z-index: 7; right: max(14px, calc((100vw - 520px) / 2 + 14px)); bottom: 126px;
  min-height: 38px; padding: 8px 12px; border: 1px solid #65583d; border-radius: 99px;
  background: rgba(35, 32, 24, .96); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.3);
  font-size: 10px; font-weight: 800;
}
.reaction-button span { color: var(--accent); margin-right: 4px; }
.combat-log { min-height: 31px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(22,26,22,.96); color: #c5c1ae; font: 9px/1.4 ui-monospace, monospace; text-align: center; }
.primary-button {
  width: 100%; min-height: 48px; border: 0; border-radius: 12px; color: #1b160f;
  background: linear-gradient(135deg, var(--accent), #ef8650); font-weight: 900;
  box-shadow: 0 8px 22px rgba(227,111,61,.22);
}

.modal {
  width: min(calc(100% - 28px), 480px); max-height: 86dvh; overflow: auto;
  border: 1px solid #4c5148; border-radius: 18px; padding: 18px; color: var(--ink); background: #191d19;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.modal::backdrop { background: rgba(5,7,5,.8); backdrop-filter: blur(5px); }
.modal-head h2 { margin: 2px 0 6px; font-size: 21px; }
.modal-head > p:last-child { margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.reward-choices { display: grid; gap: 8px; }
.reward-card { width: 100%; min-height: 104px; }
.reward-card:hover { border-color: var(--accent); }
.full { width: 100%; margin-top: 9px; }
.moment-link {
  width: 100%; margin-top: 10px; padding: 9px; border: 1px dashed #65583d; border-radius: 9px;
  background: #211f18; color: var(--accent); font-size: 10px; font-weight: 800;
}
.reaction-modal { width: min(calc(100% - 28px), 430px); }
.reaction-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reaction-choices button {
  display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 7px;
  text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel-2); color: var(--ink);
}
.reaction-choices button > span { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 18px; text-align: center; }
.reaction-choices strong { font-size: 11px; }
.reaction-choices small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.reaction-note { display: block; margin-top: 11px; color: #d6d0bc; font-size: 10px; font-weight: 800; }
.reaction-note input {
  width: 100%; margin-top: 5px; padding: 10px; border: 1px solid #41483f; border-radius: 9px;
  background: #111411; color: var(--ink); font-size: 11px;
}
.reaction-actions { margin-top: 9px; }
.reaction-actions .quiet-button { width: 100%; min-height: 40px; }
.help-modal ol { padding-left: 21px; color: #d5cfba; font-size: 11px; line-height: 1.7; }
.note { padding: 10px; border-radius: 9px; background: #222920; color: var(--good); font-size: 10px; line-height: 1.5; }

.end-modal { padding-bottom: 20px; }
.run-result-card {
  padding: 12px; border: 1px solid #4b5148; border-radius: 13px;
  background: linear-gradient(145deg, #232822, #171a17);
}
.run-result-card h3 { margin: 12px 0 7px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.run-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.run-fact { padding: 8px 5px; border-radius: 9px; background: #111411; text-align: center; }
.run-fact strong { display: block; color: var(--accent); font: 900 15px/1.2 ui-monospace, monospace; }
.run-fact small { color: var(--muted); font-size: 8px; }
.report-build { display: grid; gap: 5px; }
.report-part {
  display: grid; grid-template-columns: 23px 30px minmax(0,1fr); align-items: center; gap: 7px;
  min-height: 38px; padding: 5px 8px; border-radius: 9px; border: 1px solid #343b33; background: #131613;
}
.report-part .order { color: #6f766b; font: 800 9px ui-monospace, monospace; }
.report-part .part-icon { margin: 0; font-size: 18px; text-align: center; }
.report-part strong { display: block; font-size: 10px; }
.report-part small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.report-part.empty { opacity: .46; }

.playtest-form { display: grid; gap: 10px; margin-top: 13px; }
.playtest-form > label, .survey-pair label { color: #d6d0bc; font-size: 10px; font-weight: 800; }
.playtest-form textarea, .playtest-form select {
  width: 100%; margin-top: 5px; border: 1px solid #41483f; border-radius: 9px;
  background: #111411; color: var(--ink); padding: 9px; font: 11px/1.45 -apple-system, sans-serif;
}
.playtest-form textarea { resize: vertical; min-height: 58px; }
.survey-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.replay-score { margin: 0; padding: 9px; border: 1px solid #41483f; border-radius: 10px; }
.replay-score legend { padding: 0 5px; color: #d6d0bc; font-size: 10px; font-weight: 800; }
.replay-score > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.replay-score label { position: relative; }
.replay-score input { position: absolute; opacity: 0; }
.replay-score span {
  display: grid; place-items: center; height: 38px; border: 1px solid #41483f; border-radius: 9px;
  background: #141714; color: var(--muted); font: 800 12px ui-monospace, monospace;
}
.replay-score input:checked + span { border-color: var(--accent); background: #3a2f1c; color: var(--ink); }
.report-status { margin: 10px 0 8px; color: var(--good); font-size: 9px; text-align: center; }
.moment-summary { margin: 10px 0 0; color: var(--accent); font-size: 9px; text-align: center; }
.end-modal > label { display: block; margin-top: 10px; color: #d6d0bc; font-size: 10px; font-weight: 800; }
.end-modal > label textarea {
  width: 100%; margin-top: 5px; min-height: 58px; resize: vertical; border: 1px solid #41483f;
  border-radius: 9px; background: #111411; color: var(--ink); padding: 9px; font: 11px/1.45 -apple-system, sans-serif;
}
.report-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 7px; }
.report-actions .primary-button, .report-actions .quiet-button { min-height: 44px; }
.end-modal > #newRunButton { margin-top: 8px; background: #30362f; color: var(--ink); box-shadow: none; }

.screenshot-modal { background: #111411; }
.screenshot-card {
  padding: 15px; border: 2px solid var(--accent); border-radius: 16px;
  background: radial-gradient(circle at 90% 0, rgba(227,111,61,.18), transparent 14rem), #191d19;
}
.screenshot-card h2 { margin: 2px 0 4px; font-size: 20px; }
.screenshot-card .report-date { margin: 0 0 12px; color: var(--muted); font: 8px ui-monospace, monospace; }
.screenshot-card .run-facts { margin-bottom: 11px; }
.screenshot-card .report-build { margin: 7px 0 12px; }
.screenshot-signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.screenshot-signals div { padding: 7px 3px; border-radius: 8px; background: #101310; text-align: center; }
.screenshot-signals strong { display: block; color: var(--accent); font-size: 11px; }
.screenshot-signals small { color: var(--muted); font-size: 7px; }
.screenshot-tip { color: var(--muted); font-size: 9px; text-align: center; }

.hit-flash { animation: hit .25s ease; }
.hidden { display: none !important; }

@keyframes hit { 50% { filter: brightness(2); transform: translateX(-3px); } }

@media (max-width: 360px) {
  .app-shell { padding-inline: 9px; }
  .inventory-grid { gap: 6px; }
  .part-card { padding: 8px; }
  .resource-row { margin-left: 0; }
  .survey-pair { grid-template-columns: 1fr; }
}

@media (display-mode: standalone) {
  .app-shell { padding-top: max(10px, env(safe-area-inset-top)); }
}