:root{--game-width:100%;--game-height:100dvh;--game-top:0px;--game-left:0px}
html,body{width:100%;height:100%;overscroll-behavior:none}
body #game{inset:auto;left:var(--game-left);top:var(--game-top);width:var(--game-width);height:var(--game-height)}
body .scr,body #boot{inset:auto;left:var(--game-left);top:var(--game-top);width:var(--game-width);height:var(--game-height)}
body .scr .box{max-height:calc(var(--game-height) - 24px)}
#game-fullscreen{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:calc(82px + env(safe-area-inset-bottom));z-index:8;display:grid;place-items:center;width:44px;height:44px;padding:9px;border:2px solid #a7c5c7;border-radius:9px;background:#141e32ed;color:#eff1dc;touch-action:manipulation}
#game-fullscreen[hidden]{display:none}#game-fullscreen svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none}
#game-fullscreen.touch{right:max(23px,env(safe-area-inset-right));bottom:calc(164px + env(safe-area-inset-bottom))}
body #dash-action{bottom:auto;top:calc(var(--game-top) + var(--game-height) - 72px - env(safe-area-inset-bottom))}
body #dash-action.touch{top:calc(var(--game-top) + var(--game-height) - 148px - env(safe-area-inset-bottom))}
body #game-fullscreen{bottom:auto;top:calc(var(--game-top) + var(--game-height) - 126px - env(safe-area-inset-bottom))}
body #game-fullscreen.touch{top:calc(var(--game-top) + var(--game-height) - 208px - env(safe-area-inset-bottom))}
#game-fullscreen:focus-visible{outline:3px solid #ffbf54;outline-offset:3px}
@media(max-width:900px) and (orientation:landscape){
 body #run-header{right:calc(72px + env(safe-area-inset-right));max-width:calc(var(--game-width) - 340px)}
}
@media(max-height:450px) and (orientation:landscape){
 body #game-fullscreen.touch{left:max(16px,env(safe-area-inset-left));right:auto;top:calc(var(--game-top) + 76px + env(safe-area-inset-top))}
}
@media(max-width:600px) and (orientation:portrait){
 body #run-header{left:12px;right:12px;top:calc(64px + env(safe-area-inset-top));transform:none;max-width:none}
 body #run-map{font-size:19px}body #run-time{font-size:22px}
 body #scr-levelup{padding:12px 4px}
 body #scr-levelup.scr.dim .box.choices{max-height:calc(var(--game-height) - 24px);overflow:visible}
 body #scr-levelup .augment-subtitle,body #scr-levelup .augment-footnote{display:none}
 body #scr-levelup #cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:6px 0 12px;padding-inline:2px}
 body #cards .augment-card{
  --scroll-height:min(560px,calc(var(--game-height) - 168px));
  --roll-top:clamp(28px,9vw,54px);--roll-bottom:clamp(24px,7.5vw,45px);
  padding:calc(var(--roll-top) + 8px) 11% calc(var(--roll-bottom) + 8px);width:100%;overflow:hidden;
 }
 /* Keep the generated roll crops in proportion; extend only the paper. */
 body #cards .augment-roll{height:auto;aspect-ratio:2/3;bottom:auto}
 body #cards .augment-roll-bottom{top:auto;bottom:0}
 body #cards .augment-frame{
  left:-6%;width:112%;
  top:calc(var(--roll-top) - (var(--scroll-height) - var(--roll-top) - var(--roll-bottom)) * .184 / .66);
  height:calc((var(--scroll-height) - var(--roll-top) - var(--roll-bottom)) / .66);bottom:auto;
 }
 body #cards .augment-card .ico{width:40px;height:40px;margin-bottom:8px}
 body #cards .augment-card .ico img{width:40px;height:40px}
 body #cards .augment-card .nm{font-size:clamp(20px,5.1vw,22px);overflow-wrap:anywhere;max-height:5.4em;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
 body #cards .augment-details{margin:6px 0 8px;gap:3px;font-size:14px;max-height:4.5em;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
 body #cards .augment-details .tag-chip{font-size:14px;max-width:100%;overflow-wrap:anywhere;padding:2px}
 body #cards .augment-card .ds{font-size:18px;line-height:1.3;padding-top:8px;overflow-wrap:anywhere;touch-action:pan-y}
 body #cards .augment-card .fit-low{font-size:16px}
 body #cards .augment-action{display:none}
 body .scr.dim:is(#scr-bond,#scr-item) .box.choices{max-height:calc(var(--game-height) - 24px);overflow-y:auto;overscroll-behavior:contain}
 body :is(#bond-cards,#item-cards){grid-template-columns:minmax(0,1fr)}
 body :is(#bond-cards,#item-cards) .choice-scroll{--scroll-height:460px}
}