/* ==========================================================================
   HP Professor Picker — the Chocolate Frog Card (Harry Potter category)
   Only page on chocolate-frog-engine.js. A dark table of IDENTICAL sealed
   pentagonal packs; a loose chocolate frog hops pack to pack and settles on one,
   that pack bursts open under it and flings it clear, and the pentagon card
   sails out and turns over to the professor.
   Page chrome is theme-aware (var(--theme-*)); the table and the packs stay
   deep purple and gold — they are physical objects, not themed surfaces.
   ⚖️ Original artwork only: generic pack, generic frog, generic card frame, and
   one plain object emblem per professor. No faces, no logos.
   ========================================================================== */
.page-hp-professor-picker {
    --cfc-primary: #6b3fa0;
    --cfc-accent: #d9b44a;
    --cfc-grad: linear-gradient(135deg, #e8c766, #6b3fa0);
    --cfc-ink: var(--theme-text, #1f2430);
    /* ⚠️ --theme-muted, NOT --theme-text-muted — the latter is not defined in
       themes.css and silently falls back to its literal on every theme. */
    --cfc-muted: var(--theme-muted, #6b7280);
    --cfc-surface: var(--theme-surface, #ffffff);
    --cfc-border: var(--theme-border, #e5e7eb);
    --cfc-display: 'Harry P', 'Cinzel Decorative', Georgia, serif;
    /* emblems ship with no background of their own, so each surface supplies a
       plate — keeps swapped-in art legible on a dark theme */
    --cfc-plate: #f6ecd2;
}

/* ---- Ambient backdrop --------------------------------------------------- */
.page-hp-professor-picker::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1080px 560px at 4% -6%, rgba(107, 63, 160, 0.18), transparent 60%),
        radial-gradient(940px 520px at 97% 4%, rgba(217, 180, 74, 0.12), transparent 62%),
        radial-gradient(900px 640px at 50% 108%, rgba(30, 16, 48, 0.12), transparent 60%);
}

/* ---- Stage -------------------------------------------------------------- */
.page-hp-professor-picker .cfc-stage { position: relative; max-width: 600px; margin: 0 auto; }
.page-hp-professor-picker .cfc-stage-wrap { position: relative; }
.page-hp-professor-picker #cfcStage { display: block; }
.page-hp-professor-picker .cfc-svg {
    width: 100%; height: auto; display: block; max-height: 72vh; border-radius: 16px;
    filter: drop-shadow(0 14px 34px rgba(20, 10, 34, .55));
}
.page-hp-professor-picker .cfc-counter { fill: #4a3560; opacity: .8; }

/* ---- Packs --------------------------------------------------------------
   NOTE: .cfc-pack is positioned by an SVG transform ATTRIBUTE from JS and
   .cfc-pack-anim takes attribute-driven motion, so every CSS keyframe lives on
   the INNER .cfc-pack-jog wrapper. A CSS transform on an element that also
   carries a transform attribute replaces the attribute outright. */
.page-hp-professor-picker .cfc-pack { transition: opacity .3s ease; }
.page-hp-professor-picker .cfc-pack.is-dim { opacity: .26; }
.page-hp-professor-picker .cfc-pack-body,
.page-hp-professor-picker .cfc-pack-top { stroke: rgba(12, 6, 20, .5); stroke-width: 1.2; }
.page-hp-professor-picker .cfc-pack.is-target .cfc-pack-body { filter: drop-shadow(0 0 10px rgba(217, 180, 74, .9)); }
/* ⚠️ .cfc-pack-jog now carries a rotate ATTRIBUTE (the scattered tilt), and a
   CSS transform would replace that attribute outright and snap the pack upright.
   So the flinch is animated on its own INNER wrapper instead. */
.page-hp-professor-picker .cfc-pack-flinch.is-jog { animation: cfcJog .38s ease-in-out 1; }
@keyframes cfcJog { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7px); } }
.page-hp-professor-picker .cfc-pack-flinch.is-settle { animation: cfcSettle 1.7s ease-in-out 1; }
@keyframes cfcSettle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
    .page-hp-professor-picker .cfc-pack-flinch.is-jog,
    .page-hp-professor-picker .cfc-pack-flinch.is-settle { animation: none; }
}

/* ---- Shine, hero pack, frog, card --------------------------------------- */
.page-hp-professor-picker .cfc-hero,
.page-hp-professor-picker .cfc-hero-card,
.page-hp-professor-picker .cfc-frog { pointer-events: none; }
.page-hp-professor-picker .cfc-frog { transition: opacity .2s ease; }
.page-hp-professor-picker .cfc-hero-card { filter: drop-shadow(0 10px 24px rgba(10, 5, 20, .6)); }
/* the card face is a dark starfield now, so the name is GOLD, not ink */
.page-hp-professor-picker .cfc-card-name {
    text-anchor: middle; fill: #f3e2a8; font-weight: 400;
    font-family: var(--cfc-display); letter-spacing: .03em;
}
.page-hp-professor-picker .cfc-fx { pointer-events: none; }
.page-hp-professor-picker .cfc-fx-spark { fill: #f5dd97; }

/* ---- Start overlay ------------------------------------------------------ */
.page-hp-professor-picker .cfc-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(--cfc-grad); cursor: pointer; box-shadow: 0 12px 30px -8px rgba(40, 20, 70, .95);
    animation: cfcStartPulse 1.8s ease-in-out infinite;
}
.page-hp-professor-picker .cfc-start-overlay:hover { filter: brightness(1.08); }
.page-hp-professor-picker .cfc-start-overlay[hidden] { display: none; }
@keyframes cfcStartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

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

/* ---- Result bar ---------------------------------------------------------
   Markup + behaviour + layout are shared (winner-result-bar.php / .css /
   winner-result.js). This page only supplies its colour identity. */
.page-hp-professor-picker .wsp-result {
    --wsp-result-accent: var(--cfc-primary);
    --wsp-result-grad: var(--cfc-grad);
    --wsp-result-btn-ink: #2a1d08;
    --wsp-result-plate: var(--cfc-plate);
    --wsp-result-display: var(--cfc-display);
    --wsp-result-tint: linear-gradient(135deg, rgba(217, 180, 74, .13), rgba(107, 63, 160, .10));
}

/* ---- Speed slider ------------------------------------------------------- */
.page-hp-professor-picker .cfc-speed { margin: .9rem auto .2rem; max-width: 420px; }
.page-hp-professor-picker .cfc-speed > label {
    display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600;
    color: var(--cfc-muted); margin-bottom: .4rem;
}
.page-hp-professor-picker .cfc-speed-val { margin-left: auto; font-weight: 800; color: var(--cfc-primary); font-variant-numeric: tabular-nums; }
.page-hp-professor-picker .cfc-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-professor-picker .cfc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--cfc-grad); border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(40, 20, 70, .8);
}
.page-hp-professor-picker .cfc-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #6b3fa0; border: 2px solid #fff;
}
.page-hp-professor-picker .cfc-range-ends {
    display: flex; justify-content: space-between; font-size: .72rem; color: var(--cfc-muted);
    opacity: .75; margin-top: .25rem;
}

