/**
 * Analogy Game Mode - A:B :: C:?
 * Layout mirrors antinomy.css with two top pens + choices bottom pen.
 *
 * KEY DIFFERENCES FROM ANTINOMY:
 *  - No colored ground tints (no green/red overlays)
 *  - Uses analogy_pen.svg for both top pens
 *  - Top pens are 75% the size of Antinomy's top pens
 *  - Flying animal class is .analogy-flying-animal
 *
 * ============================================================================
 * FENCE CONTROL PHILOSOPHY (same as antinomy.css):
 *  - We control the fence IMG directly (not just the container)
 *  - The img uses absolute positioning with explicit pixel/percentage values
 * ============================================================================
 */

/* ============================================================================ */
/* LAYOUT - Overall page structure                                              */
/* ============================================================================ */

.analogy-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-md) 0;
    margin-top: 6.5vh;
    overflow: visible;
}

/* ============================================================================ */
/* CATEGORY ROW - AB and C pens side by side                                   */
/* ============================================================================ */

.analogy-layout .category-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Barely any space per user request */
    gap: clamp(5px, 1vw, 15px);
    width: 100%;
}

/* ============================================================================ */
/* PEN SURFACE BASE - Shared by all pens in this mode                          */
/* ============================================================================ */

.analogy-layout .pen-surface {
    position: relative;
    overflow: visible;
}

/* ============================================================================ */
/* FENCE CONTAINER RESET - Complete reset from pen.css                         */
/* ============================================================================ */

.analogy-layout .pen-fence {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 30;
}

/* ============================================================================ */
/* FENCE IMAGE                                                                  */
/* ============================================================================ */

.analogy-layout .pen-fence img {
    position: absolute !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
}

/* ============================================================================ */
/* AB PEN (left top pen — animals A and B)                                     */
/* ============================================================================ */

.analogy-layout .pen--ab {
    flex: 0 0 auto;
    /* Pull the right side inward toward the C pen */
    margin-right: -1vw;
}

/* AB PEN SIZE — Added .pen--ab scoping for selector strength */
.analogy-layout .pen--ab .pen-surface {
    width: clamp(350px, 42vw, 1200px);
    height: auto;
    aspect-ratio: 2.8;
}

/* AB FENCE IMAGE — updated scoping */
.analogy-layout .pen--ab .pen-fence img {
    left: 0% !important;
    top: 15% !important;
    transform-origin: center bottom !important;

    /* === FENCE WARP TOOL === */
    /* Shared variables for both Category pens (AB and C) */
    --warp-perspective: 600px;
    --warp-rotate-x: 0deg;
    --warp-skew-x: 0deg;
    --warp-scale-x: 1.55;
    --warp-scale-y: 0.98;

    transform: perspective(var(--warp-perspective)) scale(var(--warp-scale-x), var(--warp-scale-y)) rotateX(var(--warp-rotate-x)) skewX(var(--warp-skew-x)) !important;
}

/* AB PEN CONTENT - updated scoping */
.analogy-layout .pen--ab .pen-content {
    z-index: 50 !important;
}

/* ============================================================================ */
/* C PEN (right top pen — animal C + question mark)                            */
/* ============================================================================ */

.analogy-layout .pen--c {
    flex: 0 0 auto;
    /* Pull the left side inward toward the AB pen */
    margin-left: -1vw;
}

/* C PEN SIZE — same as AB pen */
.analogy-layout .pen--c .pen-surface {
    width: clamp(350px, 42vw, 1200px);
    height: auto;
    aspect-ratio: 2.8;
}

/* C FENCE IMAGE — updated scoping */
.analogy-layout .pen--c .pen-fence img {
    left: 0% !important;
    top: 15% !important;
    transform-origin: center bottom !important;

    /* === FENCE WARP TOOL — Inherits from .pen--ab logic or uses same variables === */
    --warp-perspective: 600px;
    --warp-rotate-x: 0deg;
    --warp-skew-x: 0deg;
    --warp-scale-x: 1.55;
    --warp-scale-y: 0.98;

    transform: perspective(var(--warp-perspective)) scale(var(--warp-scale-x), var(--warp-scale-y)) rotateX(var(--warp-rotate-x)) skewX(var(--warp-skew-x)) !important;
}

