/* GSZ Calculator V5.7 — portrait handset ergonomics.
   The shell still fits in one viewport; complex screens scroll only inside the LCD.
   Legacy control buttons and layout are preserved across desktop and landscape. */
@media (max-width:700px) and (orientation:portrait) {
  :root{--v53-topbar:36px;--v53-mobile-nav:53px}
  .site-head.appbar{
    height:var(--v53-topbar)!important;min-height:0!important;
    flex-basis:var(--v53-topbar)!important;padding:2px 6px!important;
  }
  .site-head.appbar .brand-icon{height:29px!important;width:29px!important}
  .site-head.appbar .brand strong{font-size:13px!important}
  .site-head.appbar .top-button{min-height:28px!important;padding:3px 6px!important}
  .layout.app-layout{
    padding:2px 2px calc(var(--v53-mobile-nav) + env(safe-area-inset-bottom) + 1px)!important;
  }
  .calculator-shell{
    max-width:none!important;border-radius:12px!important;padding:3px!important;
    grid-template-rows:minmax(0,.94fr) minmax(0,1.06fr)!important;
    gap:2px!important;
  }
  .calc-head{padding:5px!important;border-radius:8px 8px 4px 4px!important}
  .lcd{border-width:2px!important}
  /* Reserve an honest, measurable square for the directional pad. */
  .hardware-controls{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(74px,10.2dvh,96px) minmax(0,1fr) minmax(0,1fr)!important;
    gap:4px!important;align-items:center!important;
    margin-top:5px!important;
    width:100%!important;
  }
  .control-cluster{min-width:0!important;gap:4px!important;justify-content:center!important}
  .control-button{
    height:clamp(25px,4dvh,37px)!important;min-width:0!important;
    font-size:9px!important;line-height:1.05!important;padding:1px!important;
  }
  .control-button small{font-size:5px!important;margin-top:2px!important}
  .dpad{
    box-sizing:border-box!important;display:grid!important;grid-column:3!important;grid-row:1!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    width:100%!important;max-width:none!important;max-height:none!important;
    height:auto!important;min-height:0!important;min-width:0!important;
    aspect-ratio:1 / 1!important;justify-self:center!important;
    gap:0!important;padding:4px!important;border-width:2px!important;
    overflow:hidden!important;
    background:radial-gradient(circle at 45% 37%,#33445f 0%,#18253b 65%,#0a1424 100%)!important;
    box-shadow:inset 0 1px 3px #8eafd04b,0 2px 4px #070c1a!important;
  }
  .dpad button{
    box-sizing:border-box!important;display:grid!important;place-items:center!important;
    min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;
    margin:0!important;padding:0!important;border:0!important;
    font-family:Arial,sans-serif!important;font-size:clamp(10px,1.8dvh,16px)!important;
    line-height:1!important;letter-spacing:0!important;
    color:#dbeaff!important;text-align:center!important;
    background:transparent!important;touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .dpad-up{grid-column:2!important;grid-row:1!important}
  .dpad-left{grid-column:1!important;grid-row:2!important}
  .dpad-center{grid-column:2!important;grid-row:2!important;
    border-radius:50%!important;background:#0c1930!important;color:#8ebaff!important;
    box-shadow:inset 0 1px 3px #01050a8c!important;
  }
  .dpad-right{grid-column:3!important;grid-row:2!important}
  .dpad-down{grid-column:2!important;grid-row:3!important}
  .dpad button:active{color:#64dcff!important;background:#253f62!important;border-radius:50%!important}
  .dpad button:focus-visible{outline:2px solid #a6ddff!important;outline-offset:-2px!important;border-radius:50%!important}
  .keypad{padding:3px!important;gap:3px!important;border-radius:4px 4px 9px 9px!important}
  .nav-shell.workspace{
    height:calc(var(--v53-mobile-nav) + env(safe-area-inset-bottom))!important;
    padding:2px 3px calc(2px + env(safe-area-inset-bottom))!important;
  }
  .mode-picker.app-nav{border-radius:10px!important;gap:2px!important;padding:2px!important}
  .mode-tile span{font-size:clamp(15px,2.4dvh,19px)!important}
  .more-modes-panel{bottom:calc(var(--v53-mobile-nav) + env(safe-area-inset-bottom) + 4px)!important}
}
/* Small displays still provide at least 65–70 px for the complete 5-button cross. */
@media (max-width:700px) and (orientation:portrait) and (max-height:680px) {
  :root{--v53-topbar:34px;--v53-mobile-nav:50px}
  .calculator-shell{grid-template-rows:minmax(0,.96fr) minmax(0,1.04fr)!important}
  .calc-engraving{display:none!important}
  .calc-head{padding:4px!important}
  .hardware-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(65px,12.2dvh,78px) minmax(0,1fr) minmax(0,1fr)!important;
    gap:3px!important;margin-top:3px!important;
  }
  .control-cluster{gap:3px!important}
  .control-button{height:clamp(23px,4.35dvh,30px)!important;font-size:8px!important}
  .control-button small{font-size:4.5px!important;margin-top:0!important}
  .dpad{max-width:none!important;max-height:none!important;padding:3px!important}
  .dpad button{font-size:clamp(10px,2.45dvh,14px)!important}
  .keypad{gap:2px!important;padding:2px!important}
  .keys-five,.keys-six{gap:2px!important}
}
@media (max-width:360px) and (orientation:portrait){
  .hardware-controls{gap:2px!important}
  .control-button{font-size:7.5px!important}
}
/* On larger touch tablets, keep the navigation cluster balanced and fully clickable. */
@media (min-width:701px) and (orientation:portrait) and (pointer:coarse){
  .dpad button{padding:0!important;min-width:0!important;min-height:0!important}
}