/* Game District: mobile and touch.  Loaded last.  hub-mobile.js sets, on <html>:
 *   .hub-phone  phone portrait (<= 640px wide) or a short landscape phone (<= 500px tall, coarse pointer)
 *   .hub-land   landscape phone (bottom bar becomes a side rail, studio goes two-column)
 *   .hub-touch  the primary pointer is coarse
 *   [data-lite] lighter animations (weak device or chosen in Settings)
 *   [data-hand="left"] left-handed layout
 */

:root { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --nav-h: 64px; }

/* ------------------------------------------------------------- touch basics (any touch device) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
.hub-touch body, .hub-touch button, .hub-touch a, .hub-touch [role="button"], .hub-touch summary, .hub-touch label, .hub-touch input[type="range"] { touch-action: manipulation; }
.hub-touch .dashboard-game-card, .hub-touch .hub-item, .hub-touch .hub-resume { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hub-touch .dashboard-game-card a, .hub-touch .dashboard-game-card img { -webkit-touch-callout: none; }
.hub-touch .dz-stage { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hub-touch .dz-thumb { -webkit-touch-callout: none; -webkit-user-drag: none; }
.hub-touch input, .hub-touch select, .hub-touch textarea { font-size: max(16px, 1rem); }   /* no iOS zoom on focus */
/* no pull-to-refresh / rubber-banding while playing in the studio */
html.hub-immersive, html.hub-immersive body { overscroll-behavior-y: none; }
html.hub-touch { overscroll-behavior-x: none; }

/* safe areas for notches, rounded corners and the iOS home bar */
.hub-top { padding-left: max(clamp(12px, 2.4vw, 28px), var(--safe-l)); padding-right: max(clamp(12px, 2.4vw, 28px), var(--safe-r)); padding-top: calc(8px + var(--safe-t)); }
.hub-main { padding-left: max(clamp(12px, 2.4vw, 28px), var(--safe-l)); padding-right: max(clamp(12px, 2.4vw, 28px), var(--safe-r)); }
body.hub-page { min-height: 100vh; min-height: 100dvh; }

/* bottom sheets: shared look (the handle is drawn by ::before; hub-mobile.js adds swipe-to-dismiss) */
@keyframes hubSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hubBackdropIn { from { background-color: transparent; } }   /* colour, never opacity: see hubFade in hub-base.css */

