:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #dce5eb;
  background: #080d15;
  --space-background:
    radial-gradient(circle at 18% 26%, #9fb7ce50 0 .7px, transparent 1.1px),
    radial-gradient(circle at 79% 19%, #9fb7ce35 0 .7px, transparent 1.1px),
    radial-gradient(circle at 64% 73%, #9fb7ce30 0 .6px, transparent 1px),
    radial-gradient(circle at 31% 81%, #9fb7ce30 0 .6px, transparent 1px),
    radial-gradient(ellipse at 28% 20%, #15273780, transparent 60%),
    radial-gradient(ellipse at 78% 85%, #142b3240, transparent 55%), #080d15;
}
body { background: var(--space-background); }
[hidden] { display: none !important; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button {
  font: inherit;
  color: #dce5eb;
  background: #1b2b36;
  border: 1px solid #ffffff24;
  border-radius: 7px;
  padding: 8px 12px;
  cursor: pointer;
}
button:hover { background: #29404d; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #b8d8df;
  outline-offset: 3px;
}
#app { width: 100%; height: 100%; }
#dropzone { position: relative; padding: 0; }
div.emscripten_border {
  border: 0;
  box-shadow: none;
  width: min(100%, calc(100vh * var(--boxedwine-canvas-aspect)));
}
@supports (width: 1cqw) {
  div.emscripten_border { width: min(100cqw, calc(100cqh * var(--boxedwine-canvas-aspect))); }
}
/* Opaque across the entire viewport: Wine and the game's splash stay covered. */
#boot-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: auto;
  background: var(--space-background);
  line-height: 1.5;
  pointer-events: auto;
}
.boot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  max-width: min(440px, 85%);
  padding: 28px 0;
}
.loading-indicator {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  border: 1px solid #c9e5f018;
  border-radius: 12px;
  background: #c9e5f005;
  box-shadow: inset 0 1px 0 #ffffff04, 0 8px 32px #00000018;
  backdrop-filter: blur(12px);
}
#boot-stage { margin: 0; color: #aebdc9; font-size: 13px; font-weight: 400; }
.boot-activity {
  width: 12px;
  height: 12px;
  border: 1.5px solid #a6c8d425;
  border-top-color: #a6c8d4;
  border-radius: 50%;
  animation: boot-spin 1.1s linear infinite;
}
#boot-detail { display: none; }
body[data-boot-state="error"] .boot-activity { display: none; }
body[data-boot-state="error"] #boot-stage { color: #e0b997; }
body[data-boot-state="error"] #boot-detail {
  display: block;
  margin: 18px 0;
  color: #9bafbd;
  font-size: 13px;
  overflow-wrap: anywhere;
}
#boot-retry { margin-top: 4px; font-size: 12px; }
body[data-game-ready="false"] .emscripten_border > canvas { pointer-events: none; }
.player-tools {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 20;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.player-tools summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  margin-left: auto;
  list-style: none;
  color: #b1c3ce;
  background: #0b1621b8;
  border: 1px solid #bed8e41c;
  border-radius: 9px;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.player-tools summary::-webkit-details-marker { display: none; }
.player-tools summary svg { fill: currentColor; }
.player-tools summary:hover, .player-tools[open] summary { background: #233440; color: #e2edf0; }
.tools-panel {
  box-sizing: border-box;
  width: min(230px, calc(100vw - 28px));
  max-height: calc(100dvh - 76px);
  overflow: auto;
  margin-top: 8px;
  padding: 6px;
  background: #111f2aeb;
  border: 1px solid #c9e5f024;
  border-radius: 11px;
  box-shadow: 0 10px 32px #0005;
  backdrop-filter: blur(16px);
}
.tools-panel button, .tools-panel a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  color: #c8d9e3;
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
  text-decoration: none;
}
.tools-panel button:hover, .tools-panel a:hover { background: #ffffff0c; }
#play-note { margin: 7px 11px 9px; padding-top: 12px; border-top: 1px solid #ffffff14; color: #8fa5b4; font-size: 11px; line-height: 1.6; }
#move-btn {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 15;
  min-width: 72px;
  font-size: 12px;
  background: #14252fe8;
  backdrop-filter: blur(12px);
}
#move-btn[aria-pressed="true"] { background: #a9c9ad; border-color: #c8e5ce; color: #10251b; }
#console { position: absolute; bottom: 0; left: 0; z-index: 18; }
#output { margin: 0; padding: 12px; border: 1px solid #3a505d; background: #08111cf5; color: #b3c9bf; font-size: 11px; }
#saved-games {
  box-sizing: border-box;
  max-width: 580px;
  width: calc(100% - 40px);
  max-height: calc(100dvh - 40px);
  border: 1px solid #b3d5e233;
  border-radius: 12px;
  background: #111f2af5;
  color: #dbe9e9;
  padding: 24px;
  box-shadow: 0 20px 80px #0008;
  backdrop-filter: blur(16px);
}
#saved-games::backdrop { background: #02090fc9; }
#saved-games h2 { margin-top: 0; font-size: 19px; font-weight: 500; }
#saved-games p { color: #a6bdc2; font-size: 13px; line-height: 1.6; }
#saved-list { max-height: 45vh; overflow: auto; }
.save-row { display: flex; gap: 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid #29464e; padding: 10px 0; font-size: 13px; }
.save-row span { overflow-wrap: anywhere; min-width: 0; }
.import-save { display: block; margin-top: 18px; font-size: 13px; }
.import-save input { max-width: 100%; margin: 10px 0; }
.modalDialog { color: #163334; }
.modalDialog input { color: #123; background: #eee; }
.edition-picker {
  display: grid;
  place-items: center;
  min-height: 100svh;
  margin: 0;
}
.edition-choices { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; padding: 24px 24px 64px; }
.edition-choice {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: min(320px, calc(100vw - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #c9e5f023;
  border-radius: 11px;
  background: #c9e5f008;
  color: #c9d6e0;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 #ffffff05, 0 8px 32px #0002;
  backdrop-filter: blur(12px);
  transition: background .15s, border-color .15s;
}
.edition-choice img { display:block; width:100%; height:auto; }
.edition-choice span { display:block; padding:17px 25px; }
.edition-choice:hover { background: #c9e5f014; border-color: #c9e5f042; }
.save-watermark { position: fixed; bottom: max(19px, env(safe-area-inset-bottom)); margin: 0; color: #8396a7; font-size: 11px; line-height: 1.5; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .boot-activity { animation: none; border-top-color: #a6c8d4; }
  .edition-choice { transition: none; }
}