/* Compact landscape applies only while the new jump game is visible.
   No canvas resolution, input handling, frame loop, book or home rules change. */
@media (orientation:landscape) and (min-width:600px) and (max-width:1000px) and (max-height:520px){
  body:has(#play-view:not([hidden])){
    --compact-vh:100vh;
    --compact-top:max(6px,env(safe-area-inset-top));
    --compact-bottom:max(8px,env(safe-area-inset-bottom));
    --compact-left:max(8px,env(safe-area-inset-left));
    --compact-right:max(8px,env(safe-area-inset-right));
    --compact-width:calc(100vw - var(--compact-left) - var(--compact-right));
    --compact-height:calc(var(--compact-vh) - var(--compact-top) - var(--compact-bottom));
    --compact-canvas-width:min(calc((var(--compact-height) - 66px)*4/3),calc(var(--compact-width) - 224px));
    --compact-canvas-height:calc(var(--compact-canvas-width)*3/4);
    --compact-gutter:calc((var(--compact-width) - var(--compact-canvas-width) - 16px)/2);
    overflow:hidden;
  }
  body:has(#play-view:not([hidden]))>.site-header,
  body:has(#play-view:not([hidden]))>.site-header nav{display:contents}
  body:has(#play-view:not([hidden]))>.site-header>:not(nav),
  body:has(#play-view:not([hidden]))>.site-header nav>:not(#sound-toggle){display:none}
  body:has(#play-view:not([hidden])) #sound-toggle{
    position:fixed;z-index:60;top:calc(var(--compact-top) + 82px);right:var(--compact-right);
    display:inline-flex;align-items:center;justify-content:center;width:var(--compact-gutter);height:30px;min-height:30px;margin:0;padding:4px 6px;
    border:1px solid #c7b99e;border-radius:4px;background:var(--paper);color:var(--brown);font-size:11px;line-height:1.4;box-shadow:none;white-space:nowrap;
  }
  #play-view:not([hidden]){
    position:fixed;top:0;left:0;right:0;z-index:40;
    height:var(--compact-vh);padding:var(--compact-top) var(--compact-right) var(--compact-bottom) var(--compact-left);
    display:grid;grid-template-rows:36px minmax(0,1fr);gap:4px;overflow:hidden;background:var(--cream);
  }
  @supports(height:100svh){body:has(#play-view:not([hidden])){--compact-vh:100svh}}
  #play-view .play-head{height:36px;min-height:0;margin:0;gap:10px;flex-wrap:nowrap}
  #play-view .play-head>div:first-child{min-width:0;flex:1}
  #play-view .play-head .eyebrow{display:none}
  #play-view .play-head h1{font-size:15px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  #play-view .play-tools{flex-shrink:0;gap:5px;flex-wrap:nowrap}
  #play-view .play-tools button{min-height:32px;padding:5px 9px;font-size:11px;line-height:1.4}
  #play-view .play-layout{display:block;min-height:0;height:100%;max-width:none}
  #play-view .play-main{
    width:100%;max-width:none;height:100%;min-height:0;margin:0;
    display:grid;grid-template-columns:minmax(80px,1fr) var(--compact-canvas-width) minmax(104px,1fr);
    grid-template-rows:22px minmax(0,1fr);gap:4px 8px;
  }
  #play-view .hud{grid-column:2;grid-row:1;min-height:22px;padding:2px 7px;gap:5px;flex-wrap:nowrap;border:1px solid var(--line);border-radius:4px;font-size:10px;line-height:1.5;white-space:nowrap}
  #play-view .hud>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #play-view .arena{grid-column:2;grid-row:2;align-self:center;width:var(--compact-canvas-width);height:var(--compact-canvas-height);max-width:none;aspect-ratio:4/3;border-radius:5px}
  #play-view #game-canvas{width:100%;height:100%;aspect-ratio:4/3}
  #play-view .play-route{grid-column:1;grid-row:2;align-self:start;justify-self:center;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;max-width:160px;gap:3px;min-height:0;margin:0;padding:3px;border:1px solid var(--line);border-radius:4px}
  #play-view .play-route .route-step{min-height:18px;padding:1px 2px;font-size:9px;line-height:1.4}
  #play-view .play-route .route-step.is-done::after{right:1px;top:0;font-size:6px}
  #play-view .hud-objective{grid-column:1;grid-row:2;align-self:start;min-width:0;min-height:0;max-height:max(54px,calc(var(--compact-canvas-height) - 140px));margin:51px 0 0;padding:7px 6px;overflow:auto;border:1px solid var(--line);border-radius:4px;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
  #play-view .touch-controls{display:contents}
  #play-view .direction-pad{grid-column:1;grid-row:2;align-self:end;justify-self:center;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:0}
  #play-view .touch-controls button{min-width:64px;min-height:60px;padding:8px 10px;font-size:22px;touch-action:none}
  #play-view #action-control{grid-column:3;grid-row:2;align-self:end;justify-self:center;min-width:104px;min-height:64px;max-width:100%;padding:10px 8px;font-size:14px;line-height:1.5}
  #play-view .controls-help{grid-column:3;grid-row:2;align-self:start;min-width:0;max-height:max(48px,calc(var(--compact-canvas-height) - 136px));margin:52px 0 76px;padding:0 4px;overflow:auto;font-size:10px;line-height:1.7;overflow-wrap:anywhere}
  #play-view .game-notice{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  #play-view .run-panel{position:absolute;top:calc(var(--compact-top) + 40px);right:var(--compact-right);width:var(--compact-gutter);max-width:none;margin:0;padding:0;border:0;background:transparent}
  #play-view .run-panel>:not(button){display:none}
  #play-view .run-panel>.secondary{width:100%;min-width:0;min-height:36px;margin:0;padding:4px 5px;font-size:10px;line-height:1.4}
  #play-view .award-toast{top:8px;width:min(350px,calc(100% - 14px));max-width:calc(100% - 14px);grid-template-columns:32px minmax(0,1fr);gap:8px;padding:7px 9px 7px 7px}
  #play-view .award-toast:not(.is-repeat){grid-template-columns:22px 32px minmax(0,1fr)}
  #play-view .award-number{min-height:50px}
  #play-view .award-number #award-rank{font-size:23px}
  #play-view .award-number small{font-size:8px}
  #play-view .award-copy #award-label,#play-view .reward-caption{font-size:8px;line-height:1.35}
  #play-view .award-copy #award-title{font-size:12px;line-height:1.4;max-height:2.8em}
  #play-view .award-copy #award-author{display:none}
  #play-view .award-progress{gap:5px;font-size:9px}
  #play-view .award-progress #award-note{font-size:8px}
  #play-view .reward-seal{width:21px;height:30px;font-size:15px}
  #play-view .reward-dots{gap:2px;margin-top:4px}
  #play-view .game-overlay{padding:12px;gap:8px}
  #play-view .game-overlay p{font-size:16px;line-height:1.6;margin:0 0 6px}
  #play-view .game-overlay button{min-height:44px;min-width:120px;margin:0;font-size:13px}
  /* Keep persistence errors visible above the game, clear of both touch pads. */
  body:has(#play-view:not([hidden])) #storage-warning:not([hidden]){
    position:fixed;z-index:70;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);
    width:min(calc((100vh - 80px)*4/3),calc(100vw - 240px));max-height:86px;margin:0;padding:7px 9px;
    overflow:auto;font-size:11px;line-height:1.5;background:#fff3df;border:1px solid #c69c67;border-radius:4px;box-shadow:0 2px 9px #2c1b242b;
  }
}