/* long-press quick actions on game cards */
.hub-qa { position: fixed; inset: 0; z-index: 260; display: grid; place-items: end center; background: rgba(5, 3, 14, .6); animation: hubBackdropIn .15s ease; }
.hub-qa-sheet { position: relative; width: min(480px, 100%); display: grid; gap: 8px; padding: 22px 14px calc(14px + var(--safe-b)); background: var(--surface); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: var(--shadow); animation: hubSheetUp .22s cubic-bezier(.2, .8, .3, 1); }
.hub-qa-sheet::before { content: ''; position: absolute; left: 50%; top: 8px; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--line-2); }
.hub-qa-sheet h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; padding: 4px 6px 2px; }
.hub-qa-sheet button { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 800; font-size: 1rem; text-align: left; cursor: pointer; }
.hub-qa-sheet button i { font-size: 1.25rem; color: var(--gold); width: 26px; text-align: center; }
.hub-qa-sheet button.is-main { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.hub-qa-sheet button.is-main i { color: var(--on-gold); }
.dashboard-game-card.is-pressing { transform: scale(.975); transition: transform .35s; }

/* ------------------------------------------------------------- phones (portrait, and short landscape) */
html.hub-phone { --top-h: calc(56px + var(--safe-t)); --nav-h: calc(64px + var(--safe-b)); }
.hub-phone .hub-main { padding-top: 8px; padding-bottom: calc(var(--nav-h) + 24px); }
.hub-phone .hub-top { min-height: var(--top-h); }
.hub-phone .hub-bottomnav { padding-bottom: calc(6px + var(--safe-b)); padding-left: max(6px, var(--safe-l)); padding-right: max(6px, var(--safe-r)); }
.hub-phone .hub-bottomnav button, .hub-phone .hub-more-sheet button { min-height: 52px; font-size: .74rem; }
.hub-phone .hub-more-sheet { right: max(8px, var(--safe-r)); bottom: calc(var(--nav-h) + 8px); }
.hub-phone .hub-toasts { bottom: calc(var(--nav-h) + 10px); }
.hub-phone .hub-icon-btn, .hub-phone .hub-search-btn, .hub-phone .hub-wallet, .hub-phone .hub-streak-chip, .hub-phone .hub-player-chip { min-height: 44px; min-width: 44px; }
.hub-phone .hub-search-btn, .hub-phone .hub-wallet, .hub-phone .hub-streak-chip { height: 44px; }
.hub-phone .hub-chip { min-height: 44px; padding-inline: 16px; font-size: .95rem; }
.hub-phone .dashboard-favorite-toggle { min-width: 44px; min-height: 44px; }
.hub-phone .retro-button, .hub-phone .retro-button-secondary { min-height: 48px; }
.hub-phone .hub-seg button { min-height: 46px; }
.hub-phone .hub-crumbs { margin-bottom: 6px; font-size: .95rem; }
.hub-phone .hub-crumb-back { min-height: 44px; display: inline-flex; align-items: center; }
.hub-phone .hub-muted, .hub-phone .hub-panel-head p, .hub-phone .dz-name, .hub-phone .hub-item-meta { font-size: max(.86rem, 14px); }
.hub-phone .hub-panel-head h2 { font-size: 1.3rem; }
.hub-phone .hub-guide, .hub-phone .hub-suggest { scroll-margin-top: var(--top-h); }
.hub-phone .hub-tour-card { bottom: calc(var(--nav-h) + 10px); left: 10px; right: 10px; width: auto; max-width: none; }

/* every dialog is a bottom sheet with a grab handle */
.hub-phone .hub-modal:not(.hub-drawer-wrap), .hub-phone .dashboard-wardrobe-modal, .hub-phone .dashboard-slot-modal, .hub-phone .dashboard-unsaved-modal, .hub-phone .dashboard-shop-preview-modal { place-items: end center; padding: 0; }
.hub-phone .hub-dialog, .hub-phone .dashboard-wardrobe-dialog, .hub-phone .dashboard-slot-dialog, .hub-phone .dashboard-unsaved-dialog, .hub-phone .dashboard-shop-preview-dialog, .hub-phone .hub-drawer {
    width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: calc(20px + var(--safe-b));
    animation: hubSheetUp .24s cubic-bezier(.2, .8, .3, 1); overscroll-behavior: contain; touch-action: pan-y;
}
.hub-phone .hub-dialog::before, .hub-phone .dashboard-wardrobe-dialog::before, .hub-phone .dashboard-slot-dialog::before, .hub-phone .dashboard-unsaved-dialog::before, .hub-phone .hub-drawer::before {
    content: ''; display: block; width: 42px; height: 5px; margin: -8px auto 10px; border-radius: 3px; background: var(--line-2);
}
.hub-phone .hub-drawer-wrap { place-items: end stretch; }
.hub-phone .hub-drawer { height: auto; max-height: 92vh; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--line-2); }
.hub-phone .hub-drawer-foot { position: sticky; bottom: calc(-20px - var(--safe-b)); padding: 10px 0 calc(6px + var(--safe-b)); background: linear-gradient(transparent, var(--surface) 30%); }
.hub-phone .dashboard-slot-close, .hub-phone .dashboard-shop-preview-close, .hub-phone .hub-close { width: 44px; height: 44px; }
.hub-sheet-dragging { transition: none !important; animation: none !important; }
.hub-sheet-settling { transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
/* the search palette: a sheet that fills most of the screen so the results stay thumb-reachable */
.hub-phone .hub-palette { place-items: end center; padding: 0; }
.hub-phone .hub-palette-dialog { width: 100%; max-height: 86vh; max-height: 86dvh; height: 86dvh; border-radius: 24px 24px 0 0; padding-bottom: var(--safe-b); display: grid; }
.hub-phone .hub-palette-box { padding: 16px 16px 12px; }
.hub-phone .hub-palette-box kbd { display: none; }
.hub-phone .hub-pal-row { min-height: 54px; padding: 8px 12px; }
/* the coin popover is a sheet too */
.hub-phone .hub-pop { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100%; border-radius: 24px 24px 0 0; padding: 22px 18px calc(18px + var(--safe-b)); animation: hubSheetUp .22s cubic-bezier(.2, .8, .3, 1); max-height: 80dvh; overflow: auto; }

/* ---- lobby */
.hub-phone .hub-hero { padding: 14px; }
.hub-phone .hub-hero h1 { font-size: 1.5rem; }
.hub-phone .dashboard-portal-grid { grid-template-columns: 1fr; gap: 14px; }
.hub-phone .dashboard-action-row { gap: 10px; }
.hub-phone .dashboard-action-row .retro-button, .hub-phone .dashboard-action-row .retro-button-secondary { min-height: 52px; font-size: 1.02rem; }
.hub-phone .hub-toolbar { position: sticky; top: var(--top-h); z-index: 60; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-block: 8px; margin-inline: -12px; padding-inline: 12px; }
.hub-phone .hub-search input, .hub-phone .hub-search .retro-input { min-height: 46px; }

/* ---- shop: compact header, sticky filter bar, filters in a sheet, big preview actions */
.hub-phone .hub-shop-head p, .hub-phone .hub-shop-wallet { display: none; }
.hub-phone .hub-shop-head h2 { font-size: 1.2rem; }
.hub-phone .hub-feature { grid-template-columns: 1fr 1fr; }
.hub-phone .hub-feature-stage { min-height: 120px; }
.hub-phone .hub-feature .hub-item-art--big { min-height: 110px; }
.hub-phone .hub-feature .hub-item-art--big > svg.dashboard-shop-svg, .hub-phone .hub-feature .hub-item-art--big > svg.dashboard-pixel-sprite { width: 100px; }
.hub-phone .hub-feature-copy { padding: 12px; }
.hub-phone .hub-feature-copy p { display: none; }
.hub-phone .dashboard-shop-market { display: block; }
.hub-phone .dashboard-shop-rail { position: sticky; top: var(--top-h); z-index: 55; max-height: none; margin: 0 -12px 8px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow: visible; }
.hub-phone .dashboard-shop-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-phone .dashboard-shop-filters > .dashboard-shop-filter:first-child { flex: 1 1 0; min-width: 0; }
.hub-phone .dashboard-shop-filters > .dashboard-shop-filter:first-child > span { display: none; }
.hub-phone .dashboard-shop-filters #dashboardShopSearch { min-height: 46px; }
.hub-phone .dashboard-shop-chiprow { flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.hub-phone .dashboard-shop-chiprow::-webkit-scrollbar { display: none; }
.hub-phone .dashboard-shop-chiprow > * { flex: 0 0 auto; min-height: 44px; }
.hub-phone:not(.hub-filters-open) .dashboard-shop-filters > :not(.dashboard-shop-filter:first-child):not(.dashboard-shop-chiprow):not(#hubFilterBtn):not(#hubFilterDone) { display: none; }
#hubFilterBtn, #hubFilterDone { display: none; }
.hub-phone #hubFilterBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 800; cursor: pointer; }
.hub-phone #hubFilterBtn b { min-width: 20px; height: 20px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-size: .74rem; display: inline-grid; place-items: center; padding: 0 5px; }
.hub-phone #hubFilterBtn b:empty { display: none; }
.hub-filters-backdrop { display: none; }
.hub-phone.hub-filters-open .hub-filters-backdrop { display: block; position: fixed; inset: 0; z-index: 140; background: rgba(5, 3, 14, .62); animation: hubBackdropIn .15s ease; }
.hub-phone.hub-filters-open .dashboard-shop-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 150; margin: 0; max-height: 82dvh; overflow-y: auto; padding: 22px 14px calc(14px + var(--safe-b)); border-radius: 24px 24px 0 0; background: var(--surface); border: 1px solid var(--line-2); border-bottom: 0; box-shadow: var(--shadow); animation: hubSheetUp .22s cubic-bezier(.2, .8, .3, 1); backdrop-filter: none; }
.hub-phone.hub-filters-open .dashboard-shop-filters > .dashboard-shop-chiprow { display: flex; }
.hub-phone.hub-filters-open #hubFilterBtn { display: none; }
.hub-phone.hub-filters-open .dashboard-shop-filters > .dashboard-shop-filter:first-child > span { display: block; }
.hub-phone.hub-filters-open .dashboard-shop-filters > .dashboard-shop-filter:first-child { flex: 1 0 100%; }
.hub-phone.hub-filters-open #hubFilterDone { display: block; position: sticky; bottom: 0; flex: 1 0 100%; min-height: 52px; border-radius: 16px; border: 0; background: var(--gold); color: var(--on-gold); font-weight: 900; font-size: 1.02rem; cursor: pointer; }
.hub-phone.hub-filters-open .dashboard-shop-category-list { max-height: none; }
.hub-phone .dashboard-shop-display-head { margin-bottom: 8px; }
.hub-phone .dashboard-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; content-visibility: auto; }
.hub-phone .hub-item-foot .retro-button, .hub-phone .hub-item-foot .retro-button-secondary { min-height: 44px; }
.hub-phone .hub-preview-dialog { overflow: hidden; padding: 0; }
.hub-phone .hub-preview-dialog > .hub-close { position: fixed; right: 12px; top: 12px; background: rgba(10, 6, 28, .7); }
.hub-phone .hub-preview-dialog > .hub-pv-back { position: fixed; right: 64px; top: 12px; height: 44px; background: rgba(10, 6, 28, .92); color: #fff; }
.hub-phone .hub-preview-body { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hub-phone .hub-preview-stage { min-height: 0; height: 34dvh; padding: 14px; }
.hub-phone .hub-preview-stage .hub-pv, .hub-phone .hub-preview-stage > .hub-item-art svg.hub-pv { width: auto; height: 100%; max-width: 100%; }
.hub-phone .hub-preview-info { border-radius: 0; }
.hub-phone .hub-preview-scroll { padding: 14px 16px 10px; overflow: visible; }
/* the footer (coins, Buy, prev/next) sticks to the bottom of the sheet while the rest scrolls */
.hub-phone .hub-preview-foot { position: sticky; bottom: 0; z-index: 3; padding: 10px 16px calc(8px + var(--safe-b)); gap: 8px; }
.hub-phone .hub-preview-buy { flex-wrap: nowrap; }
.hub-phone .hub-preview-buy .hub-item-price { flex: 0 0 auto; }
.hub-phone .hub-preview-buy .retro-button, .hub-phone .hub-preview-buy .retro-button-secondary { flex: 1 1 auto; min-height: 56px; font-size: 1.08rem; }
.hub-phone .hub-preview-nav { padding-bottom: 2px; }
.hub-phone .hub-preview-nav .retro-button-secondary { min-height: 44px; }
/* stage views on a phone: a taller stage, a slim views switch, icon-only buttons on the scene, smaller set pieces */
.hub-phone .hub-preview-stage.has-views { height: 46dvh; padding: 10px; gap: 8px; }
.hub-phone .hub-stage-views button { min-height: 40px; padding: 4px 12px; font-size: .9rem; }
.hub-phone .hub-stage-btn-label, .hub-phone .hub-set-strip-label { display: none; }
.hub-phone .hub-stage-btn, .hub-phone .hub-stage-note { min-height: 40px; padding: 4px 11px; font-size: .78rem; }
.hub-phone .hub-stage-studio, .hub-phone .hub-stage--set .hub-stage-studio { top: 8px; right: 8px; bottom: auto; }
.hub-phone .hub-stage-tools { left: 8px; bottom: 8px; max-width: calc(100% - 64px); }
.hub-phone .hub-stage-tools--top { top: 8px; bottom: auto; }
.hub-phone .hub-stage-tools .hub-seg button { min-height: 40px; padding: 4px 12px; font-size: .84rem; }
.hub-phone .hub-set-strip { left: 8px; right: 8px; bottom: 8px; padding: 6px; gap: 6px; }
.hub-phone .hub-set-strip .hub-set-piece { width: 44px; height: 44px; }

/* ---- locker, journal, ladder, account */
.hub-phone .dashboard-slot-item { min-height: 64px; }
.hub-phone .hub-seg, .hub-phone [role="tablist"] { -webkit-overflow-scrolling: touch; }
.hub-phone table { display: block; overflow-x: auto; max-width: 100%; }

/* ---- dress-up studio: stage on top, wardrobe as a bottom drawer */
html.hub-phone[data-tab="customization"] .hub-crumbs { display: none; }
.hub-phone { --dz-drawer-h: clamp(236px, 40dvh, 360px); }
.hub-phone body[data-dashboard-tab="customization"] .hub-main { padding-bottom: 0; }
.hub-phone .dz { gap: 6px; }
.hub-phone .dz-head { gap: 4px; }
.hub-phone .dz-head > div:first-child { display: none; }
.hub-phone .dz-head .dz-savebar { width: 100%; }
.hub-phone .dz-savebar-in { gap: 8px; flex-wrap: nowrap; justify-content: space-between; }
.hub-phone .dz-savestate { flex: 1 1 auto; min-width: 0; font-size: .92rem; }
.hub-phone .dz-savebar .retro-button, .hub-phone .dz-savebar .retro-button-secondary { min-height: 44px; padding-inline: 14px; }
.hub-phone .dz-layout { display: block; }
.hub-phone .dz-left { position: sticky; top: var(--top-h); z-index: 30; display: flex; gap: 8px; justify-content: center; align-items: flex-start; }
.hub-phone[data-hand="left"] .dz-left { flex-direction: row-reverse; }
.hub-phone .dz-stage {
    aspect-ratio: 4 / 5; width: auto; min-width: 0; margin: 0; max-width: calc(100% - 104px);
    height: calc(100dvh - var(--top-h) - 86px - var(--nav-h) - var(--dz-drawer-h) - 10px); min-height: 190px; border-radius: 22px; flex: 0 1 auto;
}
.hub-phone .dz-bubble { font-size: .9rem; max-width: 80%; }
.hub-phone .dz-tools { position: static; flex: 0 0 auto; align-content: start; display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; width: auto; }
.hub-phone .dz-tool { width: 44px; height: 44px; border-radius: 16px; background: rgba(14, 9, 36, .72); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hub-phone .dz-sep { display: none; }
.hub-phone .dz-rating { left: 10px; bottom: 10px; }
.hub-phone .dz-right {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: var(--nav-h); height: var(--dz-drawer-h); display: flex; flex-direction: column; gap: 6px;
    padding: 20px 10px 4px; background: var(--surface); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
    transition: height .25s cubic-bezier(.2, .8, .3, 1);
}
.hub-phone .dz-right.is-tall { height: calc(100dvh - var(--top-h) - var(--nav-h) - 8px); }
.dz-handle { display: none; }
.hub-phone .dz-handle { display: block; position: absolute; left: 0; right: 0; top: 0; height: 24px; border: 0; background: transparent; cursor: pointer; padding: 0; z-index: 3; }
.hub-phone .dz-handle::before { content: ''; position: absolute; left: 50%; top: 9px; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--line-2); }
/* the category button + sheet and the try-on tray on phones live in hub-dressup.css */
.hub-phone .dz-filters { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
.hub-phone .dz-filters .dz-seg { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; max-width: 62%; scrollbar-width: none; }
.hub-phone .dz-filters .dz-seg::-webkit-scrollbar { display: none; }
.hub-phone .dz-seg button { min-height: 44px; padding-inline: 12px; white-space: nowrap; }
.hub-phone .dz-search { flex: 1 1 0; min-width: 90px; max-width: none; }
.hub-phone .dz-search input { min-height: 44px !important; }
.hub-phone .dz-body { flex: 1 1 auto; min-height: 0; padding: 4px 2px; border: 0; background: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.hub-phone .dz-grid-head { margin-bottom: 4px; }
.hub-phone .dz-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: auto; grid-auto-columns: 92px; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin-inline: -2px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hub-phone .dz-grid::-webkit-scrollbar { display: none; }
.hub-phone .dz-item { scroll-snap-align: start; }
.hub-phone .dz-thumb { min-width: 88px; }
.hub-phone .dz-fav { width: 44px; height: 44px; top: -8px; right: -8px; }
.hub-phone .dz-right.is-tall .dz-grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-columns: auto; overflow-x: hidden; overflow-y: visible; }
.hub-phone .dz-colors { gap: 12px; }
.hub-phone .dz-swatches { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.hub-phone .dz-swatches::-webkit-scrollbar { display: none; }
.hub-phone .dz-swatch { flex: 0 0 auto; width: 44px; height: 44px; scroll-snap-align: start; }
.hub-phone .dz-looks { display: none; border: 0; padding: 8px 0 0; background: none; flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; }
.hub-phone .dz-right.show-looks > .dz-tabs, .hub-phone .dz-right.show-looks > .dz-filters, .hub-phone .dz-right.show-looks > .dz-body, .hub-phone .dz-right.show-looks > .dz-try { display: none; }
.hub-phone .dz-right.show-looks > .dz-looks { display: grid; }
.dz-lookbtn { display: none; }
.hub-phone .dz-lookbtn { display: inline-flex; align-items: center; gap: 6px; position: absolute; z-index: 4; right: 12px; top: -20px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 800; font-size: .84rem; cursor: pointer; }
.hub-phone .dz-lookbtn[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.hub-land .dz-lookbtn { display: none; }
.hub-phone .dz-looks-row { scroll-snap-type: x proximity; }
.hub-phone .dz-look { scroll-snap-align: start; }
.hub-phone .dz-mini { display: none !important; }
.hub-phone .dashboard-unsaved-modal { z-index: 260; }


/* ------------------------------------------------------------- landscape phones: side rail and two-column screens */
html.hub-land { --top-h: calc(48px + var(--safe-t)); --nav-h: 0px; --rail-w: 68px; }
.hub-land .hub-top { min-height: var(--top-h); padding-block: 4px; }
.hub-land .hub-nav, .hub-land .hub-desk-only, .hub-land .hub-brand-text { display: none !important; }
.hub-land .hub-brand { margin-right: auto; }
.hub-land .hub-bottomnav {
    display: flex; flex-direction: column; justify-content: center; gap: 2px; top: var(--top-h); bottom: 0; left: 0; right: auto; width: calc(var(--rail-w) + var(--safe-l));
    padding: 4px 4px calc(4px + var(--safe-b)) calc(4px + var(--safe-l)); border-top: 0; border-right: 1px solid var(--line-2); overflow-y: auto;
}
.hub-land[data-hand="left"] .hub-bottomnav { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--line-2); padding: 4px calc(4px + var(--safe-r)) calc(4px + var(--safe-b)) 4px; width: calc(var(--rail-w) + var(--safe-r)); }
.hub-land .hub-bottomnav button { flex: 0 0 auto; min-height: 48px; padding: 4px 2px; font-size: .64rem; }
.hub-land .hub-bottomnav button i { font-size: 1.15rem; }
.hub-land .hub-main { padding-left: calc(var(--rail-w) + var(--safe-l) + 10px); padding-right: max(14px, var(--safe-r)); padding-bottom: 24px; }
.hub-land[data-hand="left"] .hub-main { padding-left: max(14px, var(--safe-l)); padding-right: calc(var(--rail-w) + var(--safe-r) + 10px); }
.hub-land .hub-more-sheet { bottom: 8px; left: calc(var(--rail-w) + var(--safe-l) + 6px); right: auto; }
.hub-land[data-hand="left"] .hub-more-sheet { left: auto; right: calc(var(--rail-w) + var(--safe-r) + 6px); }
.hub-land .hub-toasts { bottom: 12px; }
.hub-land .hub-tour-card { bottom: 10px; left: calc(var(--rail-w) + 20px); right: auto; width: min(380px, 60vw); }
.hub-land .hub-dialog, .hub-land .dashboard-wardrobe-dialog, .hub-land .dashboard-slot-dialog, .hub-land .dashboard-unsaved-dialog, .hub-land .dashboard-shop-preview-dialog, .hub-land .hub-drawer { width: min(620px, 100%); margin: 0 auto; max-height: 94dvh; }
.hub-land .hub-drawer-wrap { place-items: end center; }
.hub-land .hub-palette-dialog { width: min(620px, 100%); height: 94dvh; max-height: 94dvh; }
.hub-land .hub-preview-dialog { width: min(820px, 100%); }
.hub-land .hub-preview-body { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.hub-land .hub-preview-stage { height: auto; min-height: 0; }
.hub-land .hub-preview-scroll { overflow-y: auto; }
.hub-land .hub-preview-foot { position: static; }
.hub-land .hub-pop { left: auto !important; right: 12px !important; width: min(380px, 70vw); border-radius: 20px; bottom: 8px !important; }
.hub-land .hub-toolbar { top: var(--top-h); }
.hub-land .dashboard-portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-land .dashboard-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-land .dashboard-shop-rail { top: var(--top-h); }
/* studio: stage left, wardrobe right, both fixed to the screen */
.hub-land[data-tab="customization"] .hub-main { padding-bottom: 6px; }
.hub-land .dz-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.hub-land .dz-left { top: calc(var(--top-h) + 4px); }
.hub-land .dz-stage { height: calc(100dvh - var(--top-h) - 76px); min-height: 0; max-width: none; }
.hub-land .dz-tool { width: 42px; height: 42px; }
.hub-land .dz-tools { grid-template-columns: repeat(2, 42px); }
.hub-land .dz-head { margin: 0; }
.hub-land .dz-right { position: static; height: calc(100dvh - var(--top-h) - 62px); padding: 8px 8px 4px; border-radius: 18px; box-shadow: none; z-index: auto; transition: none; }
.hub-land .dz-handle { display: none; }
.hub-land .dz-grid { grid-template-rows: repeat(2, auto); grid-auto-columns: 84px; }
/* ------------------------------------------------------------- tablets (touch, 641 - 1100 px): keep the desktop shell, give touch more room */
@media (min-width: 641px) and (max-width: 1100px) and (pointer: coarse) {
    .hub-icon-btn, .hub-search-btn, .hub-wallet { min-height: 44px; min-width: 44px; }
    .dashboard-tab { min-height: 44px; }
    .hub-chip { min-height: 44px; }
    .hub-seg button, .retro-button, .retro-button-secondary { min-height: 46px; }
    .dz-tool { width: 50px; height: 50px; }
    .dz-tab, .dz-seg button { min-height: 44px; }
    .dz-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .dashboard-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hub-preview-dialog { width: min(760px, 100%); }
}
@media (min-width: 641px) and (max-width: 1100px) and (pointer: coarse) and (orientation: portrait) {
    .dz-layout { grid-template-columns: 1fr; }
    .dz-stage { width: min(100%, 420px); }
}

/* ------------------------------------------------------------- lighter animations (weak devices or chosen) */
html[data-lite="1"] .dz-stage::before, html[data-lite="1"] .dz-floor, html[data-lite="1"] .dz-shine, html[data-lite="1"] .hub-card-shine,
html[data-lite="1"] .hub-tour-target, html[data-lite="1"] .hub-skel { animation: none !important; }
html[data-lite="1"] .dz-figure-inner { animation-duration: 8s; }
html[data-lite="1"] .hub-modal, html[data-lite="1"] .hub-top, html[data-lite="1"] .hub-bottomnav, html[data-lite="1"] .dz-tool { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-lite="1"] .hub-bottomnav, html[data-lite="1"] .hub-top { background: var(--bg); }
/* pause decorative loops while the tab is hidden */
html.hub-hidden *, html.hub-hidden *::before, html.hub-hidden *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    body[data-motion="auto"] .hub-qa-sheet, body[data-motion="auto"] .hub-phone .hub-dialog, body[data-motion="auto"] .hub-phone .hub-pop { animation: none !important; }
    body[data-motion="auto"] .dz-right { transition: none; }
}
body[data-motion="reduced"] .hub-qa-sheet, body[data-motion="reduced"] .hub-qa, html.hub-phone body[data-motion="reduced"] .hub-dialog, html.hub-phone body[data-motion="reduced"] .hub-pop, body[data-motion="reduced"] .dz-right { animation: none !important; transition: none !important; }

/* landscape phones are wider than 640px, so the bottom bar / More sheet styling of hub-guide.css is repeated here for the side rail */
.hub-land .hub-top { flex-wrap: nowrap; }
.hub-land .hub-player-chip .dashboard-rail-name { display: none; }
.hub-land .hub-bottomnav { position: fixed; z-index: 130; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hub-land .hub-bottomnav button, .hub-land .hub-more-sheet button { display: grid; justify-items: center; align-content: center; gap: 2px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.hub-land .hub-bottomnav button.is-active { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.hub-land .hub-more-sheet { position: fixed; z-index: 135; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px; width: min(320px, 60vw); border-radius: 20px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: hubPop .2s ease; }
.hub-land .hub-more-sheet[hidden] { display: none; }
.hub-land .hub-more-sheet button { min-height: 52px; color: var(--text); background: var(--surface-2); font-size: .74rem; }
.hub-land .hub-more-sheet button i { font-size: 1.3rem; color: var(--cyan); }
/* left-handed: the portrait bottom bar reads right to left, its sheet opens on the left */
.hub-phone:not(.hub-land)[data-hand="left"] .hub-bottomnav { direction: rtl; }
.hub-phone:not(.hub-land)[data-hand="left"] .hub-bottomnav button { direction: ltr; }
.hub-phone:not(.hub-land)[data-hand="left"] .hub-more-sheet { right: auto; left: max(8px, var(--safe-l)); }
.hub-phone[data-hand="left"] .hub-toasts { left: max(10px, var(--safe-l)); right: auto; }

/* very short portrait phones (360 x 640): tighter drawer, tools in three columns */
@media (max-height: 700px) {
    .hub-phone:not(.hub-land) { --dz-drawer-h: clamp(210px, 36dvh, 300px); }
    .hub-phone:not(.hub-land) .dz-tools { grid-template-columns: repeat(3, 40px); gap: 5px; }
    .hub-phone:not(.hub-land) .dz-tool { width: 40px; height: 40px; font-size: 1.05rem; }
    .hub-phone:not(.hub-land) .dz-stage { max-width: calc(100% - 140px); }
}

/* small dismiss / close controls keep their look but get a 44px touch target */
.hub-touch .hub-sug-x { width: 44px; height: 44px; right: 2px; top: 2px; opacity: .8; }
.hub-phone [role="tab"], .hub-phone [data-locker-view] { min-height: 44px; }
/* one rule so no filter pill, sort button or table action in any panel is a hard target */
.hub-phone .dashboard-tab-panel button:not(.dz-handle):not(.dz-lookbtn):not(.dz-fav):not(.dz-swatch):not(.hub-sug-x), .hub-phone .dashboard-tab-panel a.retro-button, .hub-phone .dashboard-tab-panel summary { min-height: 44px; }
.hub-set-sub { color: var(--muted); font-weight: 800; font-size: .82rem; margin-top: 4px; }
.hub-phone.hub-filters-open .dashboard-shop-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hub-phone.hub-filters-open .dashboard-shop-category-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: none; overflow: visible; }
.hub-phone.hub-filters-open .dashboard-shop-category-list > * { flex: 0 0 auto; width: auto; min-height: 44px; }
.hub-phone.hub-filters-open .dashboard-shop-sort-menu { width: 100%; }
.hub-phone.hub-filters-open .dashboard-shop-sort-menu summary { width: 100%; justify-content: flex-start; }
.hub-phone.hub-filters-open #hubFilterDone { margin-top: 4px; }

/* ------------------------------------------------------------- phone navigation, independent of the viewport width
   (hub-mobile.js also treats a coarse-pointer device with a small screen as a phone when Chrome runs in 'desktop site' mode) */
.hub-phone .hub-nav, .hub-phone .hub-desk-only { display: none !important; }
.hub-phone:not(.hub-land) .hub-bottomnav {
    position: fixed; z-index: 130; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    padding-top: 6px; background: color-mix(in srgb, var(--bg) 97%, #000); border-top: 1px solid var(--line-2); transform: translateZ(0);
}
.hub-phone:not(.hub-land) .hub-bottomnav button, .hub-phone .hub-more-sheet button { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 7px 2px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.hub-phone .hub-bottomnav button i { font-size: 1.3rem; }
.hub-phone .hub-bottomnav button.is-active { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.hub-phone .hub-more-sheet { position: fixed; z-index: 135; width: min(320px, calc(100vw - 16px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px; border-radius: 20px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.hub-phone .hub-more-sheet[hidden] { display: none; }
.hub-phone .hub-more-sheet button { color: var(--text); background: var(--surface-2); }
.hub-phone .hub-more-sheet button i { font-size: 1.3rem; color: var(--cyan); }
.hub-phone .hub-top { flex-wrap: nowrap; }
.hub-phone .hub-brand-text { display: none; }
.hub-phone .hub-brand { margin-right: auto; }

/* ------------------------------------------------------------- lighter path (default on phones and touch devices; 'Lighter animations' = Off in Settings turns it back off) */
html[data-lite="1"] *, html[data-lite="1"] *::before, html[data-lite="1"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-lite="1"] .hub-top, html[data-lite="1"] .hub-toolbar, html[data-lite="1"] .dashboard-shop-rail { background: var(--bg); }
html[data-lite="1"] .ek-av--anim .ek-fig, html[data-lite="1"] .ek-av--anim .ek-eyes, html[data-lite="1"] .ek-av--anim .ek-pupils, html[data-lite="1"] .ek-av--anim .ek-mouth, html[data-lite="1"] .ek-av--anim .ek-sway, html[data-lite="1"] .ek-av--anim .ek-glint { animation: none !important; }
html[data-lite="1"] .dashboard-game-card, html[data-lite="1"] .hub-suggest-card { content-visibility: auto; contain-intrinsic-size: auto 440px; }
html[data-lite="1"] .dashboard-shop-card, html[data-lite="1"] .hub-item { content-visibility: auto; contain-intrinsic-size: auto 250px; }
html[data-lite="1"] .dashboard-game-card, html[data-lite="1"] .dashboard-shop-card { box-shadow: none; }
html[data-lite="1"] .hub-hero::before, html[data-lite="1"] .hub-hero::after { animation: none !important; }

/* ------------------------------------------------------------- phone fixes (Oct 2026): the item window on landscape phones
   One scroller: the whole body scrolls (a swipe on the stage scrolls too), the stage stays put on the left at the full
   window height (the generic `.has-views` 46dvh stage of portrait phones left half of it empty), the foot is compact. */
.hub-land .hub-preview-dialog { height: 94dvh; }
.hub-land .hub-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.hub-land .hub-preview-stage, .hub-land .hub-preview-stage.has-views { position: sticky; top: 0; height: calc(94dvh - 8px); min-height: 0; }
.hub-land .hub-preview-scroll { overflow: visible; }
.hub-land .hub-preview-foot { position: sticky; bottom: 0; padding: 8px 14px calc(6px + var(--safe-b)); gap: 6px; }
.hub-land .hub-preview-buy .retro-button, .hub-land .hub-preview-buy .retro-button-secondary { min-height: 48px; font-size: 1rem; }
.hub-land .hub-preview-nav .retro-button-secondary { min-height: 40px; }

/* ------------------------------------------------------------- phone fixes (Oct 2026): the dress-up studio flows in the page
   The old phone studio was a fixed drawer (one sideways row of items) under a stage squeezed between them: with a real
   browser's address bar almost nothing showed. Now there is one scroller, the page: the save bar, the avatar (compact)
   and the category bar stay pinned under the top bar, and the try-on list, filters and an item grid of several rows
   flow below it. Desktop and tablets (no .hub-phone) are unchanged. */
.hub-phone { --dz-head-h: 52px; --dz-stage-h: clamp(140px, 25dvh, 236px); }
.hub-phone body[data-dashboard-tab="customization"] .hub-main { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 18px); }
.hub-phone .dz { gap: 0; }
.hub-phone .dz-head { position: sticky; top: var(--top-real, var(--top-h)); z-index: 33; height: var(--dz-head-h); display: flex; align-items: center; margin: 0 -12px; padding: 4px 12px; background: var(--bg); }
.hub-phone .dz-left { top: calc(var(--top-real, var(--top-h)) + var(--dz-head-h)); z-index: 31; margin: 0 -12px; padding: 2px 12px 8px; background: var(--bg); }
.hub-phone .dz-stage { height: var(--dz-stage-h); min-height: 0; }
.hub-phone .dz-right, .hub-phone .dz-right.is-tall {
    position: relative; z-index: auto; left: auto; right: auto; bottom: auto; height: auto; display: flex; flex-direction: column; gap: 10px;
    padding: 8px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; transition: none;
}
.hub-phone .dz-handle { display: none; }
.hub-phone .dz-lookbtn { position: static; align-self: flex-end; order: -1; margin-bottom: -4px; }
/* the category bar stays pinned under the avatar while the grid scrolls */
.hub-phone .dz-tabs { position: sticky; top: calc(var(--top-real, var(--top-h)) + var(--dz-head-h) + var(--dz-stage-h) + 10px); z-index: 30; margin: 0 -12px; padding: 0 12px 6px; background: var(--bg); }
.hub-phone .dz-tabs.is-open { z-index: 150; }   /* above the bottom bar and the landscape rail (130), the sheet lives inside it */
.hub-phone .dz-filters { flex-wrap: wrap; }
.hub-phone .dz-filters .dz-seg { max-width: none; flex: 1 1 auto; flex-wrap: wrap; overflow: visible; }
.hub-phone .dz-search { flex: 1 1 100%; }
.hub-phone .dz-body { flex: none; overflow: visible; padding: 2px 0; }
.hub-phone .dz-grid, .hub-phone .dz-right.is-tall .dz-grid {
    grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    overflow: visible; scroll-snap-type: none; padding: 2px; margin: 0;
}
.hub-phone .dz-swatches { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
.hub-phone .dz-try { max-height: none; overflow: visible; }
.hub-phone .dz-looks { overflow: visible; }
@media (max-height: 700px) { .hub-phone:not(.hub-land) .dz-stage { max-width: calc(100% - 140px); } }
/* landscape phones: avatar pinned on the left at the screen's height, the picker flows on the right */
.hub-land { --dz-head-h: 50px; }
.hub-land .dz-head { margin: 0; padding: 4px 0; }
.hub-land .dz-left { margin: 0; padding: 0; top: calc(var(--top-real, var(--top-h)) + var(--dz-head-h)); }
.hub-land .dz-stage { height: calc(100dvh - var(--top-real, var(--top-h)) - var(--dz-head-h) - 12px); }
.hub-land .dz-right, .hub-land .dz-right.is-tall { padding: 0; }
.hub-land .dz-tabs { top: calc(var(--top-real, var(--top-h)) + var(--dz-head-h)); margin: 0; padding: 0 0 6px; }
.hub-land .dz-grid, .hub-land .dz-right.is-tall .dz-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hub-land .dz-search { flex: 1 1 160px; }