/* Game District guide: suggestions, tour, coin popover, breadcrumbs, search palette, mobile bottom bar, skeletons. */

/* ------------------------------------------------------------- top bar extras */
.hub-search-btn { font-size: 1rem; }
.hub-streak-chip { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, #ffb347 55%, transparent); background: color-mix(in srgb, #ffb347 14%, var(--surface-2)); color: #ffb347; font-weight: 900; cursor: pointer; }
.hub-streak-chip[hidden] { display: none; }
.hub-streak-chip.is-at-risk i { animation: guidePulse 1.4s ease-in-out infinite; }
@keyframes guidePulse { 50% { transform: scale(1.25); } }
.hub-player-chip { position: relative; }
.hub-player-chip::after { content: ''; position: absolute; left: 30px; top: 30px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); background: var(--dim); }
.hub-player-chip[data-sync="cloud"]::after { background: var(--green); }
.hub-player-chip[data-sync="local"]::after { background: var(--gold); }

/* ------------------------------------------------------------- breadcrumbs */
.hub-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-weight: 800; font-size: .88rem; color: var(--muted); }
.hub-crumbs[hidden] { display: none; }
.hub-crumb-back { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 800; cursor: pointer; }
.hub-crumb-back:hover { border-color: var(--gold); color: var(--gold); }
.hub-crumb-sep { color: var(--dim); }
.hub-crumb.is-current { color: var(--text); }

/* ------------------------------------------------------------- suggestions */
.hub-suggest { display: grid; gap: 10px; }
.hub-suggest[hidden] { display: none; }
.hub-suggest-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.hub-sug {
    position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 4px 12px; align-items: center; padding: 14px 40px 14px 14px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line));
    transition: transform .15s, border-color .15s;
}
.hub-sug:hover { transform: translateY(-2px); border-color: var(--c); }
.hub-sug-ico { grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--c) 28%, var(--bg-2)); color: var(--c); font-size: 1.4rem; }
.hub-sug-copy { display: grid; min-width: 0; }
.hub-sug-copy strong { font-size: .98rem; line-height: 1.2; }
.hub-sug-copy small { color: var(--muted); font-weight: 700; font-size: .8rem; line-height: 1.3; }
.hub-sug-cta { grid-column: 2; justify-self: start; min-height: 34px; padding: 5px 14px; font-size: .84rem; margin-top: 4px; }
.hub-sug-x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--dim); cursor: pointer; opacity: .5; }
.hub-sug:hover .hub-sug-x, .hub-sug-x:focus-visible { opacity: 1; }
.hub-sug-x:hover { background: var(--surface-3); color: var(--text); }

/* ------------------------------------------------------------- coin popover */
.hub-pop { position: fixed; z-index: 220; width: min(360px, calc(100vw - 20px)); padding: 16px; border-radius: 20px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: grid; gap: 12px; animation: hubPop .2s ease; }
.hub-pop-head { display: flex; align-items: center; gap: 10px; }
.hub-pop-head strong { flex: 1; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.hub-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-pop-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.35; }
.hub-pop-list li i { color: var(--gold); font-size: 1.1rem; margin-top: 1px; }
.hub-pop-list b { color: var(--text); }
.hub-pop-ev { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); font-size: .8rem; font-weight: 700; color: var(--muted); }
.hub-pop-ev small { text-transform: uppercase; letter-spacing: .1em; font-weight: 900; font-size: .66rem; }
.hub-pop-ev .pos { color: var(--green); } .hub-pop-ev .neg { color: var(--red); }
.hub-pop-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------- tour */
.hub-tour { position: fixed; inset: 0; z-index: 330; pointer-events: none; }
.hub-tour-card { position: fixed; z-index: 332; width: 340px; max-width: calc(100vw - 24px); padding: 18px; border-radius: 20px; background: var(--surface-3); border: 2px solid var(--gold); box-shadow: var(--shadow), 0 0 0 100vmax rgba(5, 3, 14, .0); pointer-events: auto; animation: hubPop .25s ease; }
.hub-tour-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 6px 0; }
.hub-tour-card p { color: var(--muted); font-size: .9rem; }
.hub-tour-dots { display: flex; gap: 5px; }
.hub-tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.hub-tour-dots i.is-on { background: var(--gold); width: 22px; border-radius: 4px; }
.hub-tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.hub-tour-grow { flex: 1; }
.hub-tour-target { position: relative; z-index: 331 !important; box-shadow: 0 0 0 4px var(--gold), 0 0 0 9999px rgba(5, 3, 14, .62) !important; border-radius: 14px; animation: hubTourPulse 1.6s ease-in-out infinite; }
@keyframes hubTourPulse { 50% { box-shadow: 0 0 0 7px var(--gold), 0 0 0 9999px rgba(5, 3, 14, .62); } }

