canvas { image-rendering: pixelated; display: block; background: #000; }
#game { display: flex; flex-direction: column; align-items: stretch; margin-top: calc(var(--header-gap) / 2); }
.game-fullscreen, .game-fullscreen body { background: #000; overflow: hidden; }
.game-fullscreen #site-header { display: none; }
.game-fullscreen #play { width: 100%; }
.game-fullscreen #game { height: 100dvh; justify-content: center; align-items: center; margin-top: 0; }
.game-fullscreen #game > :not(#play-area) { display: none; }
/* Opaque backing keeps the CRT blur's transparent edges from revealing its overlay. */
#canvas-box { position: relative; container-type: inline-size; background: #000; border: var(--canvas-padding, 0px) solid #000; }
#screen:focus-visible { outline: none; }
#screen-focus { display: block; position: absolute; inset: calc(-1 * var(--canvas-padding, 0px)); width: calc(100% + 2 * var(--canvas-padding, 0px)); height: calc(100% + 2 * var(--canvas-padding, 0px)); fill: none; stroke: #56734e; stroke-width: 6px; filter: blur(1.5px); pointer-events: none; }
body:has(#map-screen:not([hidden])) { overflow: hidden; }
#map-screen { position: fixed; inset: 85px 0 0; z-index: 2; display: flex; flex-direction: column; background: #0b130d; color: #d8e4cd; font: 14px/1.4 monospace; }
.game-fullscreen #map-screen { inset: 0; }
#map-heading { display: flex; align-items: center; gap: 20px; padding: 12px 20px; border-bottom: 1px solid #354537; }
#map-heading h2 { margin: 0; font: 22px/1.2 'Cinzel', Georgia, serif; }
#close-map { margin-left: auto; }
#map-hint { margin: 0; padding: 10px 16px; color: #8a9c83; text-align: center; font-size: 12px; }
@media (max-width: 480px) {
  #map-heading { gap: 12px; padding: 12px; }
  #map-heading h2 { font-size: 18px; }
  #map-hint { font-size: 10px; }
}
#help-screen { box-sizing: border-box; width: 33.333%; min-width: min(240px, 100%); align-self: center; color: #fff; font: 10px/1.5 'Green-Sky', monospace; text-transform: uppercase; }
#play-area:has(#map-screen:not([hidden])) #help-screen { position: fixed; z-index: 3; top: 150px; right: 12px; bottom: 40px; width: min(360px, calc(100% - 24px)); overflow-y: auto; background: #101910; border: 1px solid #354537; }
.game-fullscreen #play-area:has(#map-screen:not([hidden])) #help-screen { top: 65px; }
#help-heading { margin: .75em .75em 0; padding: 0 .25em; background: #fff; color: #000; font: inherit; }
#help-content { padding: 0 .75em 1em; min-width: 0; overflow-wrap: anywhere; }
#help-content h1, #help-content h2, #help-content h3 { font: inherit; text-transform: uppercase; margin: 1.5em 0 .75em; }
#help-content h2 { background: #fff; color: #000; padding: 0 .25em; }
#help-content p, #help-content ul, #help-content ol { margin: .75em 0; }
#help-content ul, #help-content ol { padding-left: 1em; }
#help-content li { margin: .5em 0; }
#help-content strong { font-weight: normal; text-decoration: underline; }
#help-content a { color: inherit; }
#help-content code { font: inherit; }
#map-tools { display: flex; align-items: center; gap: 8px; }
#map-tools button { min-width: 32px; padding: 4px 8px; }
#map-tools button:disabled { opacity: .4; cursor: default; }
#map-viewport { display: flex; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
#map-grid { display: grid; width: 100%; flex-shrink: 0; margin-block: auto; user-select: none; }
#map-grid > span { min-width: 0; aspect-ratio: 2; background: #000; }
#map-grid > .unseen { background: transparent; }
#map-grid canvas { width: 100%; height: 100%; }
#map-grid .current { outline: 2px solid #fff; outline-offset: -2px; }
#crt, #crt > div { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
#crt { z-index: 1; background: radial-gradient(ellipse at center, #fff 55%, #bbb 100%); }
#scanlines { background: repeating-linear-gradient(to bottom, #fff 0, #fff calc(var(--row) * .5), #9e9e9e calc(var(--row) * .75), #fff var(--row)); }
#stripes { background: repeating-linear-gradient(to right, #ffdbdb 0, #ffdbdb calc(var(--stripe) / 3), #dbffdb calc(var(--stripe) / 3), #dbffdb calc(var(--stripe) * 2 / 3), #dbdbff calc(var(--stripe) * 2 / 3), #dbdbff var(--stripe)); }
#canvas-box:not(.stripes) #stripes { display: none; }
#canvas-box.crt > #screen { filter: brightness(1.3) blur(var(--blur)); }
dialog {
  position: static; align-self: center; margin: 8px 0 0;
  background: #101910; color: #b6e6a4; border: 1px solid #567; width: min(480px, 85vw);
}
textarea { display: block; box-sizing: border-box; width: 100%; min-height: 108px; margin: 10px 0; background: #000; color: #d6f897; font: inherit; }
#issue-result { overflow-wrap: anywhere; }

#play-area { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#monitor.unfitted { visibility: hidden; }
#canvas-box { flex: none; }
#replay-controls { align-self: center; text-align: center; }
#replay-navigation { display: flex; align-items: center; justify-content: center; gap: 4px; }
#replay-navigation button { touch-action: manipulation; }
#replay-navigation [data-replay-rooms] svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
#replay-progress { display: block; margin-top: 8px; }
#replay-navigation button, #replay-progress { font: var(--game-font-size)/1 'Green-Sky', monospace; text-transform: uppercase; }
#command-menu { position: absolute; left: 0; top: var(--menu-top); width: 100%; height: var(--menu-height); padding: 0; border: 0; background: transparent; }
#command-menu:focus-visible { outline-offset: -2px; }

/* Cabinet dimensions also reserve room when fitting the game to the window. */
#monitor {
  --rim: 14px; --chin: 100px; --side: 0px;
  display: grid; grid-template-columns: auto; grid-template-rows: auto var(--chin);
  padding: var(--rim); border-radius: 12px 12px 8px 8px;
  color: #403a30; background: linear-gradient(115deg, #d2c9b4, #b0a58e);
  box-shadow: inset 0 2px 1px #f6ebd6, inset 0 -5px 2px #756b58, 0 10px 22px #0009;
}
#monitor #canvas-box { border-radius: 10px; box-shadow: 0 0 0 5px #49463d, 0 0 0 7px #817866, 0 3px 7px 7px #0005; }
#monitor-controls { display: flex; align-items: center; gap: 20px; font: 9px/1.4 Arial, sans-serif; letter-spacing: .12em; }
#monitor #volume { width: 88px; height: 16px; accent-color: #514c40; cursor: pointer; }
#monitor-power { display: grid; place-items: center; padding: 5px; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; }
.power-light { width: 5px; height: 5px; background: #ff543d; border-radius: 50%; box-shadow: 0 0 5px #ff543d99; }
.power-switch { display: grid; place-items: center; width: 27px; height: 17px; background: linear-gradient(#6a6253, #514a3e); border: 1px solid #40392d; box-shadow: inset 0 2px 4px #0008; border-radius: 2px; }
#monitor.powered-off .power-light { background: #562e25; box-shadow: none; }
#monitor.powered-off .power-switch { background: linear-gradient(#8e8471, #635a49); box-shadow: 0 2px 1px #342d21; transform: translateY(-2px); }
#monitor.powered-off #canvas-box > * { visibility: hidden; }
#monitor.powered-off #canvas-box { background: radial-gradient(ellipse at 40% 25%, #202522, #090d0b 80%); }
#monitor[data-surround="portable"] {
  --rim: 20px; --chin: 0px; --side: 112px;
  grid-template-columns: auto var(--side); grid-template-rows: auto;
  background: linear-gradient(110deg, #8b7761, #5b4939); color: #e2d5bc;
  border-radius: 18px; box-shadow: inset 0 2px 1px #b6a38b, inset 0 -6px 2px #392e24, 0 10px 22px #0009;
}
#monitor[data-surround="portable"] #canvas-box { box-shadow: 0 0 0 6px #272621, 0 0 0 9px #aa9a82; }
#monitor[data-surround="portable"] #monitor-controls { flex-direction: column; padding: 8px 0 4px 20px; gap: 18px; }
#monitor[data-surround="portable"] #volume { accent-color: #ded0b5; }
#monitor[data-surround="dark"] {
  color: #9d9d90; background: linear-gradient(120deg, #30332f, #151a16);
  box-shadow: inset 0 1px 1px #666b5c, inset 0 -4px 2px #090d09, 0 12px 30px #000b;
}
#monitor[data-surround="dark"] #canvas-box { box-shadow: 0 0 0 5px #101510, 0 0 0 7px #3c4038; }
#monitor[data-surround="dark"] #volume { accent-color: #9d9d90; }
@media (max-width: 600px) {
  #monitor { --rim: 10px; --chin: 100px; }
  #monitor-controls { gap: 10px; }
  #monitor[data-surround="portable"] { --rim: 12px; --side: 82px; }
  #monitor[data-surround="portable"] #monitor-controls { padding-left: 12px; gap: 10px; }
  #monitor[data-surround="portable"] #volume { width: 64px; }
}

#monitor-controls #fullscreen { display: grid; place-items: center; flex: none; width: 29px; height: 25px; padding: 3px; margin: 5px; color: #e2d5bc; background: linear-gradient(#6a6253, #514a3e); border: 1px solid #40392d; border-radius: 2px; box-shadow: inset 0 2px 4px #0008; }
#fullscreen svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
#music-notes { --groove: #514d4166; position: relative; flex: 1; min-width: 40px; height: 88px; overflow: hidden; pointer-events: none; container-type: inline-size; }
#music-notes > .staff-lines { position: absolute; top: 22px; left: 0; width: 100%; height: 34px; fill: none; stroke: var(--groove); stroke-width: 1px; shape-rendering: crispEdges; }
#music-notes > [data-register] { position: relative; top: -15px; display: block; height: 87px; }
#music-notes :is([data-rhythm], [data-measure]) { position: absolute; left: 0; top: 0; color: #30392b; }
#music-notes [data-rhythm] svg { display: block; transform: scale(3.333333); transform-origin: top left; }
#music-notes [data-measure] { top: 38px; height: 32px; border-left: 1px solid currentColor; }
#monitor[data-surround="dark"] #music-notes { --groove: #090e0b; }
#monitor[data-surround="dark"] #music-notes :is([data-rhythm], [data-measure]),
#monitor[data-surround="portable"] #music-notes :is([data-rhythm], [data-measure]) { color: #d6f897; }
#monitor[data-surround="portable"] #music-notes { --groove: #251f1b; flex: 0 0 88px; width: 100%; }
#monitor.powered-off #music-notes > * { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  #music-notes > [data-register] { display: flex; justify-content: start; align-items: start; }
  #music-notes :is([data-rhythm], [data-measure]) { position: static; flex: 0 0 42px; transform: none !important; }
  #music-notes [data-measure] { flex-basis: 0; margin-top: 38px; margin-inline: 12px; }
}
.game-fullscreen #monitor { --rim: 0px; --chin: 0px; --side: 0px; display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.game-fullscreen #monitor-controls { display: none; }
.game-fullscreen #monitor #canvas-box { border-radius: 0; box-shadow: none; clip-path: none; }
.game-fullscreen #screen-focus { display: none; }
.game-fullscreen #screen:focus-visible { outline: 2px solid #56734e; outline-offset: -2px; }