:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e7daca; background: #090807; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #dfc69d; outline-offset: 5px; }
button:disabled { cursor: wait; }
button[hidden], [hidden] { display: none !important; }
#room { position: absolute; inset: 0; overflow: hidden; }
#scene { position: absolute; width: 1536px; height: 1024px; transform-origin: 0 0; will-change: transform; }
.room-image { position: absolute; inset: 0; display: block; width: 1536px; height: 1024px; user-select: none; pointer-events: none; }
/* Image coordinates: the curved inner glass is x=503..1013, y=159..522. */
#screen { position: absolute; left: 503px; top: 158px; width: 510px; height: 365px; overflow: hidden; border-radius: 5% / 6%; background: #030706; isolation: isolate; transform: rotate(.12deg); }
#game { display: block; position: absolute !important; top: 0 !important; left: 12px !important; width: 486px !important; height: 365px !important; margin: 0 !important; image-rendering: pixelated; object-fit: fill; outline: none; opacity: 0; }
body[data-state="running"] #game { opacity: 1; }
.glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, #00000010 0px, #00000010 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at 50% 42%, transparent 50%, #00000066 100%); box-shadow: inset 0 0 14px 4px #000000a6; opacity: .7; }
#screen-glow { position: absolute; left: 474px; top: 125px; width: 574px; height: 430px; pointer-events: none; border-radius: 25%; box-shadow: 0 0 90px 38px #70cbba1c; opacity: 0; transition: opacity 1.5s; mix-blend-mode: screen; }
body[data-state="running"] #screen-glow { opacity: 1; }
#boot-panel { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: radial-gradient(ellipse at center, #0b1610 0%, #020604 90%); text-align: center; }
#boot-content { width: 86%; }
.boot-mark { font-family: "Courier New", monospace; font-size: 15px; color: #76a581; }
h1 { font-family: Georgia, serif; font-size: 49px; font-weight: normal; letter-spacing: -.035em; margin: 15px 0 12px; color: #dfdfc3; text-shadow: 0 0 12px #95cc6925; }
#status { color: #a3b1a0; font-size: 16px; line-height: 1.5; margin: 0 0 23px; }
#power { border: 1px solid #7b917663; border-radius: 3px; background: #8aa07b19; padding: 11px 22px; color: #d3dfc9; font-size: 17px; }
#power:hover { background: #8aa07b30; }
#power span { margin-left: 15px; }
.boot-note { font-size: 11px; color: #778272; margin: 21px 0 0; }
#physical-power { position: absolute; left: 965px; top: 558px; width: 32px; height: 20px; background: transparent; border: 0; border-radius: 2px; }
.room-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 30%, #0000003b 100%); pointer-events: none; }
#toolbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 36px 30px max(22px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, #070604dc); z-index: 8; pointer-events: none; }
#toolbar button, #toolbar a { pointer-events: auto; }
.signature { font-family: Georgia, serif; font-size: 18px; margin: 0; color: #d8c9b1; white-space: nowrap; }
.signature span { display: block; margin-top: 4px; font-size: 12px; color: #a59783; font-style: italic; }
.page-credit { margin: 7px 0 0; font: 10px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #a59783; white-space: nowrap; }
.page-credit a { color: inherit; text-decoration: none; }
.page-credit a:hover { color: #f1e3cf; text-decoration: underline; }
.room-signature { flex-shrink: 0; }
#hall { width: min(620px, calc(100vw - 32px)); }
.hall-eyebrow { margin: 0 0 9px; font-size: 9px; letter-spacing: .18em; color: #bba181; }
.hall-intro { margin-top: 0; }
.hall-table-wrap { overflow-x: auto; }
#hall table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 12px; }
#hall th { text-align: left; padding: 10px 8px; font-weight: normal; color: #a99a87; border-bottom: 1px solid #dbc4a833; }
#hall td { padding: 12px 8px; border-bottom: 1px solid #dbc4a814; white-space: nowrap; }
#hall th:first-child, #hall td:first-child { padding-left: 0; color: #a99a87; }
.your-row { background: #bc9c6220; }
.hall-account-panel { border-top: 1px solid #dbc4a826; margin-top: 22px; padding-top: 14px; }
.hall-account-panel label { display: block; font-size: 12px; margin: 18px 0 8px; color: #c4b39a; }
#hall-player { width: 100%; padding: 11px; color: #e7daca; background: #15110e; border: 1px solid #dbc4a839; border-radius: 3px; font: inherit; font-size: 12px; }
.hall-primary { padding: 12px 18px; border: 1px solid #ccb08a70; background: #bc9c622a; border-radius: 3px; font-size: 13px; }
.hall-primary:disabled { opacity: .5; }
.hall-secondary { padding: 10px 0; border: 0; background: transparent; color: #baa994; font-size: 12px; }
.hall-actions { display: flex; gap: 20px; align-items: center; }
#hall-status { min-height: 1em; color: #dac49f; }
.hall-footnote { font-size: 10px; }
.hall-privacy { display: flex; gap: 18px; font-size: 10px; align-items: center; }
.hall-privacy a { color: #a99a87; }
.hall-privacy button { border: 0; background: transparent; padding: 0; font-size: 10px; color: #a99a87; }
nav { display: flex; align-items: center; gap: 6px; }
nav button { border: 1px solid transparent; border-radius: 4px; background: transparent; padding: 10px 15px; font-size: 13px; color: #c4b9aa; white-space: nowrap; }
nav button:hover { background: #dac9b212; border-color: #dac9b21f; color: #f1e3cf; }
nav button[aria-pressed="true"] { color: #f1e3cf; background: #dac9b21a; }
#session-hint { font-size: 11px; color: #a99d8d; text-align: right; }
dialog { width: min(470px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 36px; background: #201b16; color: #e7daca; border: 1px solid #6b594438; border-radius: 6px; box-shadow: 0 20px 90px #000000a6; }
dialog::backdrop { background: #000000a6; backdrop-filter: blur(5px); }
.close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 25px; color: #b8a58d; }
h2 { font: normal 26px/1.3 Georgia, serif; margin: 0 0 12px; }
dialog p { color: #bcb0a0; font-size: 13px; line-height: 1.65; }
dl { margin: 25px 0; }
dl div { display: grid; grid-template-columns: 125px 1fr; gap: 16px; border-bottom: 1px solid #dcc5a410; padding: 12px 0; font-size: 12px; line-height: 1.5; }
dt { color: #e7daca; } dd { margin: 0; color: #bcb0a0; }
.help-note { font-size: 12px; }
.credits { margin: 24px 0 0; font-size: 10px; color: #988976; }
.credits a { color: #c8b69e; }
#typing label { display: block; font-size: 12px; margin-top: 25px; color: #c4b39a; }
#player-name { display: block; width: 100%; padding: 13px; margin: 8px 0 16px; border: 1px solid #dbc4a83b; border-radius: 3px; background: #0f0c09; font: inherit; color: #e7daca; }
.name-submit { padding: 11px 17px; background: #bba18024; border: 1px solid #dbc4a83b; border-radius: 3px; }
#resume-panel { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: #0000002b; }
#resume { border: 1px solid #bca58b60; border-radius: 4px; padding: 15px 24px; background: #211c16ed; box-shadow: 0 8px 32px #00000080; }
#touch-controls { display: none; }
noscript { position: fixed; inset: 35% 20%; z-index: 10; background: #201b16; padding: 30px; }
@media (max-width: 720px) { #toolbar { padding: 24px 15px max(14px, env(safe-area-inset-bottom)); gap: 10px; } .signature { font-size: 15px; } nav { gap: 0; } nav button { padding: 11px 9px; font-size: 12px; } #session-hint { display: none; } }
@media (max-width: 540px) { #toolbar { gap: 8px; flex-wrap: wrap; padding-top: 16px; } .room-signature { display: flex; width: 100%; justify-content: space-between; align-items: end; } .signature span { display: inline; margin-left: 5px; } .page-credit { margin: 0; font-size: 9px; } nav { width: 100%; justify-content: space-between; } nav button { padding: 9px 7px; font-size: 11px; } #hall { padding: 28px 22px; } #hall td, #hall th { padding-right: 5px; padding-left: 5px; font-size: 11px; } }
@media (pointer: coarse) {
  body[data-state="running"] #touch-controls { display: flex; }
  #touch-controls { position: fixed; z-index: 6; left: 18px; right: 18px; bottom: 90px; justify-content: space-between; align-items: end; pointer-events: none; }
  #touch-controls button { width: 44px; height: 44px; border: 1px solid #dbc4a82b; border-radius: 5px; background: #17130fd9; color: #d8c9b1; pointer-events: auto; touch-action: none; user-select: none; }
  #touch-controls button:active, #touch-controls button.held { background: #b69b6b45; }
  .direction-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
  .up { grid-column: 2; } .left { grid-row: 2; grid-column: 1; } .down { grid-row: 2; grid-column: 2; } .right { grid-row: 2; grid-column: 3; }
  .action-pad { display: grid; grid-template-columns: 64px 44px; gap: 4px; }
  .action-pad button:first-child { width: 64px !important; }
}
@media (pointer: coarse) and (orientation: landscape) { #touch-controls { bottom: 80px; } #toolbar { padding-top: 16px; padding-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { #screen-glow { transition: none; } }