/* ------------------------------------------------------------- search palette */
.hub-palette { place-items: start center; padding-top: min(14vh, 110px); }
.hub-palette-dialog { width: min(640px, 100%); padding: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(78vh, 640px); }
.hub-palette-box { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.hub-palette-box i { color: var(--gold); font-size: 1.1rem; }
.hub-palette-box input { flex: 1; border: 0 !important; background: transparent !important; font-size: 1.05rem; padding: 4px 0 !important; min-height: 0 !important; outline: none; }
kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font: 800 .72rem var(--font-body); }
.hub-palette-list { overflow-y: auto; padding: 6px; }
.hub-pal-group { padding: 10px 12px 4px; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.hub-pal-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.hub-pal-row.is-active { background: color-mix(in srgb, var(--gold) 16%, var(--surface-2)); box-shadow: inset 3px 0 0 var(--gold); }
.hub-pal-row > i { width: 28px; text-align: center; color: var(--cyan); font-size: 1.1rem; }
.hub-pal-row img { width: 44px; height: 28px; object-fit: cover; border-radius: 6px; }
.hub-pal-row > span { flex: 1; min-width: 0; display: grid; }
.hub-pal-row b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-pal-row small { color: var(--muted); font-weight: 700; font-size: .74rem; }
.hub-pal-row em { font-style: normal; color: var(--muted); font-size: .76rem; font-weight: 800; }
.hub-pal-row em.is-owned { color: var(--green); }
.hub-pal-art { flex: 0 0 44px; width: 44px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-3); overflow: hidden; padding: 2px; }
.hub-pal-art > * { max-width: 100%; max-height: 100%; }
.hub-pal-empty { display: grid; place-items: center; gap: 4px; padding: 34px 16px; color: var(--muted); text-align: center; }
.hub-pal-empty i { font-size: 1.8rem; color: var(--dim); }
.hub-palette-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: .74rem; font-weight: 700; color: var(--dim); }

/* ------------------------------------------------------------- skeletons */
.hub-skel { border-radius: 16px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: guideSkel 1.4s linear infinite; }
.hub-skel-card { min-height: 250px; }
@keyframes guideSkel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
body[data-motion="reduced"] .hub-skel { animation: none; }

/* panels that wait for the profile show a shimmer instead of blank space */
#dashboardPlayerCard:empty, #dashboardOwnedItems:empty, #dashboardJournalItems:empty, #dashboardGlobalLeaderboard:empty, #dashboardPersonalLeaderboard:empty, #dashboardAuthPanel:empty, #dashboardAvatarOptions:empty { min-height: 180px; border-radius: 18px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: guideSkel 1.4s linear infinite; }
.hub-empty-cta { display: grid; place-items: center; gap: 10px; }
.hub-empty-cta > i { font-size: 2rem; color: var(--dim); }

/* ------------------------------------------------------------- mobile: bottom bar */
.hub-bottomnav, .hub-more-sheet { display: none; }
@media (max-width: 640px) {
    .hub-nav { display: none !important; }
    .hub-desk-only { display: none !important; }
    .hub-top { flex-wrap: nowrap; padding-block: 6px; min-height: 56px; }
    .hub-top-actions { gap: 6px; }
    .hub-brand-text { display: none; }
    .hub-brand { margin-right: auto; }
    .hub-main { padding-bottom: 96px; }
    .hub-bottomnav { position: fixed; z-index: 130; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); }
    .hub-bottomnav button, .hub-more-sheet button { display: grid; justify-items: center; gap: 2px; padding: 7px 2px; min-height: 52px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-weight: 800; font-size: .7rem; cursor: pointer; }
    .hub-bottomnav button i { font-size: 1.3rem; }
    .hub-bottomnav button.is-active { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
    .hub-more-sheet { position: fixed; z-index: 135; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); 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); animation: hubPop .2s ease; }
    .hub-more-sheet[hidden] { display: none; }
    .hub-more-sheet button { color: var(--text); background: var(--surface-2); }
    .hub-more-sheet button i { font-size: 1.3rem; color: var(--cyan); }
    .hub-toasts { bottom: 84px; }
    .dz-mini { bottom: 84px; }
    .hub-search-btn, .hub-wallet, .hub-streak-chip { height: 38px; }
    .hub-tour-card { bottom: 84px; }
}
.hub-pal-row > .hub-pal-art { flex: 0 0 44px; width: 44px; display: grid; }

