@font-face {
  font-family: 'Uranus Pixel';
  src: url('../../assets/Uranus_Pixel_11Px.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #78b8d9; }
body { display: grid; place-items: center; font-family: 'Uranus Pixel', monospace; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Keep Chinese text outside the 320×180 canvas so it stays sharp when scaled. */
[hidden] { display: none !important; }
.game-ui { position: absolute; inset: 0; pointer-events: none; color: #4f302d; font-family: 'Uranus Pixel', monospace; font-synthesis: none; }
.game-hint { position: absolute; left: 5%; right: 5%; bottom: 3%; margin: 0; text-align: center; font-size: clamp(8px, 2.9vw, 12px); line-height: 1.45; font-weight: 400; color: rgba(255, 248, 223, .76); text-shadow: 0 1px rgba(105, 70, 51, .35); }
.finish-panel { position: absolute; top: 8%; left: 5%; right: 5%; padding: 5px 8px 6px; border: 2px solid #78442e; background: #fff1bd; box-shadow: inset 0 0 0 2px #ffe5a3, 2px 3px #4f302d33; text-align: center; }
.finish-panel h1 { margin: 0; color: #91414a; font-size: clamp(12px, 4.2vw, 16px); line-height: 1.3; font-weight: 400; }
.finish-subtitle { margin: 3px 0 6px; color: #624637; font-size: clamp(8px, 2.8vw, 11px); line-height: 1.5; }
.finish-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.finish-choice { pointer-events: auto; min-width: 0; min-height: 28px; padding: 4px 3px; border: 2px solid #885638; color: #4f302d; background: #f4d48e; box-shadow: inset 0 0 0 1px #ffeab0, 2px 2px #956446; font: 400 clamp(8px, 3.1vw, 11px)/1.3 'Uranus Pixel', monospace; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.finish-choice[aria-pressed="true"] { border-color: #6e2f42; background: #b94d60; color: #fff8de; box-shadow: inset 0 0 0 1px #e77b78, 2px 2px #563247; }
.finish-choice:active { transform: translate(1px, 1px); }
.finish-choice:focus-visible { outline: none; }

/* Start instructions: gameplay stays still until the player confirms. */
.controls-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #1b272c66; pointer-events: auto; }
.controls-panel::before { content: ''; position: absolute; z-index: -1; inset: 5% 5%; background: #fff1bd; border: 2px solid #78442e; box-shadow: inset 0 0 0 2px #ffe5a3, 2px 3px #4f302d33; }
.controls-panel { isolation: isolate; padding: 3% 8%; }
.controls-panel h1 { margin: 0; font: 400 clamp(10px, 3.8vw, 16px)/1.3 'Uranus Pixel', monospace; color: #91414a; }
.controls-panel p { margin: 0; }
.controls-subtitle { font-size: clamp(7px, 2.5vw, 11px); line-height: 1.5; }
.controls-columns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 2px 0; }
.controls-columns > div + div { border-left: 1px solid #dfbd79; }
.controls-columns h2 { margin: 0 0 2px; text-align: center; color: #91414a; font-size: clamp(8px, 2.8vw, 12px); font-weight: 400; }
.controls-columns p { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 2px 0; font-size: clamp(7px, 2.5vw, 11px); }
.controls-columns kbd { width: 34px; padding: 1px 2px; border: 1px solid #885638; box-shadow: 1px 1px #956446; background: #f4d48e; text-align: center; font: inherit; }
.controls-note { font-size: clamp(6px, 2.1vw, 10px); line-height: 1.5; white-space: nowrap; }
.controls-panel .finish-choice { width: 94%; margin: 4px 0 2px; min-height: 20px; padding: 3px; font-size: clamp(8px, 2.8vw, 11px); }
.controls-footer { font-size: clamp(6px, 2vw, 9px); line-height: 1.3; }

.difficulty-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: 94%; }
.controls-panel .difficulty-options .finish-choice { width: 100%; min-height: 18px; padding: 2px; margin: 3px 0 2px; }
.difficulty-options .finish-choice:focus-visible { outline: 1px dashed #91414a; outline-offset: 1px; }

@media (max-height: 155px) {
  .controls-panel { padding: 1% 8%; }
  .controls-panel::before { inset: 2% 5%; }
  .controls-footer { display: none; }
}