:root {
  color-scheme: light;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui-panel: #F2D6A5;
  --ui-secondary: #E9B981;
  --ui-surface: #F8E4BF;
  --ui-border: #65402B;
  --ui-ink: #241711;
  --ui-muted: #9A7560;
  --ui-success: #477548;
  --ui-reward: #D4972A;
  --ui-warning: #BD6C23;
  --ui-error: #A8443D;
  --ui-info: #4C7085;
  --ui-shadow: #24171188;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #253d59, #101827 62%); color: #f1f3df; }
.game-shell { width: min(1120px, 100vw); padding: 20px; }
.game-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 0 0 12px; }
.eyebrow { margin: 0 0 4px; color: #a8d6ad; font-size: .72rem; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(1.1rem, 3vw, 1.7rem); letter-spacing: .04em; }
.header-subtitle { margin: 3px 0 0; color: var(--ui-success); font-size: .68rem; letter-spacing: .12em; }
.controls { margin: 0; color: #b7c6d6; font-size: .78rem; text-align: right; line-height: 1.6; }
kbd { border: 1px solid #627b91; border-bottom-width: 2px; border-radius: 3px; padding: 1px 4px; color: #eaf4d9; background: #24394d; }
#game-wrap { position: relative; overflow: hidden; border: 4px solid #527380; border-radius: 8px; box-shadow: 0 20px 60px #0009; background: #111b2a; aspect-ratio: 16 / 9; }
#game { width: 100%; height: 100%; }
#game canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; display: block; }
#game-hud { position: absolute; top: 14px; left: 14px; display: grid; gap: 5px; min-width: 220px; max-width: 360px; padding: 10px 12px; border: 2px solid #6f9d91; background: #0d1926e8; color: #f0f4d7; font-size: 12px; line-height: 1.2; pointer-events: none; }
#game-hud strong { font-size: 14px; letter-spacing: .04em; }
#game-hud span { color: #b8d8bc; font-size: 10px; }
#game-hud small { color: #e3d6aa; font-size: 9px; line-height: 1.35; }
#corner-controls { position: absolute; z-index: 14; top: 14px; right: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 280px; }
.corner-button { border: 2px solid #7395ad; border-radius: 3px; padding: 5px 7px; color: #ecf2d8; background: #102338ed; font: inherit; font-size: 10px; cursor: pointer; }
.corner-button:hover { border-color: #fff0ad; filter: brightness(1.12); }
.corner-reset { min-width: 27px; color: #f0c49b; }
#save-status { flex-basis: 100%; color: #d1e4c0; font-size: 9px; text-align: right; text-shadow: 0 1px #102033; pointer-events: none; }
#interaction-panel { position: absolute; left: 50%; bottom: 18px; width: min(410px, calc(100% - 32px)); transform: translateX(-50%); display: none; padding: 10px 14px; border: 2px solid #a7d2a0; background: #0c1722ee; color: #eff7df; text-align: center; white-space: pre-line; font-size: 13px; line-height: 1.3; pointer-events: none; }
#interaction-panel.is-visible { display: block; }
.game-modal { display: none; position: absolute; z-index: 10; color: #f5f5df; background-color: #101a2beF; background-image: url('./assets/ui/panel-blue.png'); background-size: 100% 100%; image-rendering: pixelated; border: 3px solid #94b8d3; box-shadow: 0 10px 30px #000a; pointer-events: auto; }
.game-modal.is-visible { display: block; }
.dialogue-panel { --accent: #a9c8ff; left: 50%; bottom: 16px; width: min(650px, calc(100% - 42px)); min-height: 164px; transform: translateX(-50%); padding: 18px 22px 15px; border-color: var(--accent); }
.dialogue-topline, .activity-topline { display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--accent); font-size: 12px; letter-spacing: .08em; }
.dialogue-topline span { color: #cad7de; font-size: 10px; }
.dialogue-panel p { min-height: 42px; margin: 12px 0 10px; color: #f3f4df; font-size: 13px; line-height: 1.45; }
.dialogue-controls { display: flex; justify-content: flex-end; gap: 8px; }
.ui-button, .activity-option, .icon-close { border: 2px solid #8ab5dd; border-radius: 3px; color: #f5f5df; background: #173a59; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; }
.ui-button { min-width: 80px; padding: 7px 12px; font-size: 11px; background-image: url('./assets/ui/button-long-blue.png'); background-size: 100% 100%; image-rendering: pixelated; }
.ui-button:hover, .activity-option:hover { border-color: #fff0ad; filter: brightness(1.14); }
.ui-button:disabled { cursor: default; opacity: .4; filter: grayscale(1); }
.ui-button.minor { background: #27394f; }
.activity-panel { left: 50%; top: 50%; width: min(540px, calc(100% - 46px)); transform: translate(-50%, -50%); padding: 18px 22px 20px; border-color: #b3d98a; }
.crafting-panel { z-index: 20; max-height: calc(100% - 36px); overflow-y: auto; }
.activity-topline { color: #dfeec7; }
.activity-panel h2 { margin: 8px 0 6px; color: #fff0b9; font-size: 20px; }
.activity-intro { margin: 0 0 12px; color: #c9d6c1; font-size: 11px; line-height: 1.4; }
.activity-prompt { margin: 0 0 12px; color: #fbf9e3; font-size: 13px; line-height: 1.45; }
.activity-options { display: grid; gap: 8px; }
.activity-option { display: grid; gap: 4px; width: 100%; padding: 9px 11px; text-align: left; background: #17324c; }
.activity-option strong { font-size: 12px; color: #f7efc3; }
.activity-option span { color: #c5d5d4; font-size: 10px; line-height: 1.35; }
.activity-feedback { margin: 12px 0 0; padding: 9px 10px; border: 1px solid; font-size: 11px; line-height: 1.4; }
.activity-feedback.is-success { border-color: #b8e687; background: #204027d9; color: #e5ffd0; }
.activity-feedback.is-error { border-color: #ef9c80; background: #532d2bd9; color: #ffe0d1; }
.activity-continue { display: block; margin: 10px 0 0 auto; }
.gain-readout { margin: 7px 0; color: #d9ecff; font-size: 12px; }
.gain-slider { width: 100%; margin: 7px 0 10px; accent-color: #9ccaff; }
.icon-close { width: 26px; height: 26px; padding: 0; background: #35455a; font-size: 20px; line-height: 1; }
.recipe-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin-top: 10px; padding: 10px; border: 1px solid #68849a; background: #15283ade; }
.recipe-card strong { display: block; color: #fff1be; font-size: 12px; }
.recipe-card small, .recipe-card p { display: block; margin: 4px 0 0; color: #c7d9d5; font-size: 10px; line-height: 1.35; }
.recipe-card p { grid-column: 1 / -1; color: #e2efbc; }
.recipe-card .ui-button { align-self: center; }
.recipe-card.is-locked { opacity: .62; }
.recipe-card.is-crafted { border-color: #a9d979; background: #1c3827df; }
.recipe-costs { display: flex; flex-wrap: wrap; gap: 5px; }
.recipe-cost { padding: 3px 5px; border: 1px solid #6c7d83; color: #cbd5d4; font-size: 9px; text-transform: capitalize; }
.recipe-cost.has-cost { border-color: #96c77e; color: #dff6c9; }
.recipe-cost.missing-cost { border-color: #a67770; color: #f1c1b7; }
#reward-toast { position: absolute; right: 16px; top: 78px; z-index: 11; display: none; width: min(300px, calc(100% - 32px)); padding: 12px; border: 2px solid #e9cf77; background: #1d2638ef; color: #fff4bf; box-shadow: 0 8px 24px #0008; pointer-events: none; }
#reward-toast.is-visible { display: grid; gap: 5px; }
#reward-toast strong { font-size: 13px; }
#reward-toast span { color: #e9f6d1; font-size: 11px; line-height: 1.35; }
#reward-toast small { color: #a9c8ff; font-size: 10px; }
.toast-rewards { display: grid; gap: 4px; }
.toast-reward { display: flex; align-items: center; gap: 6px; }
.item-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.item-icon-glyph { display: grid; place-items: center; color: #fff0ba; font-size: 14px; }
.toast-icon { width: 18px; height: 18px; }
#hazard-warning { position: absolute; z-index: 12; right: 16px; bottom: 16px; display: none; width: min(360px, calc(100% - 32px)); padding: 10px 12px; border: 2px solid #e6bd78; background: #34271ddd; color: #fff0c8; box-shadow: 0 8px 22px #0009; font-size: 10px; line-height: 1.45; }
#hazard-warning.is-visible { display: block; }
.battle-panel { left: 50%; bottom: 14px; width: min(570px, calc(100% - 38px)); transform: translateX(-50%); padding: 13px 16px 14px; border-color: #e1c98a; background-color: #101a2bea; }
.inventory-panel { z-index: 20; left: 50%; top: 50%; width: min(820px, calc(100% - 42px)); max-height: calc(100% - 34px); overflow-y: auto; transform: translate(-50%, -50%); padding: 18px 22px 20px; border-color: #cfdf9f; }
.pack-layout { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(180px, .86fr) minmax(200px, 1fr); gap: 12px; }
.pack-layout > section { min-width: 0; padding: 8px; border: 1px solid #536f80; background: #132639d8; }
.pack-layout h2 { margin-top: 0; }
.pack-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 238px; overflow-y: auto; padding-right: 4px; }
.pack-slot { position: relative; display: grid; justify-items: center; align-content: center; min-height: 68px; padding: 5px 3px; border: 1px solid #54758a; color: #e8edd8; background: #15283a; font: inherit; font-size: 9px; cursor: pointer; }
.pack-slot:hover, .pack-slot.is-selected { border-color: #ffe5a0; background: #24445c; }
.pack-slot.is-equipped { box-shadow: inset 0 0 0 1px #b5e784; }
.pack-slot .item-icon { width: 24px; height: 24px; }
.pack-slot b { position: absolute; right: 3px; bottom: 18px; color: #fff0b3; font-size: 9px; text-shadow: 1px 1px #111; }
.pack-slot small { overflow: hidden; max-width: 100%; color: #cddbd5; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.pack-detail { display: grid; align-content: start; gap: 8px; }
.pack-detail h3 { margin: 0; color: #fff1bd; font-size: 13px; }
.pack-detail p { margin: 0; color: #cddbd5; font-size: 10px; line-height: 1.45; }
.pack-detail-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #7890a4; background: #0f1f30; }
.detail-icon { width: 38px; height: 38px; }
.item-action-note { color: #b6cbd0 !important; }
.pack-equipment .item-icon { width: 14px; height: 14px; }
.project-summary { display: grid; gap: 4px; padding: 0; margin: 10px 0 0; list-style: none; color: #c9debb; font-size: 9px; line-height: 1.35; }
.project-summary li { padding: 4px; border-left: 2px solid #74956e; background: #1b3429aa; }
.inventory-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr); gap: 14px; }
.inventory-panel h2 { margin: 10px 0 6px; color: #fff0b9; font-size: 14px; }
.inventory-coins { margin: 0 0 7px; color: #f4d675; font-size: 12px; }
.inventory-list, .upgrade-list { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; }
.inventory-list li, .upgrade-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid #536f80; color: #e8edd8; background: #15283ade; font-size: 10px; line-height: 1.3; }
.upgrade-list li { display: grid; }
.upgrade-list small { color: #c2d8b3; }
.equipment-slot { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 7px; margin: 0 0 7px; padding: 7px; border: 1px solid #536f80; background: #15283ade; color: #d8e8df; font-size: 10px; }
.equipment-slot b { color: #fff0ba; }
.stats-readout { margin: 9px 0 0; color: #c0d8bf; font-size: 10px; line-height: 1.35; }
.upgrade-summary { margin-top: 12px; padding-top: 6px; border-top: 1px solid #597388; }
.reset-confirm { margin-top: 12px; padding: 10px; border: 1px solid #e2a787; color: #ffe1cf; background: #4b2929d9; font-size: 10px; line-height: 1.4; }
.reset-confirm p { margin: 5px 0 9px; }
.reset-confirm .ui-button { margin-right: 6px; }
.chemistry-stand-panel, .merchant-panel, .town-project-panel { z-index: 22; max-height: calc(100% - 36px); overflow-y: auto; }
.chemistry-stand-panel { width: min(650px, calc(100% - 42px)); border-color: #b9e56d; }
.chemistry-formula { margin: 9px 0; padding: 8px; border: 1px solid #7ba85d; color: #efffb5; background: #183324; text-align: center; font-size: 13px; }
.chemistry-sockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 24px minmax(100px, 1fr); gap: 7px; align-items: stretch; }
.chemistry-socket, .chemistry-output { display: grid; justify-items: center; align-content: center; min-height: 92px; gap: 4px; padding: 6px; border: 1px solid #5d7e8c; color: #dcebd1; background: #132b39; font: inherit; font-size: 9px; cursor: pointer; }
.chemistry-socket:hover { border-color: #e6ffac; }
.chemistry-socket.is-filled { border-color: #b8e687; background: #1c4028; }
.chemistry-socket small, .chemistry-output small { color: #b6d9b1; font-size: 9px; }
.chemistry-socket .item-icon, .chemistry-output .item-icon { width: 26px; height: 26px; }
.chemistry-arrow { display: grid; place-items: center; color: #f5e2a4; font-size: 22px; }
.chemistry-output { border-color: #d3b96b; background: #27331f; cursor: default; }
.chemistry-input-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: #e6f2ca; font-size: 10px; }
.chemistry-input-header .ui-button { min-width: 0; padding: 5px 7px; font-size: 9px; }
.chemistry-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 6px; max-height: 130px; overflow-y: auto; margin-top: 7px; }
.chemistry-input { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px; border: 1px solid #557c85; color: #e8edd8; background: #15283a; font: inherit; font-size: 9px; text-align: left; cursor: pointer; }
.chemistry-input:hover, .chemistry-input.is-selected { border-color: #efffb5; background: #234534; }
.chemistry-combine { display: block; margin: 12px 0 0 auto; }
.empty-inventory { color: #bfccd0; font-size: 10px; line-height: 1.4; }
.merchant-panel { width: min(560px, calc(100% - 42px)); border-color: #e6c47c; }
.merchant-coins { margin: 5px 0 9px; color: #f4d675; font-size: 12px; }
.merchant-stock { display: grid; gap: 7px; max-height: 292px; overflow-y: auto; }
.merchant-card { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #617c8e; background: #15283ade; }
.merchant-card .item-icon { width: 26px; height: 26px; }
.merchant-card strong, .merchant-card small, .merchant-card span { display: block; }
.merchant-card strong { color: #fff0ba; font-size: 11px; }
.merchant-card small { margin-top: 3px; color: #c9d8ce; font-size: 9px; line-height: 1.3; }
.merchant-card span { margin-top: 4px; color: #e2d697; font-size: 9px; }
.merchant-card.is-locked { opacity: .65; }
.town-project-panel { width: min(430px, calc(100% - 42px)); border-color: #e5c276; }
.project-item { display: flex; gap: 9px; align-items: center; padding: 8px; border: 1px solid #657b88; background: #15283a; }
.project-item b, .project-item small { display: block; }
.project-item b { color: #fff0ba; font-size: 11px; }
.project-item small { margin-top: 4px; color: #c8d6d1; font-size: 9px; line-height: 1.35; }
.battle-topline, .battle-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; }
.battle-topline { color: #fff0bd; letter-spacing: .06em; }
.battle-topline span { color: #b9d8f5; }
.battle-status { margin: 8px 0 6px; color: #dbe9d5; }
.battle-status b { color: #ffd3bb; }
.battle-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 0; margin: 0 0 8px; list-style: none; }
.battle-enemy { display: flex; justify-content: space-between; gap: 5px; padding: 5px 6px; border: 1px solid #52667d; background: #172536d9; color: #e5ecdf; font-size: 9px; }
.battle-enemy b { color: #ffcfaa; white-space: nowrap; }
.battle-enemy.is-defeated { opacity: .4; text-decoration: line-through; }
.battle-command p { min-height: 28px; margin: 0 0 8px; color: #eef1df; font-size: 11px; line-height: 1.35; }
.battle-command > div { display: flex; justify-content: flex-end; gap: 8px; }
.battle-command small { display: block; margin-top: 7px; color: #bdc9cd; font-size: 9px; line-height: 1.3; }
.battle-special { border-color: #f3d87c; color: #fff7c9; }
.battle-question { border-top: 1px solid #657e91; padding-top: 8px; }
.battle-question p { margin: 5px 0 8px; color: #fff5d5; font-size: 12px; line-height: 1.35; }
.battle-timer { display: flex; justify-content: space-between; align-items: center; color: #c3d5de; font-size: 10px; }
.battle-timer b { min-width: 56px; padding: 3px 6px; border: 1px solid #6f99a6; color: #fff2b8; text-align: center; }
.battle-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.battle-option { min-height: 44px; padding: 7px; border: 1px solid #7ea9cb; color: #f5f4db; background: #173a59; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.28; cursor: pointer; }
.battle-option:hover { border-color: #fff0ad; filter: brightness(1.14); }
@media (max-width: 680px) { .game-shell { padding: 12px; } .game-header { align-items: start; flex-direction: column; gap: 6px; } .controls { text-align: left; } .inventory-grid, .pack-layout { grid-template-columns: 1fr; } .equipment-slot { grid-template-columns: 55px 1fr; } .equipment-slot .ui-button { grid-column: 2; width: max-content; } .chemistry-sockets { grid-template-columns: repeat(3, 1fr); } .chemistry-arrow { grid-column: 1 / -1; transform: rotate(90deg); } .chemistry-output { grid-column: 1 / -1; } }

/* Phase 6 UI theme: opaque, warm pixel-RPG panels. These colour-only overrides
   intentionally preserve existing panel IDs, actions, dimensions, and visibility. */
body { background: radial-gradient(circle at 50% 0%, #E9B981, #65402B 76%); color: var(--ui-ink); }
.eyebrow { color: var(--ui-success); }
.controls { color: var(--ui-ink); }
kbd { border-color: var(--ui-border); color: var(--ui-ink); background: var(--ui-surface); box-shadow: inset 0 -2px var(--ui-secondary); }
#game-wrap { border-color: var(--ui-border); background: var(--ui-ink); box-shadow: 0 16px 0 var(--ui-shadow); }
#game-hud { border-color: var(--ui-border); background: var(--ui-panel); color: var(--ui-ink); box-shadow: 3px 3px 0 var(--ui-shadow); }
#game-hud span { color: var(--ui-info); }
#game-hud small { color: var(--ui-muted); }
#corner-controls { gap: 6px; }
.corner-button { border-color: var(--ui-border); color: var(--ui-ink); background: var(--ui-panel); box-shadow: inset 0 -2px var(--ui-secondary), 2px 2px 0 var(--ui-shadow); }
.corner-button:hover { border-color: var(--ui-reward); filter: none; background: var(--ui-surface); }
.corner-button:focus-visible, .ui-button:focus-visible, .activity-option:focus-visible, .chemistry-input:focus-visible, .chemistry-socket:focus-visible, .pack-slot:focus-visible, .merchant-card button:focus-visible { outline: 2px solid var(--ui-info); outline-offset: 2px; }
.corner-reset { color: var(--ui-error); }
#save-status { color: var(--ui-success); text-shadow: none; }
#interaction-panel { border-color: var(--ui-border); background: var(--ui-panel); color: var(--ui-ink); box-shadow: 3px 3px 0 var(--ui-shadow); }
.game-modal { color: var(--ui-ink); background: var(--ui-panel); background-image: none; border-color: var(--ui-border); box-shadow: 5px 5px 0 var(--ui-shadow), inset 0 0 0 2px var(--ui-surface); }
.dialogue-panel { --accent: var(--ui-info) !important; }
.dialogue-topline, .activity-topline, .battle-topline { color: var(--ui-info); }
.dialogue-topline span, .dialogue-panel p, .activity-intro, .activity-prompt, .battle-command p, .battle-question p { color: var(--ui-ink); }
.ui-button, .activity-option, .icon-close, .battle-option { border-color: var(--ui-border); color: var(--ui-ink); background: var(--ui-secondary); background-image: none; box-shadow: inset 0 -2px #D4972A; }
.ui-button:hover, .activity-option:hover, .battle-option:hover { border-color: var(--ui-ink); background: var(--ui-surface); filter: none; }
.ui-button.minor { background: var(--ui-surface); box-shadow: inset 0 -2px var(--ui-secondary); }
.ui-button:disabled, .activity-option:disabled, .battle-option:disabled { opacity: 1; border-color: var(--ui-muted); color: #F2D6A5; background: var(--ui-muted); box-shadow: none; filter: none; }
.activity-panel, .battle-panel, .inventory-panel, .chemistry-stand-panel, .merchant-panel, .town-project-panel { border-color: var(--ui-border); background-color: var(--ui-panel); }
.activity-panel h2, .inventory-panel h2, .pack-detail h3, .merchant-card strong, .project-item b, .recipe-card strong { color: var(--ui-ink); }
.activity-option, .recipe-card, .merchant-card, .project-item, .pack-layout > section, .pack-slot, .equipment-slot, .inventory-list li, .upgrade-list li, .battle-enemy { border-color: var(--ui-border); color: var(--ui-ink); background: var(--ui-surface); }
.activity-option strong, .merchant-card span, .equipment-slot b, .pack-slot b { color: var(--ui-ink); }
.activity-option span, .recipe-card small, .recipe-card p, .merchant-card small, .project-item small, .pack-detail p, .pack-slot small, .stats-readout, .battle-command small, .battle-timer, .battle-topline span { color: var(--ui-muted); }
.recipe-card.is-locked, .merchant-card.is-locked { opacity: .68; }
.recipe-card.is-crafted { border-color: var(--ui-success); background: #D9E8C7; }
.recipe-cost { border-color: var(--ui-muted); color: var(--ui-muted); background: var(--ui-panel); }
.recipe-cost.has-cost { border-color: var(--ui-success); color: var(--ui-success); }
.recipe-cost.missing-cost { border-color: var(--ui-warning); color: var(--ui-warning); }
.activity-feedback { border-color: var(--ui-info); background: #D4E2E7; color: var(--ui-ink); }
.activity-feedback.is-success { border-color: var(--ui-success); background: #D8E6C5; color: var(--ui-ink); }
.activity-feedback.is-error { border-color: var(--ui-error); background: #F0CDC5; color: var(--ui-ink); }
.gain-readout { color: var(--ui-info); }
.gain-slider { accent-color: var(--ui-info); }
.icon-close { background: var(--ui-secondary); color: var(--ui-ink); }
.icon-close:hover { background: var(--ui-reward); }
.item-icon-glyph { color: var(--ui-info); }
#reward-toast { border-color: var(--ui-reward); background: var(--ui-panel); color: var(--ui-ink); box-shadow: 4px 4px 0 var(--ui-shadow); }
#reward-toast strong { color: var(--ui-reward); }
#reward-toast span { color: var(--ui-ink); }
#reward-toast small { color: var(--ui-info); }
#hazard-warning { border-color: var(--ui-warning); background: #F6D8AF; color: var(--ui-ink); box-shadow: 4px 4px 0 var(--ui-shadow); }
.inventory-coins, .merchant-coins { color: var(--ui-reward); }
.pack-slot:hover, .pack-slot.is-selected, .chemistry-input:hover, .chemistry-input.is-selected { border-color: var(--ui-info); background: #D4E2E7; }
.pack-slot.is-equipped { box-shadow: inset 0 0 0 2px var(--ui-success); }
.pack-detail-icon { border-color: var(--ui-border); background: var(--ui-panel); }
.item-action-note, .empty-inventory { color: var(--ui-muted) !important; }
.project-summary li { border-left-color: var(--ui-success); background: #D8E6C5; color: var(--ui-ink); }
.upgrade-summary { border-top-color: var(--ui-border); }
.upgrade-list small { color: var(--ui-success); }
.reset-confirm { border-color: var(--ui-error); color: var(--ui-ink); background: #F0CDC5; }
.chemistry-formula { border-color: var(--ui-info); color: var(--ui-ink); background: #D4E2E7; }
.chemistry-socket, .chemistry-output { border-color: var(--ui-border); color: var(--ui-ink); background: var(--ui-surface); }
.chemistry-socket:hover { border-color: var(--ui-info); }
.chemistry-socket.is-filled { border-color: var(--ui-success); background: #D8E6C5; }
.chemistry-socket small, .chemistry-output small, .chemistry-input-header { color: var(--ui-muted); }
.chemistry-arrow { color: var(--ui-reward); }
.chemistry-output { border-color: var(--ui-reward); background: #F7E4B2; }
.chemistry-input { border-color: var(--ui-border); color: var(--ui-ink); background: var(--ui-surface); }
.battle-status { color: var(--ui-ink); }
.battle-status b { color: var(--ui-error); }
.battle-enemy b { color: var(--ui-error); }
.battle-special { border-color: var(--ui-reward); background: #F7E4B2; }
.battle-question { border-top-color: var(--ui-border); }
.battle-timer b { border-color: var(--ui-info); color: var(--ui-ink); background: #D4E2E7; }

/* Focused gameplay refinements: compact survival HUD, contextual town actions,
   and the short first-time help card all retain the existing warm UI language. */
#game-hud { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: none; padding: 7px 9px; font-size: 10px; }
#game-hud .hud-health { display: flex; align-items: center; gap: 6px; }
#game-hud .hud-heart { color: var(--ui-error); font-size: 17px; line-height: 1; text-shadow: 1px 1px 0 var(--ui-border); }
#game-hud .hud-health b, #game-hud .hud-coins b { display: block; color: var(--ui-ink); font-size: 10px; white-space: nowrap; }
#game-hud .hud-health-track { display: block; width: 70px; height: 6px; margin-top: 3px; overflow: hidden; border: 1px solid var(--ui-border); background: var(--ui-secondary); }
#game-hud .hud-health-track i { display: block; height: 100%; background: var(--ui-success); }
#game-hud .hud-coins { display: flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid var(--ui-border); color: var(--ui-reward); font-size: 15px; }
#context-action-bar { position: absolute; z-index: 15; left: 50%; bottom: 16px; display: none; max-width: min(420px, calc(100% - 32px)); transform: translateX(-50%); }
#context-action-bar.is-visible { display: block; }
.context-action-button, .context-action-locked { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: 100%; padding: 8px 12px; border: 2px solid var(--ui-border); color: var(--ui-ink); background: var(--ui-panel); box-shadow: 4px 4px 0 var(--ui-shadow); font: inherit; font-size: 11px; text-align: center; }
.context-action-button { cursor: pointer; background: var(--ui-secondary); box-shadow: inset 0 -2px var(--ui-reward), 4px 4px 0 var(--ui-shadow); }
.context-action-button:hover { background: var(--ui-surface); }
.context-action-button:focus-visible { outline: 2px solid var(--ui-info); outline-offset: 2px; }
.context-action-button small, .context-action-locked small { flex-basis: 100%; color: var(--ui-muted); font-size: 9px; line-height: 1.3; }
.context-action-locked { color: var(--ui-muted); background: var(--ui-surface); }
.help-panel { z-index: 24; left: 50%; top: 50%; width: min(500px, calc(100% - 42px)); max-height: calc(100% - 32px); overflow-y: auto; transform: translate(-50%, -50%); padding: 18px 22px 20px; }
.help-list { display: grid; gap: 8px; padding-left: 20px; margin: 12px 0; color: var(--ui-ink); font-size: 11px; line-height: 1.45; }
.help-list li::marker { color: var(--ui-success); }
button.chemistry-output.is-ready { cursor: pointer; border-color: var(--ui-success); background: #D8E6C5; box-shadow: inset 0 -2px var(--ui-success); }
button.chemistry-output.is-ready:hover { border-color: var(--ui-ink); background: #EAF2D8; }
button.chemistry-output:disabled { cursor: default; opacity: .82; }
.chemistry-output.is-collected { border-color: var(--ui-success); background: #D8E6C5; }

/* Browser page chrome only. The presentation is intentionally classic and
   quiet: a dark backdrop, a plain canvas edge, and a small pixel-game masthead. */
body {
  background: #151515;
  color: #d5d5d5;
}
.game-shell {
  padding-block: 30px 38px;
}
.game-header {
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.game-header::after { display: none; }
.game-header h1 {
  width: max-content;
  color: #e7cf91;
  font-family: 'Press Start 2P', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.94rem, 2.1vw, 1.42rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.35;
  text-shadow: 2px 2px 0 #050505;
  transform: scaleX(.87);
  transform-origin: left center;
}
.game-header h1::before { display: none; }
.header-subtitle {
  display: block;
  margin-top: 7px;
  padding: 0;
  border: 0;
  color: #999;
  background: transparent;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: none;
}
.game-header .controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 5px 8px;
  max-width: 620px;
  color: #aaa;
  font-size: .7rem;
  line-height: 1.2;
}
.control-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.control-label { color: #aaa; }
.control-separator { color: #777; }
.game-header .controls kbd {
  display: inline-grid;
  min-height: 20px;
  place-items: center;
  padding: 3px 5px 2px;
  border: 1px solid #555;
  border-radius: 2px;
  color: #ddd;
  background: #262626;
  box-shadow: inset 0 1px #3b3b3b, 0 1px #070707;
  font: inherit;
  font-size: .63rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
#game-wrap {
  border: 3px solid #3c3c3c;
  border-radius: 0;
  box-shadow: 0 14px 36px #0009;
}
@media (max-width: 680px) {
  .game-shell { padding-block: 18px 28px; }
  .game-header { align-items: flex-start; padding: 0; }
  .game-header .controls { justify-content: flex-start; max-width: none; }
}