:root{color-scheme:dark;--ink:#122322;--paper:#fff0d1;--amber:#ffd476;--green:#badb98;font-family:system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#24403a,#101a1b 70%);color:var(--paper)}
main{width:min(1120px,100%);margin:auto;padding:24px 22px 16px}
header,footer,.dashboard,.brief{display:flex;align-items:center;justify-content:space-between;gap:14px}
header{margin-bottom:15px}
.brand span,.label,footer span,#chapter{font:700 .67rem ui-monospace,monospace;letter-spacing:.13em;color:var(--amber)}
h1,h2{font-family:Georgia,serif;margin:0;letter-spacing:-.045em}
h1{font-size:clamp(2rem,6vw,4rem);line-height:1.05}
button{border:1px solid #a98750;border-radius:7px;background:#31423a;color:var(--paper);font:700 .85rem system-ui;padding:.65rem .9rem;cursor:pointer;touch-action:none;user-select:none}
button:hover,button[aria-pressed=true]{background:#526247;border-color:var(--amber)}
button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.dashboard{display:grid;grid-template-columns:1fr 1fr 1fr;background:#172623;border:1px solid #516456;border-bottom:0;border-radius:12px 12px 0 0;padding:12px 16px}
.dashboard strong,.dashboard label{display:block}
.dashboard b{float:right;color:#fff}
progress{appearance:none;width:100%;height:8px;border:0;border-radius:5px;overflow:hidden;background:#3c5046;accent-color:var(--green)}
progress::-webkit-progress-bar{background:#3c5046}
progress::-webkit-progress-value{background:var(--green)}
#cargo.damaged::-webkit-progress-value{background:#ffa55e}
.viewport{position:relative;overflow:hidden;border:1px solid #516456;border-radius:0 0 12px 12px;background:#f1c681}
canvas{display:block;width:100%;height:clamp(230px,50vh,540px)}
.card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88%,410px);padding:20px;text-align:center;border:2px solid #d9a75c;border-radius:14px;background:#1b2d28;box-shadow:0 12px 45px #10201bb0;animation:arrive .3s ease-out}
@keyframes arrive{from{opacity:0;transform:translate(-50%,-43%) scale(.94)}}
h2{font-size:clamp(1.65rem,5vw,2.75rem)}
.card p{margin:.5rem 0 1rem}
.brief{justify-content:flex-start;min-height:58px}
#chapter{white-space:nowrap}
#prompt{margin:.45rem 0;color:#f6e2ba;font-size:.9rem}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.controls button,#continue{background:#805122 url(assets/button.png) center/100% 100% no-repeat;color:#302010;text-shadow:0 1px #f6d995;border:1px solid #9f7740;min-height:46px}
.controls button[aria-pressed=true],#continue:hover{filter:brightness(1.28);transform:translateY(2px)}
kbd{margin-left:.35rem;border:1px solid #e9c98b77;border-radius:4px;padding:.08rem .25rem}
footer{margin-top:11px}
footer button{padding:.36rem .55rem}
@media(max-width:550px){main{padding:10px}.dashboard{gap:8px;padding:9px}.label{font-size:.58rem}.controls{gap:5px}.controls button{padding:.4rem .25rem;font-size:.73rem}.controls kbd{display:block;width:max-content;margin:2px auto 0}footer span{font-size:.56rem;text-align:right}.brief{min-height:65px}}
@media(max-height:520px) and (orientation:landscape){main{padding-top:5px}h1{font-size:1.9rem}header{margin-bottom:5px}.dashboard{padding:5px 10px}canvas{height:42vh}.brief{min-height:34px}.controls button{min-height:35px;padding:.3rem}footer{margin-top:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}