/* Media queries & viewport adaptations */

@media (min-width: 640px) {
  .mode-row {
    flex-direction: row;
    justify-content: center;
  }

  .mode-row .btn {
    width: auto;
    min-width: 10rem;
  }
}

/* —— Phone / narrow HUD denser —— */
@media (max-width: 820px), (orientation: portrait), (orientation: landscape) and (max-height: 520px) {
  .game {
    padding: 0;
  }

  .stage {
    inset: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hud {
    z-index: 2;
  }

  :root {
    --hud-pad: max(0.4rem, env(safe-area-inset-left, 0px), 0.35rem);
    --touch: 44px;
  }

  .hud-top {
    top: max(var(--hud-pad), env(safe-area-inset-top, 0px));
    left: max(var(--hud-pad), env(safe-area-inset-left, 0px));
    right: max(var(--hud-pad), env(safe-area-inset-right, 0px));
  }

  .hud-head {
    gap: 0.3rem;
    align-items: flex-start;
  }

  .hud-identity {
    align-self: flex-start;
  }

  .hud-stats {
    max-width: calc(100% - 3.2rem);
    padding: 0 !important;
    gap: 0.25rem !important;
    font-size: 0.78rem;
  }

  .hud-avatar-badge {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }

  .hud-avatar {
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 8px;
  }

  .hud-avatar-badge:not(.has-avatar)::after {
    inset: 4px;
    border-radius: 8px;
  }

  .hud-player-name {
    max-width: 14rem;
    font-size: clamp(1.55rem, 5.8vw, 1.95rem);
  }

  .identity-level {
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
  }

  .hud-room-online {
    gap: 0.22rem;
  }

  .hud-room-online-dot {
    width: 0.4rem;
    height: 0.4rem;
  }

  .hud-room-online-n {
    font-size: 0.72rem;
    -webkit-text-stroke-width: 1px;
  }

  .xp-bar-hud {
    height: 1.85rem !important;
    width: 10.5rem;
  }

  .hud-xp-overlay {
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
    padding: 2px 6px;
  }

  .hud-stats .stat {
    padding: 0.22rem 0.75rem 0.22rem 0.4rem;
    min-width: 4.8rem;
  }

  .hud-top-actions {
    position: absolute !important;
    top: 0;
    right: 0;
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: end;
    align-content: start;
    padding: 0 !important;
    gap: 0.18rem;
  }

  .hud-top-actions #btn-leave {
    order: 1;
  }

  .hud-top-actions #btn-game-settings {
    order: 2;
  }

  .hud-top-actions #btn-daily-game {
    order: 3;
  }

  .hud-top-actions .hud-room-online {
    order: 4;
    grid-column: 1;
    margin-top: 0.15rem;
  }

  .hud-top-actions .hud-wood-btn.neo-btn,
  .hud-top-actions .hud-wood-btn {
    min-width: 2.75rem !important;
    width: 2.75rem !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    font-size: 0.48rem !important;
    border-radius: 0 !important;
    padding: 0.16rem !important;
  }

  .hud-top-actions .hud-wood-btn-icon {
    min-width: 2.75rem !important;
    width: 2.75rem !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0.16rem !important;
  }

  .hud-top-actions .hud-wood-ico,
  .hud-top-actions .hud-wood-btn-icon .hud-wood-ico {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hud-bottom-dock {
    left: max(var(--hud-pad), env(safe-area-inset-left, 0px));
    right: max(var(--hud-pad), env(safe-area-inset-right, 0px));
    bottom: max(var(--hud-pad), env(safe-area-inset-bottom, 0px));
    gap: 0.3rem;
  }

  .hud-bottom-tools {
    /* Match lobby mid-row tiles: full-width cells, slightly shorter than square. */
    --hud-tool-h: 4.2rem;
    --hud-tool-gap: 0.4rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    overflow: visible;
  }

  /* Keyboard: float chat only; tools stay put (may sit under the keyboard). */
  .hud-bottom-tools .chat.kbd-float {
    position: fixed;
    left: max(var(--hud-pad), env(safe-area-inset-left, 0px));
    right: max(var(--hud-pad), env(safe-area-inset-right, 0px));
    bottom: max(var(--kbd-inset, 0px), env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    z-index: 40;
  }

  .hud-bottom-tools:has(.chat.kbd-float)::before {
    content: '';
    display: block;
    height: 2.75rem;
    flex-shrink: 0;
    pointer-events: none;
  }

  .hud-bottom-tools .chum-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    align-items: start;
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    gap: var(--hud-tool-gap);
  }

  .hud-bottom-tools .chum-btn-wrap {
    min-width: 0;
    width: 100%;
    align-items: stretch;
  }

  .hud-bottom-tools .chum-type-menu {
    align-self: flex-end;
  }

  .hud-bottom-tools .chat {
    width: 100%;
    max-width: none;
    flex: none;
    overflow: visible;
  }

  .hud-bottom-tools .chum-controls > .hud-wood-btn.hud-wood-btn-icon,
  .hud-bottom-tools .chum-btn.hud-wood-btn,
  .hud-bottom-tools .stone-btn.hud-wood-btn {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--hud-tool-h) !important;
    height: var(--hud-tool-h) !important;
    max-height: var(--hud-tool-h) !important;
    aspect-ratio: auto !important;
    padding: 0.2rem 0.08rem 0.16rem !important;
    border-radius: 11px !important;
    align-self: stretch !important;
  }

  .chum-controls .hud-wood-ico,
  .hud-bottom-tools .chum-btn .chum-btn-ico {
    width: 2.2rem;
    height: 2.2rem;
  }

  .hud-bottom-tools .hud-wood-caption {
    font-size: 0.58rem;
  }

  /* Chat sits above tools; flash stacks just above the input bar. */
  .chat.collapsed .chat-log.chat-log-flash {
    bottom: calc(100% + 4px);
    z-index: 20;
    width: 100%;
    max-width: 100%;
    max-height: min(22vh, 140px);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    text-align: left;
  }

  .chat-line.chat-flash {
    border-radius: 0 !important;
    font-size: clamp(0.72rem, 3.1vw, 0.85rem);
    line-height: 1.2;
    padding: 0.28rem 0.55rem;
    display: block;
    width: max-content;
    max-width: 100%;
    align-self: flex-start !important;
    margin-inline: 0 auto;
    text-align: left;
  }

  .chat-form-bar {
    min-height: 2.4rem;
  }

  .chat-form-bar input {
    font-size: 16px;
  }

  .chat.expanded .chat-log {
    max-height: min(22vh, 140px);
  }

  .hud-ping {
    font-size: 10px;
  }

  .catch-feed {
    top: 18%;
    font-size: 0.82rem;
    padding: calc(var(--plat-edge, 8px) + 0.2rem) calc(var(--plat-edge, 8px) + 0.7rem) !important;
  }

  .tour-banner {
    top: 28%;
    font-size: 12px;
  }

  .leaderboard {
    top: calc(var(--hud-pad) + 5.2rem);
    font-size: 0.7rem;
    max-width: 42%;
  }
}

