/* Game District: name-frame picker, wheel editor and the shop/loadout previews of the shared identity items. */

/* previews inside shop cards, slots and the big preview window */
.hub-pv-frame { display: grid; place-items: center; width: 100%; min-height: 3.2rem; padding: 6px; }
.hub-pv-frame .idf { max-width: 100%; }
.hub-pv-chat { display: grid; place-items: center; width: 100%; padding: 6px 4px 14px; }
.hub-pv-chat .idc--static { margin-bottom: .5em; font-size: .86rem; }
.hub-pv-chat.is-compact .idc--static { font-size: .74rem; max-width: 94%; }
.hub-pv-chat.is-compact .idc-ico { display: none; }
.hub-pv-fx { min-height: 4.6rem; }
.hub-item-art--big .hub-pv-chat .idc--static { font-size: 1.25rem; max-width: 420px; }
.hub-item-art--big .hub-pv-fx { width: min(420px, 80vw); min-height: 15rem; aspect-ratio: 4 / 3; }
.hub-item-art--big .hub-pv-fx img { max-width: 5rem; }
.hub-item-art--big .hub-pv-frame { min-height: 6rem; }
.hub-frame-stage .idf { font-size: clamp(24px, 4vw, 34px); }
.dashboard-card-name-frame .idf, .retro-player-display-name .idf { font-size: inherit; }

/* name-frame picker */
.hid-frames { display: grid; gap: 14px; }
.hid-preview { display: grid; justify-items: center; gap: 8px; padding: 22px 14px 16px; border-radius: 18px; border: 1px solid var(--line); text-align: center;
    background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--gold) 14%, transparent), transparent 65%), var(--surface-2); min-height: 150px; align-content: center; }
.hid-preview-name { display: grid; place-items: center; min-height: 3.2rem; max-width: 100%; }
.hid-preview-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hid-hint { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 700; max-width: 56ch; }
.hid-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hid-count { margin-right: auto; color: var(--muted); font-weight: 800; font-size: .84rem; }
.hid-chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; }
.hid-chip:hover { border-color: var(--line-2); }
.hid-chip.is-on { background: color-mix(in srgb, var(--gold) 22%, var(--surface-2)); border-color: var(--gold); }
.hid-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 800; font-size: .82rem; cursor: pointer; }
.hid-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.hid-frame { display: grid; gap: 8px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); transition: transform .14s ease, border-color .14s ease; position: relative; }
.hid-frame:hover, .hid-frame:focus-visible { transform: translateY(-2px); border-color: var(--line-2); outline: none; }
.hid-frame.is-equipped { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.hid-frame.is-locked .hid-frame-stage { opacity: .62; filter: saturate(.7); }
.hid-frame-stage { display: grid; place-items: center; min-height: 74px; padding: 10px 6px; border-radius: 12px; background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .08), transparent 70%), rgba(0, 0, 0, .28); overflow: hidden; transition: opacity .14s ease; }
.hid-frame-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hid-frame-title { display: grid; gap: 3px; min-width: 0; } .hid-frame-title strong { font-size: .9rem; line-height: 1.15; }

/* wheel editor */
.hid-social { display: grid; gap: 18px; }
.hid-social-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.hid-wheel-card, .hid-test { padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px; align-content: start; }
.hid-wheel-card h4, .hid-test h4 { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hid-wheel { position: relative; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 10%, transparent) 0 30%, transparent 31%), radial-gradient(circle, transparent 0 42%, var(--line) 42.5% 43%, transparent 43.5% 77%, var(--line) 77.5% 78%, transparent 78.5%); }
.hid-wheel-hub { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #2b1c07; font-size: 1.1rem; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.hid-slot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 6px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface-3, #232136); color: var(--text); cursor: pointer; transition: transform .14s cubic-bezier(.2, 1.4, .4, 1); }
.hid-slot.is-empty { border-style: dashed; border-color: var(--line); background: transparent; cursor: default; }
.hid-slot svg, .hid-slot img { width: 100%; height: 100%; }
.hid-slot:not(.is-empty):hover { transform: scale(1.18); z-index: 2; }
.hid-slot.fx { width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 3px; }
.hid-slot.r-uncommon { border-color: #6dbb52; } .hid-slot.r-rare { border-color: #4a8be0; } .hid-slot.r-epic { border-color: #9a63ea; } .hid-slot.r-legendary { border-color: #e8ae3a; } .hid-slot.r-mythic { border-color: #ff7ad1; }
.hid-stage { position: relative; display: grid; place-items: center; min-height: 210px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)); box-shadow: inset 0 0 0 1px var(--line); padding-top: 70px; }
.hid-stage .idc--live { position: absolute; }
.hid-chat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.hid-chat, .hid-fx { position: relative; display: grid; gap: 4px; padding: 10px 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; transition: border-color .14s ease, transform .14s ease; }
.hid-chat:hover, .hid-fx:hover { border-color: var(--line-2); transform: translateY(-1px); }
.hid-chat input, .hid-fx input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.hid-chat:has(input:checked), .hid-fx:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface-2)); box-shadow: 0 0 0 1px var(--gold) inset; }
.hid-chat:has(input:focus-visible), .hid-fx:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.hid-chat-bubble { display: block; padding: 4px 2px 10px; pointer-events: none; }
.hid-chat-bubble .idc--static { margin-bottom: .4em; font-size: .84rem; }
.hid-chat-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--muted); font-weight: 800; position: relative; z-index: 2; pointer-events: none; }
.hid-try { pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-3, #232136); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.hid-try:hover { background: var(--gold); color: #2b1c07; }
.hid-fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.hid-fx-art { display: grid; place-items: center; min-height: 70px; border-radius: 10px; background: radial-gradient(circle at 50% 110%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(160deg, #2a3354, #161b33); pointer-events: none; }
.hid-fx-art img { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.hid-more { justify-self: start; border: 1px dashed var(--line-2); background: transparent; color: var(--muted); border-radius: 12px; padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.hid-more:hover { color: var(--text); border-color: var(--gold); }
@media (max-width: 760px) {
    .hid-social-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hid-frame, .hid-chat, .hid-fx, .hid-slot { transition: none; } }

/* the frame preview stays on screen while the list scrolls: a sticky card under the header (compact on phones, above the bottom bar's reach) */
.hid-preview { position: sticky; top: calc(var(--top-h) + 8px); z-index: 25; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.hub-phone .hid-preview { top: calc(var(--top-h) + 4px); min-height: 0; padding: 8px 12px; gap: 4px; border-radius: 16px; background-color: var(--surface-2); }
.hub-phone .hid-preview .hid-hint { display: none; }
.hub-phone .hid-preview-name { min-height: 2.4rem; transform-origin: center; }
.hub-phone .hid-preview-name > * { max-width: 100%; }
.hub-land .hid-preview { min-height: 0; padding: 6px 12px; }

.hid-preview { background-color: var(--surface-2); overflow: hidden; max-width: 100%; }
.hid-preview, .hid-preview-name, .hid-preview-meta { min-width: 0; }
.hub-phone .hid-preview-name { max-height: 3.6rem; overflow: hidden; width: 100%; }
.hub-phone .hid-preview-name > * { transform: scale(.78); transform-origin: center; }
.hub-phone .hid-preview-meta { flex-wrap: nowrap; }
.hub-phone .hid-preview-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }