/* Keep the desktop header intact. Phones use one tools row. */
.app-nav-destinations,.app-nav-tools{display:contents}
#admin-nav-link{color:inherit;text-decoration:none;font-weight:600}
#admin-nav-link svg{display:none}
@media(max-width:1100px) {
  .dashboard-page .app-nav { gap:12px; }
  .dashboard-page .topbar .brand strong { display:none; }
}
@media(min-width:741px) and (max-width:1100px) {
  .dashboard-page .topbar { gap:12px; }
  .dashboard-page .app-nav { min-width:0;flex:1;gap:6px;flex-wrap:wrap;justify-content:flex-end; }
  .dashboard-page .app-nav .nav-wallet { min-width:110px;gap:6px; }
  .dashboard-page .app-nav .nav-destination { padding-inline:6px;font-size:14px; }
  .dashboard-page .app-nav .lobby-link { padding-inline:8px; }
  .dashboard-page .app-nav .profile-orb { width:44px;height:44px; }
}
@media(max-width:740px), (pointer:coarse) and (max-width:900px){
  html{scroll-padding-top:88px}
  .dashboard-page .topbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;position:sticky;top:0;min-height:0;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));background:var(--app-surface,#fff);border-bottom:1px solid var(--app-border,#b8c7dc)}
  .dashboard-page .topbar .brand{grid-column:1;grid-row:1;margin:0;align-self:center;min-width:44px;min-height:44px}
  .dashboard-page .topbar .brand strong{display:none}
  .dashboard-page .topbar .brand-mark{width:36px;height:36px}
  .dashboard-page .app-nav{display:contents}
  .app-nav-tools{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
  .app-nav-destinations{display:none}
  .dashboard-page .app-account-screen{padding-top:16px}
  .dashboard-page #app-panel-back{margin-bottom:0}
  .dashboard-page .expansion-panel{padding-top:16px}
  .dashboard-page .arcade-shop .shop-heading{display:grid;gap:16px;padding:16px}
  .dashboard-page .arcade-shop .shop-heading>div{min-width:0}
  .dashboard-page .arcade-shop .shop-heading h1{min-width:0;overflow-wrap:anywhere;font-size:clamp(26px,8vw,32px)}
  .dashboard-page .collection-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;gap:8px}
  .dashboard-page .collection-switch{min-width:0;justify-content:center;text-align:center;line-height:1.2}
  .dashboard-page .shop-heading .collection-all{justify-self:start}
  .dashboard-page .shop-worlds,.dashboard-page .item-shelf{min-width:0}
  .dashboard-page .arcade-shop .collection-cartridge .destination-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
  .dashboard-page .collection-cartridge .destination-copy h2{grid-column:1/-1;min-width:0;margin:0;overflow-wrap:anywhere}
  .dashboard-page .collection-count{min-width:0;margin:0;justify-self:start;white-space:normal}
  .dashboard-page .item-shelf>h2,.dashboard-page .loot-name{overflow-wrap:anywhere}
  .dashboard-page .app-nav-tools .nav-wallet{display:flex;justify-content:space-between;gap:5px;min-width:0;max-width:136px;min-height:44px;padding:4px 6px;font-size:14px;flex-shrink:1}
  .dashboard-page .nav-wallet .sketch-coin{width:28px;height:28px;min-width:28px;font-size:17px}
  .dashboard-page .nav-wallet strong{min-width:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dashboard-page .nav-wallet .wallet-plus{width:20px;height:20px;min-width:20px;font-size:18px}
  .dashboard-page .app-nav-tools :is(.nav-activity,.profile-orb){width:44px;height:44px;min-width:44px;margin:0;flex:none}
  .dashboard-page .profile-orb [data-avatar]{width:100%;height:100%}
  .dashboard-page #admin-nav-link:not([hidden]){display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--app-raised,#edf3ff)}
  #admin-nav-link span{display:none}
  #admin-nav-link svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .app-nav .activity-badge{right:2px;top:0;min-width:18px;height:18px;padding:1px 3px;font-size:10px;line-height:12px}
  .app-nav-tools .activity-badge{right:-3px;top:-3px}
  .app-nav a:focus-visible,.app-nav button:focus-visible{outline:3px solid var(--app-accent,#2559ce);outline-offset:2px}

  /* Public pages keep their own light theme and a compact, single-row header. */
  body:not(.dashboard-page) .topbar{width:100%;gap:8px;padding:12px max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px));flex-wrap:nowrap}
  body:not(.dashboard-page) .topbar .brand{gap:6px;flex-shrink:0;min-height:44px}
  body:not(.dashboard-page) .topbar .brand-mark{width:36px;height:36px}
  body:not(.dashboard-page) .topbar .brand strong{font-size:20px}
  body:not(.dashboard-page) .site-nav{gap:6px;min-width:0}
  body:not(.dashboard-page) .site-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;font-size:12px;white-space:nowrap}

  .community-open .app-account-screen{width:calc(100% - 28px)}
  .community-social{display:block;padding:20px 0 calc(124px + env(safe-area-inset-bottom,0px));min-height:calc(100dvh - 130px)}
  .community-rail{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:18px}
  .community-page-head{display:block}
  .community-social .community-page-head h1{font-size:24px}
  .community-page-head p,.community-shortcuts{display:none}
  .community-toolbar{display:block;margin:0;border:0}
  .community-search-toggle{width:44px;height:44px;min-height:44px;justify-content:center;margin:0;padding:10px;border:1px solid var(--app-border);border-radius:50%;background:var(--app-surface)}
  .community-search-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .community-search-toggle svg{width:22px;height:22px;flex:none}
  .community-toolbar .community-feed-tabs{position:fixed;z-index:32;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:auto;max-width:480px;margin:0 auto;padding:7px;border:1px solid var(--app-border);border-radius:24px;background:var(--app-surface);box-shadow:0 6px 28px #0b182b26}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .community-toolbar .community-feed-tabs{background:color-mix(in srgb,var(--app-surface) 80%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
  }
  .community-social .community-feed-tab{position:relative;display:flex;flex-direction:column;gap:0;justify-content:flex-start;align-items:center;min-height:48px;padding:12px 1px;border:0;border-radius:17px;font-size:11px;line-height:16px;text-align:center;background:transparent}
  .community-social .community-feed-tab[aria-pressed=true]{border:0;background:var(--app-selected);color:var(--app-accent)}
  .community-social .community-feed-tab svg{width:24px;height:24px;flex:none}
  .community-feed-tab .community-tab-copy{display:block;max-height:0;opacity:0;overflow:hidden;white-space:normal;line-height:13px;transition:max-height .18s ease,opacity .18s ease,padding-top .18s ease}
  .community-feed-tabs.is-active .community-tab-copy,.community-feed-tabs:has(:focus-visible) .community-tab-copy{max-height:32px;padding-top:5px;opacity:1}
  .community-feed-tab:focus-visible{outline:3px solid var(--app-accent);outline-offset:1px}
  html:has(.community-open){scroll-padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
  .community-open .pwa-banner{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:620px){.dashboard-page .shop-worlds,.dashboard-page .loot-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){body:not(.dashboard-page) .topbar .brand strong{display:none}}
@media(prefers-reduced-motion:reduce){.community-feed-tab .community-tab-copy{transition:none}}

/* Community uses document scrolling and landscape drawing-sized posts. */
@media(max-width:740px), (pointer:coarse) and (max-width:900px){
  .community-open .app-account-screen{width:calc(100% - 24px);padding-top:12px}
  .community-social{display:block;min-height:0;padding:12px 0 calc(112px + env(safe-area-inset-bottom,0px))}
  .community-rail{position:static;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .community-social .community-page-head h1{font-size:24px;margin:0}
  .community-page-head p,.community-shortcuts{display:none}
  .community-toolbar{margin:0}
  .community-feed-tab[aria-pressed=true] .community-tab-copy{max-height:32px;padding-top:5px;opacity:1}
  .community-post-header{padding-top:0}
  .community-social .community-post{padding-bottom:18px}
}

/* Keep the illustrated portrait cards. Only the rows change to sideways
   scrolling on phones and narrow touch PWAs. A slice of the next card shows. */
@media(max-width:740px), (pointer:coarse) and (max-width:900px){
  .dashboard-page .arcade-shop .shop-heading{margin-bottom:18px;padding:4px 2px 2px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .dashboard-page .arcade-shop .collection-switcher{display:none}
  .dashboard-page .shop-worlds,.dashboard-page .loot-grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none!important;
    grid-auto-columns:min(265px,calc(100% - 62px));gap:14px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-padding-inline:14px;overscroll-behavior-inline:contain;
    scrollbar-width:thin;scrollbar-color:#9db0cb transparent;
  }
  /* Keep the lobby-card look: the cards sit directly on the page, not inside
     a second colored tray. */
  .dashboard-page .shop-worlds{padding:8px 3px 11px;border:0;border-radius:0;background:transparent;box-shadow:none;align-items:stretch}
  .dashboard-page .shop-worlds.shop-subcategories:has(>.collection-cartridge:nth-child(4):last-child){grid-template-columns:none!important}
  .dashboard-page .shop-worlds>.arcade-destination:nth-child(n){grid-column:auto}
  .dashboard-page .shop-worlds .arcade-destination:focus-visible,.dashboard-page .loot-grid:focus-visible,.dashboard-page .shop-worlds:focus-visible{outline:3px solid var(--app-accent,#2559ce);outline-offset:-3px}
  .dashboard-page .shop-worlds .arcade-destination{display:flex;flex-direction:column;min-height:365px;max-height:none}
  .dashboard-page .shop-worlds .arcade-scene{width:100%;height:255px!important;min-height:255px}
  .dashboard-page .arcade-shop .collection-cartridge .destination-copy{
    display:grid;flex:1;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;align-items:end;gap:10px;padding:16px;
  }
  .dashboard-page .collection-cartridge .destination-copy h2{grid-column:1/-1;align-self:start;font-size:24px}
  .dashboard-page .collection-count{font-size:12px;padding:5px 7px;white-space:normal}
  .dashboard-page .item-shelf{min-width:0;margin:20px 0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none}
  .dashboard-page .item-shelf>h2{margin:0 0 8px;font-size:23px}
  .dashboard-page .loot-grid{grid-auto-columns:min(265px,calc(100% - 62px));padding:8px 0 9px}
  .dashboard-page .loot-item{
    display:flex;flex-direction:column;min-width:0;min-height:365px;max-height:none;padding:0 0 14px;border-width:2px;border-radius:18px;
  }
  .dashboard-page .loot-item>.arcade-scene{width:100%;height:220px;flex:none}
  .dashboard-page .loot-name{display:block;padding:14px 14px 7px;font-size:20px;line-height:1.2}
  .dashboard-page .loot-state{display:inline-block;margin:0 14px 6px;padding:5px 8px;font-size:12px;line-height:1.2;white-space:normal}
  .dashboard-page .loot-open{display:block;margin-top:auto;padding:0 14px;font-size:12px}
  .dashboard-page .loot-item .item-preview-subject{scale:.9;transform-origin:center bottom}
  .dashboard-page .vehicle-loadout-slots{
    display:grid;grid-auto-flow:column;grid-template-columns:none!important;
    grid-auto-columns:min(300px,calc(100% - 28px));gap:12px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:#9db0cb transparent;
    padding:2px 2px 8px;
  }
  .dashboard-page .vehicle-loadout-slot{min-height:120px;padding:12px;scroll-snap-align:start}
  .dashboard-page :is(.shop-worlds,.loot-grid,.vehicle-loadout-slots)>:is(a,button){scroll-snap-align:start}
  .dashboard-page .destination-grid,.dashboard-page .mode-picker.cartridge-shelf{
    display:grid;grid-auto-flow:column;grid-template-columns:none!important;
    grid-auto-columns:min(265px,calc(100% - 62px));gap:15px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:#9db0cb transparent;
    padding:3px 3px 11px;
  }
  .dashboard-page .destination-grid>.arcade-destination,.dashboard-page .mode-picker.cartridge-shelf>button{scroll-snap-align:start}
  .dashboard-page .destination-grid>.arcade-destination:last-child{grid-column:auto}
  .dashboard-page .destination-grid>.arcade-destination:last-child .arcade-scene{height:220px}
  /* The horizontal scrollport also clips vertically. Reserve space for the
     lifted/tilted border, keyboard focus ring and pressed-card shadow. */
  .dashboard-page .mode-picker.cartridge-shelf{margin-bottom:20px;padding-top:18px;padding-bottom:18px}
  .dashboard-page .cartridge-shelf button{
    display:flex;flex-direction:column;align-items:stretch;min-height:340px;max-height:none;
    padding:10px 10px 14px;border-width:3px;border-radius:22px;box-shadow:0 6px 0 #203653;
  }
  .dashboard-page .cartridge-art{width:100%;height:195px;min-height:195px;border-radius:13px}
  .dashboard-page .cartridge-art::before{width:175px;height:175px}
  .dashboard-page .cartridge-shelf .cartridge-art svg{width:86%;height:86%}
  .dashboard-page .cartridge-shelf button>strong{margin:13px 6px 2px;padding:0;font-size:25px}
  .dashboard-page .cartridge-shelf button>span{margin:0 6px;padding:0;font-size:13px;line-height:1.3}
  .dashboard-page .cartridge-play{min-height:42px;margin:auto 6px 0;padding:9px;border:0;border-radius:10px;background:#203653;color:#fff;font-size:13px;justify-content:center}

  /* Swipe cards leave through the screen edge, not through a visible inset
     tray. Keep the resting cards aligned with the page's 16px content gutter. */
  .dashboard-page :is(.shop-worlds,.loot-grid,.vehicle-loadout-slots,.destination-grid,.mode-picker.cartridge-shelf,.saved-library .saved-grid){
    box-sizing:border-box;width:100vw;max-width:100vw;
    margin-left:calc(50% - 50vw);margin-right:0;
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
    scroll-padding-left:max(16px,env(safe-area-inset-left,0px));
    scroll-padding-right:max(16px,env(safe-area-inset-right,0px));
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  }
}
@media(max-width:380px) {
  .dashboard-page .topbar { gap:8px 6px;padding-right:max(8px,env(safe-area-inset-right,0px));padding-left:max(8px,env(safe-area-inset-left,0px)); }
  .dashboard-page .app-nav-tools { gap:4px; }.dashboard-page .topbar .brand-mark { width:32px;height:32px; }
  .dashboard-page .nav-wallet .wallet-plus { display:none; }.dashboard-page .nav-wallet .sketch-coin { width:22px;height:22px;min-width:22px;font-size:14px; }.dashboard-page .nav-wallet strong { font-size:14px; }
}