/* ---- Winner reveal ------------------------------------------------------ */
.page-hp-professor-picker .cfc-modal-img,
.cfc-modal-img {
    width: 168px; height: 168px; display: inline-block; object-fit: contain;
    background: #f6ecd2; border-radius: 50%; padding: 14px;
    box-shadow: inset 0 0 0 3px rgba(107, 63, 160, .5);
}
.cfc-modal-ink {
    width: 168px; height: 168px; display: inline-block;
    background: #f6ecd2; border-radius: 50%; padding: 22px;
    box-shadow: inset 0 0 0 3px rgba(107, 63, 160, .5);
}
.cfc-modal-ink svg { width: 100%; height: 100%; display: block; }
.page-hp-professor-picker #winnerName {
    font-family: var(--cfc-display); font-weight: 400; letter-spacing: .02em; font-size: 2.1rem;
}
.page-hp-professor-picker h1,
.page-hp-professor-picker .cfc-kicker { font-family: var(--cfc-display); letter-spacing: .03em; }

/* ---- Professor chooser grid (settings) ---------------------------------- */
.page-hp-professor-picker .cfc-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.page-hp-professor-picker .cfc-chip {
    --chip-c: #6b3fa0; position: relative;
    border: 2px solid var(--cfc-border); background: var(--cfc-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-professor-picker .cfc-chip img,
.page-hp-professor-picker .cfc-chip-ink {
    width: 58px; height: 58px; display: block; margin: 0 auto .25rem; object-fit: contain;
    background: var(--cfc-plate); border-radius: 50%; padding: 5px;
    box-shadow: inset 0 0 0 1.5px rgba(107, 63, 160, .45);
}
.page-hp-professor-picker .cfc-chip-ink svg { width: 100%; height: 100%; display: block; }
.page-hp-professor-picker .cfc-chip-t { font-size: .68rem; font-weight: 700; color: var(--cfc-ink); display: block; line-height: 1.15; }
.page-hp-professor-picker .cfc-chip:hover { transform: translateY(-2px); border-color: var(--chip-c); }
.page-hp-professor-picker .cfc-chip.is-on { opacity: 1; border-color: var(--chip-c); box-shadow: 0 6px 16px -10px var(--chip-c); }
.page-hp-professor-picker .cfc-chip.is-custom { opacity: 1; border-style: dashed; border-color: var(--chip-c); }
.page-hp-professor-picker .cfc-chip-x {
    position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--cfc-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-professor-picker .cfc-custom-row { display: flex; gap: .4rem; margin-top: .6rem; }
.page-hp-professor-picker .cfc-custom-row input {
    flex: 1 1 auto; border: 1px solid var(--cfc-border); border-radius: 10px; padding: .5rem .7rem; font-size: .9rem;
    background: var(--cfc-surface); color: var(--cfc-ink);
}
.page-hp-professor-picker .cfc-custom-row button { border: 0; border-radius: 10px; padding: .5rem .9rem; font-weight: 700; color: #2a1d08; background: var(--cfc-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-professor-picker .cfc-content {
    color: var(--cfc-ink);
    background: linear-gradient(180deg, #ffffff 0%, #f7f2fb 100%);
    padding: 3.5rem 0 3.75rem; margin-top: 1rem;
    border-top: 1px solid var(--cfc-border);
}
body[data-theme].page-hp-professor-picker .cfc-content { background: var(--theme-bg); }
.page-hp-professor-picker .cfc-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.page-hp-professor-picker .cfc-content h2,
.page-hp-professor-picker .cfc-content h3 { color: var(--cfc-ink); }
.page-hp-professor-picker .cfc-content p,
.page-hp-professor-picker .cfc-content li { color: var(--cfc-muted); }
.page-hp-professor-picker .cfc-content strong { color: var(--cfc-ink); }
.page-hp-professor-picker .cfc-content em { color: var(--cfc-ink); font-style: italic; }
.page-hp-professor-picker .cfc-content a { color: var(--cfc-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.page-hp-professor-picker .cfc-content a:hover { color: #4a2a72; }

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

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

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

.page-hp-professor-picker .cfc-callout {
    margin-top: 1.4rem; border-left: 4px solid var(--cfc-primary); border-radius: 0 12px 12px 0;
    background: rgba(107, 63, 160, .08); padding: 1rem 1.15rem;
}
.page-hp-professor-picker .cfc-callout p { margin: 0; }

/* a card-deck grid — a different section shape from the map page's two-column
   split, so the Harry Potter pages do not read as one template */
.page-hp-professor-picker .cfc-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.4rem; }
.page-hp-professor-picker .cfc-deck-card {
    background: var(--cfc-surface); border: 1px solid var(--cfc-border); border-radius: 12px;
    padding: 1rem 1.1rem; border-top: 3px solid var(--cfc-accent);
}
.page-hp-professor-picker .cfc-deck-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; }
.page-hp-professor-picker .cfc-deck-card p:last-child { margin-bottom: 0; font-size: .9rem; }

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