/* Game District: the 3D diorama dialog (hub-diorama.js). A full-window themed dialog: title bar with camera tools, the
 * stage (the WebGL canvas over a sky gradient set per biome), a foot with the figure legend. Phones: edge to edge. */
.hub-modal.hub-dio-modal { padding: 14px; place-items: stretch; z-index: 240; }
.hub-dio {
    position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%;
    max-width: 1680px; margin: 0 auto; overflow: hidden;
    background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 20px;
    box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
.hub-dio::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, var(--teal) 0 25%, var(--magenta) 25% 50%, var(--sun) 50% 75%, var(--grape) 75%);
}
.hub-dio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; min-width: 0; }
.hub-dio-titles { min-width: 0; display: grid; gap: 2px; }
.hub-dio-titles .retro-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hub-dio-titles h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 1.15; color: var(--title, var(--gold)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-dio-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.hub-dio-tool {
    width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 1rem;
}
.hub-dio-tool:hover:not(:disabled) { background: var(--surface-3); border-color: var(--teal); }
.hub-dio-tool[aria-pressed="true"] { background: var(--teal); color: #10202a; border-color: transparent; }
.hub-dio-tool:disabled { opacity: .45; cursor: default; }
.hub-dio-tool:focus-visible, .hub-dio-close:focus-visible, .hub-dio-canvas:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.hub-dio-close { margin-left: 4px; }

.hub-dio-stage { position: relative; min-height: 0; margin: 0 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.hub-dio-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: var(--gcur-grab); outline: none; }
.hub-dio-canvas.is-grabbing { cursor: var(--gcur-grabbing); }
.hub-dio-flat { cursor: default; object-fit: contain; }
.hub-dio-status {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 999px; background: rgba(10, 6, 30, .72); color: #fff8ea; font-weight: 700; font-size: .92rem; pointer-events: none;
}
.hub-dio-modal.is-ready .hub-dio-status { display: none; }
.hub-dio-modal.is-flat .hub-dio-status.is-note { display: inline-flex; top: auto; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 28px); white-space: normal; border-radius: 14px; }
.hub-dio-spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: var(--sun); animation: hubDioSpin .8s linear infinite; }
@keyframes hubDioSpin { to { transform: rotate(360deg); } }
.hub-dio-hint {
    position: absolute; left: 12px; bottom: 10px; margin: 0; max-width: min(600px, calc(100% - 24px)); padding: 6px 12px; border-radius: 10px;
    background: rgba(10, 6, 30, .6); color: #fff8ea; font-size: .8rem; line-height: 1.35; pointer-events: none; transition: opacity .4s;
}
.hub-dio-modal.is-flat .hub-dio-hint { display: none; }
.hub-dio-modal.is-used .hub-dio-hint { opacity: 0; }
.hub-dio-foot { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 16px 14px; }
.hub-dio-figs { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hub-dio-fig { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; font-weight: 700; }
.hub-dio-fig b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b8895a; color: #2a1608; font-size: .75rem; }
.hub-dio-note { color: var(--muted); font-size: .85rem; margin-left: auto; }
.hub-dio-set { flex: 0 0 auto; }
/* the entry buttons */
.hub-stage-btn.hub-dio-open, .hub-link.hub-dio-open { display: inline-flex; align-items: center; gap: 6px; }

/* phones: edge to edge, tools in one row under the title */
@media (max-width: 640px) {
    .hub-modal.hub-dio-modal, .hub-phone .hub-modal.hub-dio-modal { padding: 0; place-items: stretch; }
    .hub-dio { border-radius: 0; border: 0; max-width: none; }
    .hub-dio-head { flex-wrap: wrap; padding: 12px 12px 8px; }
    .hub-dio-titles { flex: 1 1 100%; padding-right: 46px; }
    .hub-dio-tools { flex: 1 1 100%; justify-content: space-between; }
    .hub-dio-close { position: absolute; top: 10px; right: 10px; margin: 0; }
    .hub-dio-tool { width: 44px; height: 44px; }
    .hub-dio-stage { margin: 0 8px; }
    .hub-dio-hint { font-size: .74rem; left: 8px; bottom: 8px; }
    .hub-dio-foot { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
    .hub-dio-note { display: none; }
    .hub-dio-set { margin-left: auto; }
}
.hub-phone .hub-modal.hub-dio-modal { padding: 0; }
.hub-phone .hub-dio { border-radius: 0; border: 0; }
:root[data-theme="contrast"] .hub-dio-hint, :root[data-theme="contrast"] .hub-dio-status { background: #000; color: #fff; border: 1px solid #fff; }

/* phone fixes (Oct 2026): the flat picture's note can offer "Try 3D again"; on phones the page under the full-screen
   diorama is not painted while it is open (less GPU memory next to the WebGL context) */
.hub-dio-modal.is-flat .hub-dio-status.is-note { pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.hub-dio-retry {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    border: 0; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: .88rem;
}
.hub-dio-retry:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
#hubDiorama .hub-dio-retry { color: var(--on-gold); font-weight: 800; font-size: .88rem; }   /* body.hub-page button { font: inherit; color: inherit } outranks the class and left light text on gold */
html.hub-phone.hub-dio-open .hub-main, html.hub-phone.hub-dio-open .hub-top, html.hub-phone.hub-dio-open .hub-bottomnav, html.hub-phone.hub-dio-open #hubPreview { visibility: hidden; }