/* =============================================================================
   REGIME INTELLIGENCE — Fingerprint · Classifier · Activations
   ---------------------------------------------------------------------------
   Lives on the Personality page (Page 2). Three live readouts powered by the
   same /api/cockpit/latest payload that drives everything else:
     1. Engine Fingerprint   — bars for drift / lyap / entropy / martingale /
                                regime_stability / hybrid / js, each tagged
                                with the personalities that favour them
     2. Regime Classifier    — one-word label of the current macro regime
                                (Stable / Chaotic / Drift-driven / Entropic /
                                Volatile / Mixed) with a regime-specific
                                transition animation when it flips
     3. Activation Thresholds — SUPREME + HUNTER requirement panels with
                                per-condition met/unmet badges

   Plus the BONUS animation suite:
     • smooth bar width transitions
     • personality-score change pulse (gold flash on a card whose score
       jumped >5 points)
     • regime-shift shockwave (full-page ring + flash on regime flip)
     • cinematic active-persona fade (new active card glows briefly)
   ============================================================================= */

/* ── Palette aliased from cockpit.css for clarity ─────────────────────── */
:root {
    --rgm-gold:    #FFD86B;
    --rgm-mint:    #88D8B0;
    --rgm-cyan:    #5BB3F0;
    --rgm-rose:    #E04A6B;
    --rgm-violet:  #B095F5;
    --rgm-amber:   #EF9F27;
    --rgm-text:    #e0e0e0;
    --rgm-dim:     #8C8674;
    --rgm-bg:      rgba(0,0,0,0.35);
    --rgm-border:  rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────────────────────
   PANEL CONTAINER
   ───────────────────────────────────────────────────────────────────── */
.panel-regime {
    position: relative;
    margin-top: 22px;
}
.panel-regime .panel-head { margin-bottom: 18px; }


/* ─────────────────────────────────────────────────────────────────────────
   REGIME CLASSIFIER  — the big one-word label
   ───────────────────────────────────────────────────────────────────── */
.regime-classifier-wrap {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 20px;
    background:
        radial-gradient(60% 120% at 0% 50%, rgba(255,216,107,0.06), transparent 60%),
        linear-gradient(180deg, var(--rgm-bg), rgba(0,0,0,0.4));
    border: 1px solid rgba(255,216,107,0.22);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}
.regime-classifier-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rgm-dim);
}
.regime-classifier {
    flex: 1;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--rgm-text);
    text-shadow: 0 0 8px rgba(255,255,255,0.20);
    transition: color 0.6s ease,
                text-shadow 0.6s ease,
                transform 0.6s ease,
                letter-spacing 0.6s ease;
}

/* ── Regime-specific styles + transition animations ── */

/* Stable → mint, gentle glow + scale */
.regime-classifier.regime-stable {
    color: var(--rgm-mint);
    text-shadow: 0 0 12px rgba(136,216,176,0.50);
    transform: scale(1.02);
}

/* Chaotic → rose, pulsing */
.regime-classifier.regime-chaotic {
    color: var(--rgm-rose);
    text-shadow: 0 0 14px rgba(224,74,107,0.60);
    animation: rgmChaotic 1.2s ease-in-out;
}
@keyframes rgmChaotic {
    0%   { transform: scale(1.00); }
    50%  { transform: scale(1.08); text-shadow: 0 0 22px rgba(224,74,107,0.85); }
    100% { transform: scale(1.00); }
}

/* Drift-driven → gold, flickering */
.regime-classifier.regime-drift {
    color: var(--rgm-gold);
    text-shadow: 0 0 14px rgba(255,216,107,0.60);
    animation: rgmDrift 0.8s ease-in-out;
}
@keyframes rgmDrift {
    0%   { opacity: 0.95; }
    20%  { opacity: 0.45; text-shadow: 0 0 6px  rgba(255,216,107,0.30); }
    40%  { opacity: 1.00; text-shadow: 0 0 18px rgba(255,216,107,0.80); }
    70%  { opacity: 0.55; }
    100% { opacity: 0.95; }
}

/* Entropic → azure, letter-spacing shimmer */
.regime-classifier.regime-entropic {
    color: var(--rgm-cyan);
    text-shadow: 0 0 12px rgba(91,179,240,0.55);
    animation: rgmEntropic 1.4s ease-in-out;
}
@keyframes rgmEntropic {
    0%   { letter-spacing: 4px; }
    50%  { letter-spacing: 10px; text-shadow: 0 0 22px rgba(91,179,240,0.85); }
    100% { letter-spacing: 4px; }
}

