@font-face {
  font-family: FusionPixel;
  src: url('../assets/fonts/fusion-pixel-12px-monospaced-zh_hans.ttf.woff2?v=b259134ca6558a88cce77ebf1f96042785982de5') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: PixelMplus;
  src: url('../assets/fonts/PixelMplus12-Regular.woff2?v=b259134ca6558a88cce77ebf1f96042785982de5') format('woff2');
  font-display: swap;
}
:root { color-scheme: dark; --paper: #f1e3cd; --muted: #c2ae91; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; background: #151412; overflow: hidden; }
body {
  margin: 0;
  height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  color: var(--paper);
  font: 16px / 1.5 FusionPixel, PixelMplus, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  overflow: hidden;
}
html[data-language="ja"] body { font-family: PixelMplus, FusionPixel, monospace; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; border-radius: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #f6e5bc; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
.game-window {
  width: min(100vw, calc(100svh * 9 / 16));
  border: 0;
  background: none;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.viewport { aspect-ratio: 9 / 16; position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; background: #4c3a2d; }
.scenery { position: absolute; inset: 0; transform: scale(1.026); animation: cabin-sway 14s ease-in-out infinite alternate; will-change: transform; }
.scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.snake { transform: translate(var(--look-x, 0px), var(--look-y, 0px)); transition: transform .9s ease-out; }
.glass-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #1e120e08, transparent 64%, #1e120e22); }
.launch-panel, .dialogue-panel {
  position: absolute;
  bottom: max(7%, calc(env(safe-area-inset-bottom) + 12px));
  left: max(6%, env(safe-area-inset-left));
  right: max(6%, env(safe-area-inset-right));
  isolation: isolate;
  text-shadow: 0 2px 4px #080604, 0 0 12px #080604;
}
.launch-panel::before, .dialogue-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -72px;
  bottom: -16cqw;
  left: -7%;
  right: -7%;
  background: linear-gradient(180deg, transparent, #110d0866 24%, #110d08c9 70%, #110d08e8);
}
.launch-heading, .dialogue-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.launch-heading { justify-content: flex-end; }
.launch-subtitle { margin: 8px 0 12px; font-size: clamp(14px, 4.4cqw, 18px); color: var(--paper); }
.primary-button { border: 0; background: transparent; padding: 8px 0; min-height: 36px; text-align: left; text-shadow: inherit; }
.primary-button::before { content: '▸'; margin-right: 8px; color: #e0c096; }
.primary-button:hover, .choice-button:hover { color: #fff4df; }
.primary-button:active { transform: translateY(1px); }
.dialogue-panel { display: flex; flex-direction: column; gap: 8px; }
.dialogue-card { position: relative; padding: 0 0 30px; min-height: 92px; }
.dialogue-heading { gap: 16px; color: #dcc7a7; font-size: clamp(12px, 3.4cqw, 14px); line-height: 1; margin-bottom: 8px; }
.dialogue-text { margin: 0; min-height: 2.8em; white-space: pre-line; font-size: clamp(12px, 4.2cqw, 17px); line-height: 1.5; overflow-wrap: anywhere; }
.continue-button { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; background: none; color: #d5c1a1; text-shadow: inherit; }
.continue-button:hover { color: #fff1d5; }
.continue-glyph { animation: waiting-cue 1.4s steps(2, end) infinite; font: 14px PixelMplus, monospace; }
.dialogue-panel.is-typing .continue-glyph { animation: none; opacity: .35; }
.dialogue-panel.is-ending .dialogue-card, .dialogue-panel.has-choices .dialogue-card { padding-bottom: 0; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choice-button { width: 100%; min-width: 0; display: flex; align-items: center; text-align: left; gap: 8px; padding: 8px 0; min-height: 42px; border: 0; background: transparent; text-shadow: inherit; font-size: clamp(12px, 3.5cqw, 15px); line-height: 1.45; overflow-wrap: anywhere; }
.choice-button::before { content: '▸'; flex-shrink: 0; color: #e0c096; }
.settings-control { position: relative; z-index: 4; flex-shrink: 0; }
.settings-toggle { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 0; background: none; color: #c8b89f; text-shadow: inherit; font: 22px / 1 PixelMplus, FusionPixel, monospace; }
.settings-toggle:hover, .settings-toggle[aria-expanded="true"] { color: #fff2dc; }
.settings-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(208px, 78cqw); padding: 14px 16px 10px; background: #201a15ed; box-shadow: 0 8px 30px #08050388; text-shadow: none; }
.settings-label { margin: 0 0 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.languages { display: flex; gap: 12px; margin-bottom: 9px; }
.languages button { min-width: 32px; height: 34px; padding: 0; border: 0; background: none; color: #a9957a; font-size: 14px; }
.languages button[aria-pressed="true"] { color: #ffe9c4; text-decoration: underline; text-underline-offset: 5px; }
.settings-action { display: block; width: 100%; padding: 7px 0; border: 0; background: none; text-align: left; font-size: 14px; line-height: 1.5; }
.settings-action:hover { color: #fff3db; }
.loading-status { position: absolute; top: max(3%, env(safe-area-inset-top)); left: 6%; font-size: 12px; color: #e4c8a2; text-shadow: 0 2px 6px #120b06; }
.loading-status span { animation: waiting-cue 1.4s steps(2, end) infinite; }
.asset-error { position: absolute; inset: 0; background: #241b17ed; display: grid; align-content: center; justify-items: center; text-align: center; padding: 24px; }
.asset-error p { margin: 0 0 20px; font-size: 16px; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-notice { position: fixed; bottom: 12px; background: #271d17; padding: 12px; font-size: 14px; }
@keyframes cabin-sway { from { transform: scale(1.026) translate(-.35%, -.08%) rotate(-.10deg); } to { transform: scale(1.026) translate(.35%, .10%) rotate(.10deg); } }
@keyframes cabin-sway-gentle { from { transform: scale(1.026) translate(-.18%, -.04%); } to { transform: scale(1.026) translate(.18%, .04%); } }
@keyframes waiting-cue { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(2px); } }
@container (max-width: 320px) {
  .dialogue-heading { margin-bottom: 6px; }
  .choices { grid-template-columns: 1fr; gap: 2px; }
  .choice-button { min-height: 34px; padding: 6px 0; gap: 6px; }
  .settings-menu { padding: 10px 12px 7px; }
  .settings-action { font-size: 12px; padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scenery { animation: cabin-sway-gentle 24s ease-in-out infinite alternate; }
  .snake { transition: transform 1.8s ease-out; }
  @keyframes waiting-cue { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
}