/* Keep the original ship/menu styling at native phone viewport sizes. */
/* Account entry lives in the menu; the controller and automatic modal remain active. */
body:not(.in-menu) #cynnx-game-chip { display: none !important; }

@media (max-width: 760px) {
  html, body { margin: 0; width: 100%; }
  #start {
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 20px max(12px, env(safe-area-inset-right, 0px))
      24px max(12px, env(safe-area-inset-left, 0px));
  }
  .menu { width: 100%; max-width: 100%; margin: 0 auto; padding: 16px; }
  .menu.home { min-height: 0; padding: 0; gap: 18px; }
  body.in-menu:has([data-cynnx-ui]) #start { padding-top: 80px; }
  .menu.home h1 { font-size: clamp(32px, 9vw, 46px); line-height: 1.08; letter-spacing: -1px; }
  .menu.home .sub { font-size: 15px; }
  .menu.home .mbtns { min-width: 0; }
  .menu.home .mbtns .mbtn { min-width: 0; }
  .crewRow { gap: 8px; justify-content: flex-start; }
  .crewRow .cm2 { min-width: 44px; }
  .crewRow .cm2 canvas { width: 44px !important; height: 44px !important; }
  .crewRow .cm2 b { font-size: 12px; }
  .chars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .char { min-width: 0; }
  .char canvas { width: 44px; height: 44px; }
  button, input, select, .menu .back, .chipbtn { min-height: 44px; }
  input, select { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .code, .nickRow { flex-wrap: wrap; }
  .code input, .nickRow input { min-width: 0; flex: 1 1 100px; }
  #ready { top: 204px; }
  #ready button { min-height: 44px; }
}

@media (pointer: coarse) {
  .touch {
    left: max(8px, env(safe-area-inset-left, 0px));
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(4, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 6px;
    touch-action: none;
  }
  .touch button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  /* Forward/left/back/right keep their original cells; both actions have their own target. */
  .touch .use { grid-column: 4; grid-row: 1; }
  #hotbar {
    left: max(8px, env(safe-area-inset-left, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width: none;
    transform: none;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 2px;
    pointer-events: auto;
    touch-action: pan-x;
  }
  #hotbar .hs, #inv .hs { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; }
  #hotbar .sep { flex: 0 0 8px; }
  #comms { right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: max(90px, calc(100vw - 224px)); box-sizing: border-box; }
  #comms .ch { min-height: 44px; align-items: center; }
  #commsIn { min-height: 44px; }
  /* The tutorial injects its own stylesheet at launch, so these boundaries must win then too. */
  #tut { left: max(8px, env(safe-area-inset-left, 0px)) !important; right: max(8px, env(safe-area-inset-right, 0px)) !important; bottom: calc(220px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; width: auto !important; box-sizing: border-box; }
  #tut .skip { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  #lootChip { bottom: calc(176px + env(safe-area-inset-bottom, 0px)) !important; font-size: 13px; padding: 3px 8px; }
  #inv { max-height: calc(100dvh - 110px); overflow-y: auto; }
}

@media (pointer: coarse) and (max-height: 500px) {
  #ready { top: 12px; width: min(280px, calc(100vw - 280px)); }
}