/* Match the website and fit the game to the viewport without changing its world. */
:root { --gold: #ffe052; --muted: #b5c7dc; --navy: #10243a; --border: #5d87ab42; }
body { background: linear-gradient(160deg, #102a45, #081422 80%); color: #f6f9ff; }
body:after { background: none; }
#scene { opacity: .08; }
main { max-width: 1320px; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 24px; font-size: .875rem; }
.site-nav a { color: #76c4ff; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1, .setup h2, .dialog h2 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 780; letter-spacing: -.03em; }
.eyebrow, .dialog .eyebrow { font-size: .75rem; color: #76c4ff; letter-spacing: .1em; }
.subline, .setup-description, .dialog p, .lesson p { font-size: 1rem; line-height: 1.75; color: #b5c7dc; }
.card, .frame, .dialog { border-radius: 10px; border-color: #76c4ff4d; background: #10243a; }
.dialog { border-top: 3px solid #dc4552; }
.setting, .lesson, .level-card { border-radius: 8px; background: #081422; }
.number { border-color: #76c4ff40; border-radius: 5px; background: #76c4ff0d; color: #76c4ff; font-family: system-ui, sans-serif; font-weight: 750; }
.setting-title strong, label, .level-card strong { font-size: .875rem; }
input { font-size: 1rem; background: #081422; border-color: #8db3db66; color: #f6f9ff; border-radius: 6px; }
input::placeholder { color: #9eb3cc; }
button, .button-link { min-height: 44px; font-size: .875rem; border-radius: 6px; background: #172f49; color: #d8ecff; border-color: #76c4ff70; }
button:hover, .button-link:hover { background: #214565; }
button.primary { background: var(--gold); border-color: var(--gold); color: #091624; }
button.primary:hover { background: #ffeb89; }
.letter { border-color: #76c4ff55; background: #081422; color: #a8c8e8; }
.letter.found { background: var(--gold); border-color: var(--gold); color: #091624; }
#route-number { font-size: .75rem; }
#route-title, .counter, #notice, #hint, .help, .feedback { font-size: .875rem; }
.toolbar button, .password-wrap button, .touch .jump { font-size: .875rem; }
.touch .jump { background: #832939; }
.fine, .dialog .fine { font-size: .875rem; }
.setting .optional, .level-card small, .lesson strong { font-size: .75rem; }
.word-badges span { font-size: .875rem; }
.level-card .number { font-size: .875rem; }
.level-card .status { color: var(--gold); }
.lesson { border-color: #76c4ff40; }
.word { overflow-wrap: anywhere; }
.password-wrap { flex-wrap: wrap; }
.password-wrap input { flex-basis: 220px; }
@media (max-width: 760px) {
  .subline { font-size: 1rem; }
  .level-card strong { font-size: .875rem; }
  .hud { gap: 12px; }
  .toolbar { gap: 15px; }
}

/* Let the canvas use the space left after navigation and game controls. */
body { min-height: 0; }
main {
  height: 100vh;
  height: 100dvh;
  min-height: 320px;
  padding: 10px 16px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
}
.site-nav { gap: 12px; margin: 0; }
header { gap: 12px; margin: 0; min-width: 0; }
header > div { min-width: 0; }
header h1 { font-size: clamp(1.125rem, 2.3vw, 1.75rem); line-height: 1.2; }
header .eyebrow, header .subline { display: none; }
#header-sint { width: 54px; height: 48px; }
#play-area {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.hud { gap: 10px; padding: 8px 12px; }
.hud > div { min-width: 0; }
#letters { gap: 4px; }
.stage { aspect-ratio: auto; min-width: 0; min-height: 0; overflow: hidden; }
#game { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 12px; }
#notice { min-width: 0; line-height: 1.4; }
.toolbar-buttons { flex-wrap: wrap; }
.toolbar button { min-height: 44px; padding: 8px 12px; }
.under-game { gap: 12px; margin: 0; }
#hint { min-width: 0; line-height: 1.4; }
.touch { gap: 6px; }
.touch button { height: 44px; min-width: 48px; padding: 7px 12px; }
.touch .jump { min-width: 88px; }
.help { line-height: 1.4; }

@media (max-width: 760px) {
  main { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .hud { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  #letters { grid-column: 1 / -1; grid-row: 2; }
  .toolbar { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .toolbar-buttons button { flex: 1; }
  .under-game { gap: 6px; }
}

@media (max-height: 600px) {
  main { gap: 6px; padding-block: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom)); }
  header h1 { font-size: 1.125rem; }
  #header-sint, #hint, .help { display: none; }
  #play-area { grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
  .hud { padding-block: 6px; }
  .under-game { flex-direction: row; justify-content: flex-end; }
}

@media (max-height: 600px) and (min-width: 600px) {
  .hud { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  #letters { grid-column: auto; grid-row: auto; }
  .toolbar { grid-template-columns: minmax(0, 1fr) auto; }
}