/* ==========================================================================
   HP Character Picker — the Map (Harry Potter category)
   Only page on marauders-map-engine.js. An old parchment floor-plan: ink floods
   the corridors, a pair of footprints runs them leaving a drying trail, and a
   parchment name-tag chases along behind and settles on whoever it catches.
   Page chrome is theme-aware (var(--theme-*)); the parchment itself stays warm
   and aged — it is a physical object, not a themed surface.
   ⚖️ Original artwork only: a generic castle floor-plan and one plain object
   emblem per person. No faces, no logos, no reproduced text.
   ========================================================================== */
.page-hp-character-picker {
    --mmp-primary: #7a5424;
    --mmp-accent: #c9a227;
    --mmp-grad: linear-gradient(135deg, #d8b45a, #6b4a18);
    --mmp-ink: var(--theme-text, #1f2430);
    /* ⚠️ --theme-muted, NOT --theme-text-muted: the latter is not defined
       anywhere in themes.css, so it silently falls back to the literal on every
       theme and the body copy never adapts (measured: identical #6b7280 on
       dark, gaming and high-contrast). */
    --mmp-muted: var(--theme-muted, #6b7280);
    --mmp-surface: var(--theme-surface, #ffffff);
    --mmp-border: var(--theme-border, #e5e7eb);
    /* 'Harry P' — the wizarding face the site already standardised on (it is
       what hogwarts-house-picker's --hw-font uses), now served locally.
       Display only: it is decorative, so body copy stays in the normal stack.
       Cinzel Decorative sits behind it as a real fallback rather than Georgia. */
    --mmp-display: 'Harry P', 'Cinzel Decorative', Georgia, serif;
    /* the emblems ship with NO background of their own, so every surface that
       shows one supplies its own parchment plate — that way swapped-in art is
       legible on a dark theme without needing a baked-in disc */
    --mmp-plate: #f2e5c6;
}

/* ---- Ambient backdrop --------------------------------------------------- */
.page-hp-character-picker::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1080px 560px at 4% -6%, rgba(122, 84, 36, 0.16), transparent 60%),
        radial-gradient(940px 520px at 97% 4%, rgba(201, 162, 39, 0.11), transparent 62%),
        radial-gradient(900px 640px at 50% 108%, rgba(48, 33, 12, 0.10), transparent 60%);
}

/* ---- Stage + parchment -------------------------------------------------- */
.page-hp-character-picker .mmp-stage { position: relative; max-width: 600px; margin: 0 auto; }
.page-hp-character-picker .mmp-stage-wrap { position: relative; }
.page-hp-character-picker #mmpStage { display: block; }
.page-hp-character-picker .mmp-svg {
    width: 100%; height: auto; display: block; max-height: 72vh; border-radius: 14px;
    filter: drop-shadow(0 14px 34px rgba(42, 28, 8, .45));
}

/* ---- The sheet: creases, drawn border ----------------------------------- */
.page-hp-character-picker .mmp-creases line { stroke: rgba(74, 53, 23, .16); stroke-width: 1.4; }
/* Map furniture — pale enough to sit behind everything and never compete with
   the trail. Fill:none so each landmark is a line drawing, like the corridors. */
.page-hp-character-picker .mmp-scenery {
    fill: none; stroke: rgba(74, 53, 23, .3); stroke-width: 1.6;
    stroke-linejoin: round; stroke-linecap: round;
}
.page-hp-character-picker .mmp-frame { fill: none; stroke: rgba(74, 53, 23, .55); stroke-width: 2.2; }
.page-hp-character-picker .mmp-frame-in { fill: none; stroke: rgba(74, 53, 23, .3); stroke-width: 1; }

/* ---- Corridors ----------------------------------------------------------
   Deliberately pale and NOT darkened on run (owner: "keep the path less dark,
   way it is in the start"). A heavy corridor competed with the footprints for
   attention and the trail read as part of the line rather than on top of it. */
.page-hp-character-picker .mmp-corridor {
    stroke: rgba(74, 53, 23, .26); stroke-width: 4.4; stroke-linecap: round; fill: none;
}

/* ---- Chambers -----------------------------------------------------------
   NOTE: .mmp-room is positioned by an SVG transform ATTRIBUTE from JS and
   .mmp-room-anim takes the attribute-driven scale, so every CSS keyframe lives
   on the INNER .mmp-room-jog wrapper. A CSS transform on an element that also
   carries a transform attribute replaces the attribute outright and throws the
   element back to the SVG origin. */
.page-hp-character-picker .mmp-room { transition: opacity .3s ease; }
.page-hp-character-picker .mmp-room.is-dim { opacity: .3; }
.page-hp-character-picker .mmp-room-e { text-anchor: middle; dominant-baseline: central; }
/* fallback emblem for an item with no art file (a name you typed in) — drawn in
   map ink, never the system emoji, which renders purple and is the only
   coloured thing on a sepia map */
.page-hp-character-picker .mmp-room-ink { pointer-events: none; }
.page-hp-character-picker .mmp-chip-ink {
    width: 58px; height: 58px; display: block; margin: 0 auto .25rem;
    background: var(--mmp-plate); border-radius: 50%; padding: 5px;
    box-shadow: inset 0 0 0 1.5px rgba(74, 53, 23, .5);
}
.mmp-modal-ink {
    width: 168px; height: 168px; display: inline-block;
    background: #f2e5c6; border-radius: 50%; padding: 22px;
    box-shadow: inset 0 0 0 3px rgba(74, 53, 23, .55);
}

/* No panel behind the emblem — only the winner gets a soft ring, and even that
   is a glow rather than a border. */
.page-hp-character-picker .mmp-room-halo {
    fill: none; stroke-width: 2.4; opacity: 0; transition: opacity .25s ease;
}
.page-hp-character-picker .mmp-room.is-target .mmp-room-halo { opacity: .9; }
.page-hp-character-picker .mmp-room.is-target .mmp-room-art { filter: drop-shadow(0 0 7px rgba(74, 53, 23, .55)); }

/* Transient nudge as the feet pass (-jog) and the continuous float (-bob) live
   on SEPARATE wrappers: one element cannot host two transform animations. */
.page-hp-character-picker .mmp-room-jog.is-jog { animation: mmpJog .4s ease-in-out 1; }
@keyframes mmpJog { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
.page-hp-character-picker .mmp-room-bob { animation: mmpBob 3.6s ease-in-out infinite; }
@keyframes mmpBob {
    0%, 100% { transform: translateY(-2.6px); }
    50% { transform: translateY(2.6px); }
}

/* ---- Footprints --------------------------------------------------------- */
.page-hp-character-picker .mmp-prints { pointer-events: none; }
.page-hp-character-picker .mmp-print-sole { fill: rgba(58, 40, 16, .82); }
.page-hp-character-picker .mmp-print-toe { fill: rgba(58, 40, 16, .82); }
.page-hp-character-picker .mmp-walker { pointer-events: none; transition: opacity .18s ease; }
.page-hp-character-picker .mmp-walker circle { fill: rgba(74, 53, 23, .13); }

/* ---- The chasing name-tag ----------------------------------------------- */
.page-hp-character-picker .mmp-tag { pointer-events: none; transition: opacity .2s ease; }
.page-hp-character-picker .mmp-tag-bg { fill: #fdf6e0; stroke: #4a3517; stroke-width: 1.6; }
.page-hp-character-picker .mmp-tag-t {
    text-anchor: middle; fill: #3a2810; font-weight: 700;
    font-family: var(--mmp-display); letter-spacing: .02em;
}

/* ---- Reveal ------------------------------------------------------------- */
.page-hp-character-picker .mmp-bloom { fill: none; stroke: #4a3517; stroke-width: 3; }
.page-hp-character-picker .mmp-fx { pointer-events: none; }
.page-hp-character-picker .mmp-fx-ink { fill: rgba(58, 40, 16, .8); }

@media (prefers-reduced-motion: reduce) {
    .page-hp-character-picker .mmp-room-jog.is-jog,
    .page-hp-character-picker .mmp-room-bob { animation: none; }
}

/* ---- Start overlay ------------------------------------------------------ */
.page-hp-character-picker .mmp-start-overlay {
    position: absolute; left: 50%; top: 50%; z-index: 3;
    display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px;
    padding: .8rem 1.9rem; font-size: 1.05rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #2a1d08; background: var(--mmp-grad); cursor: pointer; box-shadow: 0 12px 30px -8px rgba(107, 74, 24, .95);
    animation: mmpStartPulse 1.8s ease-in-out infinite;
}
.page-hp-character-picker .mmp-start-overlay:hover { filter: brightness(1.08); }
.page-hp-character-picker .mmp-start-overlay[hidden] { display: none; }
@keyframes mmpStartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* ---- Result bar ---------------------------------------------------------
   Markup + behaviour + layout are shared (winner-result-bar.php / .css /
   winner-result.js). This page only supplies its colour identity. */
.page-hp-character-picker .wsp-result {
    --wsp-result-accent: var(--mmp-primary);
    --wsp-result-grad: var(--mmp-grad);
    --wsp-result-btn-ink: #2a1d08;
    --wsp-result-plate: var(--mmp-plate);
    --wsp-result-display: var(--mmp-display);
    --wsp-result-tint: linear-gradient(135deg, rgba(201, 162, 39, .12), rgba(122, 84, 36, .08));
}

.page-hp-character-picker .mmp-count { text-align: center; font-size: .9rem; color: var(--mmp-muted); margin: .7rem 0 .25rem; }
.page-hp-character-picker .mmp-count.is-warn { color: var(--mmp-primary); font-weight: 700; }
.page-hp-character-picker .mmp-effects { display: flex; gap: 1.2rem; justify-content: center; margin-top: .5rem; }
.page-hp-character-picker .mmp-effects label { font-size: .85rem; color: var(--mmp-muted); display: inline-flex; align-items: center; gap: .35rem; }

/* ---- Speed slider ------------------------------------------------------- */
.page-hp-character-picker .mmp-speed { margin: .9rem auto .2rem; max-width: 420px; }
.page-hp-character-picker .mmp-speed > label {
    display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600;
    color: var(--mmp-muted); margin-bottom: .4rem;
}
.page-hp-character-picker .mmp-speed-val { margin-left: auto; font-weight: 800; color: var(--mmp-primary); font-variant-numeric: tabular-nums; }
.page-hp-character-picker .mmp-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: rgba(120, 120, 120, .25); outline: none; cursor: pointer;
}
.page-hp-character-picker .mmp-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--mmp-grad); border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(107, 74, 24, .8);
}
.page-hp-character-picker .mmp-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #7a5424; border: 2px solid #fff;
}
.page-hp-character-picker .mmp-range-ends {
    display: flex; justify-content: space-between; font-size: .72rem; color: var(--mmp-muted);
    opacity: .75; margin-top: .25rem;
}

/* ---- Winner reveal ------------------------------------------------------ */
.page-hp-character-picker .mmp-modal-img,
.mmp-modal-img {
    width: 168px; height: 168px; display: inline-block; object-fit: contain;
    background: #f2e5c6; border-radius: 50%; padding: 14px;
    box-shadow: inset 0 0 0 3px rgba(74, 53, 23, .55);
}
.mmp-modal-emoji { font-size: 72px; line-height: 1; }
/* The wizarding face on the display moments only — the winner's name, the page
   title and the kicker. Harry P is a decorative all-caps face: body copy and the
   article's h2s stay in the normal stack so 1,400 words remain readable. */
.page-hp-character-picker #winnerName {
    font-family: var(--mmp-display); font-weight: 400; letter-spacing: .02em; font-size: 2.1rem;
}
.page-hp-character-picker h1,
.page-hp-character-picker .mmp-kicker {
    font-family: var(--mmp-display); letter-spacing: .03em;
}

/* ---- Character chooser grid (settings) ---------------------------------- */
.page-hp-character-picker .mmp-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.page-hp-character-picker .mmp-chip {
    --chip-c: #7a5424; position: relative;
    border: 2px solid var(--mmp-border); background: var(--mmp-surface); border-radius: 10px; padding: .5rem .3rem .4rem;
    cursor: pointer; text-align: center; transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease; opacity: .55;
}
.page-hp-character-picker .mmp-chip-e { display: block; font-size: 24px; line-height: 1; margin-bottom: .15rem; }
/* the parchment plate that replaces the disc the emblems used to carry */
.page-hp-character-picker .mmp-chip img {
    width: 58px; height: 58px; display: block; margin: 0 auto .25rem; object-fit: contain;
    background: var(--mmp-plate); border-radius: 50%; padding: 5px;
    box-shadow: inset 0 0 0 1.5px rgba(74, 53, 23, .5);
}
.page-hp-character-picker .mmp-chip-t { font-size: .68rem; font-weight: 700; color: var(--mmp-ink); display: block; line-height: 1.15; }
.page-hp-character-picker .mmp-chip:hover { transform: translateY(-2px); border-color: var(--chip-c); }
.page-hp-character-picker .mmp-chip.is-on { opacity: 1; border-color: var(--chip-c); box-shadow: 0 6px 16px -10px var(--chip-c); }
.page-hp-character-picker .mmp-chip.is-custom { opacity: 1; border-style: dashed; border-color: var(--chip-c); }
.page-hp-character-picker .mmp-chip-x {
    position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--mmp-primary); color: #fff; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .4);
}
.page-hp-character-picker .mmp-custom-row { display: flex; gap: .4rem; margin-top: .6rem; }
.page-hp-character-picker .mmp-custom-row input {
    flex: 1 1 auto; border: 1px solid var(--mmp-border); border-radius: 10px; padding: .5rem .7rem; font-size: .9rem;
    background: var(--mmp-surface); color: var(--mmp-ink);
}
.page-hp-character-picker .mmp-custom-row button { border: 0; border-radius: 10px; padding: .5rem .9rem; font-weight: 700; color: #2a1d08; background: var(--mmp-grad); cursor: pointer; }

/* ---- SEO content section ------------------------------------------------
   Colour + accents ONLY. The type scale comes from the shared .content-guide
   class on the wrapper — never re-declare heading font sizes here. */
.page-hp-character-picker .mmp-content {
    color: var(--mmp-ink);
    background: linear-gradient(180deg, #ffffff 0%, #faf4e6 100%);
    padding: 3.5rem 0 3.75rem; margin-top: 1rem;
    border-top: 1px solid var(--mmp-border);
}
body[data-theme].page-hp-character-picker .mmp-content { background: var(--theme-bg); }
.page-hp-character-picker .mmp-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.page-hp-character-picker .mmp-content h2,
.page-hp-character-picker .mmp-content h3 { color: var(--mmp-ink); }
.page-hp-character-picker .mmp-content p,
.page-hp-character-picker .mmp-content li { color: var(--mmp-muted); }
.page-hp-character-picker .mmp-content strong { color: var(--mmp-ink); }
.page-hp-character-picker .mmp-content em { color: var(--mmp-ink); font-style: italic; }
.page-hp-character-picker .mmp-content a { color: var(--mmp-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.page-hp-character-picker .mmp-content a:hover { color: #5a3c14; }

.page-hp-character-picker .mmp-kicker {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #2a1d08; background: var(--mmp-grad); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .85rem;
}
.page-hp-character-picker .mmp-lead { font-size: 1.2rem; line-height: 1.7; color: var(--mmp-ink); }
.page-hp-character-picker .mmp-section { margin-top: 3rem; }
.page-hp-character-picker .mmp-list { margin: .4rem 0 0; padding-left: 1.15rem; }

.page-hp-character-picker .mmp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 1.4rem; }
.page-hp-character-picker .mmp-step {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--mmp-surface); border: 1px solid var(--mmp-border); border-radius: 12px; padding: 1rem;
    box-shadow: 0 10px 24px -18px rgba(107, 74, 24, .6);
}
.page-hp-character-picker .mmp-step-num {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    font-weight: 800; color: #2a1d08; background: var(--mmp-grad); font-size: .9rem;
}
.page-hp-character-picker .mmp-step-body { min-width: 0; }
.page-hp-character-picker .mmp-step-title { font-weight: 800; color: var(--mmp-ink); margin-bottom: .15rem; font-size: .95rem; }
.page-hp-character-picker .mmp-step-body p { font-size: .88rem; margin: 0; }

/* signature asset — the roster table */
.page-hp-character-picker .mmp-table-wrap { overflow-x: auto; margin-top: 1.4rem; }
.page-hp-character-picker .mmp-ctab { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.page-hp-character-picker .mmp-ctab thead th {
    text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 800;
    color: #2a1d08; background: var(--mmp-accent); padding: .7rem 1rem;
}
.page-hp-character-picker .mmp-ctab tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--mmp-border); vertical-align: top; }
.page-hp-character-picker .mmp-ctab tbody tr:nth-child(even) { background: rgba(122, 84, 36, .05); }
.page-hp-character-picker .mmp-ctab tbody td:first-child { font-weight: 700; color: var(--mmp-ink); white-space: nowrap; }

.page-hp-character-picker .mmp-callout {
    margin-top: 1.4rem; border-left: 4px solid var(--mmp-primary); border-radius: 0 12px 12px 0;
    background: rgba(122, 84, 36, .08); padding: 1rem 1.15rem;
}
.page-hp-character-picker .mmp-callout p { margin: 0; }

/* two-column "who it suits" split — a different section shape from the wand
   page's step cards, so the two HP pages do not read as one template */
.page-hp-character-picker .mmp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.page-hp-character-picker .mmp-panel {
    background: var(--mmp-surface); border: 1px solid var(--mmp-border); border-radius: 12px; padding: 1.1rem 1.2rem;
}
.page-hp-character-picker .mmp-panel h3 { margin-top: 0 !important; font-size: 1.05rem !important; }
.page-hp-character-picker .mmp-panel p:last-child { margin-bottom: 0; }

/* ---- High-contrast -------------------------------------------------------
   HC sets --theme-muted: #1f2937, which is right on its WHITE cards and
   unreadable on its BLACK body (measured 1.43:1 before this block). So the
   content section goes light, and every white-surfaced component inside it is
   restored to dark with a more specific selector. Must stay LAST in the file:
   equal-!important declarations are resolved by source order. */
body[data-theme="high-contrast"].page-hp-character-picker .mmp-content p,
body[data-theme="high-contrast"].page-hp-character-picker .mmp-content li,
body[data-theme="high-contrast"].page-hp-character-picker .mmp-callout p,
body[data-theme="high-contrast"].page-hp-character-picker .mmp-ctab tbody td {
    color: rgba(255, 255, 255, .84);
}
body[data-theme="high-contrast"].page-hp-character-picker .mmp-panel p,
body[data-theme="high-contrast"].page-hp-character-picker .mmp-panel h3,
body[data-theme="high-contrast"].page-hp-character-picker .mmp-step-body p,
body[data-theme="high-contrast"].page-hp-character-picker .mmp-step-title {
    color: #1f2937;
}

@media (max-width: 991.98px) {
    .page-hp-character-picker .mmp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .page-hp-character-picker .mmp-steps,
    .page-hp-character-picker .mmp-split { grid-template-columns: 1fr; }
    .page-hp-character-picker .mmp-content { padding: 2.5rem 0 2.75rem; }
}