/* Volatile → violet, shake */
.regime-classifier.regime-volatile {
    color: var(--rgm-violet);
    text-shadow: 0 0 12px rgba(176,149,245,0.55);
    animation: rgmVolatile 0.5s ease-in-out;
}
@keyframes rgmVolatile {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-3px); }
    40%  { transform: translateX(3px); }
    60%  { transform: translateX(-2px); }
    80%  { transform: translateX(2px); }
}

/* Mixed → neutral cream glow */
.regime-classifier.regime-mixed {
    color: #cfcfcf;
    text-shadow: 0 0 8px rgba(255,255,255,0.25);
}

/* Regime sub-line — context text under the classifier */
.regime-classifier-sub {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--rgm-dim);
    font-style: italic;
}


/* ─────────────────────────────────────────────────────────────────────────
   TWO-COLUMN LAYOUT — Fingerprint (left) · Activations (right)
   ───────────────────────────────────────────────────────────────────── */
.regime-twocol {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
}
@media (max-width: 980px) {
    .regime-twocol { grid-template-columns: 1fr; }
}

.regime-section-head {
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rgm-gold);
    margin-bottom: 10px;
    font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────────────────
   FINGERPRINT — bars for each input signal
   ───────────────────────────────────────────────────────────────────── */
#regimeFingerprint {
    background: var(--rgm-bg);
    border: 1px solid var(--rgm-border);
    padding: 14px 18px;
    border-radius: 10px;
}

.regime-row {
    display: grid;
    /* SIG · KAMI · TRACK · VAL · FAV */
    grid-template-columns: 100px 70px 1fr 50px 1.3fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 9px 0 9px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.regime-row:last-child {
    border-bottom: none;
}

.regime-sig {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rgm-text);
}

/* ── 神様 — The Kamisama column ────────────────────────────────────────
   The kanji sits in its own column between the technical signal name
   and the bar. Below it (row 2) sits the romaji + meaning in italic.
   Hover gently brightens the romaji line and scales the kanji 1.06×. */
.regime-kami {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    text-align: center;
    line-height: 1;
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', 'MS Mincho', 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--rgm-gold);
    text-shadow: 0 0 6px rgba(255,216,107,0.20);
    transition: transform 0.30s ease, text-shadow 0.30s ease, color 0.30s ease;
    cursor: default;
    user-select: none;
}
.regime-kami-line {
    grid-column: 2 / 4;        /* spans kanji + track columns */
    grid-row: 2;
    align-self: start;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    color: var(--rgm-gold);
    opacity: 0.55;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.30s ease;
    pointer-events: none;
}
.kami-em-dash {
    opacity: 0.6;
    margin: 0 2px;
}
/* Row-hover: bring the spirit forward, brighten its name */
.regime-row:hover .regime-kami {
    transform: scale(1.08);
    color: #FFE89E;
    text-shadow: 0 0 12px rgba(255,216,107,0.55);
}
.regime-row:hover .regime-kami-line {
    opacity: 1.0;
}

.regime-track {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.regime-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rgm-cyan), var(--rgm-mint));
    border-radius: 4px;
    /* SMOOTH bar transitions (BONUS B) */
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 6px rgba(91,179,240,0.45);
}

/* Bar tint changes by saturation — high value = gold, low = blue */
.regime-fill.fill-high {
    background: linear-gradient(90deg, var(--rgm-gold), #FFA500);
    box-shadow: 0 0 8px rgba(255,216,107,0.55);
}
.regime-fill.fill-mid {
    background: linear-gradient(90deg, var(--rgm-cyan), var(--rgm-mint));
}
.regime-fill.fill-low {
    background: linear-gradient(90deg, #4A5278, #6c757d);
    box-shadow: none;
}

.regime-val {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--rgm-text);
    text-align: right;
    font-weight: 600;
}

.regime-fav {
    grid-column: 5;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 10px;
    color: var(--rgm-gold);
    opacity: 0.85;
    letter-spacing: 0.5px;
    line-height: 1.3;
}


/* ─────────────────────────────────────────────────────────────────────────
   ACTIVATION PANELS — SUPREME + HUNTER thresholds
   ───────────────────────────────────────────────────────────────────── */
.regime-activations {
    display: flex; flex-direction: column; gap: 14px;
}

#supremeActivation, #hunterActivation {
    background: var(--rgm-bg);
    border: 1px solid var(--rgm-border);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 12px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
#supremeActivation.is-firing {
    border-color: var(--rgm-gold);
    box-shadow: 0 0 16px rgba(255,216,107,0.30);
}
#hunterActivation.is-firing {
    border-color: var(--rgm-rose);
    box-shadow: 0 0 16px rgba(224,74,107,0.30);
}