@media (max-width: 480px), (max-height: 520px) {
  .hud-stats .stat:not(.stat-cur):not(.stat-xp) .label {
    display: none;
  }
}

/* Phone ≤480: larger avatar, name, XP plate + text (HUD + lobby 1:1) */
@media (max-width: 480px) {
  .hud-avatar-badge {
    width: 79px;
    height: 79px;
    border-radius: 14px;
  }

  .hud-avatar {
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 10px;
  }

  .hud-avatar-badge:not(.has-avatar)::after {
    inset: 5px;
    border-radius: 10px;
  }

  .hud-player-name {
    max-width: 16rem;
    font-size: clamp(1.85rem, 7vw, 2.25rem);
  }

  .identity-level {
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
  }

  .hud-room-online {
    gap: 0.22rem;
  }

  .hud-room-online-dot {
    width: 0.4rem;
    height: 0.4rem;
  }

  .hud-room-online-n {
    font-size: 0.72rem;
    -webkit-text-stroke-width: 1px;
  }

  .xp-bar-hud {
    height: 1.85rem !important;
    width: 10.5rem;
  }

  .hud-xp-overlay {
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
    padding: 2px 6px;
  }

  .lobby-level-badge {
    width: 79px;
    height: 79px;
    font-size: 1.28rem;
  }

  .lobby-avatar {
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }

  .lobby-level-badge:not(.has-avatar)::after {
    inset: 5px;
  }

  .lobby-identity-meta {
    max-width: 16rem;
  }

  .lobby-name-input {
    max-width: 16rem;
    font-size: clamp(1.85rem, 7vw, 2.25rem) !important;
  }

  .lobby-xp-row,
  .xp-bar-lobby {
    width: 10.5rem;
    max-width: 10.5rem;
  }

  .xp-bar-lobby {
    height: 1.85rem !important;
  }

  .lobby-xp-row .hud-xp-overlay {
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
    padding: 2px 6px;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
}

@media (max-width: 520px) {
  .logo {
    font-size: 2.4rem !important;
  }

  .mode-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .hud-gear {
    display: none !important;
  }

  .btn-kicker {
    display: none;
  }

  .lobby-shell {
    padding:
      max(0.5rem, var(--safe-t))
      max(0.5rem, var(--safe-r))
      max(0.5rem, var(--safe-b))
      max(0.5rem, var(--safe-l));
  }

  .lobby-tile {
    font-size: 0.55rem !important;
    min-height: 0 !important;
  }
}

/* —— Phone lobby: compact header —— */
@media (max-width: 691px) {
  .lobby-top {
    align-items: flex-start;
    gap: 0.45rem;
  }

  /* Stack width = identity plate; currency stretches to that width (PC-like) */
  .lobby-identity-stack {
    width: fit-content;
    max-width: min(100%, calc(100vw - 5.5rem));
    box-sizing: border-box;
    align-items: stretch;
  }

  .lobby-identity {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    --plat-edge: 8px;
    --plat-corner: 16px;
    padding: 8px !important;
  }

  /* 1:1 with in-game HUD denser (≤820) — avatar / name / XP */
  .lobby-identity-head {
    width: fit-content;
    max-width: 100%;
    gap: 0.45rem;
    align-items: center;
  }

  .lobby-identity-meta {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 14rem;
    gap: 0.2rem;
  }

  .lobby-name-row {
    min-width: 0;
    max-width: 100%;
  }

  .lobby-level-badge {
    width: 64px;
    height: 64px;
    font-size: 1.2rem;
  }

  .lobby-avatar {
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }

  .lobby-level-badge:not(.has-avatar)::after {
    inset: 4px;
  }

  .lobby-name-input {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: 14rem;
    font-size: clamp(1.55rem, 5.8vw, 1.95rem) !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lobby-currency {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    box-sizing: border-box;
  }

  .lobby-currency .lobby-cur {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
  }

  .lobby-currency .lobby-cur strong {
    overflow: visible;
    text-overflow: clip;
    flex: 1 1 auto;
    min-width: 0;
  }

  .lobby-xp-row {
    width: 10.5rem;
    max-width: 10.5rem;
  }

  .xp-bar-lobby {
    flex: none;
    width: 10.5rem;
    max-width: 10.5rem;
    height: 1.85rem !important;
  }

  .lobby-xp-row .hud-xp-overlay {
    justify-content: center;
    padding: 2px 6px;
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
  }

  /* Mobile: 1-col stack — close (X) on top, settings below */
  .lobby-top-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: end;
    align-content: start;
    gap: 0.4rem;
  }

  .lobby-top-actions #btn-close-parent {
    order: 1;
  }

  .lobby-top-actions #btn-menu-settings {
    order: 2;
  }

  .lobby-top-actions #btn-mail-menu {
    order: 3;
  }

  .lobby-icon-btn,
  .lobby-mail-btn {
    width: 3.6rem !important;
    height: 3.6rem !important;
    min-width: 3.6rem !important;
    min-height: 3.6rem !important;
    padding: 0.18rem !important;
    border-radius: 0 !important;
  }

  .lobby-mail-btn {
    padding: 0.18rem !important;
  }

  .lobby-top-actions .lobby-ico,
  .lobby-mail-btn .lobby-ico {
    width: 100%;
    height: 100%;
  }

  .lobby-top-actions .lobby-ico img,
  .lobby-mail-btn .lobby-ico img,
  .lobby-top-actions .lobby-ico svg,
  .lobby-mail-btn .lobby-ico svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  .lobby-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    align-self: stretch;
    gap: 0.5rem;
  }

  .lobby-bottom-row .lobby-cta,
  .lobby-cta-play,
  .lobby-cta-tourney {
    min-height: 4.85rem !important;
    width: 100%;
    padding-inline: 0.85rem !important;
  }

  .lobby-mid-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 0.4rem;
    justify-items: stretch;
  }

  .lobby-tile {
    width: 100% !important;
    max-width: none !important;
    min-height: 4.75rem !important;
    height: 4.75rem !important;
    aspect-ratio: 1 !important;
    justify-content: center !important;
  }

  .lobby .lobby-tile.neo-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 4.75rem !important;
    height: 4.75rem !important;
    aspect-ratio: 1 !important;
  }

  .lobby-tile > img {
    width: 58% !important;
    max-width: 2.55rem !important;
    max-height: 62% !important;
  }

  #btn-bazaar-menu > img,
  #ico-bazaar,
  #btn-bazaar-menu.btn-locked > img {
    width: 62% !important;
    max-width: 2.85rem !important;
    max-height: 58% !important;
    transform: scale(1.06);
    transform-origin: center center;
  }

  .lobby .lobby-daily-btn-rail.lobby-tile.neo-btn,
  .lobby .lobby-daily-btn-rail {
    display: none !important;
  }

  .lobby-daily-btn-mobile {
    display: flex !important;
  }

}

