@media (max-width:880px),(max-height:500px){

  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{position:fixed;inset:0;-webkit-text-size-adjust:100%}

  #app{--ax-stage:52dvh;
    display:grid;grid-template-columns:100%;
    grid-template-rows:auto auto var(--ax-stage) minmax(0,1fr);
    width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}

  .chrome{position:relative;top:auto;left:auto;right:auto;grid-row:1;grid-column:1;
    height:auto;min-height:38px;
    padding:env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left))}
  .chrome .dot{width:9px;height:9px;flex:0 0 auto}
  .chrome .url{min-width:0;font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .tabs{position:relative;top:auto;left:auto;transform:none;grid-row:2;grid-column:1;
    justify-self:center;margin:6px 0;max-width:calc(100% - 16px);
    flex-wrap:nowrap;overflow-x:auto;justify-content:safe center;
    overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;min-height:44px;min-width:44px;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

  #c,#fx{position:relative;inset:auto;grid-row:3;grid-column:1;width:100%;height:100%;min-width:0;min-height:0}
  #c{touch-action:none}
  #load{position:relative;inset:auto;grid-row:1/-1;grid-column:1}

  .panel{position:relative;inset:auto;grid-row:4;grid-column:1;
    display:none;opacity:1;pointer-events:auto;transition:none;
    min-width:0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:linear-gradient(180deg,rgba(7,11,34,.55),rgba(5,8,26,.8));border-top:1px solid rgba(255,255,255,.12)}
  .panel.on{display:block}
  #briefing,#playground,#checkpoint{display:none;left:auto;right:auto;top:auto;bottom:auto;width:auto;
    padding:11px calc(11px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(11px + env(safe-area-inset-left))}
  #briefing.on,#playground.on,#checkpoint.on{display:block}

  #stages{grid-row:4;grid-column:1;position:relative;min-width:0;min-height:0}
  #stages .panel{height:100%}
  #labels{position:relative;inset:auto;grid-row:3;grid-column:1;min-width:0;min-height:0}
  .panel.p-briefing,.panel.p-playground,.panel.p-checkpoint{display:none;left:auto;right:auto;top:auto;bottom:auto;width:auto;
    padding:11px calc(11px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(11px + env(safe-area-inset-left))}
  .panel.p-briefing.on,.panel.p-playground.on,.panel.p-checkpoint.on{display:block}

  .beat,.cp,.pg{max-width:none;padding:15px 16px;max-height:none;overflow:visible}
  .beat h2{font-size:1.24rem}
  .cp h2{font-size:1.08rem}

  .cbtn{min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .opt{min-height:48px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  input[type=range]{height:44px;background:transparent;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
  input[type=range]::-webkit-slider-runnable-track{height:9px;border-radius:6px;background:rgba(255,255,255,.2)}
  input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9.5px}
  input[type=range]::-moz-range-track{height:9px;border-radius:6px;background:rgba(255,255,255,.2)}
  input[type=range]::-moz-range-thumb{width:28px;height:28px}

  body:has(.cookiebar.show) #briefing,
  body:has(.cookiebar.show) #playground,
  body:has(.cookiebar.show) #checkpoint,
  body:has(.cookiebar.show) .panel{padding-bottom:150px}

  .hi{-webkit-box-decoration-break:clone;box-decoration-break:clone}
}

@media (max-width:880px) and (min-height:800px){ #app{--ax-stage:53dvh} }
@media (max-width:880px) and (max-height:620px){ #app{--ax-stage:48dvh} .chrome{display:none} }
@media (max-width:400px){
  .beat .k,.pg .k,.cp .k{letter-spacing:.07em;font-size:.55rem}
  .beat h2{font-size:1.16rem}
}

@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #app{grid-template-columns:minmax(0,1fr) min(340px,44%);grid-template-rows:auto minmax(0,1fr)}
  .chrome{display:none}
  .tabs{grid-column:1/-1;grid-row:1}
  #c,#fx{grid-column:1;grid-row:2;height:100%}
  #load{grid-column:1/-1;grid-row:1/-1}
  .panel{grid-column:2;grid-row:2;border-top:none;border-left:1px solid rgba(255,255,255,.12)}
}