.display-mode-setting{margin:22px 0;padding:16px;border:1px solid var(--line);border-radius:13px;background:#111613}.display-mode-setting h3{margin:0 0 4px;font-size:1rem}.display-mode-setting>p{margin:0 0 13px;color:var(--muted);font-size:.82rem}.display-mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.display-mode-options button{min-height:58px;display:grid;place-items:center;gap:2px;border:1px solid var(--line);border-radius:10px;background:#171c18;color:var(--paper);padding:8px;cursor:pointer}.display-mode-options button span{font-weight:900}.display-mode-options button small{color:var(--muted);font-size:.68rem}.display-mode-options button.active{border-color:var(--lime);background:#d9ff5a12;box-shadow:inset 0 0 0 1px #d9ff5a33}.display-mode-options button.active span{color:var(--lime)}

/* A desktop user can deliberately preview the same compact layout used on phones. */
html[data-view-mode="mobile"] body{width:min(430px,100%);min-height:100dvh;margin-inline:auto;box-shadow:0 0 70px #000;background:#090b0a}
html[data-view-mode="mobile"] .app-shell{display:block}
html[data-view-mode="mobile"] .side-nav{display:none}
html[data-view-mode="mobile"] .main-shell{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
html[data-view-mode="mobile"] .topbar{height:62px;padding:0 14px}
html[data-view-mode="mobile"] .status-copy{display:none}
html[data-view-mode="mobile"] .mobile-brand{display:flex}
html[data-view-mode="mobile"] .mobile-brand .brand-mark{width:27px;height:32px}
html[data-view-mode="mobile"] .mobile-brand b{font-family:var(--display);font-size:.88rem}
html[data-view-mode="mobile"] .wallet-item{height:38px;padding-inline:10px}
html[data-view-mode="mobile"] .wallet-item.shard{display:none}
html[data-view-mode="mobile"] .global-xp{padding:8px 14px}
html[data-view-mode="mobile"] .app-view{padding:18px 14px 52px}
html[data-view-mode="mobile"] .bottom-nav{position:fixed;z-index:80;left:50%;right:auto;bottom:0;width:min(430px,100%);height:calc(74px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);padding:6px 7px env(safe-area-inset-bottom);border-top:1px solid #333a34;background:#0d100ff2;backdrop-filter:blur(18px);transform:translateX(-50%)}
html[data-view-mode="mobile"] .bottom-nav button{min-width:0;min-height:58px;border:0;border-radius:11px;background:transparent;color:#7f8881;padding:5px 2px}
html[data-view-mode="mobile"] .bottom-nav button span,html[data-view-mode="mobile"] .bottom-nav button small{display:block}
html[data-view-mode="mobile"] .bottom-nav button small{margin-top:4px;font-size:.75rem;font-weight:800}
html[data-view-mode="mobile"] .bottom-nav button.active{background:var(--lime);color:#10130c}
html[data-view-mode="mobile"] .collector-hero{display:block;padding:8px 0 24px}
html[data-view-mode="mobile"] .collector-hero .display-title{font-size:3rem;line-height:.96}
html[data-view-mode="mobile"] .collector-hero .lede{max-width:100%;min-height:0;padding:0;font-size:.98rem}
html[data-view-mode="mobile"] .hero-slab{display:none}
html[data-view-mode="mobile"] .hero-actions{display:grid;grid-template-columns:1fr 1fr}
html[data-view-mode="mobile"] .hub-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
html[data-view-mode="mobile"] .hub-stats>div{padding:12px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
html[data-view-mode="mobile"] .daily-banner{align-items:flex-start;flex-direction:column;padding:20px 17px;border:1px solid #d9ff5a35;border-radius:14px}
html[data-view-mode="mobile"] .daily-banner>.btn{width:100%}
html[data-view-mode="mobile"] .pack-hero{display:block;min-height:0}
html[data-view-mode="mobile"] .hero-copy{padding:24px 18px 8px}
html[data-view-mode="mobile"] .hero-visual{min-height:255px}
html[data-view-mode="mobile"] .stat-strip{grid-template-columns:1fr 1fr}
html[data-view-mode="mobile"] .pack-grid{grid-template-columns:1fr}
html[data-view-mode="mobile"] .pack-card{display:grid;grid-template-columns:116px minmax(0,1fr);min-height:250px}
html[data-view-mode="mobile"] .pack-art-zone{height:100%;min-height:250px}
html[data-view-mode="mobile"] .pack-card-object{width:86px;height:126px}
html[data-view-mode="mobile"] .pack-copy{padding:16px 13px}
html[data-view-mode="mobile"] .pack-buy-row{display:block}
html[data-view-mode="mobile"] .pack-buy-row .btn{width:100%;margin-top:8px}
html[data-view-mode="mobile"] .odds-labels{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
html[data-view-mode="mobile"] .odds-labels span{display:block!important}
html[data-view-mode="mobile"] .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-view-mode="mobile"] .album-grid,html[data-view-mode="mobile"] .quest-grid,html[data-view-mode="mobile"] .bundle-grid,html[data-view-mode="mobile"] .commerce-safe{grid-template-columns:1fr}
html[data-view-mode="mobile"] .collection-overview{grid-template-columns:1fr 1fr}
html[data-view-mode="mobile"] .collection-overview>div:last-child{grid-column:1/-1}
html[data-view-mode="mobile"] .toolbar{align-items:stretch;flex-direction:column}
html[data-view-mode="mobile"] .search-input{width:100%;font-size:16px}
html[data-view-mode="mobile"] .profile-tools{display:grid;grid-template-columns:1fr}
html[data-view-mode="mobile"] .profile-tools .btn{width:100%}
html[data-view-mode="mobile"] .site-footer{margin-left:0;padding:24px 16px calc(98px + env(safe-area-inset-bottom))}
html[data-view-mode="mobile"] .modal{padding:0}
html[data-view-mode="mobile"] .pack-modal-card,html[data-view-mode="mobile"] .detail-modal-card,html[data-view-mode="mobile"] .commerce-modal-card,html[data-view-mode="mobile"] .welcome-modal-card{width:min(430px,100%);max-width:none;height:100dvh;min-height:100dvh;max-height:100dvh;border:0;border-radius:0;overflow-y:auto}
html[data-view-mode="mobile"] .open-stage{display:flex;flex-direction:column;min-height:auto;padding-top:46px}
html[data-view-mode="mobile"] .open-visual{order:-1;min-height:310px}
html[data-view-mode="mobile"] .rip-wrap{width:190px;height:272px}
html[data-view-mode="mobile"] .open-copy{width:100%;padding:16px 18px 25px;text-align:left}
html[data-view-mode="mobile"] .open-copy>p{display:none}
html[data-view-mode="mobile"] .open-copy>.limited-countdown,html[data-view-mode="mobile"] .open-copy>.fine-print,html[data-view-mode="mobile"] .open-odds{display:block}
html[data-view-mode="mobile"] .open-copy .btn{width:100%}
html[data-view-mode="mobile"] .chase-track{grid-template-columns:repeat(8,148px);overflow-x:auto;scroll-snap-type:x mandatory}
html[data-view-mode="mobile"] .reveal-focus,html[data-view-mode="mobile"] .reveal-stage{min-height:100dvh}
html[data-view-mode="mobile"] .reveal-focus-card{width:min(64vw,245px)}
html[data-view-mode="mobile"] .reveal-complete .reveal-cards{display:grid;grid-template-columns:repeat(3,1fr)}
html[data-view-mode="mobile"] .reveal-card{width:auto}
html[data-view-mode="mobile"] .reveal-summary{display:grid;grid-template-columns:1fr 1fr;width:100%}
html[data-view-mode="mobile"] .reveal-summary>span,html[data-view-mode="mobile"] .reveal-summary .primary{grid-column:1/-1}

html[data-view-mode="desktop"] body{min-width:1100px}
@media(max-width:700px){.display-mode-options{grid-template-columns:1fr}.display-mode-options button{display:flex;justify-content:space-between;padding-inline:14px}.display-mode-options button small{font-size:.75rem}}