body.dem-hub.tarot-body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ebf4ff;
    color: #202124;
    font-family: 'Google Sans', 'Segoe UI', system-ui, sans-serif;
    --fz-ink: #202124;
    --fz-muted: #3c4043;
    --fz-line: #e5e7eb;
    --fz-room: #ffffff;
    --hub-accent: #1d3f8f;
}
body.dem-hub.tarot-body.dark-mode {
    background: #12141a;
    color: #e8eaed;
    --fz-ink: #e8eaed;
    --fz-muted: #9aa0a6;
    --fz-line: #3c4043;
    --fz-room: #1a1c20;
}

.dem-stadium { --fz-stadium-h: min(22vh, 160px); min-height: var(--fz-stadium-h); height: var(--fz-stadium-h); overflow: hidden; background: #1d3f8f; }
.dem-stadium__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.92; }

.fz-room__blurb { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--fz-muted); }

.hub-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}
@media (min-width: 960px) {
    .hub-shell { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.35rem; }
    .dem-rail { position: sticky; top: 72px; }
}
.hub-main { min-width: 0; }
.hub-rail__card {
    background: #fff;
    border: 1px solid #111827;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}
body.dem-hub.dark-mode .hub-rail__card { background: #202124; border-color: #3c4043; }
.hub-rail__label {
    margin: 0 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hub-accent);
}
.hub-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.hub-rail__link {
    display: flex; flex-direction: column; gap: 0.15rem;
    text-decoration: none !important; color: inherit;
    border: 1px solid var(--fz-line); border-radius: 10px; padding: 0.65rem 0.75rem; background: #fff;
}
body.dem-hub.dark-mode .hub-rail__link { background: #292a2d; border-color: #3c4043; }
.hub-rail__link:hover { border-color: var(--hub-accent); background: #f0f9ff; }
.hub-rail__link-title { font-size: 0.88rem; font-weight: 800; }
.hub-rail__link-desc { font-size: 0.74rem; font-weight: 600; color: var(--fz-muted); line-height: 1.35; }

.dem-main { max-width: none; margin: 0; padding: 0; }
.dem-intro { text-align: center; padding: 0.5rem 0.25rem 1rem; }
.dem-intro__mio { border-radius: 16px; margin-bottom: 0.5rem; }
.dem-intro__line { font-size: 0.95rem; line-height: 1.4; max-width: 36rem; margin: 0 auto 0.75rem; }
.dem-btn {
    border: 0; border-radius: 999px; padding: 0.55rem 1rem; font-weight: 800; cursor: pointer;
    font-size: 0.88rem;
}
.dem-btn--primary { background: #1d3f8f; color: #fff; }
.dem-btn--ghost { background: #fff; border: 1px solid #cbd5e1; color: #202124; }
.dem-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dem-load-msg { font-size: 0.82rem; color: #64748b; }
.dem-how { text-align: left; max-width: 28rem; margin: 0.75rem auto; font-size: 0.85rem; }
.dem-mute { margin-top: 0.5rem; background: transparent; border: 0; cursor: pointer; }

.dem-clue { background: #fff; border-radius: 12px; padding: 0.75rem; margin-bottom: 0.5rem; border: 1px solid #e2e8f0; }
body.dem-hub.dark-mode .dem-clue { background: #292a2d; border-color: #3c4043; }
.dem-clue__round { font-size: 0.72rem; font-weight: 800; color: #64748b; }
.dem-clue__text { margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.35; }

.dem-map-wrap { position: relative; }
.dem-map {
    width: 100%; height: min(58vh, 480px); background: #bae6fd; border-radius: 12px; overflow: hidden;
    border: 1px solid #7dd3fc;
}
.dem-map svg { display: block; width: 100%; height: 100%; }
.dem-map-reset {
    position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; border-radius: 8px;
    background: rgba(255,255,255,0.9); padding: 0.25rem 0.45rem; cursor: pointer;
}

.dem-bar {
    display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; align-items: flex-start;
}
.dem-bar--hidden { display: none; }
.dem-bar .dem-btn { flex: 1; min-width: 6.5rem; }
.dem-options-wrap { position: relative; flex: 1; min-width: 8rem; }
.dem-options-trigger { width: 100%; }
.dem-options-drop {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 4px);
    z-index: 12;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
    padding: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
}
body.dem-hub.dark-mode .dem-options-drop { background: #292a2d; border-color: #3c4043; }
.dem-opt-btn {
    width: 100%; text-align: left; padding: 0.55rem 0.65rem; border-radius: 8px; border: 0;
    background: transparent; font-weight: 700; cursor: pointer; font-size: 0.88rem;
}
.dem-opt-btn:hover { background: #f1f5f9; }
body.dem-hub.dark-mode .dem-opt-btn:hover { background: #3c4043; }

.dem-reveal { margin-top: 0.75rem; background: #f8fafc; border-radius: 12px; padding: 0.85rem; border: 1px solid #e2e8f0; }
body.dem-hub.dark-mode .dem-reveal { background: #1e293b; border-color: #334155; }
.dem-reveal__line { margin: 0 0 0.65rem; font-weight: 700; font-size: 0.9rem; }
.dem-reveal__actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.dem-reveal__actions .dem-btn { flex: 0 0 auto; min-width: 8rem; }

.dem-news-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    text-decoration: none !important;
    color: inherit;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
body.dem-hub.dark-mode .dem-news-row { background: #292a2d; border-color: #3c4043; }
.dem-news-row:hover { border-color: #1d3f8f; }
.dem-news-row__img {
    width: 72px; height: 54px; object-fit: cover; border-radius: 8px; display: block; background: #e2e8f0;
}
.dem-news-row__title { margin: 0 0 0.25rem; font-size: 0.88rem; font-weight: 800; line-height: 1.3; color: #1d3f8f; }
.dem-news-row__meta { margin: 0; font-size: 0.72rem; color: #64748b; }

.dem-end { text-align: center; padding: 0.5rem 0 1rem; }
.dem-end__title { font-size: 1.5rem; margin: 0 0 0.35rem; }
.dem-end__stats { margin: 0 0 0.5rem; font-size: 0.95rem; }
.dem-end__news-h { text-align: left; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 1rem 0 0.5rem; }
.dem-emoji-grid { font-size: 1.35rem; letter-spacing: 0.15rem; }
.dem-end-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }
.dem-end-list .dem-news-row { grid-template-columns: 80px minmax(0, 1fr); }
.dem-end-list .dem-news-row__img { width: 80px; height: 60px; }
.dem-end-explore { margin-top: 1.25rem; text-align: left; }
.dem-wa {
    display: inline-block; margin: 0.85rem 0 0; padding: 0.55rem 1rem; border-radius: 999px;
    background: #25d366; color: #fff !important; text-decoration: none !important; font-weight: 700;
}
.dem-seo { margin-top: 1.5rem; font-size: 0.88rem; line-height: 1.45; }
.dem-end:not([hidden]) ~ .dem-seo { display: none; }

@media (min-width: 720px) {
    .dem-map { height: 480px; }
}