:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #e8d9ba; font-family: Arial, Helvetica, sans-serif; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#game-shell { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; background: #d9c58e; }
#game { display: block; width: 100%; height: 100%; }
#hud { position: absolute; z-index: 2; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: max(15px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); color: #173e4b; pointer-events: none; }
.brand { display: flex; gap: 7px; align-items: center; font-size: 10px; line-height: .95; font-weight: 900; letter-spacing: 1.6px; }
.mark { font-size: 20px; color: #ed6b42; }
.mission { text-align: center; border: 2px solid #173e4b; background: #f7edcf; padding: 7px 14px 6px; box-shadow: 3px 3px 0 #173e4b; min-width: 160px; }
.mission span { display: block; font-size: 9px; letter-spacing: 1.5px; font-weight: 800; color: #dd5b3e; margin-bottom: 3px; }
.mission strong { display: block; font-size: 10px; letter-spacing: .8px; }
.readouts { justify-self: end; text-align: right; font-size: 11px; font-weight: 900; letter-spacing: 1px; line-height: 1.8; }
.readouts span { display: block; } #cargo { color: #e25539; font-size: 16px; letter-spacing: 2px; }
#restart { position: absolute; z-index: 3; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 43px; height: 43px; border: 2px solid #173e4b; background: #f7edcf; color: #173e4b; box-shadow: 3px 3px 0 #173e4b; border-radius: 50%; font-size: 24px; font-weight: bold; cursor: pointer; }
#restart:active, button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #173e4b; }
#message { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(23,62,75,.22); transition: opacity .25s; }
#message.hidden { opacity: 0; pointer-events: none; }
.message-card { width: min(460px, 92vw); border: 3px solid #173e4b; background: #f7edcf; box-shadow: 9px 9px 0 #173e4b; padding: clamp(22px,5vw,38px); text-align: center; }
.eyebrow { margin: 0 0 12px; color: #dd5b3e; font-size: 11px; font-weight: 900; letter-spacing: 2.5px; }
h1 { margin: 0; color: #173e4b; font-family: Georgia, serif; font-size: clamp(28px,7vw,46px); line-height: .95; }
.message-card p:not(.eyebrow) { margin: 19px auto 23px; color: #285a63; max-width: 350px; line-height: 1.45; font-size: 14px; }
button { font: inherit; } #start { border: 2px solid #173e4b; background: #ed6b42; color: #fff8df; box-shadow: 4px 4px 0 #173e4b; padding: 12px 22px; font-weight: 900; letter-spacing: 1.5px; cursor: pointer; }
@media (max-width: 520px) { #hud { grid-template-columns: 1fr auto; } .mission { grid-row: 2; grid-column: 1 / 3; justify-self: center; margin-top: 12px; } .readouts { font-size: 9px; } .brand { font-size: 9px; } }