/* —— Tablet / PC: real columns (no display:contents) —— */
@media (min-width: 692px) {
  :root {
    --lobby-rail: 380px;
    --lobby-gap: 1rem;
  }

  .lobby-shell {
    max-width: none;
    width: 100%;
    gap: 0.75rem;
    padding:
      max(0.75rem, var(--safe-t))
      max(1rem, var(--safe-r))
      max(0.75rem, var(--safe-b))
      max(1rem, var(--safe-l));
  }

  .lobby-body {
    display: grid;
    grid-template-columns: var(--lobby-rail) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "rail hero";
    gap: var(--lobby-gap);
    min-height: 0;
    flex: 1;
  }

  .lobby-top-main {
    width: var(--lobby-rail);
    max-width: var(--lobby-rail);
    box-sizing: border-box;
  }

  .lobby-identity-stack {
    margin-bottom: 1.1rem;
    width: fit-content;
    max-width: 100%;
  }

  .lobby-identity {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    transform: none;
    margin-bottom: 0;
    --plat-edge: 8px;
    --plat-corner: 16px;
    padding: 8px !important;
    min-height: 0;
    height: auto;
    gap: 0 !important;
  }

  .lobby-identity-inner {
    gap: 0;
  }

  /* Match HUD ≤820 denser sizes */
  .lobby-identity-head {
    gap: 0.45rem;
    align-items: center;
  }

  .lobby-level-badge {
    width: 64px;
    height: 64px;
    font-size: 1.22rem;
    border-radius: 0;
  }

  .lobby-avatar {
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 0;
  }

  .lobby-level-badge:not(.has-avatar)::after {
    inset: 4px;
    border-radius: 0;
  }

  .lobby-name-input {
    font-size: clamp(1.55rem, 5.8vw, 1.95rem) !important;
    max-width: 14rem;
  }

  .lobby-xp-row {
    width: 10.5rem;
    max-width: 10.5rem;
  }

  .xp-bar-lobby {
    flex: none;
    width: 10.5rem;
    max-width: 10.5rem;
    height: 1.85rem !important;
  }

  .lobby-xp-row .hud-xp-overlay {
    font-size: 0.8rem;
    -webkit-text-stroke-width: 1.25px;
    padding: 2px 6px;
  }

  .lobby-currency {
    gap: 0.2rem;
  }

  .lobby-cur {
    padding: 0.28rem 0.5rem;
    font-size: 0.82rem;
    min-height: 1.85rem;
    border-radius: 0.75rem;
  }

  .lobby-cur .cur-ico {
    width: 1.15rem;
    height: 1.15rem;
  }

  .lobby-cur .cur-ico img,
  .lobby-cur .cur-ico .ico,
  .lobby-cur .cur-ico .ico-img,
  .lobby-cur .cur-ico .ico img,
  .lobby-cur .cur-ico .ico.ico-art,
  .lobby-cur .cur-ico .ico.ico-art img {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  .lobby-cur strong {
    font-size: 0.88rem;
  }

  .lobby-rail,
  .lobby-hero {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 0.65rem;
  }

  .lobby-rail {
    grid-area: rail;
    overflow: visible;
  }

  .lobby-hero {
    grid-area: hero;
  }

  .lobby-daily-btn-rail {
    display: none !important;
  }

  .lobby-daily-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0;
  }

  .lobby-daily-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .lobby-daily-title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .lobby-daily-heading h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  }

  .lobby-daily .daily-countdown {
    font-size: 0.7rem;
    opacity: 0.8;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }

  .lobby-daily-reroll {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 0.55rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(230, 195, 92, 0.4);
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: none !important;
    color: #f0d56a !important;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
  }

  .lobby-daily-reroll:active {
    transform: scale(0.96);
  }

  .lobby-daily-reroll .daily-reroll-ico,
  .lobby-daily-reroll .daily-reroll-ico svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .lobby-daily-list,
  .lobby-daily .daily-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    gap: 0.28rem;
    padding: 0;
    width: 100%;
  }

  .lobby-daily .daily-row {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.38rem 0.5rem 0.38rem 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    background: rgba(4, 18, 16, 0.9);
    box-shadow: none;
    border-left: 3px solid rgba(143, 211, 192, 0.7);
  }

  .lobby-daily .daily-row.diff-easy {
    border-left-color: #6dcfb0;
  }

  .lobby-daily .daily-row.diff-med {
    border-left-color: #e6c35c;
  }

  .lobby-daily .daily-row.diff-hard {
    border-left-color: #f4a261;
  }

  .lobby-daily .daily-row.ready {
    background: rgba(28, 24, 10, 0.92);
    box-shadow: none;
  }

  .lobby-daily .daily-row.claimed {
    opacity: 0.45;
  }

  .lobby-daily .chip-diff {
    display: none;
  }

  .lobby-daily .daily-title {
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }

  .lobby-daily .daily-row-bottom {
    gap: 0.4rem;
  }

  .lobby-daily .daily-bar {
    height: 0.28rem;
    background: rgba(0, 0, 0, 0.35);
  }

  .lobby-daily .daily-progress {
    font-size: 0.68rem;
  }

  .lobby-daily .daily-row-action {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  .lobby-daily .daily-reward {
    font-size: 0.85rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }

  .lobby-daily .daily-claim {
    min-height: 28px !important;
    padding: 0.2rem 0.55rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    width: auto !important;
  }

  .lobby-daily .daily-claimed {
    font-size: 0.68rem;
  }

  .lobby-mail-label {
    display: inline;
  }

  .lobby-currency {
    flex: 0 0 auto;
    width: 100%;
    gap: 0.2rem;
  }

  .lobby-tile {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center;
    aspect-ratio: 1 !important;
    width: 5.75rem !important;
    max-width: 5.75rem !important;
    min-height: 5.75rem !important;
    height: 5.75rem !important;
    padding: 0.3rem 0.12rem 0.25rem !important;
    font-size: clamp(0.52rem, 1.05vh, 0.64rem) !important;
    gap: 0.2rem !important;
    white-space: normal !important;
  }

  .lobby .lobby-tile.neo-btn {
    aspect-ratio: 1 !important;
    width: 5.75rem !important;
    max-width: 5.75rem !important;
    min-height: 5.75rem !important;
    height: 5.75rem !important;
    border-radius: 12px !important;
    align-self: end;
  }

  .lobby-tile > img {
    width: 58% !important;
    max-width: 2.9rem !important;
    max-height: 60% !important;
    height: auto;
    aspect-ratio: 1;
    margin-top: 0;
    flex: 0 0 auto;
    min-height: 0;
    object-fit: contain;
  }

  #btn-bazaar-menu > img,
  #ico-bazaar,
  #btn-bazaar-menu.btn-locked > img {
    width: 62% !important;
    max-width: 3rem !important;
    max-height: 58% !important;
    transform: scale(1.06);
    transform-origin: center center;
  }

  .lobby-mid-row {
    grid-area: unset;
    grid-template-columns: repeat(3, 5.75rem);
    gap: 0.7rem;
    justify-content: start;
    justify-items: center;
    align-items: end;
    margin-top: auto;
    flex-shrink: 0;
    width: max-content;
    max-width: none;
  }

  .lobby-stage-gap {
    grid-area: unset;
    flex: 1 1 auto;
    min-height: 0;
  }

  .lobby-bottom-row {
    grid-area: unset;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: min(100%, 28rem);
    max-width: 28rem;
    margin-left: auto;
    margin-right: 0;
    gap: 0.65rem;
    flex-shrink: 0;
    align-self: flex-end;
  }

  .lobby-bottom-row .lobby-cta {
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(5.5rem, 11vh, 6.75rem) !important;
    font-size: clamp(0.92rem, 1.65vh, 1.12rem) !important;
    border-radius: 16px !important;
    gap: 0.4rem;
    padding-inline: 0.9rem !important;
  }

  .lobby-cta-play {
    min-height: clamp(5.5rem, 11vh, 6.75rem) !important;
    font-size: clamp(1rem, 1.85vh, 1.22rem) !important;
    border-radius: 16px !important;
  }

  .lobby-cta-tourney {
    min-height: clamp(5.5rem, 11vh, 6.75rem) !important;
    font-size: clamp(0.88rem, 1.55vh, 1.05rem) !important;
    color: #fff !important;
    opacity: 0.95;
    border-radius: 16px !important;
    letter-spacing: 0.015em;
  }

  .lobby-cta-tourney .lobby-cta-ico {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    margin-right: 0;
  }

  .lobby .lobby-cta-ico {
    margin-right: 0;
  }

  .lobby-top-actions .neo-btn,
  .lobby-icon-btn,
  .lobby-mail-btn {
    width: 3.4rem !important;
    height: 3.4rem !important;
    min-width: 3.4rem !important;
    min-height: 3.4rem !important;
  }

  .lobby-top-actions .lobby-ico {
    width: 100%;
    height: 100%;
  }

}