/* C PEN CONTENT - updated scoping */
.analogy-layout .pen--c .pen-content {
    z-index: 50 !important;
}

/* CATEGORY BOX GRIDS - Animals inside AB/C pens */
.analogy-layout .category-row .animal-grid {
    display: flex !important;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap !important;
    gap: 0.5vw;
    justify-content: center !important;
    align-items: flex-end !important;
}

/* QUESTION MARK SLOT (animation target) — mirrors antinomy.css */
.analogy-layout .question-mark-slot {
    font-size: clamp(80px, 16vw, 160px);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    /* FORCE WIDTH: Restore to 11vw and prevent inherited expansion from .animal-slot */
    width: 11vw !important;
    flex: 0 0 11vw !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    cursor: default !important;
}

.analogy-layout .question-mark-slot .question-mark-text {
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    transform: translateY(-20%);
    display: block;
}

/* ============================================================================ */
/* QUESTION MARK SLOT - ANIMAL PADDING / OFFSETS                                */
/* ============================================================================ */

/* When a SMALL animal enters the question mark slot */
.analogy-layout .animal-slot.question-mark-slot .animal-image--small {
    bottom: 1% !important;
}

/* When a MEDIUM animal enters the question mark slot */
.analogy-layout .animal-slot.question-mark-slot .animal-image--medium {
    bottom: -5% !important;
}

/* When a LARGE animal enters the question mark slot */
.analogy-layout .animal-slot.question-mark-slot .animal-image--large {
    bottom: -15% !important;
}

/* ANIMAL SLOTS inside category pens */
.analogy-layout .category-row .animal-slot {
    width: 100%;
    height: 100%;
    cursor: default;
    pointer-events: none;
}

/* RELOCATED: Top-row footprint alignment moved to bottom of file to fix cascade override */

/* ============================================================================ */
/* GROUND POSITIONING - Individual control for each pen                        */
/* ============================================================================ */

/* AB PEN GROUND — updated scoping */
.analogy-layout .pen--ab .pen-ground {
    top: 45%;
    left: 5%;
    right: 5%;
    bottom: -5%;
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
}

/* C PEN GROUND — updated scoping */
.analogy-layout .pen--c .pen-ground {
    top: 45%;
    left: 5%;
    right: 5%;
    bottom: -5%;
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
}

/* CHOICES PEN GROUND */
.analogy-layout .pen-surface--choices .pen-ground {
    top: 45%;
    left: 5%;
    right: 5%;
    bottom: -5%;
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
}

/* ============================================================================ */
/* ANIMAL POSITIONING - Pen-specific content areas                             */
/* ============================================================================ */

/* Category pens (ab/c) - updated scoping */
.analogy-layout .category-row .pen-content {
    position: absolute;
    top: 25%;
    /* Pushed inward from the edges to leave space for the question mark and outer animals */
    left: 20%;
    right: 20%;
    bottom: 11%;
}

/* ============================================================================ */
/* CHOICES PEN                                                                  */
/* ============================================================================ */

.analogy-layout .pen--choices {
    margin-top: calc(var(--space-md) + 5vh);
}

/* Hide choices label */
.analogy-layout .pen--choices .problem-label {
    display: none !important;
}

/* CHOICES PEN SIZE — identical to Antinomy */
.analogy-layout .pen-surface--choices {
    width: clamp(530px, 86vw, 1200px);
    height: auto;
    aspect-ratio: 4.8;
}

/* CHOICES PEN CONTENT POSITIONING */
.analogy-layout .pen-surface--choices .pen-content {
    position: absolute !important;
    top: 40% !important;
    left: 5% !important;
    right: 5% !important;
    bottom: -2% !important;
    padding: 0 !important;
    z-index: 200 !important;
    pointer-events: none;
}

