/* =============================================================================
   chaosRealm.css — compact, single-screen layout + polish for the Chaos Realm tab.

   Goals:
     - The whole tab fits the available viewport height (no page scroll) by filling
       the flex column the tab system already provides (mirrors the bloodline tab).
     - 100 regular castles + the Supreme Chaos apex render as a tight, label-free
       pyramid whose rows distribute across whatever height remains.
   Motion (idle apex breathe, the "next target" ring pulse) animates transform/opacity
   only and is gated by html[data-fx] + prefers-reduced-motion, per docs/how-to-make-effects.md.
   ============================================================================= */

/* ── Make the tab fill the available height instead of scrolling the page ───── */
.main-content-wrapper:has(#chaosRealm.active) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.main-content-wrapper:has(#chaosRealm.active) .main-layout,
.main-content-wrapper:has(#chaosRealm.active) .main-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#chaosRealm.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cr-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
    padding: 6px 8px;
}

/* ── Header: chaos points + upgrades ───────────────────────────────────────── */
.cr-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(192, 57, 43, 0.35);
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.30), rgba(40, 5, 5, 0.35));
}
.cr-points { display: flex; flex-direction: column; line-height: 1.05; }
.cr-points__label {
    font-size: 0.56rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c0392b;
}
.cr-points__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ui-gold, #f39c12);
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.45);
}

/* ── "Next target" strip — challenge the next castle without hunting the map ── */
.cr-target {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(192, 57, 43, 0.25);
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.78rem;
}
.cr-target__tag {
    font-size: 0.56rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #922b21;
    flex-shrink: 0;
}
.cr-target__name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: #e74c3c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cr-target__tier {
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #922b21;
    flex-shrink: 0;
}

/* ── Arena — the castle pyramid ────────────────────────────────────────────── */
.cr-arena {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 8px 10px;
    border-radius: 12px;
    overflow: hidden;
    /* Isolate the heavy castle subtree's layout & paint from the rest of the document, so
       unrelated work (e.g. the battle modal opening/updating over this tab) doesn't relayout
       or repaint the pyramid. */
    contain: layout paint;
    border: 1px solid rgba(192, 57, 43, 0.30);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(139, 26, 26, 0.22), transparent 62%),
        linear-gradient(180deg, rgba(20, 0, 0, 0.55) 0%, rgba(40, 5, 5, 0.35) 100%);
}
.cr-arena__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, rgba(231, 76, 60, 0.08), transparent 70%);
}

/* Apex — the Supreme Chaos finale, standing alone above the gauntlet. */
.cr-apex {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
}
.cr-apex__label {
    font-size: 0.56rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ui-gold, #f39c12);
    text-shadow: 0 0 8px rgba(243, 156, 18, 0.6);
    margin-bottom: 1px;
}
/* Static glow behind the finale (painted once), so the breathe animation can stay pure
   transform — animating a drop-shadow filter would re-rasterize the node every frame. */
.cr-apex::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 58%;
    width: 74px;
    height: 74px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.34), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.cr-apex__label,
.cr-apex .cr-cell { position: relative; z-index: 1; }
/* Gentle idle "aliveness" on the finale — transform only (GPU-cheap). */
.cr-apex__castle {
    transform-box: fill-box;
    transform-origin: 50% 60%;
    will-change: transform;   /* own compositor layer → breathe never repaints the pyramid */
    animation: cr-breathe 3s ease-in-out infinite;
}
@keyframes cr-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* Regular castles distributed across the remaining height as a stepped pyramid. */
.cr-pyramid {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.cr-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
}

/* ── Castle cell ───────────────────────────────────────────────────────────── */
.cr-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.32;
    transition: transform 0.12s ease-out, opacity 0.12s ease-out, filter 0.12s ease-out;
}
.cr-cell svg { display: block; }
.cr-cell:hover {
    opacity: 1;
    transform: translateY(-2px) scale(1.14);
    filter: drop-shadow(0 0 6px rgba(231, 76, 60, 0.75));
    z-index: 3;
}
.cr-cell--done { opacity: 0.6; }
.cr-cell--finale { opacity: 0.92; }
.cr-cell--current {
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(231, 76, 60, 0.95));
}
/* Pulsing ring on the next castle to fight — draws the eye without a label. */
.cr-cell--current::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 8px;
    border: 1.5px solid rgba(231, 76, 60, 0.9);
    opacity: 0.25;
    pointer-events: none;
    will-change: transform, opacity;   /* isolate the ring's repaint from its neighbours */
    animation: cr-ring 1.6s ease-in-out infinite;
}
@keyframes cr-ring {
    0%, 100% { opacity: 0.22; transform: scale(0.96); }
    50%      { opacity: 0.9;  transform: scale(1.06); }
}
.cr-cell__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-weight: 800;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* ── Footer — overall conquest progress ────────────────────────────────────── */
.cr-footer { flex-shrink: 0; }
.cr-progress {
    height: 9px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(192, 57, 43, 0.30);
}
.cr-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #922b21, #e74c3c);
    transition: width 0.4s ease-out;
}
.cr-progress__label {
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 1px;
    color: #922b21;
    margin-top: 3px;
}

/* ── Narrow screens: shrink the regular castles so the widest row still fits
      (the apex finale keeps its size). ──────────────────────────────────────── */
@media (max-width: 560px) {
    .cr-row { gap: 2px; }
    .cr-cell:not(.cr-cell--finale) svg { width: 17px; height: 17px; }
}

/* ── Motion gating (belt-and-braces; JS never mounts these under off/reduced) ─ */
html[data-fx="off"] .cr-apex__castle,
html[data-fx="off"] .cr-cell--current::after,
html[data-fx="reduced"] .cr-apex__castle,
html[data-fx="reduced"] .cr-cell--current::after {
    animation: none !important;
    transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .cr-apex__castle,
    .cr-cell--current::after {
        animation: none !important;
    }
}