*{box-sizing:border-box} :root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#e6e9df;background:#101b20} body{margin:0;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse at top,#28383c, #101b20 70%);min-height:100dvh} main{max-width:1100px;margin:auto} header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:#b5bcae;font-weight:700;margin:0 0 6px}h1{font-family:Georgia,serif;font-size:46px;font-weight:400;letter-spacing:-2px;margin:0}h1 span{color:#d9b971}nav{display:flex;gap:8px}button{font:inherit;font-size:13px;color:#e6e9df;background:#223137;border:1px solid #465455;border-radius:8px;padding:12px 16px;min-height:44px;cursor:pointer;touch-action:manipulation}button:hover{background:#35494c}button:focus-visible,summary:focus-visible{outline:3px solid #ebca80;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button.held,button:active{background:#52666a} .status{display:flex;justify-content:space-between;font-size:12px;gap:8px;padding:12px 2px;color:#c9d3c9}.stage{position:relative;border:1px solid #506063;border-radius:10px;overflow:hidden;background:#182a33}canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;image-rendering:pixelated}#overlay{position:absolute;inset:0;background:#0b1922c9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}#overlay[hidden]{display:none}h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(20px,4vw,34px)}progress{display:block;appearance:none;width:100%;height:3px;border:0;background:#344145;margin:12px 0 22px}progress::-webkit-progress-bar{background:#344145}progress::-webkit-progress-value{background:#d9b971}progress::-moz-progress-bar{background:#d9b971}.controls{display:flex;justify-content:space-between;gap:12px;margin-top:20px;user-select:none}.controls button{touch-action:none;min-width:54px;min-height:54px}.movement{display:grid;grid-template-columns:repeat(3,54px);gap:5px}.actions{display:flex;gap:8px;align-items:end}.actions .primary{background:#cdb174;color:#162229;border-color:#cdb174;font-weight:700}small{font-size:10px;font-weight:400}footer{color:#a8b7b5;font-size:13px;line-height:1.6;margin-top:24px}summary{cursor:pointer;color:#d9b971;min-height:44px;padding:10px 0}.local{display:block;font-size:9px;letter-spacing:2px;margin-top:24px;color:#7f9694}#load-error{color:#ffd69a}
.arrow-orb { display:flex; align-items:stretch; gap:4px; }
.arrow-orb .primary { width:60px; padding:6px; background:#cdb174; color:#162229; border-color:#cdb174; font-weight:700; }
.arrow-orb small { display:block; line-height:1.2; }
button[hidden] { display:none; }
@media(min-width:1000px) { main{max-width:960px}.controls{max-width:600px;margin:20px auto 0} }
/* Size the entire play surface to the visible viewport, including browser bars. */
@media(max-width:600px), (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  html { height:100%; }
  body { height:100dvh; min-height:0; padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  main { height:100%; min-height:0; max-width:none; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:64px 14px 18px minmax(0,1fr) 3px auto; gap:4px; }
  header { grid-row:1; margin:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px; }
  header .eyebrow { display:none; }
  h1 { font-size:23px; line-height:24px; letter-spacing:-1px; }
  nav { gap:4px; }
  nav button { min-height:36px; padding:5px 9px; font-size:11px; }
  #level-name { grid-row:2; margin:0; font-size:10px; letter-spacing:1px; }
  .status { grid-row:3; padding:0; font-size:10px; gap:5px; align-items:center; }
  .stage { grid-row:4; width:100%; height:100%; min-height:0; margin:0; border-radius:6px; display:flex; align-items:center; justify-content:center; }
  canvas { width:100%; height:100%; object-fit:contain; aspect-ratio:auto; }
  progress { grid-row:5; margin:0; height:3px; }
  .controls { grid-row:6; position:static; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; width:232px; max-width:100%; margin:0; }
  .movement { display:grid; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,44px); gap:4px; }
  .controls button { min-width:44px; min-height:44px; padding:4px; opacity:1; }
  .arrow-orb .primary { width:60px; font-size:12px; }
  .actions { display:flex; gap:4px; width:auto; margin:0; }
  .actions button { font-size:11px; }
  footer { display:none; }
  #overlay { align-items:flex-start; text-align:left; padding:10px; }
  #overlay h2 { font-size:18px; margin:0 0 8px; }
  #overlay > div { display:flex; flex-wrap:wrap; gap:4px; }
  #load-error:not([hidden]) { position:fixed; inset:10px; z-index:5; background:#101b20; padding:15px; }
}
@media(max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  main { grid-template-columns:232px minmax(0,1fr); grid-template-rows:20px 40px minmax(0,1fr) 3px; gap:4px 8px; }
  header { grid-column:1; grid-row:1 / span 2; }
  #level-name { grid-column:2; grid-row:1; align-self:center; }
  .status { grid-column:2; grid-row:2; align-self:end; padding-bottom:4px; }
  .stage { grid-column:2; grid-row:3; }
  progress { grid-column:2; grid-row:4; }
  .controls { grid-column:1; grid-row:3 / span 2; }
  #overlay:not([hidden]) { position:fixed; inset:auto auto max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); width:232px; height:auto; z-index:2; border-radius:6px; background:#101b20; }
}

:root{color:#eee2c8;background:#171715}body{background:radial-gradient(ellipse at top,#3b3428,#171715 70%)}.eyebrow{color:#bfa77b}button{background:#302e27;border-color:#63563f;color:#eee2c8}button:hover{background:#484032}button.held,button:active{background:#6b5637}.stage{border-color:#887044;background:#202824;box-shadow:0 12px 50px #0005}h1 span,summary{color:#e2b565}.status{color:#cdbf9e}#overlay{background:#141a19de}footer{color:#aaa38e}canvas{image-rendering:auto}

/* Match the surrounding interface to the current district. */
html[data-theme="0"] body{background:radial-gradient(ellipse at top,#493027,#1c1716 70%)}
html[data-theme="1"] body{background:radial-gradient(ellipse at top,#284c40,#111e1b 70%)}
html[data-theme="1"] .stage{border-color:#7da58b}html[data-theme="1"] button{background:#253e33;border-color:#547c64}
html[data-theme="2"] body{background:radial-gradient(ellipse at top,#2e405f,#111724 70%)}
html[data-theme="2"] .stage{border-color:#809ab9}html[data-theme="2"] button{background:#27384e;border-color:#627a97}
/* Compact game shell: prioritize the canvas over page chrome. */
@media(min-width:601px) and (min-height:601px) {
  body { padding:8px 12px 12px; }
  main { max-width:1440px; }
  header { margin-bottom:5px; gap:12px; }
  header > div { display:flex; align-items:baseline; gap:14px; }
  header .eyebrow { font-size:9px; margin:0; letter-spacing:1.5px; }
  h1 { font-size:30px; line-height:1.1; letter-spacing:-1px; }
  nav { gap:5px; }
  nav button { padding:6px 12px; min-height:36px; }
  #level-name { margin:0; font-size:10px; }
  .status { padding:5px 2px; }
  .stage { border-radius:6px; }
  progress { margin:5px 0; height:3px; }
  .controls { max-width:none; margin:5px 0 0; }
  .movement { grid-template-columns:repeat(3,44px); gap:4px; }
  .controls button { min-width:44px; min-height:44px; padding:5px; }
  footer { margin-top:8px; font-size:12px; }
  footer > p { margin:4px 0; }
  summary { min-height:32px; padding:5px 0; }
  .local { margin-top:6px; }
}
@media(min-width:601px) and (max-width:850px) and (min-height:601px) {
  header .eyebrow { display:none; }
}
@media(max-width:600px) and (orientation:portrait) {
  body { padding-top:max(4px,env(safe-area-inset-top)); padding-left:max(4px,env(safe-area-inset-left)); padding-right:max(4px,env(safe-area-inset-right)); }
  main { grid-template-rows:38px 12px 16px minmax(0,1fr) 3px auto; gap:3px; }
  header { flex-direction:row; align-items:center; justify-content:space-between; gap:4px; }
  h1 { font-size:20px; white-space:nowrap; }
  nav button { min-height:34px; padding:4px 6px; font-size:10px; }
  nav { gap:3px; }
  .status { font-size:9px; }
}
@media(max-width:360px) and (orientation:portrait) {
  h1 { font-size:17px; }
  nav button { padding:4px; font-size:9px; }
}
@media(min-width:601px) and (min-height:601px) {
  /* Keep the entire playfield visible, including the player at ground level. */
  main { max-width:min(1440px, calc((100dvh - 100px) * 5 / 3)); }
}

/* Fill the responsive stage; the game camera adjusts its width to preserve proportions. */
.stage canvas { width:100%; height:100%; aspect-ratio:auto; object-fit:fill; }
@media(min-width:601px) and (min-height:601px) {
 main { max-width:1440px; }
 .stage { height:calc(100dvh - 205px); min-height:260px; }
 header .eyebrow { display:none; }
}
@media(max-width:1100px) and (max-height:600px) and (orientation:landscape) {
 main { grid-template-columns:208px minmax(0,1fr); grid-template-rows:16px 22px minmax(0,1fr) 3px; gap:3px 5px; }
 .controls { width:208px; }
 #overlay:not([hidden]) { width:208px; }
}
@media(max-width:1100px) and (max-height:600px) and (orientation:landscape) {
 .controls { margin-top:24px; }
}

/* D-pad and joystick occupy the same control footprint. */
.controls { flex-direction:column; align-items:flex-start; gap:4px; }
.controls #control-mode { min-height:28px; padding:3px 10px; font-size:11px; }
#direction-pad[hidden],#joystick[hidden] { display:none; }
#joystick { position:relative; width:140px; height:92px; flex:none; touch-action:none; user-select:none; border:1px solid #887044; border-radius:46px; background:radial-gradient(circle,#665333 0,#302e27 65%); }
#stick-knob { position:absolute; width:42px; height:42px; left:calc(50% - 21px); top:calc(50% - 21px); border-radius:50%; border:2px solid #d9b971; background:radial-gradient(circle at 35% 30%,#e7c585,#997743); box-shadow:0 3px 8px #0008; pointer-events:none; }
.stick-guide { position:absolute; top:2px; left:calc(50% - 5px); color:#d9b971; font-size:12px; }
@media(min-width:601px) and (min-height:601px) { .stage {height:calc(100dvh - 238px);} }