:root {
  --phone-ink: #050c12;
  --phone-rail: #08141c;
  --phone-panel: #0a1820;
  --phone-control: #0d2733;
  --phone-line: #17394a;
  --phone-line-strong: #2a6274;
  --phone-copy: #d8f3ff;
  --phone-muted: #86adbc;
  --phone-cyan: #5fe8ff;
  --phone-amber: #f2a93b;
  --phone-radius-control: 10px;
  --phone-radius-card: 12px;
  --phone-size-rail: 72px;
  --phone-font: "Chakra Petch", "Arial Narrow", sans-serif;
}

.seg,
.btn {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid var(--phone-line-strong);
  border-radius: var(--phone-radius-control);
  background: var(--phone-control);
  color: var(--phone-copy);
  font: 600 13px/1.2 var(--phone-font);
}

.seg { padding: 0 12px; }
.seg[aria-pressed="true"],
.seg[aria-selected="true"] { border-color: var(--phone-cyan); background: #0f2a35; color: var(--phone-cyan); }
.btn { padding: 0 14px; }
.btn-primary,
.pri { min-height: 44px; border-color: transparent; border-radius: var(--phone-radius-card); background: var(--phone-amber); color: #1b1005; font: 700 16px/1.2 var(--phone-font); }
.card { min-width: 0; border: 1px solid var(--phone-line-strong); border-radius: var(--phone-radius-card); background: #081820; padding: 10px 12px; }
.settings-back-phone { display: none; }

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1000px) and (max-height: 550px) {
  body:has(#nav-shell:not([hidden])) { overflow: hidden; }

  #nav-shell:not([hidden]) {
    position: fixed;
    z-index: 115;
    inset: 0 auto 0 0;
    display: block;
    box-sizing: border-box;
    width: var(--phone-size-rail);
    height: 100dvh;
    padding: 0;
    overflow: visible;
    border: 0;
    border-right: 1px solid #16343f;
    background: var(--phone-rail);
    box-shadow: none;
    pointer-events: none;
  }

  #nav-shell .nav-shell-top,
  #nav-shell .nav-shell-tools { display: contents; }
  #nav-shell .nav-brand,
  #nav-shell .nav-wallet,
  #nav-shell .nav-profile { display: none; }
  body[data-app-state="PLAY_HOME"] #nav-shell #nav-profile {
    position: fixed;
    z-index: 117;
    top: 8px;
    left: 82px;
    display: block;
  }
  body[data-app-state="PLAY_HOME"] #nav-profile > summary {
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
  }
  body[data-app-state="PLAY_HOME"] #nav-profile > summary > span:not(.nav-profile-mark) { display: none; }

  #nav-shell #nav-primary {
    position: fixed;
    z-index: 116;
    inset: 0 auto 0 0;
    display: flex;
    box-sizing: border-box;
    width: var(--phone-size-rail);
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }

  #nav-primary > .nd-tab {
    display: flex;
    box-sizing: border-box;
    width: 60px;
    min-width: 60px;
    height: 52px;
    min-height: 52px;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 3px 1px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #8fb3c2;
    font: 600 10px/1.1 var(--phone-font);
    letter-spacing: 0;
    white-space: nowrap;
  }

  #nav-primary > .nd-tab[aria-selected="true"] {
    border-color: transparent;
    background: #0f2a35;
    color: var(--phone-cyan);
    box-shadow: none;
  }

  #nav-primary > .nd-tab svg,
  #nav-shell #open-settings svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  #nav-primary .nav-label-desktop { display: none; }
  #nav-primary .nav-label-phone { display: inline; }
  #nav-primary > [data-nav-destination]::before { content: none; }
  #nav-shell #nav-primary #home-quick-play {
    position: fixed;
    z-index: 117;
    top: 8px;
    right: 10px;
    display: inline-flex;
    box-sizing: border-box;
    width: 132px;
    min-width: 132px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
  }
  body:is([data-app-state="HANGAR"], [data-app-state="ROOM_BROWSER"]) #nav-shell #nav-primary #home-quick-play {
    top: auto;
    right: auto;
    bottom: 58px;
    left: 10px;
    width: 52px;
    min-width: 52px;
    height: 44px;
    min-height: 44px;
    padding: 0 4px;
    font-size: 10px;
  }
  body:not([data-app-state="PLAY_HOME"]):not([data-app-state="HANGAR"]):not([data-app-state="ROOM_BROWSER"]) #nav-shell #nav-primary #home-quick-play { display: none; }

  #nav-shell #leave-room-match { display: none !important; }
  #nav-shell .nav-hangar-actions {
    position: fixed;
    z-index: 118;
    top: 4px;
    right: 8px;
    display: none;
  }
  #nav-shell .nav-hangar-actions > summary { background: #0a1d26; }
  #nav-shell #open-settings {
    position: fixed;
    z-index: 117;
    bottom: 8px;
    left: 14px;
    display: grid;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #8fb3c2;
    font-size: 0;
  }
  #nav-shell #open-settings .nav-settings-desktop { display: none; }
  #nav-shell #open-settings[aria-expanded="true"] { border-color: transparent; background: #0f2a35; color: var(--phone-cyan); }

  body[data-app-state="PLAY_HOME"] #play-home,
  body[data-app-state="HANGAR"] #hangar,
  body[data-app-state="ROOM_BROWSER"] #room-browser,
  body[data-app-state="ROOM_LOBBY"] #room-lobby,
  body[data-app-state="RESULTS"] .app-screen {
    position: fixed !important;
    left: var(--phone-size-rail) !important;
    right: 0 !important;
    width: auto !important;
    box-sizing: border-box;
  }

  body[data-app-state="PLAY_HOME"] #play-home .play-home-body { padding-top: 44px; }
  body[data-app-state="PLAY_HOME"] #play-home #home-skill-intro {
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
  }
  body[data-app-state="PLAY_HOME"] #play-home #home-skill-intro .home-skill-copy {
    box-sizing: border-box;
    min-height: 0;
    max-height: 52px;
    overflow: auto;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
  }
  body[data-app-state="HANGAR"] #hangar { padding: 0; place-items: stretch; }
  body[data-app-state="HANGAR"] #hangar .hangar-body {
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }
  body[data-app-state="HANGAR"] #hangar #main-menu-nav { margin-top: 0; }
  body[data-app-state="HANGAR"] #hangar .hangar-body,
  body[data-app-state="ROOM_BROWSER"] #room-browser .screen-body,
  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body { margin-top: 0; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100dvh;
    margin-top: 0;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-icon {
    width: 24px;
    height: 24px;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns:has(.room-empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(136px, 22%);
    gap: 6px;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns:has(.room-empty) .create-room-panel {
    display: flex;
    min-width: 0;
    align-items: stretch;
    justify-content: center;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel #open-room-create {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-room-name {
    min-width: 0;
    height: auto;
    max-height: 32px;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body > header {
    position: relative;
    z-index: 2;
  }

  #player-stats-dialog[open],
  #leaderboard-dialog[open] {
    position: fixed;
    inset: 0 0 0 var(--phone-size-rail);
    box-sizing: border-box;
    width: auto;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  #leaderboard-dialog[open] { background: var(--phone-ink); }
  #player-stats-dialog::backdrop,
  #leaderboard-dialog::backdrop { background: transparent; backdrop-filter: none; }

  #settings-menu .settings-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }
  #settings-menu .settings-card > header .settings-back {
    display: inline-flex;
    min-width: 72px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid var(--phone-line-strong);
    border-radius: var(--phone-radius-control);
    background: var(--phone-control);
    color: var(--phone-copy);
    font: 600 14px/1.2 var(--phone-font);
  }
  #settings-menu #close-settings.settings-back {
    width: auto;
    min-width: 72px;
    height: 44px;
    min-height: 44px;
    font-size: 14px;
  }
  #settings-menu #close-settings.settings-back::before { content: none; display: none; }
  #settings-menu .settings-back-phone { display: inline-flex; align-items: center; gap: 4px; }
  #settings-menu .settings-back-phone > span:first-child { font-size: 20px; }
  #settings-menu .settings-back-desktop { display: none; }
  #settings-menu .settings-card > header > div:nth-child(2) { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
  #settings-menu .settings-card > header .screen-eyebrow { display: none; }
  #settings-menu .settings-auto-apply { display: none; }
  #settings-menu .settings-auto-apply-header { display: block; margin: 0; color: var(--phone-muted); font: 12px/1.2 var(--phone-font); }
  #settings-menu .settings-card h2 { font: 700 20px/1.2 var(--phone-font); }
  #settings-menu .settings-header-actions { min-width: 0; }
  #settings-menu #settings-return-match { min-height: 44px; padding: 0 8px; font-size: 11px; }
  #settings-menu { background: var(--phone-ink); }
}