:root { color-scheme: dark; font-family: "Yu Gothic UI", "Meiryo", sans-serif; color: #f7ecd2; background: #082b37; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0, #164954, #082b37 75%); min-height: 100vh; }
.shell { max-width: 568px; margin: auto; padding: 16px 20px 12px; }
.masthead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
h1 { font-family: Georgia, serif; font-size: 36px; line-height: 1; margin: 0; letter-spacing: -2px; }
h1 span { color: #ff765e; }
.masthead p { font-size: 12px; margin: 0; color: #c5d6d1; }
.time { font-size: 10px; border: 1px solid #507a7d; border-radius: 20px; padding: 6px 8px; margin-left: auto; white-space: nowrap; }
.console { position: relative; width: 100%; aspect-ratio: 10 / 9; border-radius: 12px; overflow: hidden; background: #122f36; box-shadow: 0 12px 32px #001e2680; border: 3px solid #537879; }
#game { width: 100%; height: 100%; }
#load-status { position: absolute; bottom: 32px; left: 0; width: 100%; margin: 0; text-align: center; pointer-events: none; font-size: 14px; }
#load-status.error { bottom: 12%; padding: 12px; background: #082b37ed; pointer-events: auto; }
.guide { text-align: center; font-size: 12px; line-height: 1.6; margin-top: 14px; }
.guide p { margin: 6px 0; }
kbd { display: inline-block; font-family: inherit; font-size: 11px; background: #224751; border: 1px solid #4a7177; border-radius: 4px; padding: 1px 5px; }
.tip { color: #c5d6d1; }
.tip i { display: inline-block; width: 3px; height: 13px; background: #78e898; margin: 0 7px -2px 0; }
.touch-hint { display: none; }
footer { display: flex; justify-content: space-between; font-size: 10px; color: #89aeaf; margin-top: 15px; }
a { color: #aac8c5; text-underline-offset: 3px; }
/* Keep the original 160 x 144 artwork crisp at every screen size. */
#game canvas { image-rendering: pixelated; }
#game .ejs_start_button { font-size: 18px; padding: 10px 24px; border-radius: 30px; box-shadow: 0 4px 18px #001e26a0; }
body.touch-controls .keyboard { display: none; }
body.touch-controls .touch-hint { display: block; }
/* Put the touch controls below the picture, so the crab and green lines stay visible. */
body.touch-controls .console { aspect-ratio: auto; height: auto; }
body.touch-controls #game { height: calc((100vw - 30px) * .9 + 186px); }
body.touch-controls #game .ejs_canvas_parent { height: calc(100% - 186px); }
body.touch-controls #game .ejs_virtualGamepad_left,
body.touch-controls #game .ejs_virtualGamepad_right { bottom: 30px; }
body.touch-controls #game .ejs_virtualGamepad_parent { bottom: 12px; }
body.touch-controls #game .ejs_virtualGamepad_bottom { bottom: 2px; }
@media (max-width: 600px) {
  .shell { padding: 12px; }
  .masthead { gap: 10px; }
  h1 { font-size: 30px; }
  .masthead p { display: none; }
  .guide { font-size: 11px; margin-top: 12px; }
  footer { margin-top: 12px; }
}
@media (pointer: coarse) and (min-width: 601px) {
  body.touch-controls #game { height: 660px; }
}
@media (max-height: 540px) and (min-width: 601px) {
  .shell { max-width: 408px; padding: 8px 12px; }
  .masthead { margin-bottom: 6px; }
  h1 { font-size: 26px; }
  .masthead p { display: none; }
  .guide { margin-top: 7px; }
  footer { margin-top: 6px; }
}