/* 692–800: intermediate — daily under button/modal, CTAs stacked (no overlap with снасти). */
@media (min-width: 692px) and (max-width: 800px) {
  .lobby-daily {
    display: none !important;
  }

  .lobby-daily-btn-mobile {
    display: flex !important;
  }

  .lobby-bottom-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, 12.75rem) !important;
    max-width: 12.75rem !important;
    gap: 0.5rem;
  }

  .lobby-bottom-row .lobby-cta,
  .lobby-cta-play,
  .lobby-cta-tourney {
    width: 100%;
    flex: none;
    min-height: 3.85rem !important;
    font-size: 1rem !important;
  }
}

/* ≥801: inline quest plaque under lobby-top-main (no modal/rail button). CTA = 2 cols. */
@media (min-width: 801px) {
  .lobby-daily-btn-mobile {
    display: none !important;
  }

  .lobby-daily-btn-rail {
    display: none !important;
  }

  .lobby-daily {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.35rem;
    pointer-events: auto;
  }

  /* Same plaque as #daily-modal — only fit the lobby column width */
  .lobby-daily .lobby-quests-inline.quests-float {
    width: 100%;
    max-width: min(32rem, 100%);
  }

  /* Lobby: bare quest cards — hide folder tab + green panel chrome */
  .lobby-daily .quests-folder {
    display: none;
  }

  .lobby-daily .quests-panel {
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .lobby-daily .quests-panel::before {
    display: none;
  }

  .lobby-daily .quests-list {
    max-height: none;
    overflow: visible;
  }

  .lobby-mid-row {
    grid-template-columns: repeat(3, 5.75rem);
  }

  .lobby-bottom-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: min(100%, 28rem);
    max-width: 28rem;
    gap: 0.65rem;
  }

  .lobby-bottom-row .lobby-cta,
  .lobby-cta-play,
  .lobby-cta-tourney {
    width: auto;
    flex: none;
  }
}