.act-title {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rgm-gold);
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(255,216,107,0.30);
}
#hunterActivation .act-title { color: var(--rgm-rose); text-shadow: 0 0 6px rgba(224,74,107,0.30); }

.act-status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 2px 8px;
    border-radius: 999px;
}
.act-status.dormant {
    background: rgba(108,117,125,0.20);
    color: #adb5bd;
    border: 1px solid rgba(108,117,125,0.40);
}
.act-status.firing {
    background: rgba(255,216,107,0.18);
    color: var(--rgm-gold);
    border: 1px solid var(--rgm-gold);
    animation: actPulse 1.6s ease-in-out infinite;
}
#hunterActivation .act-status.firing {
    background: rgba(224,74,107,0.20);
    color: var(--rgm-rose);
    border-color: var(--rgm-rose);
}
@keyframes actPulse {
    0%, 100% { opacity: 1.0; }
    50%      { opacity: 0.55; }
}

.act-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.act-row .act-sig   { color: var(--rgm-text); }
.act-row .act-req   { color: var(--rgm-dim); }
.act-row .act-cur   { font-weight: 700; }
.act-row.met    .act-cur { color: var(--rgm-mint); }
.act-row.unmet  .act-cur { color: var(--rgm-rose); }
.act-row .act-bullet {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 4px;
}
.act-row.met   .act-bullet { background: var(--rgm-mint); box-shadow: 0 0 4px var(--rgm-mint); }
.act-row.unmet .act-bullet { background: var(--rgm-rose); }


/* ─────────────────────────────────────────────────────────────────────────
   TOOLTIP — Why-low explanation on persona cards
   ───────────────────────────────────────────────────────────────────── */
.persona-card[title] {
    cursor: help;
    position: relative;
}
.persona-card[title]:hover {
    box-shadow: 0 0 14px rgba(255,216,107,0.30) !important;
    border-color: rgba(255,216,107,0.50) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   BONUS ANIMATION B1 — personality score change pulse
   ───────────────────────────────────────────────────────────────────── */
.persona-card.score-jumped {
    animation: scoreJump 0.9s ease;
}
@keyframes scoreJump {
    0%   { box-shadow: 0 0 0 0 rgba(255,216,107,0); }
    30%  { box-shadow: 0 0 18px 4px rgba(255,216,107,0.55);
           transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(255,216,107,0);
           transform: scale(1); }
}


/* ─────────────────────────────────────────────────────────────────────────
   BONUS ANIMATION B2 — cinematic active-persona fade
   ───────────────────────────────────────────────────────────────────── */
.persona-card.persona-newly-active {
    animation: personaNewActive 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes personaNewActive {
    0%   { transform: scale(1.00);
           box-shadow: 0 0 0 0   rgba(255,216,107,0); }
    25%  { transform: scale(1.08);
           box-shadow: 0 0 32px 10px rgba(255,216,107,0.55); }
    100% { transform: scale(1.00);
           box-shadow: 0 0 0 0   rgba(255,216,107,0); }
}


/* ─────────────────────────────────────────────────────────────────────────
   BONUS ANIMATION B3 — regime-shift shockwave (full-page ring)
   ───────────────────────────────────────────────────────────────────── */
.regime-shockwave-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}
.regime-shockwave {
    position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin-left: -20px; margin-top: -20px;
    border-radius: 50%;
    border: 3px solid var(--rgm-gold);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.regime-shockwave.active {
    animation: rgmShock 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rgmShock {
    0%   { transform: scale(0.3); opacity: 0; }
    10%  { opacity: 0.95; }
    100% { transform: scale(50); opacity: 0; }
}

/* Tint the shockwave by regime */
.regime-shockwave.shock-stable   { border-color: var(--rgm-mint);   box-shadow: 0 0 28px rgba(136,216,176,0.65); }
.regime-shockwave.shock-chaotic  { border-color: var(--rgm-rose);   box-shadow: 0 0 28px rgba(224,74,107,0.65); }
.regime-shockwave.shock-drift    { border-color: var(--rgm-gold);   box-shadow: 0 0 28px rgba(255,216,107,0.65); }
.regime-shockwave.shock-entropic { border-color: var(--rgm-cyan);   box-shadow: 0 0 28px rgba(91,179,240,0.65); }
.regime-shockwave.shock-volatile { border-color: var(--rgm-violet); box-shadow: 0 0 28px rgba(176,149,245,0.65); }
.regime-shockwave.shock-mixed    { border-color: #cfcfcf;            box-shadow: 0 0 22px rgba(255,255,255,0.45); }


/* Regime label entry fade (when the panel first paints) */
.regime-classifier {
    opacity: 0;
    animation: rgmFadeIn 0.6s ease-out 0.2s forwards;
}
@keyframes rgmFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}