:root {
  --ink: #102b3b;
  --navy: #082437;
  --cream: #fff3d4;
  --sky: #21c8e7;
  --jade: #167e58;
  --moss: #58b94d;
  --gold: #f1b953;
  --coral: #d94d62;
  --cyan: #47e4e4;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  background:
    radial-gradient(circle at 15% 5%, #247b7b 0, transparent 26%),
    radial-gradient(circle at 93% 88%, #3b653b 0, transparent 28%),
    linear-gradient(135deg, #061d33, #0b4550);
  color: var(--cream);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.page-shell { width: min(1200px, 100%); margin: auto; }
.masthead { text-align: center; margin: 0 0 12px; text-shadow: 2px 2px 0 #082437; }
.eyebrow { margin: 0; color: #b9e85a; font-size: .68rem; font-weight: 900; letter-spacing: .16em; }
.masthead h1 { margin: 4px 0 0; font-size: clamp(1.45rem, 4vw, 2.55rem); line-height: 1; letter-spacing: .035em; }
.masthead h1 span { color: var(--gold); }
.masthead > p:last-child { margin: 4px 0 0; color: #a7f1ee; font-size: .84rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.game-frame {
  position: relative;
  overflow: hidden;
  border: 4px solid #061b31;
  border-radius: 14px;
  background: #0b4c42;
  box-shadow: 0 0 0 3px #3e9f80, 0 14px 34px #0009;
}

.game-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 2px solid #b9e85a55;
  border-radius: 10px;
}

canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  outline: 0;
  cursor: crosshair;
  image-rendering: pixelated;
}
canvas:focus-visible { outline: 4px solid var(--gold); outline-offset: -7px; }
.game-frame:focus-within { box-shadow: 0 0 0 3px #3e9f80, 0 0 0 7px #fff3d455, 0 14px 34px #0009; }

.game-frame > img[aria-hidden="true"] { display: none; }
.orientation-hint { display: none; }

.control-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 11px 0 8px; }
.control-bar button {
  height: 38px;
  padding: 0 16px;
  border: 3px solid #081f34;
  border-radius: 8px;
  background: linear-gradient(#fff0a1, #d99238);
  box-shadow: 0 3px 0 #603b29;
  color: #102b3b;
  cursor: pointer;
  font: 900 .75rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.control-bar button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(1px); box-shadow: 0 2px 0 #603b29; }
.control-bar button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .55; }
.control-bar p { margin: 0 0 0 auto; color: #cdeeed; font-size: .69rem; font-weight: 700; }
.control-bar kbd { padding: 2px 5px; border: 1px solid #9acbc2; border-bottom: 3px solid #669a91; border-radius: 3px; background: #113e4b; color: #fff3d4; font: 700 .64rem ui-monospace, monospace; }
.design-note { padding: 9px 12px; border-left: 5px solid var(--gold); background: #082b3bd9; color: #d9f5e8; font-size: .72rem; line-height: 1.35; }

.touch-controls { position: absolute; z-index: 4; inset: 0; display: none; align-items: flex-end; justify-content: space-between; padding: 0 17px 16px; pointer-events: none; }
.touch-cluster { display: flex; gap: 10px; pointer-events: auto; }
.touch-dpad { display: grid; grid-template: repeat(3, 42px) / repeat(3, 42px); gap: 3px; align-items: center; justify-items: center; }
.touch-dpad button { width: 42px; height: 42px; }
.touch-dpad .dpad-up { grid-area: 1 / 2; }
.touch-dpad .dpad-left { grid-area: 2 / 1; }
.touch-dpad .dpad-right { grid-area: 2 / 3; }
.touch-dpad .dpad-down { grid-area: 3 / 2; }
.touch-controls button { width: 54px; height: 54px; border: 2px solid #fff3d4aa; border-radius: 50%; background: #082b3bc9; color: #fff3d4; font-size: 1.35rem; font-weight: 900; box-shadow: 0 3px 0 #051c2b; touch-action: none; }
.touch-controls .attack-key { background: #bd4c67d9; }
.touch-controls .jump-key { background: #218d8bd9; }
.touch-controls .interact-key { background: #b47a32e0; }
.game-frame.is-menu .touch-controls { display: none; }
.game-frame.is-intro .touch-controls { display: none; }
.game-frame.is-game-over .touch-controls { display: none; }
.game-frame.is-paused .touch-controls { display: none; }
.title-screen .masthead,
.title-screen .control-bar,
.title-screen .design-note,
.story-screen .masthead,
.story-screen .control-bar,
.story-screen .design-note { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (pointer: coarse) {
  .touch-controls { display: flex; }
  .control-bar p { display: none; }
}

@media (max-width: 680px) {
  body { padding: 8px; }
  .masthead { margin-bottom: 8px; }
  .masthead h1 { font-size: 1.32rem; }
  .masthead > p:last-child { font-size: .64rem; }
  .game-frame { border-width: 3px; border-radius: 9px; }
  .control-bar { justify-content: center; margin-top: 8px; }
  .control-bar button { height: 34px; padding: 0 10px; font-size: .66rem; }
  .design-note { font-size: .64rem; }
  .touch-controls { padding: 0 10px 10px; }
  .touch-controls button { width: 48px; height: 48px; font-size: 1.1rem; }
}

@media (max-height: 720px) and (min-width: 720px) {
  body { padding: 8px; }
  .masthead { margin-bottom: 5px; }
  .masthead h1 { font-size: 1.65rem; }
  .masthead > p:last-child, .design-note { display: none; }
  .control-bar { margin: 6px 0; }
  .game-frame { width: min(1040px, 100%); margin: auto; }
}

@media (max-height: 500px) and (min-width: 600px) and (orientation: landscape) {
  body { padding: 4px; }
  .masthead { display: none; }
  .game-frame { width: min(100%, calc((100vh - 64px) * 16 / 9)); margin: auto; }
  .control-bar { justify-content: center; margin: 4px 0 0; }
  .control-bar p, .design-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .control-bar button:hover:not(:disabled) { transform: none; }
}

@media (max-width: 600px) and (orientation: portrait) {
  body { min-height: 100dvh; overflow-y: auto; padding: 8px; }
  .game-frame:not(.is-menu):not(.is-intro):not(.is-game-over):not(.is-paused) { overflow: visible; margin-bottom: 170px; }
  .touch-controls { inset: calc(100% + 8px) 0 auto; height: 156px; align-items: center; padding: 8px 12px; border: 2px solid #3e9f80; border-radius: 14px; background: linear-gradient(145deg, #061d33f5, #0b4550f5); box-shadow: 0 8px 22px #0008; }
  .touch-dpad { grid-template: repeat(3, 44px) / repeat(3, 44px); gap: 3px; }
  .touch-dpad button { width: 44px; height: 44px; }
  .touch-actions { display: grid; grid-template-columns: repeat(3, 46px); gap: 8px; align-content: center; justify-content: end; }
  .touch-actions button { width: 46px; height: 46px; }
  .orientation-hint { display: block; margin: 7px auto 2px; padding: 6px 10px; border: 1px solid #fff3d466; border-radius: 7px; color: #fff3d4; background: #082437cc; font: 700 .72rem/1.35 "Trebuchet MS", sans-serif; text-align: center; }
}