/* Keep the desktop art direction; only reflow the layout below its sidebar breakpoint. */
@media (max-width:1023px) {
  .app-shell {
    --mobile-gutter:22px;
    padding-inline:max(var(--mobile-gutter),env(safe-area-inset-left)) max(var(--mobile-gutter),env(safe-area-inset-right));
  }
  #main {min-width:0}
  .topbar {
    gap:12px;
    height:auto;
    min-height:88px;
    padding-block:max(8px,env(safe-area-inset-top)) 8px;
  }
  .topbar .topbar-actions {min-width:0;gap:8px}
  .topbar .wallet {min-width:0;min-height:44px;padding:8px;gap:6px}
  .topbar .wallet b {font-size:13px}
  .topbar .wallet .coin-mark {display:inline-block;flex-shrink:0;width:25px;height:25px}
  .topbar .account-sidebar {
    display:inline-flex;
    flex:0 0 44px;
    width:44px;
    height:44px;
    min-height:44px;
    padding:5px;
    margin:0;
    border-radius:10px;
  }
  .topbar #accountSidebarLabel {display:none}
  .topbar #optionsBtn {flex:0 0 44px;width:44px;height:44px}
  .topbar .tabs {
    padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));
    background:linear-gradient(180deg,#101f32fa,#080f1cfa),var(--album-texture) center/400px;
    border-color:#d7b87335;
    box-shadow:0 -8px 28px #0003;
  }
  .topbar .tabs>.tab.active,.topbar .mobile-nav-more[data-active=true] {
    color:var(--gold);
    border:1px solid #d7b87338;
    background:linear-gradient(135deg,#eec78018,#89c9ba0b);
    box-shadow:inset 0 3px var(--gold);
  }
  #mobileNavMenu:popover-open {
    background:linear-gradient(135deg,#142838f7,#0b1928fa),var(--album-texture) center/400px;
    border-color:#d7b87355;
  }
  #mobileNavMenu .tab {min-height:52px;font-size:13px!important}
  #mobileNavMenu .profile-tab {margin-left:0}

  /* Both parts of the desktop shop stay visible, in the same order. */
  #shopScreen .shop-switch {display:none}
  #shopScreen[data-shop-view] .shop-layout>.shop-grid {display:grid}
  #shopScreen[data-shop-view] .shop-layout>.card-market {display:block}
  #shopScreen[data-shop-view] .shop-explanation {display:block}
  #shopScreen .shop-layout {grid-template-columns:minmax(0,1fr);gap:18px}
  #shopScreen .shop-layout>.shop-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-layout .card-market>.section-head {align-items:center}

  .screen :is(input,select),dialog :is(input,select),#onboardingUsername {font-size:16px}
  .screen :is(input,select),dialog :is(input,select) {min-height:44px}
  .screen :is(.primary-action,.secondary-action,.tile-sell) {min-height:44px}
  .screen :is(.page-heading,.section-head)>div {min-width:0}
  .screen :is(.stat-row b,.market-card>strong,.shop-price) {overflow-wrap:anywhere}
  .stat-row .currency-amount {white-space:normal;flex-wrap:wrap}
  .screen :is(.small-note,.results-label,.social-status) {font-size:12px}
  dialog {max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
}

@media (max-width:700px) {
  .app-shell {--mobile-gutter:16px}
  .topbar .brand {width:108px}
  .topbar .topbar-actions {gap:6px}
  .page-heading {padding:24px 0 18px}
  .page-heading h1,#shopScreen>.page-heading h1 {font-size:30px}
  .surface {border-radius:16px}
  .port-layout {gap:12px}
  .compact-opening-card {padding:16px 12px;gap:14px;border-radius:16px}
  .compact-opening-card>.section-head {min-height:48px;gap:6px}
  .compact-opening-card .section-head h2 {font-size:19px}
  .compact-opening-card .status-badge {font-size:12px;line-height:1.2}
  .compact-opening-card .gift-count {font-size:20px;line-height:1.2}
  .compact-opening-card .empty-display,.compact-opening-card .gift-art {height:132px}
  .compact-opening-card #emptyDisplay>img.display-visual {width:140px;height:126px}
  .compact-opening-card .gift-art>img {height:120px}
  .compact-opening-card>.opening-timer,.compact-opening-card #freeBoosterTimer {font-size:13px}
  .compact-opening-card>.primary-action {font-size:13px;min-height:46px}
  .display-packs-panel {padding:14px}
  .display-packs-panel .display-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px}
  .display-packs-panel .display-pack img {height:82px}

  .stat-row {gap:16px 12px;padding:16px 0}
  .stat-row>div {min-width:0;padding-inline:0;border:0}
  .stat-row span {font-size:12px;line-height:1.5}
  .stat-row b {font-size:23px;line-height:1.4}
  .collection-toolbar {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
  .collection-toolbar>.search-field {grid-column:1/-1}
  .collection-toolbar>label {min-width:0}
  .collection-toolbar>label:last-child {grid-column:1/-1}
  .collection-toolbar select {width:100%;padding-left:8px}
  .collection-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .tile-meta {padding:12px 10px}
  .tile-meta b {font-size:13px;white-space:normal;min-height:2.6em}
  .tile-meta span {font-size:11px}
  .tile-meta strong {font-size:14px}
  .tile-sell {font-size:12px}
  .pagination {gap:12px;flex-wrap:wrap}

  #shopScreen>.page-heading {padding:24px 0 18px}
  .shop-layout .shop-card {padding:16px 12px;gap:8px;border-radius:16px}
  .shop-layout .shop-card>h2 {font-size:20px}
  .shop-layout .shop-card>.shop-art {height:120px}
  .shop-layout .shop-card>.shop-art>img {height:114px}
  .shop-layout .shop-card>.shop-price {font-size:22px;margin:6px 0}
  .shop-layout .shop-card>p:not(.small-note) {font-size:12px}
  .shop-layout .shop-card>.small-note {font-size:11px}
  .shop-layout .shop-card>button {font-size:12px;margin-top:auto}
  .shop-layout>.card-market {padding:16px}
  .shop-layout .card-shop-grid {gap:14px 10px}
  .market-identity {min-height:54px}
  .market-inspect b {font-size:13px}
  .market-identity>span,.market-card>small {font-size:11px}
  .shop-layout .market-card .primary-action {font-size:12px;padding-inline:6px}
  .shop-layout .card-shop-grid>.market-card:last-child:nth-child(odd) {grid-column:1/-1;max-width:100%}
  .shop-layout .card-shop-grid>.market-card:last-child:nth-child(odd) .market-art {max-width:180px;margin-inline:auto}

  .showcase-panel,.profile-account-panel,.friends-panel,.leaderboard-panel {padding:18px}
  .profile-section-nav>button {font-size:12px}
  .profile-level-band .text-action {font-size:12px}
  .profile-account-panel {display:flex;align-items:stretch;flex-direction:column;gap:8px}
  .profile-account-panel button {align-self:flex-start}
  .showcase-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .showcase-slot {border-radius:10px;padding:6px;aspect-ratio:744/1040}
  .showcase-slot>span,.showcase-grid figcaption {font-size:12px}
  .showcase-panel .primary-action {width:100%}
  .pass-premium-panel>p,#passScreen .pass-premium-panel>p {font-size:12px}
  .pass-xp-sources>span,.pass-xp-sources b {font-size:11px}
  .pass-bottom-note>p,.pass-rewards-heading p {font-size:12px}
  .paid-offer>button {min-height:44px}
  .paid-offer>.small-note {font-size:11px}
  .paid-footnote,.paid-feedback {font-size:12px}
}

@media (max-width:360px) {
  /* Let a large balance breathe instead of squeezing the logo or clipping digits. */
  .topbar {display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;padding-bottom:12px}
  .topbar .brand {grid-column:1;grid-row:1;width:108px}
  .topbar .topbar-actions {display:contents}
  .topbar .account-sidebar {grid-column:2;grid-row:1}
  .topbar #optionsBtn {grid-column:3;grid-row:1}
  .topbar .wallet {grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-end}
  .compact-opening-card {padding:14px 10px}
  .compact-opening-card .empty-display,.compact-opening-card .gift-art {height:112px}
  .compact-opening-card #emptyDisplay>img.display-visual {height:108px}
  .compact-opening-card .gift-art>img {height:104px}
  .shop-layout .shop-card>.shop-price {font-size:19px}
  .shop-layout .shop-card>button {font-size:11px;padding-inline:4px}
  .profile-section-nav>button {font-size:11px;gap:4px}
  #passScreen .pass-premium-panel {display:flex;align-items:stretch;gap:8px}
  .pass-premium-total {align-items:flex-start;gap:4px;margin:4px 0}
  #passScreen .pass-premium-panel>button {max-width:none;width:100%;font-size:12px}
}

@media (max-width:1023px) and (max-height:500px) and (orientation:landscape) {
  .topbar {min-height:64px}
  .topbar .brand {width:96px}
  #mobileNavMenu:popover-open {max-height:calc(100dvh - 104px);bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* The small desktop opening panel also serves phones and tablets. */
@media (max-width:1023px) {
  #openingScreen.active:has(#revealView:not([hidden])),
  #openingScreen.active:has(#packChoiceView:not([hidden])) {
    min-height:calc(100svh - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom:0;
  }
  #openingScreen:has(#revealView:not([hidden])) #displayHitSummary {display:none}
  #revealView {
    --reveal-width:clamp(112px,calc((100svh - 420px)*.715),224px);
    width:min(264px,100%);
    max-width:100%;
    overflow:clip;
    margin:10px auto;
    padding:12px 16px;
  }
  #revealView .reveal-content {gap:10px}
  #revealView .reveal-center {gap:8px}
  #revealView .card-viewer {align-self:center}
  #revealView .card-position {height:28px}
  #revealView .card-meta {gap:6px}
  #revealView .card-meta h3 {font-size:19px}
  #revealView .reveal-side.right {gap:10px 8px}
  #revealView .reveal-side.right .primary-action,
  #revealView .reveal-side.right .secondary-action {min-height:44px}
  #revealView .reveal-info-button {width:44px;height:44px;right:6px;top:4px;font-size:21px}
  #revealInfoPanel {
    inset:16px 12px calc(90px + env(safe-area-inset-bottom));
    width:min(360px,calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 122px - env(safe-area-inset-bottom));
    padding:16px;
    overscroll-behavior:contain;
  }
  #revealInfoPanel .reveal-info-close {display:grid;margin-left:auto;margin-bottom:8px;width:44px;height:44px;font-size:24px}
  #revealInfoPanel .reveal-top {gap:8px;padding-bottom:12px}
  #revealInfoPanel .reveal-top .text-action,#revealInfoPanel .preview-action {min-height:44px;font-size:12px}
  #revealInfoPanel .replay-ritual-btn {white-space:normal}
  #packChoiceView {width:min(320px,100%);margin:14px auto;padding:20px}
  #packChoiceView .summary-actions>button {min-height:44px}
}
@media (max-width:1023px) and (max-height:500px) and (orientation:landscape) {
  #revealView {--reveal-width:112px;width:min(500px,100%);margin:10px auto;padding:12px}
  #revealView .reveal-content {display:grid;grid-template-columns:var(--reveal-width) minmax(0,1fr);gap:20px;align-items:center}
  #revealView .reveal-center {grid-column:1;grid-row:1;gap:6px}
  #revealView .reveal-side.right {grid-column:2;grid-row:1;padding-top:20px}
  #revealInfoPanel {inset:12px 12px 86px;max-height:calc(100dvh - 104px)}
}