/* ------------------------------------------------------------- calmer page headers (the breadcrumb already names the page) */
.hub-panel-head .retro-kicker, .hub-shop-head .retro-kicker, .dz-head .retro-kicker { display: none; }
.hub-panel-head, .hub-shop-head, .dashboard-shop-toolbar { margin-bottom: 14px; gap: 6px 20px; }
.hub-panel-head h2, .hub-shop-head h2 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); margin: 0; }
.hub-panel-head p, .hub-shop-head p { font-size: .9rem; margin-top: 4px; max-width: 70ch; }
.hub-shop-wallet-label { display: none; }
.hub-shop-wallet .dashboard-coin-balance { font-size: 1.15rem; padding: 6px 14px; }
.hub-feature-stage { min-height: 170px; }
.hub-feature-copy { padding: 16px 22px; gap: 8px; }
.hub-feature-copy h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.hub-feature .hub-item-art--big { min-height: 150px; }
.hub-feature .hub-item-art--big > svg.dashboard-shop-svg, .hub-feature .hub-item-art--big > svg.dashboard-pixel-sprite { width: 150px; }
.hub-crumbs { margin-bottom: 8px; }
.hub-main { padding-top: 14px; }

/* ------------------------------------------------------------- tour on phones: a fixed bottom sheet, nothing scrolls, nothing dims the card */
.hub-tour.is-phone { pointer-events: auto; }
.hub-tour-back { position: fixed; inset: 0; z-index: 331; background: rgba(5, 3, 14, .38); }
.hub-tour-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.hub-tour:not(.is-phone) .hub-tour-x { width: 30px; height: 30px; font-size: .8rem; }
.hub-tour-card h3 { padding-right: 40px; }
html.hub-phone .hub-tour.is-phone .hub-tour-card {
    position: fixed; z-index: 335; left: max(10px, var(--safe-l)); right: max(10px, var(--safe-r)); width: auto; max-width: 560px; margin-inline: auto;
    bottom: calc(var(--nav-h, 64px) + 10px); top: auto; transform: none; padding: 16px 16px 14px; background: #2a1f5e; color: #fff; border-width: 2px; box-shadow: 0 -6px 30px rgba(0, 0, 0, .55);
}
html.hub-phone .hub-tour.is-phone .hub-tour-card p { color: #e7defa; font-size: 1rem; }
html.hub-phone .hub-tour.is-phone .hub-tour-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
html.hub-phone .hub-tour.is-phone .hub-tour-grow { display: none; }
html.hub-phone .hub-tour.is-phone .hub-tour-actions button { min-height: 52px; font-size: 1.05rem; margin: 0; }
html.hub-phone .hub-tour.is-phone .hub-tour-skip { order: 1; grid-column: 1; border: 2px solid #fff; border-radius: 16px; background: transparent; color: #fff; text-decoration: none; font-weight: 900; padding: 0 12px; }
html.hub-phone .hub-tour.is-phone [data-tour="next"] { order: 2; grid-column: 2; }
html.hub-phone .hub-tour.is-phone [data-tour="back"] { order: 0; grid-column: 1 / -1; min-height: 44px; }
html.hub-land .hub-tour.is-phone .hub-tour-card { left: calc(var(--rail-w, 68px) + 14px); right: auto; width: min(420px, 62vw); bottom: 10px; margin: 0; padding: 12px 14px; }
html.hub-land .hub-tour.is-phone .hub-tour-actions { margin-top: 8px; }
html.hub-land .hub-tour.is-phone .hub-tour-actions button { min-height: 46px; }
html.hub-phone .hub-tour-target { box-shadow: 0 0 0 4px var(--gold) !important; animation: none !important; }
.hub-touch .hub-tour-x { width: 44px; height: 44px; font-size: 1.1rem; }