* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #071016; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d8f5ef; }
#game-shell { position: relative; width: 100vw; height: 100vh; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }
.hud { position: absolute; inset: 0; pointer-events: none; padding: 22px 26px; text-shadow: 0 2px 0 #071016; }
.brand { color: #ffc857; letter-spacing: .18em; font-weight: 800; font-size: 14px; }
.brand span { color: #72949a; font-weight: 400; font-size: 10px; }
#status { display: inline-block; margin-top: 12px; padding: 6px 10px; border: 1px solid #3c6868; border-radius: 4px; background: rgba(3, 14, 18, .92); color: #efffff; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-shadow: 1px 1px #061014; }
#status.damaged { border-color: #ff5b5b; color: #ff8d8d; box-shadow: 0 0 10px rgba(255, 48, 48, .55); }
#status::after { content: attr(data-armor); display: block; margin-top: 3px; color: #79c8e8; font-size: 11px; font-weight: 700; }
#heal-indicator { display: inline-block; margin-left: 8px; color: #ff4d4d; font-size: 22px; font-weight: 900; animation: healing-pulse 1s ease-in-out infinite alternate; vertical-align: middle; }
#heal-indicator[hidden] { display: none; }
#poison-indicator { display: inline-block; margin-left: 8px; color: #c77dff; font-size: 20px; font-weight: 900; animation: poison-pulse 1s ease-in-out infinite alternate; vertical-align: middle; }
#poison-indicator[hidden] { display: none; }
@keyframes poison-pulse { from { opacity: .5; } to { opacity: .8; } }
@keyframes healing-pulse { from { opacity: .5; } to { opacity: .8; } }
#ammo-hud { margin-top: 10px; width: max-content; min-width: 132px; padding: 7px 10px; color: #e6fff3; background: rgba(10, 27, 32, .86); border: 1px solid #527d7d; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
#ammo-hud[hidden] { display: none; }
#vehicle-hud { margin-top: 10px; width: max-content; padding: 7px 10px; color: #e6fff3; background: rgba(10,27,32,.86); border: 1px solid #527d7d; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
#vehicle-hud[hidden] { display: none; }
#time-hud { margin-top: 6px; width: max-content; padding: 5px 8px; color: #8ee8ff; background: rgba(10,27,32,.86); border: 1px solid #527d7d; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
#time-hud[hidden] { display: none; }
#hotkeys { display: flex; gap: 8px; margin-top: 10px; pointer-events: auto; }
.hotkey-slot { position: relative; width: 52px; height: 52px; border: 2px solid #3e686d; color: #ffc857; background: #0a1b20; font-size: 25px; cursor: grab; image-rendering: pixelated; }
.hotkey-slot::before { content: attr(data-hotkey); position: absolute; left: 3px; top: 2px; color: #8eb2ae; font-size: 9px; font-weight: 900; line-height: 1; pointer-events: none; }
.hotkey-slot.filled { border-color: #ffc857; background: #19333a; }
.hotkey-slot.depleted { opacity: .6; }
.hotkey-slot.unusable { opacity: .6; }
.hotkey-slot .item-icon { line-height: 42px; }
.hotkey-slot .item-count { right: 4px; bottom: 1px; }
.hotkey-slot:hover { border-color: #efffff; }
.hotkey-badge { position: absolute; left: 3px; top: 2px; color: #ffc857; font-size: 9px; font-weight: 900; line-height: 1; }
#flight-instruction { margin-top: 12px; color: #ffc857; font-size: 11px; line-height: 1.5; }
#flight-instruction[hidden] { display: none; }
#interaction-prompt { position: absolute; transform: translate(-50%, -155%); padding: 4px 7px; color: #071016; background: #ffc857; border-radius: 3px; font-size: 12px; font-weight: 900; pointer-events: none; z-index: 10; }
#interaction-prompt.disabled { color: #9aa8a8; background: rgba(180,190,190,.7); opacity: .7; }
#inspect-tooltip { position: absolute; z-index: 12; min-width: 130px; padding: 7px 9px; color: #e6fff3; background: rgba(7,16,22,.94); border: 1px solid #ffc857; font: 11px ui-monospace, monospace; line-height: 1.45; pointer-events: none; }
#inspect-tooltip strong { color: #ffc857; }
.controls { position: absolute; left: 26px; bottom: 22px; color: #65858c; font-size: 10px; letter-spacing: .04em; }
kbd { color: #e6fff3; border: 1px solid #42646a; background: #10252b; padding: 3px 5px; border-radius: 3px; margin-right: 3px; }
#prompt { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 10px 14px; color: #071016; background: #ffc857; border-radius: 4px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 0 #8b672c; pointer-events: none; }
#ui-layer { position: absolute; inset: 0; pointer-events: none; }
#ground-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ground-item { position: absolute; min-width: 0; padding: 0; transform: translate(-50%, -50%); color: #ffc857; background: transparent; border: 0; font: 20px sans-serif; text-align: center; cursor: grab; pointer-events: auto; user-select: none; }
.ground-item-count { position: absolute; right: 1px; bottom: -2px; color: #fff; font: 800 10px ui-monospace, monospace; text-shadow: 0 1px 2px #000; }
.game-window { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 310px; padding: 0; background: rgba(10, 26, 31, .97); border: 2px solid #6fa6a1; box-shadow: 8px 8px 0 rgba(0,0,0,.35); pointer-events: auto; z-index: 5; }
.game-window#inventory-window { left: 35%; }
.game-window#equipment-window { left: 65%; }
.game-window#character-window { min-width: 280px; }
.game-window#vehicle-inventory-window { left: 50%; top: 24%; }
.window-bar { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 9px; color: #ffc857; background: #16343a; border-bottom: 2px solid #527d7d; font-size: 11px; font-weight: 800; letter-spacing: .12em; cursor: grab; user-select: none; }
.window-close { border: 0; color: #d8f5ef; background: transparent; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.window-body { padding: 14px; }
.slots-grid { display: grid; grid-template-columns: repeat(4, 52px); gap: 8px; }
.item-slot { position: relative; width: 52px; height: 52px; border: 2px solid #3e686d; color: #ffc857; background: #0a1b20; font-size: 25px; image-rendering: pixelated; cursor: grab; }
.equipment-slot::before { content: attr(data-slot-label); position: absolute; left: 3px; top: 2px; color: #8eb2ae; font-size: 7px; font-weight: 800; letter-spacing: .03em; line-height: 1; pointer-events: none; }
.equipment-slot .item-icon { line-height: 42px; }
.item-slot:hover, .item-slot.filled { border-color: #ffc857; background: #19333a; }
.item-icon { display: block; line-height: 42px; }
.item-count { position: absolute; right: 4px; bottom: 1px; color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.empty-inventory { color: #819da0; font-size: 10px; }
.game-window.disabled { opacity: .55; pointer-events: none; filter: grayscale(.7); }
.skill-list { display: grid; gap: 12px; }
.skill-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; min-width: 220px; color: #d8f5ef; font-size: 11px; }
.skill-row strong { color: #ffc857; letter-spacing: .08em; }
.skill-progress { grid-column: 1 / -1; height: 7px; border: 1px solid #3e686d; background: #071016; }
.skill-progress i { display: block; height: 100%; background: #72f1a8; }
.vehicle-context-menu { position: absolute; z-index: 20; display: grid; min-width: 150px; padding: 6px; gap: 4px; background: rgba(10,26,31,.98); border: 2px solid #6fa6a1; box-shadow: 5px 5px 0 rgba(0,0,0,.35); pointer-events: auto; }
.vehicle-context-menu[hidden] { display: none; }
.vehicle-context-title { padding: 4px 6px; color: #ffc857; font-size: 11px; letter-spacing: .08em; }
.vehicle-context-menu button { padding: 6px 8px; border: 1px solid #3e686d; color: #d8f5ef; background: #0a1b20; text-align: left; font: 11px ui-monospace, monospace; cursor: pointer; }
.vehicle-context-menu button:hover:not(:disabled) { border-color: #ffc857; color: #ffc857; }
.vehicle-context-menu button:disabled { color: #7d8585; opacity: .7; }
.vehicle-context-menu button[hidden] { display: none; }
.vehicle-refuel-dialog { position: absolute; z-index: 21; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; min-width: 270px; gap: 10px; padding: 14px; color: #d8f5ef; background: rgba(10,26,31,.98); border: 2px solid #ffc857; box-shadow: 7px 7px 0 rgba(0,0,0,.35); pointer-events: auto; font-size: 11px; }
.vehicle-refuel-dialog[hidden] { display: none; }
.vehicle-refuel-dialog strong { color: #ffc857; letter-spacing: .1em; }
.vehicle-refuel-dialog label { display: grid; gap: 4px; color: #8eb2ae; }
.vehicle-refuel-dialog input { width: 100%; padding: 6px; border: 1px solid #527d7d; color: #efffff; background: #071016; font: inherit; }
.vehicle-refuel-actions { display: flex; justify-content: flex-end; gap: 8px; }
.vehicle-refuel-actions button { padding: 6px 9px; border: 1px solid #527d7d; color: #d8f5ef; background: #0a1b20; font: inherit; cursor: pointer; }
.vehicle-refuel-actions button:disabled { opacity: .5; cursor: not-allowed; }