/* Mobile Rebuild Phase 4 — Native Android/iOS + Tablet/Web Adaptation
   Phone portrait remains canonical. Native safe areas and larger displays adapt
   outward without restoring desktop cards, arenas, dark sidewalls or page scroll. */
:root{
  --native-top:env(safe-area-inset-top,0px);
  --native-right:env(safe-area-inset-right,0px);
  --native-bottom:env(safe-area-inset-bottom,0px);
  --native-left:env(safe-area-inset-left,0px);
}

html.mna4-native,html.mna4-native body,html.mna4-native #app{height:100%;min-height:100%;overscroll-behavior:none}
html.mna4-native body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html.mna4-native input,html.mna4-native textarea,html.mna4-native [contenteditable="true"]{-webkit-user-select:text;user-select:text}
html.mna4-native .cm-phase2-screen{box-sizing:border-box!important;padding-left:max(0px,var(--native-left))!important;padding-right:max(0px,var(--native-right))!important}
html.mna4-native.mna4-phone .cm-phase2-screen{padding-top:max(0px,var(--native-top))!important;padding-bottom:max(0px,var(--native-bottom))!important}
html.platform-ios .cm-phase2-screen button,html.platform-ios .cm-phase2-screen .aw-tile{-webkit-tap-highlight-color:transparent!important}

/* Tablet: same vertical grammar, simply given room to breathe. */
@media(min-width:521px) and (max-width:1024px){
  html.mna4-tablet .cm-phase2-screen{
    grid-template-rows:54px 50px minmax(0,1fr) 126px!important;
    padding:var(--native-top) max(16px,var(--native-right)) max(8px,var(--native-bottom)) max(16px,var(--native-left))!important;
    background:#fff!important;
  }
  html.mna4-tablet .cm-phase2-screen .duel-compact-top,
  html.mna4-tablet .cm-phase2-screen .aw-scorebar{width:min(820px,100%)!important;max-width:820px!important;margin-inline:auto!important}
  html.mna4-tablet .cm-phase2-screen .duel-board-stage{min-height:0!important;padding:6px 0!important;display:grid!important;place-items:center!important}
  html.mna4-tablet .cm-phase2-screen .aw-scroller{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;overflow:visible!important}
  html.mna4-tablet .cm-phase2-screen .aw-grid{max-width:calc(100vw - 32px - var(--native-left) - var(--native-right))!important;max-height:100%!important}
  html.mna4-tablet .cm-phase2-screen .aw-dock{width:min(760px,100%)!important;max-width:760px!important;height:126px!important;min-height:126px!important;grid-template-rows:70px 52px!important;margin-inline:auto!important}
  html.mna4-tablet .cm-phase2-screen .aw-rack{height:70px!important;min-height:70px!important;gap:10px!important}
  html.mna4-tablet .cm-phase2-screen .aw-tile{width:58px!important;height:59px!important;min-width:58px!important;min-height:59px!important;border-radius:9px!important}
  html.mna4-tablet .cm-phase2-screen .cm2-actions{height:52px!important;grid-template-columns:52px 52px minmax(190px,280px) 52px!important;gap:12px!important}
  html.mna4-tablet .cm-phase2-screen .cm2-utility{width:50px!important;height:50px!important}
  html.mna4-tablet .cm-phase2-screen .cm2-primary{height:44px!important;max-width:280px!important}
}

/* Desktop/web is a secondary adaptation of the same game surface. No phone card. */
@media(min-width:1025px){
  html.mna4-desktop .cm-phase2-screen{
    grid-template-rows:52px 48px minmax(0,1fr) 116px!important;
    padding:0 24px 8px!important;
    background:#fff!important;
  }
  html.mna4-desktop .cm-phase2-screen .duel-compact-top,
  html.mna4-desktop .cm-phase2-screen .aw-scorebar{width:min(920px,100%)!important;max-width:920px!important;margin-inline:auto!important}
  html.mna4-desktop .cm-phase2-screen .duel-board-stage{display:grid!important;place-items:center!important;min-height:0!important;padding:3px 0!important}
  html.mna4-desktop .cm-phase2-screen .aw-scroller{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;overflow:visible!important}
  html.mna4-desktop .cm-phase2-screen .aw-grid{max-width:min(780px,calc(100vw - 48px))!important;max-height:100%!important;box-shadow:0 1px 0 rgba(38,50,60,.03)!important}
  html.mna4-desktop .cm-phase2-screen .aw-dock{width:min(820px,100%)!important;max-width:820px!important;height:116px!important;min-height:116px!important;grid-template-rows:64px 48px!important;margin-inline:auto!important}
  html.mna4-desktop .cm-phase2-screen .aw-rack{height:64px!important;min-height:64px!important}
  html.mna4-desktop .cm-phase2-screen .cm2-actions{height:48px!important;width:min(550px,100%)!important;grid-template-columns:50px 50px minmax(190px,280px) 50px!important;gap:12px!important}
  html.mna4-desktop .cm-phase2-screen .cm2-primary{max-width:280px!important;height:43px!important}
}

/* iPad/tablet landscape remains board-first rather than becoming a desktop page. */
@media(min-width:700px) and (orientation:landscape) and (max-height:900px){
  html.mna4-tablet .cm-phase2-screen{grid-template-rows:46px 44px minmax(0,1fr) 104px!important}
  html.mna4-tablet .cm-phase2-screen .aw-dock{height:104px!important;min-height:104px!important;grid-template-rows:56px 46px!important}
  html.mna4-tablet .cm-phase2-screen .aw-rack{height:56px!important;min-height:56px!important}
  html.mna4-tablet .cm-phase2-screen .aw-tile{width:50px!important;height:51px!important;min-width:50px!important;min-height:51px!important}
  html.mna4-tablet .cm-phase2-screen .cm2-actions{height:46px!important}
}

/* Native phone landscape is supported defensively, but the native projects lock
   phones to portrait because that is the canonical competitive crossword UX. */
@media(max-height:520px) and (orientation:landscape) and (pointer:coarse){
  html.mna4-phone .cm-phase2-screen{grid-template-rows:40px 38px minmax(0,1fr) 86px!important;padding-top:max(0px,var(--native-top))!important;padding-bottom:max(2px,var(--native-bottom))!important}
  html.mna4-phone .cm-phase2-screen .duel-compact-top{height:40px!important;min-height:40px!important}
  html.mna4-phone .cm-phase2-screen .aw-scorebar{height:38px!important;min-height:38px!important}
  html.mna4-phone .cm-phase2-screen .aw-dock{height:86px!important;min-height:86px!important;grid-template-rows:45px 39px!important}
  html.mna4-phone .cm-phase2-screen .aw-rack{height:45px!important;min-height:45px!important}
  html.mna4-phone .cm-phase2-screen .aw-tile{width:40px!important;height:41px!important;min-width:40px!important;min-height:41px!important}
  html.mna4-phone .cm-phase2-screen .cm2-actions{height:39px!important;grid-template-rows:38px!important}
}

/* Native accessibility stays first-class on every size. */
html.large-text.mna4-native .cm-phase2-screen .duel-title b{font-size:clamp(17px,2.2vw,21px)!important}
html.high-contrast .cm-phase2-screen .aw-answer:focus-visible,
html.high-contrast .cm-phase2-screen .aw-clue:focus-visible{outline:3px solid #000!important;outline-offset:-3px!important}
html.reduced-motion .cm-phase2-screen *{scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){.cm-phase2-screen *{scroll-behavior:auto!important}}