:root { color-scheme: dark; --paper: #eee1c7; --muted: #b5a38a; --amber: #c79555; --safe-left: env(safe-area-inset-left,0px); --safe-right: env(safe-area-inset-right,0px); }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #241b15; color: var(--paper); }
body { overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #e6c490; outline-offset: 5px; }
[hidden] { display: none !important; }
.room { position: fixed; inset: 0; overflow: hidden; }
.scene { position: absolute; width: 1536px; height: 1024px; transform-origin: 0 0; will-change: transform; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.room-image { position: absolute; inset: 0; width: 1536px; height: 1024px; user-select: none; }
.screen { position: absolute; left: 563px; top: 298px; width: 370px; height: 265px; overflow: hidden; border-radius: 24px / 18px; background: #080c09; box-shadow: inset 0 0 20px 6px #0009; }
#game, #crt { display: block; position: absolute; left: 8px; top: 6px; width: calc(100% - 16px) !important; height: calc(100% - 12px) !important; image-rendering: pixelated; outline: none; touch-action: none; }
#game { opacity: 0; pointer-events: none; }
#crt { cursor: pointer; }
body[data-state="off"] #crt, body[data-state="loading"] #crt, body[data-state="error"] #crt { visibility: hidden; }
.scanlines { position: absolute; inset: 0; pointer-events: none; opacity: .09; background: repeating-linear-gradient(0deg,#000 0,#000 1px,transparent 1px,transparent 3px); box-shadow: inset 0 0 20px #000b; }
.screen-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; text-align: center; background: radial-gradient(ellipse,#19241c,#080c09); }
.off-mark { color: #7b8f73; font-size: 30px; }
.screen-title { font: 34px/1.2 Georgia, serif; margin: 8px 0; color: #d6dfc3; text-shadow: 0 0 10px #a4c49b40; }
#boot-status { font-size: 14px; color: #95a58f; margin: 6px 0 25px; max-width: 340px; }
.power-button { border: 1px solid #536448; padding: 13px 20px; background: #243120; border-radius: 4px; color: #d5ddc6; font-size: 17px; }
.power-button:hover { background: #33422d; }
.tv-switch { position: absolute; left: 994px; top: 505px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; }
.tv-switch:hover { box-shadow: 0 0 12px 4px #ffe7a060; }
.room-shade { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg,#0e090855,transparent 24%,transparent 64%,#0d090bdd); }
.masthead { position: fixed; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 30px 40px; pointer-events: none; }
.masthead > * { pointer-events: auto; }
.identity { text-decoration: none; color: var(--paper); text-shadow: 0 2px 14px #000; }
.identity span { display: block; font: 29px/1.2 Georgia, serif; }
.identity small { display: block; margin-top: 6px; font-size: 12px; color: #d4c4ac; }
.quiet-button { border: 1px solid #e5caa230; border-radius: 30px; padding: 10px 15px; background: #21191160; backdrop-filter: blur(10px); }
.quiet-button span { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #b5a38a90; border-radius: 50%; margin-left: 8px; font: 12px Georgia,serif; }
.controls { position: fixed; bottom: calc(var(--viewport-bottom,0px) + max(23px,env(safe-area-inset-bottom))); left: 20px; right: 20px; text-align: center; }
.session-hint { margin: 0 0 16px; color: #dfd0b9; font-size: 13px; text-shadow: 0 2px 8px #000; }
nav { display: inline-flex; gap: 2px; padding: 5px; border: 1px solid #d2b18430; border-radius: 8px; background: #241a13c9; backdrop-filter: blur(14px); box-shadow: 0 6px 25px #0003; }
nav button { border: 0; background: transparent; padding: 11px 17px; border-radius: 4px; font-size: 13px; }
nav button:hover, nav button[aria-pressed="true"], nav button[aria-expanded="true"] { background: #b68b4930; }
.room-options { display: contents; }
#room-options-toggle { display: none; }
.source-credit { font-size: 10px; color: #bdac90; margin: 17px 0 0; }
.source-credit span { padding: 0 5px; }
.source-credit a { color: inherit; text-underline-offset: 3px; }
.keyboard { position: fixed; width: min(640px,calc(100% - 24px)); left: 50%; bottom: var(--keyboard-bottom,154px); transform: translateX(-50%); padding: 13px 12px 15px; background: #2b2119f5; border: 1px solid #9b7d5360; border-radius: 10px; box-shadow: 0 15px 60px #0008; backdrop-filter: blur(15px); }
.keyboard-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 0 5px 8px; }
.keyboard-heading button, .help-heading button { border: 0; background: transparent; font-size: 24px; line-height: 1; padding: 3px 8px; }
.key-row { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.key-row button { border: 1px solid #816b4c; border-bottom: 3px solid #16120e; background: linear-gradient(#5b4a35,#403325); min-width: 40px; height: 40px; border-radius: 4px; color: #f3e7d1; font-size: 16px; touch-action: none; }
.key-row button:active, .key-row button.held { background: #8d724d; transform: translateY(1px); }
.action-keys button { flex: 1; font-size: 13px; }
dialog { color-scheme: light; color: #463426; border: 0; border-radius: 4px; background: #eee1c7; width: min(470px,calc(100vw - 30px)); padding: 26px 32px 32px; max-height: calc(100dvh - 30px); overflow: auto; box-shadow: 0 30px 100px #0007; }
dialog::backdrop { background: #0a080bb0; backdrop-filter: blur(5px); }
.help-heading { display: flex; justify-content: space-between; align-items: center; color: #806849; font-size: 12px; }
.help-heading p { margin: 0; }
dialog h1 { font: 32px Georgia,serif; margin: 20px 0; }
dialog p { line-height: 1.7; font-size: 14px; }
dialog dl { display: grid; grid-template-columns: 95px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid #b397713a; border-bottom: 1px solid #b397713a; }
dialog dt { font-weight: 600; }
dialog dd { margin: 0; }
kbd { font: 12px system-ui,sans-serif; background: #dfcfb2; padding: 2px 5px; border: 1px solid #b8a584; border-radius: 3px; }
.help-footnote { color: #7c654c; font-size: 12px; }
.help-play { width: 100%; padding: 13px; border: 0; background: #58432e; color: #eee1c7; margin-top: 12px; border-radius: 3px; }
.jsdos-progress, .jsdos-start, .jsdos-support, .jsdos-fullscreen { display: none !important; }
@media (max-width: 640px) {
  .masthead { padding: 22px 20px; }
  .identity span { font-size: 23px; }
  .quiet-button { font-size: 12px; padding: 8px 11px; }
  .controls { left: 12px; right: 12px; bottom: max(17px,env(safe-area-inset-bottom)); }
  nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 460px; margin: auto; }
  nav button { padding: 10px 11px; font-size: 12px; }
  .source-credit { font-size: 9px; line-height: 1.6; margin-top: 12px; }
  .session-hint { font-size: 11px; margin-bottom: 12px; }
  .keyboard { bottom: 160px; padding: 10px 6px; }
  .key-row { gap: 3px; }
  .key-row button { min-width: 0; width: calc((100% - 30px)/12); height: 35px; font-size: 14px; }
  .action-keys button { font-size: 11px; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .masthead { padding: 12px 20px; }
  .identity span { font-size: 20px; }
  .identity small, .session-hint, .source-credit { display: none; }
  .controls { bottom: 12px; }
  nav button { padding: 8px 12px; }
  .keyboard { bottom: 62px; }
}
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } }
/* Phones and touch tablets keep the primary game controls in one thumb row. */
body[data-compact="true"] .masthead { padding: max(12px,env(safe-area-inset-top)) calc(16px + var(--safe-right)) 8px calc(16px + var(--safe-left)); }
body[data-compact="true"] .identity span { font-size: 22px; }
body[data-compact="true"] .quiet-button { min-height: 44px; }
body[data-compact="true"] .controls { left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); bottom: calc(var(--viewport-bottom,0px) + max(12px,env(safe-area-inset-bottom))); }
body[data-compact="true"] nav { display: flex; flex-wrap: nowrap; width: min(640px,100%); max-width: none; margin: auto; }
body[data-compact="true"] nav > button { flex: 1; min-height: 44px; padding: 6px; font-size: 12px; }
body[data-compact="true"] #room-options-toggle { display: block; flex: 0 0 44px; font-size: 26px; }
body[data-compact="true"] .room-options { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); width: 220px; padding: 6px; border: 1px solid #816b4c; border-radius: 8px; background: #2b2119; box-shadow: 0 10px 35px #0008; }
body[data-compact="true"] .room-options.open { display: flex; flex-direction: column; }
body[data-compact="true"] .room-options button { min-height: 44px; }
body[data-compact="true"] .source-credit { display: none; }
body[data-compact="true"] .session-hint { font-size: 11px; line-height: 1.4; margin-bottom: 8px; }
body[data-compact="true"] .keyboard { bottom: var(--keyboard-bottom,154px); width: calc(100% - 24px - var(--safe-left) - var(--safe-right)); max-width: 640px; padding: 8px 6px; }
body[data-compact="true"] .keyboard-heading { min-height: 32px; margin-bottom: 0; }
body[data-compact="true"] #keyboard-close { min-width: 44px; min-height: 44px; }
body[data-compact="true"] .key-row { gap: 3px; }
body[data-compact="true"] .key-row button { min-width: 0; width: calc((100% - 33px)/12); height: 44px; font-size: 14px; }
body[data-compact="true"] .action-keys button { flex: 1; width: auto; font-size: 12px; }
body[data-compact="true"] .action-keys [data-key="32"] { flex: 1.7; }
body[data-compact="true"] .action-keys [data-key="38"], body[data-compact="true"] .action-keys [data-key="40"] { display: none; }
body[data-compact="true"][data-landscape="true"] .identity small,
body[data-compact="true"][data-landscape="true"] .session-hint { display: none; }
body[data-compact="true"][data-landscape="true"] .keyboard { left: auto; right: calc(12px + var(--safe-right)); width: min(360px,46vw); transform: none; }
body[data-compact="true"][data-landscape="true"][data-keyboard="true"] .controls { right: calc(min(360px,46vw) + 24px + var(--safe-right)); }
@media (max-height: 360px) {
  body[data-compact="true"][data-landscape="true"][data-keyboard="true"] .masthead { display: none; }
}
@media (max-height: 700px) {
  body[data-compact="true"][data-landscape="false"][data-keyboard="true"] .masthead,
  body[data-compact="true"][data-landscape="false"][data-keyboard="true"] .session-hint { display: none; }
}