@media (min-width: 1200px) {
  :root {
    --lobby-rail: 420px;
    --lobby-gap: 1.25rem;
  }

  .lobby-bottom-row {
    width: min(100%, 30rem);
    max-width: 30rem;
  }

  .lobby-bottom-row .lobby-cta,
  .lobby-cta-play,
  .lobby-cta-tourney {
    min-height: clamp(6rem, 12vh, 7.25rem) !important;
    padding-inline: 1rem !important;
  }

  .lobby-cta-play {
    font-size: clamp(1.05rem, 1.9vh, 1.28rem) !important;
  }

  .lobby-cta-tourney {
    font-size: clamp(0.92rem, 1.65vh, 1.08rem) !important;
  }

  .lobby-cta-tourney .lobby-cta-ico {
    width: 2.1rem;
    height: 2.1rem;
  }

  .lobby-tile {
    aspect-ratio: 1 !important;
    width: 6.25rem !important;
    max-width: 6.25rem !important;
    min-height: 6.25rem !important;
    height: 6.25rem !important;
    font-size: clamp(0.58rem, 1.15vh, 0.72rem) !important;
  }

  .lobby .lobby-tile.neo-btn {
    aspect-ratio: 1 !important;
    width: 6.25rem !important;
    max-width: 6.25rem !important;
    min-height: 6.25rem !important;
    height: 6.25rem !important;
  }

  .lobby-mid-row {
    grid-template-columns: repeat(3, 6.25rem);
    gap: 0.8rem;
  }

  .lobby-tile > img {
    width: 58% !important;
    max-width: 3.1rem !important;
    max-height: 60% !important;
    height: auto;
    aspect-ratio: 1;
  }

  #btn-bazaar-menu > img,
  #ico-bazaar,
  #btn-bazaar-menu.btn-locked > img {
    width: 62% !important;
    max-width: 3.15rem !important;
    max-height: 58% !important;
    transform: scale(1.06);
    transform-origin: center center;
  }

  .lobby-identity-stack {
    margin-bottom: 1.25rem;
  }

  .lobby-identity {
    transform: none;
    width: fit-content;
    margin-bottom: 0;
    --plat-edge: 8px;
    --plat-corner: 18px;
    padding: 8px !important;
    min-height: 0;
    height: auto;
  }

  /* Match base HUD identity */
  .lobby-level-badge {
    width: 75px;
    height: 75px;
    font-size: 1.38rem;
  }

  .lobby-avatar {
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 0;
  }

  .lobby-level-badge:not(.has-avatar)::after {
    inset: 6px;
    border-radius: 0;
  }

  .lobby-name-input {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem) !important;
    max-width: 20rem;
  }

  .lobby-xp-row {
    width: 10.5rem;
    max-width: 10.5rem;
  }

  .xp-bar-lobby {
    flex: none;
    width: 10.5rem;
    max-width: 10.5rem;
    height: 1.85rem !important;
  }

  .lobby-cur {
    padding: 0.32rem 0.55rem;
    font-size: 0.86rem;
    min-height: 2rem;
    border-radius: 0.75rem;
  }

  .lobby-cur .cur-ico {
    width: 1.25rem;
    height: 1.25rem;
  }

  .lobby-cur .cur-ico img,
  .lobby-cur .cur-ico .ico,
  .lobby-cur .cur-ico .ico-img,
  .lobby-cur .cur-ico .ico img,
  .lobby-cur .cur-ico .ico.ico-art,
  .lobby-cur .cur-ico .ico.ico-art img {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .lobby-cur strong {
    font-size: 0.92rem;
  }
}

