/* Mobile screen rules moved to split files:
   /mobile-base.css
   /mobile-nav.css
   /mobile-store.css
   /mobile-gameplay.css
   This file keeps only page-specific mobile overrides that must not affect desktop.
*/

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: landscape) {
  body[data-qse-route="/decks"] {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #071a64 !important;
  }

  body[data-qse-route="/decks"] .min-h-screen.overflow-hidden {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body[data-qse-route="/decks"] main {
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 4.95rem 1.05rem .72rem !important;
  }

  body[data-qse-route="/decks"] main > header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    height: 5.25rem !important;
    min-height: 5.25rem !important;
    margin-bottom: 1rem !important;
    overflow: visible !important;
  }

  body[data-qse-route="/decks"] main > header p:first-child {
    font-size: .62rem !important;
    line-height: 1 !important;
    letter-spacing: .26em !important;
  }

  body[data-qse-route="/decks"] main > header h1 {
    margin-top: .28rem !important;
    font-size: 2.25rem !important;
    line-height: .9 !important;
    white-space: nowrap !important;
  }

  body[data-qse-route="/decks"] main > header p:last-child {
    margin-top: .48rem !important;
    max-width: 34rem !important;
    font-size: .76rem !important;
    line-height: 1.15 !important;
  }

  body[data-qse-route="/decks"] main > header button {
    width: 10.2rem !important;
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    flex-shrink: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: .65rem !important;
    box-shadow: 0 4px 0 #b45309 !important;
  }

  body[data-qse-route="/decks"] main > section {
    height: calc(100svh - 11.92rem) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 11.92rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-width: 3px !important;
    border-radius: 1.2rem !important;
    padding: 1rem !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }

  body[data-qse-route="/decks"] main > section > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 10.2rem !important;
    gap: .72rem !important;
    margin-bottom: .8rem !important;
  }

  body[data-qse-route="/decks"] main > section input {
    height: 3.05rem !important;
    min-height: 3.05rem !important;
    font-size: .7rem !important;
    border-width: 2px !important;
  }

  body[data-qse-route="/decks"] main > section > div:first-child button {
    height: 3.05rem !important;
    min-height: 3.05rem !important;
    padding-left: .8rem !important;
    padding-right: .8rem !important;
    font-size: .62rem !important;
    box-shadow: 0 4px 0 #b45309 !important;
  }

  body[data-qse-route="/decks"] main > section > div.relative {
    margin-bottom: .9rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.relative svg {
    width: 1rem !important;
    height: 1rem !important;
    left: .9rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.relative input {
    padding-left: 2.55rem !important;
  }

  body[data-qse-route="/decks"] main > section > div:nth-of-type(3) {
    margin-bottom: .8rem !important;
    padding-bottom: .65rem !important;
  }

  body[data-qse-route="/decks"] main > section > div:nth-of-type(3) h2 {
    font-size: .72rem !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .8rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child > div {
    min-height: 4.8rem !important;
    border-radius: 1rem !important;
    padding: .85rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child > div button:first-child {
    min-height: 3.4rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child img,
  body[data-qse-route="/decks"] main > section > div.grid:last-child button:first-child > div:first-child {
    width: 3.2rem !important;
    height: 3.2rem !important;
    border-radius: .65rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child p.text-lg {
    font-size: .95rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child .text-\[10px\] {
    font-size: .5rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child .h-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    border-radius: .65rem !important;
  }

  body[data-qse-route="/decks"] .fixed.bottom-4.left-4 {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 820px) and (orientation: landscape) {
  body[data-qse-route="/decks"] main {
    padding: 3.85rem .58rem .48rem !important;
  }

  body[data-qse-route="/decks"] main > header {
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    margin-bottom: .58rem !important;
    gap: .7rem !important;
  }

  body[data-qse-route="/decks"] main > header p:first-child {
    font-size: .42rem !important;
  }

  body[data-qse-route="/decks"] main > header h1 {
    font-size: 1.25rem !important;
    margin-top: .14rem !important;
  }

  body[data-qse-route="/decks"] main > header p:last-child {
    margin-top: .22rem !important;
    font-size: .53rem !important;
    max-width: 28rem !important;
  }

  body[data-qse-route="/decks"] main > header button {
    width: 8.9rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    font-size: .5rem !important;
  }

  body[data-qse-route="/decks"] main > section {
    height: calc(100svh - 8.16rem) !important;
    max-height: calc(100svh - 8.16rem) !important;
    border-width: 2px !important;
    border-radius: .9rem !important;
    padding: .62rem !important;
  }

  body[data-qse-route="/decks"] main > section > div:first-child {
    grid-template-columns: minmax(0, 1fr) 8.2rem !important;
    gap: .52rem !important;
    margin-bottom: .52rem !important;
  }

  body[data-qse-route="/decks"] main > section input,
  body[data-qse-route="/decks"] main > section > div:first-child button {
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    font-size: .5rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.relative {
    margin-bottom: .56rem !important;
  }

  body[data-qse-route="/decks"] main > section > div:nth-of-type(3) {
    margin-bottom: .52rem !important;
    padding-bottom: .42rem !important;
  }

  body[data-qse-route="/decks"] main > section > div:nth-of-type(3) h2 {
    font-size: .52rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .48rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child > div {
    min-height: 3.9rem !important;
    border-radius: .75rem !important;
    padding: .48rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child img,
  body[data-qse-route="/decks"] main > section > div.grid:last-child button:first-child > div:first-child {
    width: 2.45rem !important;
    height: 2.45rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child p.text-lg {
    font-size: .62rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child .text-\[10px\] {
    font-size: .36rem !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child .h-10 {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-height: 1.75rem !important;
  }
}