/* CHOICES FENCE IMAGE */
.analogy-layout .pen-surface--choices .pen-fence img {
    transform: scale(2.65, 0.98) !important;
    left: 0% !important;
    top: 15% !important;
    transform-origin: center bottom !important;
}

/* CHOICES GRID */
.analogy-layout .pen-surface--choices .animal-grid {
    display: grid !important;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-template-rows: 1fr;
    gap: 3.5vw;
    justify-items: center;
    align-items: stretch;
    justify-content: center;
}

/* CHOICES ANIMAL SLOTS */
.analogy-layout .pen-surface--choices .animal-slot {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    pointer-events: auto !important;
    z-index: 210;
}

/* CHOICES ANIMAL GROUP */
.analogy-layout .pen-surface--choices .animal-group {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0% !important;
    display: block !important;
}

/* CHOICES ANIMAL IMAGE - absolute baseline */
.analogy-layout .pen-surface--choices .animal-slot .animal-image {
    position: absolute !important;
    bottom: 0% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

/* ============================================================================ */
/* GLOBAL ANIMAL BASELINE & SIZING CONTROLS                                    */
/* ============================================================================ */

/* Global position reset */
.analogy-layout .animal-slot .animal-image {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: block !important;
}

/* No global size offsets - isolated to Choices Pen only */

/* === GLOBAL SCALING === */
/* Force 1.25x scaling for all large animals in Analogy mode */
.analogy-layout .animal-image--large {
    transform: translateX(-50%) scale(1.25) !important;
    transform-origin: bottom center !important;
}

/* === CAT SPECIFIC SCALING (0.9x) === */
/* Large Cats: 1.25 * 0.9 = 1.125 */
.analogy-layout .animal-image--large.animal-image--cat {
    transform: translateX(-50%) scale(1.125) !important;
}

/* Medium Cats: 1.0 * 0.9 = 0.9 */
.analogy-layout .animal-image--medium.animal-image--cat {
    transform: translateX(-50%) scale(0.9) !important;
}

/* Global Baseline Offsets for Different Sizes (Applies to all pens) */
.analogy-layout .animal-slot .animal-image--large {
    bottom: -15% !important;
}

.analogy-layout .animal-slot .animal-image--small {
    bottom: 8% !important;
}

/* Choices Pen Specific Offsets (Depth Illusion & Stagger) */
/* (The global rules above handle the baseline now) */

/* ============================================================================ */
/* CHOICES PEN STAGGER - lift odd-position animals so they are not all in line  */
/* ============================================================================ */

/* Lift odd-slot medium/small animals */
.analogy-layout .pen-surface--choices .animal-slot:nth-child(odd) .animal-image--medium {
    bottom: 30% !important;
}

.analogy-layout .pen-surface--choices .animal-slot:nth-child(odd) .animal-image--small {
    bottom: 38% !important;
    /* 8% base + 30% lift */
}

/* Lift odd-slot large animals (offset from their -15% base) */
.analogy-layout .pen-surface--choices .animal-slot:nth-child(odd) .animal-image--large {
    bottom: 15% !important;
    /* -15% base + 30% lift */
    transform: translateX(-50%) scale(1.25) !important;
    transform-origin: bottom center !important;
}

/* ============================================================================ */
/* SELECTED ANIMAL                                                              */
/* ============================================================================ */

.analogy-layout .pen-surface--choices .animal-slot--selected {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    z-index: 100;
}

.analogy-layout .pen-surface--choices .animal-slot--selected:hover {
    transform: none;
}

/* ============================================================================ */
/* FLYING ANIMAL - SIZING RESETS                                                */
/* ============================================================================ */

.analogy-flying-animal {
    transform: none !important;
    /* Prevent double-scaling if scaling classes are on source */
    transform-origin: bottom center !important;
    object-fit: contain !important;
}

.analogy-flying-animal.animal-image--large {
    /* Maintain natural size in flight */
}