:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e9e4da; background: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
/* The game fills the window; ScummVM keeps the picture's shape inside it */
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; outline: none; touch-action: none; }
.screen { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 2rem max(1.25rem, calc(50% - 15rem)); background: #000; overflow-y: auto; }
h1 { margin: 0 0 .5rem; font-weight: 600; letter-spacing: .14em; font-size: 1.6rem; }
h1 span { color: #d8b878; font-weight: 400; }
p { margin: 0; line-height: 1.55; color: #b9c0b9; }
.small { font-size: .82rem; color: #8e978f; }
a { color: #d8b878; }
input[type=password] { font: inherit; padding: .7rem .8rem; border-radius: 5px; border: 1px solid #4d5a52; background: #101512; color: #eee; width: 100%; }
button { font: inherit; cursor: pointer; border-radius: 5px; padding: .7rem 1rem; border: 1px solid #d8b878; background: #d8b878; color: #15140f; font-weight: 600; }
button.link { padding: 0; border: 0; background: none; color: #d8b878; font-weight: 400; text-decoration: underline; font-size: inherit; }
.error { color: #ffb4ac; }
.file { display: block; padding: .8rem; border: 1px dashed #4d5a52; border-radius: 5px; font-size: .85rem; color: #b9c0b9; cursor: pointer; margin-top: .5rem; }
.file input { display: block; margin-top: .4rem; font-size: .8rem; }
#status { position: absolute; z-index: 3; left: 50%; bottom: 1.5rem; transform: translateX(-50%); max-width: 90%; padding: .55rem .9rem; border-radius: 5px; text-align: center; font-size: .85rem; color: #ddd; background: rgba(0, 0, 0, .75); pointer-events: none; }
#status.error { color: #fff; background: #8a1f1f; }
#loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .9rem; padding: 2rem; background: #000; pointer-events: none; }
#loading-text { font-size: 1.15rem; color: #e9e4da; text-align: center; }
.bar { width: min(28rem, 80vw); height: .45rem; border-radius: 3px; background: #24302a; overflow: hidden; }
#loading-bar { height: 100%; width: 0; background: #d8b878; }
[hidden] { display: none !important; }
.about { max-width: 750px; margin: 0 auto; padding: 2rem 1.25rem; line-height: 1.7; overflow-y: auto; height: 100%; }
.about a { color: #d8b878; }
.about p { margin: 0 0 1rem; }
#game-menu {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 5;
  padding: 6px 10px;
  font-size: 13px;
  opacity: .65;
}
#game-menu:hover, #game-menu:focus-visible { opacity: 1; }