@media (max-width: 700px) {
  .hud-gear {
    max-width: 140px;
  }

  .hud-gear-slot {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 800px) {
  .tackle-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .modal {
    padding: max(0.4rem, env(safe-area-inset-top, 0px)) max(0.4rem, env(safe-area-inset-right, 0px)) max(0.4rem, env(safe-area-inset-bottom, 0px)) max(0.4rem, env(safe-area-inset-left, 0px));
    align-items: stretch;
    justify-items: stretch;
    overflow: hidden;
  }

  .modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 100% !important;
  }

  /* Settings: keep content-height card centered (don't stretch full screen). */
  #settings-modal {
    align-items: center !important;
    justify-items: center !important;
    overflow: auto;
  }

  #settings-modal .settings-card.modal-card,
  #settings-modal .modal-card.settings-card {
    width: min(400px, 92vw) !important;
    max-width: min(400px, 92vw) !important;
    height: fit-content !important;
    max-height: min(90dvh, 100%) !important;
    align-self: center;
    justify-self: center;
  }

  #daily-modal {
    align-items: center !important;
    justify-items: center !important;
    overflow: auto;
  }

  .quest-badge-ring { width: 2.7rem; height: 2.7rem; }
  .quest-badge-ring img { width: 2.25rem; height: 2.25rem; }
  .quest-card-head { padding-right: 3.6rem; }
  .quest-card-head h3 { font-size: 0.82rem; }
  .quests-folder-title { font-size: 0.8rem; max-width: 10.5rem; }

  /* Premium buy: compact card, not full-bleed. */
  #premium-modal {
    align-items: center !important;
    justify-items: center !important;
    overflow: auto;
  }

  #premium-modal .premium-card.modal-card,
  #premium-modal .modal-card.premium-card {
    width: min(380px, 92vw) !important;
    max-width: min(380px, 92vw) !important;
    height: fit-content !important;
    max-height: min(90dvh, 100%) !important;
    align-self: center;
    justify-self: center;
  }

  #premium-modal .premium-period {
    min-height: 3.35rem;
    padding: 0.45rem 0.2rem;
  }

  #premium-modal .premium-period-price {
    font-size: 0.88rem;
  }

  #premium-modal .premium-head .inv-chrome-title {
    font-size: clamp(1.55rem, 5.8vw, 1.95rem);
  }

  /* Mail: content height (empty = short), max when many returns. */
  #mail-modal {
    align-items: center !important;
    justify-items: center !important;
    overflow: auto;
  }

  #mail-modal .modal-card {
    width: min(420px, 92vw) !important;
    max-width: min(420px, 92vw) !important;
    height: fit-content !important;
    max-height: min(90dvh, 100%) !important;
    align-self: center;
    justify-self: center;
  }

  #inventory-modal, #bestiary-modal, #shop-modal {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    padding: max(0.4rem, env(safe-area-inset-top, 0px)) max(0.4rem, env(safe-area-inset-right, 0px)) max(0.4rem, env(safe-area-inset-bottom, 0px)) max(0.4rem, env(safe-area-inset-left, 0px));
    overflow: hidden;
  }

  /* Inset chrome/grid only — detail sheet keeps its own max-height. */
  #bestiary-modal {
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
  }

  #inventory-modal .inv-shell, #bestiary-modal .inv-shell, #shop-modal .tackle-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin-top: 0;
    gap: 0.35rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
  }

  /* Wood frame corners stick outside the panel — don't clip shop / bestiary chrome. */
  #shop-modal .tackle-shell {
    overflow: visible !important;
    padding:
      0.15rem
      max(0.35rem, env(safe-area-inset-right, 0px))
      0.15rem
      max(0.35rem, env(safe-area-inset-left, 0px));
  }

  #shop-modal,
  #bestiary-modal {
    overflow: visible !important;
  }

  #bestiary-modal .inv-shell,
  #bestiary-modal .inv-main,
  #bestiary-modal .inv-panel {
    overflow: visible !important;
  }

  #inventory-modal .inv-desktop-only, #bestiary-modal .inv-desktop-only {
    display: none !important;
  }

  #inventory-modal .inv-mobile-only, #bestiary-modal .inv-mobile-only {
    display: flex !important;
  }

  #inventory-modal .inv-chrome, #bestiary-modal .inv-chrome, #shop-modal .inv-chrome {
    gap: 0.35rem;
    padding: 0 0.1rem;
    flex-shrink: 0;
    justify-content: space-between;
  }

  #shop-modal .tackle-chrome {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title close"
      "currencies currencies";
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.45rem;
    padding: 0 0.1rem;
    flex-shrink: 0;
  }

  #inventory-modal .inv-chrome-title, #bestiary-modal .inv-chrome-title {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }

  #shop-modal .inv-chrome-title,
  #shop-modal .tackle-chrome .inv-chrome-title {
    grid-area: title;
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    flex-shrink: 0;
    justify-self: start;
  }

  #shop-modal .tackle-chrome .shop-currencies {
    grid-area: currencies;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    justify-content: stretch;
    gap: 0.4rem;
    overflow: visible;
  }

  #shop-modal .tackle-chrome .inv-close {
    grid-area: close;
    margin: 0;
    justify-self: end;
  }

  #shop-modal .cur-pill {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 2.25rem;
    box-sizing: border-box;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.82rem;
    padding: 0.25rem 0.75rem 0.25rem 0.55rem;
    overflow: hidden;
  }

  #shop-modal .cur-pill-ico {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
  }

  #shop-modal .cur-pill strong {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #inventory-modal .inv-m-bar, #bestiary-modal .inv-m-bar {
    display: flex !important;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
    flex-shrink: 0;
  }

  #inventory-modal .inv-m-tab, #bestiary-modal .inv-m-tab {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    background: url('../assets/bg-tab.webp') center / 100% 100% no-repeat;
    border-radius: 12px;
    padding: 0 0.2rem;
  }

  #inventory-modal .inv-m-tab select, #bestiary-modal .inv-m-tab select,
  #inventory-modal .inv-m-tab .wood-select-btn, #bestiary-modal .inv-m-tab .wood-select-btn {
    width: 100%;
    height: 2.45rem;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0 1.6rem 0 0.7rem !important;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath fill='%23fff' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 10px 7px !important;
  }

  #inventory-modal .inv-m-sort, #bestiary-modal .inv-m-sort {
    flex: 0 0 2.55rem;
    width: 2.55rem;
    height: 2.55rem;
    border: none;
    border-radius: 12px;
    background: url('../assets/bg-tab.webp') center / 100% 100% no-repeat;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
  }

  #inventory-modal .inv-m-sort.active, #bestiary-modal .inv-m-sort.active {
    filter: none;
    box-shadow: none;
  }

  #inventory-modal .inv-m-sort.active svg, #bestiary-modal .inv-m-sort.active svg {
    transform: scaleY(-1);
  }

  #inventory-modal .inv-m-actions, #bestiary-modal .inv-m-actions {
    flex: 0 0 auto;
    min-width: 6.2rem;
    height: 2.55rem;
    border: none;
    border-radius: 12px;
    background: url('../assets/bg-price.webp') center / 100% 100% no-repeat;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    padding: 0 0.85rem;
  }

  #inventory-modal .inv-m-search, #bestiary-modal .inv-m-search {
    display: block !important;
    background: url('../assets/bg-search.webp') center / 100% 100% no-repeat;
    border-radius: 12px;
    padding: 0.1rem 0.35rem;
    min-height: 2.4rem;
    flex-shrink: 0;
  }

  #inventory-modal .inv-m-search input, #bestiary-modal .inv-m-search input {
    width: 100%;
    height: 2.2rem;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f4efe6 !important;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0 2.2rem 0 0.75rem !important;
  }

  #inventory-modal .inv-m-search input::placeholder, #bestiary-modal .inv-m-search input::placeholder {
    color: rgba(244, 239, 230, 0.55);
  }

  #inventory-modal .inv-m-tab, #bestiary-modal .inv-m-tab, #inventory-modal .inv-m-tab select, #bestiary-modal .inv-m-tab select, #inventory-modal .inv-m-tab .wood-select-btn, #bestiary-modal .inv-m-tab .wood-select-btn, #inventory-modal .inv-m-search, #bestiary-modal .inv-m-search, #inventory-modal .inv-m-search input, #bestiary-modal .inv-m-search input {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  #inventory-modal .inv-m-tab select:focus, #bestiary-modal .inv-m-tab select:focus, #inventory-modal .inv-m-tab select:focus-visible, #bestiary-modal .inv-m-tab select:focus-visible, #inventory-modal .inv-m-tab .wood-select-btn:focus, #bestiary-modal .inv-m-tab .wood-select-btn:focus, #inventory-modal .inv-m-tab .wood-select-btn:focus-visible, #bestiary-modal .inv-m-tab .wood-select-btn:focus-visible, #inventory-modal .inv-m-search input:focus, #bestiary-modal .inv-m-search input:focus, #inventory-modal .inv-m-search input:focus-visible, #bestiary-modal .inv-m-search input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  #inventory-modal .inv-actions-pop, #bestiary-modal .inv-actions-pop {
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    bottom: max(0.8rem, env(safe-area-inset-bottom, 0px));
  }

  #inventory-modal .inv-main, #bestiary-modal .inv-main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    overflow: hidden;
  }

  #bestiary-modal .inv-main {
    overflow: visible !important;
  }

  #inventory-modal .inv-panel, #bestiary-modal .inv-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0 !important;
    padding: calc(var(--plat-edge, 0px) + 0.1rem) !important;
    overflow: hidden !important;
  }

  /* Bestiary wood corners stick out — clip only the scroll body, not the panel. */
  #bestiary-modal .inv-panel {
    overflow: visible !important;
  }

  #bestiary-modal .inv-body {
    overflow: hidden !important;
    border-radius: 6px;
  }

  #inventory-modal .inv-body, #bestiary-modal .inv-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0;
    height: 100% !important;
    overflow: hidden;
    gap: 0 !important;
    flex: 1 1 auto;
  }

  #inventory-modal .inv-body .inv-grid, #bestiary-modal .inv-body .inv-grid, #inventory-modal .inv-grid, #bestiary-modal .inv-grid {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    width: 100%;
    max-width: none !important;
    max-height: none !important;
    overflow: auto !important;
    align-content: start;
    padding: 0.35rem;
    padding-bottom: 0.5rem;
    gap: 0.4rem !important;
    overscroll-behavior: contain;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bestiary: slightly tighter cells so 4 cols + wood frame fit phones. */
  #bestiary-modal .inv-body .inv-grid,
  #bestiary-modal .inv-grid {
    padding: 0.22rem;
    padding-bottom: 0.4rem;
    gap: 0.28rem !important;
  }

  /* Overlay detail: square rows + scroll via spacer (bestiary + inventory). */
  #bestiary-modal .inv-body .inv-grid,
  #inventory-modal .inv-body .inv-grid {
    grid-auto-rows: max-content !important;
    align-content: start !important;
  }

  #inventory-modal .inv-slot, #bestiary-modal .inv-slot {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    justify-self: stretch;
    align-self: start;
    overflow: hidden;
  }

  #bestiary-modal .inv-grid > .inv-slot,
  #inventory-modal .inv-grid > .inv-slot {
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Bait prefs: 2-col equal tiles, 4 slots reserved (grows if more). */
  #bestiary-modal .bestiary-bait-tile.inv-slot,
  #bestiary-modal .bestiary-bait-tile,
  #bestiary-modal .bestiary-bait-slot {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    justify-self: stretch !important;
    aspect-ratio: 1 / 1 !important;
  }

  #bestiary-modal .bestiary-bait-tile .inv-slot-timer {
    min-height: 28%;
    padding: 0.18rem 0.1rem 0.22rem;
    font-size: clamp(0.48rem, 2.6vw, 0.62rem);
  }

  #bestiary-modal .bestiary-bait-cols {
    gap: 0.28rem;
  }

  #bestiary-modal .bestiary-bait-list {
    gap: 0.22rem;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row;
  }

  #bestiary-modal .bestiary-use-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.18rem;
  }

  #inventory-modal .inv-slot-fish .inv-slot-grid,
  #inventory-modal .inv-slot-fish .inv-slot-fish-art,
  #bestiary-modal .inv-slot-fish .inv-slot-grid,
  #bestiary-modal .inv-slot-fish .inv-slot-fish-art {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
  }

  #inventory-modal .inv-slot-ico, #bestiary-modal .inv-slot-ico {
    width: 86%;
    height: 86%;
  }

  .inv-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0;
    overflow: hidden;
    gap: 0.3rem !important;
  }

  .inv-detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    flex: none !important;
    /* fit-content + flex:1 body collapses to chrome-only strip (Pro Max / iOS). */
    height: auto !important;
    width: 100%;
    max-height: min(48dvh, 380px);
    min-height: 0;
    overflow: visible !important;
    gap: 0;
    padding: calc(var(--plat-edge, 14px) + 0.55rem) !important;
    overscroll-behavior: contain;
    border-radius: 8px !important;
    background-color: #2a1a0e !important;
    background-image: url('../assets/grid-platform.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    box-shadow:
      0 -18px 40px rgba(0, 0, 0, 0.72),
      0 -4px 14px rgba(0, 0, 0, 0.45),
      0 10px 28px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #inventory-modal .inv-main > .inv-detail, #bestiary-modal .inv-main > .inv-detail, #inventory-modal .inv-detail.inv-panel-platform, #bestiary-modal .inv-detail.inv-panel-platform {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    background-color: #2a1a0e !important;
    background-image: url('../assets/grid-platform.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    box-shadow:
      0 -18px 40px rgba(0, 0, 0, 0.72),
      0 -4px 14px rgba(0, 0, 0, 0.45),
      0 10px 28px rgba(0, 0, 0, 0.35) !important;
  }

  .inv-detail.is-empty,
  .inv-detail:has(.detail-empty) {
    display: none !important;
  }

  .inv-detail-body {
    /* Same as bestiary/shop: flex:1 + min-height:0 inside height:auto → 0px body. */
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: auto;
    max-height: min(40dvh, 320px);
    gap: 0.45rem;
    min-width: 0;
    min-height: auto;
  }

  /* Bestiary sheet grows with accordion — no inner scroll. */
  #bestiary-modal .inv-detail,
  #bestiary-modal .inv-main > .inv-detail,
  #bestiary-modal .inv-detail.inv-panel-platform {
    max-height: none !important;
    height: auto !important;
  }

  #bestiary-modal .inv-detail-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  .inv-detail .detail-name {
    font-size: 2rem;
    white-space: normal;
    line-height: 1.12;
  }

  .inv-detail .detail-ico .inv-slot-timer {
    font-size: 0.55rem;
    padding: 0.15rem 0.2rem;
  }

  .inv-detail .detail-actions {
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  /* Shop chum/gear side panel: stack actions full-width. */
  #shop-modal .tackle-detail .detail-actions {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #shop-modal .tackle-detail .detail-actions .btn {
    flex: 0 0 auto;
    width: 100% !important;
    white-space: nowrap;
  }

  .inv-detail .detail-actions .btn,
  .inv-detail .detail-tab-btn {
    flex: 0 0 auto;
    width: 100% !important;
    min-height: 48px;
    white-space: nowrap;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800;
    background: url('../assets/bg-tab.webp') center / 100% 100% no-repeat !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .inv-detail .detail-actions .btn.detail-tab-conserve,
  .inv-detail .detail-tab-btn.detail-tab-conserve,
  .inv-detail .detail-actions [data-conserve] {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    filter: none !important;
    overflow: hidden;
  }

  .inv-detail .detail-actions .btn.detail-tab-conserve::before,
  .inv-detail .detail-tab-btn.detail-tab-conserve::before,
  .inv-detail .detail-actions [data-conserve]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: url('../assets/bg-tab.webp') center / 100% 100% no-repeat;
    filter: hue-rotate(85deg) saturate(1.85) brightness(0.92);
    pointer-events: none;
  }

  .inv-detail .detail-actions .btn.detail-tab-sell,
  .inv-detail .detail-tab-btn.detail-tab-sell,
  .inv-detail .detail-actions [data-sell] {
    background: url('../assets/bg-price.webp') center / 100% 100% no-repeat !important;
    filter: none;
  }

  .inv-detail .detail-actions .btn[data-buy-chum],
  #shop-modal .tackle-detail .detail-actions .btn[data-buy-chum] {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    filter: none !important;
    overflow: hidden;
  }

  .inv-detail .detail-actions .btn[data-buy-chum]::before,
  #shop-modal .tackle-detail .detail-actions .btn[data-buy-chum]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: url('../assets/bg-tab.webp') center / 100% 100% no-repeat;
    filter: hue-rotate(85deg) saturate(1.85) brightness(0.92);
    pointer-events: none;
  }

  .inv-detail .detail-visual {
    width: 5.25rem;
    max-width: 34%;
  }

  .inv-detail .detail-ico {
    width: 100%;
    height: auto;
  }

  #shop-modal .tackle-shell {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: visible !important;
  }

  #shop-modal .tackle-body {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  #shop-modal .tackle-rail {
    width: fit-content;
    max-height: 100%;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
  }

  #shop-modal .tackle-rail .tackle-slots {
    gap: 0.4rem !important;
    padding: 0.4rem 0.35rem;
    overflow: visible !important;
  }

  #shop-modal .tack-slot {
    width: 3.85rem;
    min-width: 3.85rem;
  }

  #shop-modal .tack-slot-ico {
    width: 52%;
    max-width: 2.05rem;
  }

  #shop-modal .tack-slot-label {
    font-size: 0.58rem !important;
  }

  /* Tablet 481–900: cap shell width, 1-col rail, larger gear tiles. */
  @media (min-width: 481px) {
    #shop-modal {
      align-items: center;
    }

    #shop-modal .tackle-shell {
      width: 100% !important;
      max-width: 500px !important;
      margin-inline: auto;
      flex: 1 1 auto;
    }

    #shop-modal .tackle-rail .tackle-slots {
      display: grid !important;
      flex-direction: unset !important;
      grid-template-columns: 1fr !important;
      gap: 0.45rem !important;
      width: fit-content;
    }

    #shop-modal .tack-slot {
      width: 4.5rem;
      min-width: 4.5rem;
    }

    #shop-modal .tack-slot-ico {
      width: 54%;
      max-width: 2.25rem;
    }

    #shop-modal .tack-slot-label {
      font-size: 0.62rem !important;
    }
  }

  #shop-modal .tackle-panel-title {
    font-size: clamp(2.45rem, 6.5vw, 2.85rem);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #shop-modal .tackle-panel {
    /* Fill the 1fr column — never shrink-wrap to a sparse grid. */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto;
    align-self: stretch;
    justify-self: stretch;
    overflow: visible !important;
    padding: var(--tack-panel-pad, calc(var(--plat-edge, 14px) + 0.2rem)) !important;
  }

  /* Tablet: detail mounted inside .tackle-panel → absolute to that panel. */
  @media (min-width: 481px) {
    #shop-modal .tackle-panel {
      position: relative !important;
    }

    #shop-modal .tackle-detail.inv-detail,
    #shop-modal .tackle-detail.inv-panel-platform {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      /* Above parent .inv-plat-frame (z-index: 8) borders/corners */
      z-index: 12 !important;
    }
  }

  #shop-modal .tackle-panel-head {
    width: 100%;
    min-width: 0;
  }

  #shop-modal .tackle-panel-body {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    overflow: auto !important;
    scrollbar-width: none;
    /* Reserve ~3 branches × 3-col tiles so slot switches don't collapse the panel. */
    min-height: min(48dvh, 22rem);
  }

  #shop-modal .tackle-panel-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  #shop-modal .tackle-grid,
  #shop-modal .shop-sims.tackle-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    align-items: stretch !important;
    min-height: min(42dvh, 18rem);
    gap: 0.28rem !important;
    padding: 0.85rem var(--tack-sims-pad, 0.7rem) var(--tack-sims-pad, 0.7rem) !important;
  }

  #shop-modal .tack-branch {
    width: 100%;
  }

  /* Tablet (481–900): same cell size as PC (≥901) — 5rem tiles. */
  @media (min-width: 481px) {
    #shop-modal .tack-branch-row {
      grid-template-columns: repeat(auto-fill, var(--tack-cell, 5rem)) !important;
      justify-content: start;
      gap: var(--tack-gap, 0.4rem) !important;
      width: 100% !important;
      max-width: 100%;
    }

    #shop-modal .tack-tile {
      width: var(--tack-cell, 5rem);
      max-width: var(--tack-cell, 5rem);
      height: auto;
      aspect-ratio: 1 / 1;
      min-width: 0;
      min-height: 0;
      justify-self: start;
    }

    /* Bait/chum stay 3 fluid cols until PC (≥901). */
    #shop-modal .tackle-panel.is-flat-grid .tack-branch-row {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      justify-content: stretch;
    }

    #shop-modal .tackle-panel.is-flat-grid .tack-tile {
      width: 100% !important;
      max-width: none !important;
      justify-self: stretch;
    }
  }

  /* Phone ≤480: 1-col rail + dense 3-col fluid gear grid. */
  @media (max-width: 480px) {
    #shop-modal .tackle-rail .tackle-slots {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: unset !important;
    }

    #shop-modal .tack-slot {
      width: 3.85rem;
      min-width: 3.85rem;
    }

    #shop-modal .tack-branch-row {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 0.22rem !important;
      justify-content: stretch;
    }

    #shop-modal .tack-tile {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      height: auto;
      aspect-ratio: 1 / 1;
      justify-self: stretch;
    }
  }

  #shop-modal .tackle-detail.inv-detail,
  #shop-modal .tackle-detail.inv-panel-platform {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: min(42dvh, 340px) !important;
    /* Above parent platform frame edges/corners (z-index: 8) */
    z-index: 12 !important;
    overflow: visible !important;
    background-color: #2a1a0e !important;
    background-image: url('../assets/grid-platform.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    box-shadow:
      0 -18px 40px rgba(0, 0, 0, 0.72),
      0 -4px 14px rgba(0, 0, 0, 0.45),
      0 10px 28px rgba(0, 0, 0, 0.35) !important;
  }

  #shop-modal .tackle-detail.is-empty,
  #shop-modal .tackle-detail:has(.detail-empty) {
    display: none !important;
  }

  #shop-modal .tackle-detail .detail-actions {
    flex-direction: column;
  }

  #shop-modal .tackle-detail .detail-actions .btn {
    flex: 0 0 auto;
    width: 100% !important;
    min-height: 48px;
  }

  #gear-detail-modal .gear-detail-card {
    width: min(100%, 440px) !important;
    max-height: none !important;
  }

  .mode-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .tackle-stats-list {
    grid-template-columns: 1fr 1fr;
  }

  .hud-stats {
    max-width: 100%;
  }

  .modal-card {
    max-height: min(92dvh, 920px);
  }

  .trophy-card { width: min(100%, 94vw); }
  .trophy-surge-stage {
    --trophy-stage-w: min(94vw, calc(52vh * 183 / 360), 24rem);
    max-height: min(52vh, 58dvh);
  }
  .trophy-surge-hero { width: 82%; }
  .trophy-surge-stage .trophy-name {
    bottom: 21%;
    font-size: clamp(1.65rem, 6.2vw, 2.25rem);
  }
  .trophy-actions .btn { flex: 1 1 8rem; }
}

/* Coarse pointer: larger hit targets */
@media (pointer: coarse) {
  .btn-touch {
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  .bazaar-lot {
    flex-direction: column;
  }

  .bazaar-lot-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }

  .bazaar-body {
    max-height: min(48vh, 420px);
  }

  .bazaar-pager-label {
    font-size: 0.72rem;
  }

  .ob-coach {
    bottom: 7.5rem;
    width: min(420px, 94vw);
  }
}