/* Telegram/mobile layout overrides.
   Desktop keeps a fixed lower panel so the canvas never jumps when UI state changes.
   Portrait gets its own layout instead of a squeezed desktop layout. */

#play-panel:not([hidden]){
  flex:0 0 148px!important;
  height:148px!important;
  min-height:148px!important;
  max-height:148px!important;
  overflow:hidden!important;
}
.stage-wrap{
  flex:1 1 0!important;
  min-height:0!important;
}

@media (max-width:900px) and (orientation:landscape){
  #play-panel:not([hidden]){
    flex-basis:126px!important;
    height:126px!important;
    min-height:126px!important;
    max-height:126px!important;
  }
}

@media (orientation:landscape) and (max-height:620px){
  #play-panel:not([hidden]){
    flex-basis:112px!important;
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
  }
}

/* Portrait Mini App: use the whole screen deliberately.
   The studio has a fixed 1280:700 footprint and can no longer grow/shrink when
   the question/status/choices below it change. */
@media (orientation:portrait) and (max-width:700px){
  html,body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden!important;
    background:#000066;
  }
  body{
    padding:max(1px,var(--safe-top),env(safe-area-inset-top)) 1px max(1px,var(--safe-bottom),env(safe-area-inset-bottom))!important;
    align-items:stretch!important;
  }
  #rotate-hint{display:none!important}
  .game-shell{
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-width:none!important;
    visibility:visible!important;
    pointer-events:auto!important;
    filter:none!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .menu-bar{
    flex:0 0 44px!important;
    min-height:44px!important;
    padding:2px 4px!important;
    gap:3px!important;
  }
  .menu-bar h1{
    font-size:13px!important;
    line-height:1!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .menu-bar h1 span{font-size:12px!important}
  .alpha{font-size:10px!important;margin:0 2px!important}
  .menu-bar button{
    font-size:11px!important;
    min-height:30px!important;
    padding:1px 6px!important;
  }
  .menu-bar #fullscreen{display:none!important}

  .stage-wrap{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1280 / 700!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    padding:0!important;
    background:#000!important;
    overflow:hidden!important;
  }
  .stage-wrap canvas{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    image-rendering:pixelated!important;
  }
  #loading{
    font-size:17px!important;
    padding:12px!important;
  }

  .start-panel{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
    padding:10px!important;
  }
  .start-panel form{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .start-panel form label{grid-column:1 / -1;font-size:18px}
  .start-panel input{max-width:none!important;min-height:44px!important;font-size:18px!important}
  .start-panel #start{min-height:44px!important;font-size:18px!important}
  .start-panel #resume{grid-column:1 / -1;min-height:40px!important}
  .start-meta{margin-top:8px!important}

  #play-panel:not([hidden]){
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      'meta'
      'question'
      'status'
      'actions'
      'letters'
      'choice'
      'result'!important;
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto!important;
    gap:4px!important;
    align-content:stretch!important;
    padding:0 0 5px!important;
    background:#aaa!important;
  }
  .round-meta{
    padding:4px 8px!important;
    font-size:14px!important;
    min-height:26px!important;
  }
  .question{
    font-size:clamp(20px,4.5vw,26px)!important;
    line-height:1.07!important;
    font-weight:700!important;
    margin:4px 9px 1px!important;
    min-height:0!important;
    max-height:4.45em!important;
    overflow:hidden!important;
    overflow-wrap:anywhere!important;
  }
  .host-line{
    font-size:16px!important;
    line-height:1.1!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    margin:0 9px!important;
    padding:4px 7px!important;
    min-height:38px!important;
    max-height:2.35em!important;
  }
  .actions{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    padding:0 9px!important;
  }
  .actions button{
    width:100%!important;
    min-height:42px!important;
    font-size:18px!important;
    padding:3px 5px!important;
  }
  .letters{
    grid-area:letters!important;
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-auto-rows:minmax(30px,1fr)!important;
    align-content:stretch!important;
    gap:4px!important;
    padding:2px 9px 4px!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .letters button{
    min-height:30px!important;
    height:auto!important;
    font-size:19px!important;
    padding:1px 0!important;
  }
  .choice{
    grid-area:choice!important;
    gap:6px!important;
    padding:0 9px 3px!important;
  }
  .choice button{min-height:40px!important;font-size:16px!important}
  .result{
    grid-area:result!important;
    max-height:26dvh!important;
    padding:3px 9px 5px!important;
    font-size:16px!important;
  }
  footer{display:none!important}
}