:root { color-scheme: light; font-family: system-ui, sans-serif; color: #263b2b; background: #f3eedf; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 2rem, 1056px); margin: 0 auto; padding: 2rem 0 1rem; }
main > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
p { line-height: 1.65; margin: 0 0 .75rem; }
.edition { font-size: .8rem; margin-bottom: .5rem; }
h1 { font: bold clamp(2.1rem, 6vw, 3.5rem)/1.05 Georgia, serif; margin: 0; }
.subtitle { font: 1.3rem Georgia, serif; margin: .4rem 0 0; }
.note { font-size: .9rem; margin: 0; }
.screen { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #101b14; border: 8px solid #384e3c; border-radius: 5px; }
.screen:has(#welcome:not([hidden])) { min-height: 18rem; }
#game { width: 100%; height: 100%; }
#welcome { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 1rem; text-align: center; color: #f3eedf; }
.screen-title { font: bold clamp(1.3rem, 4vw, 2.1rem) Georgia, serif; }
#disc-info { max-width: 36rem; font-size: .9rem; overflow-wrap: anywhere; }
button { cursor: pointer; }
.app-button { font: 600 1rem system-ui, sans-serif; background: #edc361; border: 2px solid #edc361; border-radius: 4px; min-height: 44px; padding: .6rem 1.1rem; color: #17271c; }
.app-button:hover { background: #f7d994; border-color: #f7d994; }
.app-button:active { transform: translateY(1px); }
.app-button:disabled { background: #d5d5c8; border-color: #d5d5c8; color: #4b5149; cursor: not-allowed; }
:focus-visible { outline: 3px solid #b2700b; outline-offset: 4px; }
.screen :focus-visible { outline-color: #edc361; }
#game:focus-visible, #game :focus-visible { outline: 3px solid #edc361; outline-offset: -3px; }
.status-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 0; border-bottom: 1px solid #697960; }
.status-bar p { margin: 0; font-size: .9rem; }
.below { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
h2 { font: bold 1.25rem Georgia, serif; margin: 0 0 .85rem; }
dl { margin: 0; }
dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; padding: .4rem 0; border-bottom: 1px solid #c1c7b7; }
dt, dd { font-size: .875rem; margin: 0; }
kbd { font: .8rem system-ui, sans-serif; padding: .1rem .3rem; background: #fffaf0; border: 1px solid #697960; border-radius: 3px; display: inline-block; }
.hint { font-size: .8rem; margin-top: .8rem; }
.save-note p { font-size: .875rem; }
main > footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #697960; font-size: .75rem; }
.skip { position: fixed; top: .5rem; left: .5rem; transform: translateY(-180%); background: #fffaf0; color: #263b2b; padding: .75rem; z-index: 10; }
.skip:focus { transform: none; }
[hidden] { display: none !important; }
@media (min-width: 650px) { main { width: min(100% - 3rem, 1056px); padding-top: 2.5rem; } .below { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; } }
@media (min-width: 1100px) { main { padding-top: 3rem; } .below { gap: 4rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }