*{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}.equipment{display:flex;align-items:center;gap:20px}.slots{display:flex;gap:8px;flex:1}.slots button{flex:1;padding:12px 6px;min-width:0;font-size:12px}.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; }
  .controls .equipment { width:232px; max-width:100%; display:block; margin:0; }
  .equipment .eyebrow { font-size:9px; letter-spacing:1px; line-height:12px; }
  .slots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:2px 0 0; }
  .controls .slots button { min-width:0; min-height:44px; font-size:9px; padding:2px; }
  .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; }
}