/**
 * Antinomy Game Mode - MIGRATED FROM ANTINOMY2
 * "Choose the option that matches the green vs red boxes"
 * 
 * ============================================================================
 * FENCE CONTROL PHILOSOPHY:
 * - We control the fence IMG directly (not just the container)
 * - The img uses absolute positioning with explicit pixel/percentage values
 * - No inherited constraints from pen.css affect the visual sizing
 * ============================================================================
 */

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

.antinomy-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-md) 0;
    margin-top: 6.5vh;
    /* Increased to 8vh per user request */
    /* Added to push layout down after header text removal */
    overflow: visible;
}

/* ============================================================================ */
/* CATEGORY ROW - Green and Red boxes side by side                              */
/* ============================================================================ */

.antinomy-layout .category-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(30px, 6vw, 100px);
    width: 100%;
}

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

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

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

.antinomy-layout .pen-fence {
    /* Remove ALL inherited positioning */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;

    /* The container is just a reference frame */
    /* The REAL sizing happens on the img below */
    pointer-events: none;
    z-index: 30;
}

/* ============================================================================ */
/* FENCE IMAGE - This is where you control the actual fence appearance          */
/* ============================================================================ */

.antinomy-layout .pen-fence img {
    /* CRITICAL: Use absolute positioning on the img itself */
    position: absolute !important;

    /* Reset all inherited sizing */
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
}

/* ============================================================================ */
/* GREEN BOX                                                                    */
/* ============================================================================ */

.antinomy-layout .pen--green {
    flex: 0 0 auto;
}

/* GREEN BOX SIZE */
.antinomy-layout .pen-surface--green {
    width: clamp(400px, 53vw, 1200px);
    height: auto;
    aspect-ratio: 3.75;
    /* Expanded by 25% (was 3.0) */
}

/* GREEN FENCE IMAGE - EDIT THESE VALUES */
.antinomy-layout .pen-surface--green .pen-fence img {
    /* === MANUAL FENCE CONTROLS === */
    /* 1. scale(x, y) -> Increase numbers to make fence bigger. */
    /* 2. left/top -> Move fence position. */

    transform: scale(2.1, 1.2) !important;
    /* Widened X significantly to fit 4 columns */
    left: 0% !important;
    top: 20% !important;

    /* ============================= */

    /* transform-origin determines the anchor point for scaling */
    transform-origin: center center !important;
}

/* GREEN TINT OVERLAY */
.antinomy-layout .pen-surface--green .pen-ground::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
            rgba(20, 90, 30, 0.75) 0%,
            rgba(10, 70, 20, 0.65) 100%);
    pointer-events: none;
}

/* RED TINT OVERLAY */
.antinomy-layout .pen-surface--red .pen-ground::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
            rgba(160, 20, 20, 0.75) 0%,
            rgba(130, 10, 10, 0.65) 100%);
    pointer-events: none;
}

/* GREEN PEN CONTENT - Ensure animals are above fence */
.antinomy-layout .pen-surface--green .pen-content {
    z-index: 50 !important;
    /* Above fences (fence is z-index: 30) */
}

/* GREEN BORDER GLOW */
.antinomy-layout .pen-surface--green .pen-fence {
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.6));
}

/* GREEN LABEL */
.antinomy-layout .pen--green .problem-label {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
}

/* ============================================================================ */
/* RED BOX                                                                      */
/* ============================================================================ */

.antinomy-layout .pen--red {
    flex: 0 0 auto;
}

/* RED BOX SIZE */
.antinomy-layout .pen-surface--red {
    width: clamp(400px, 53vw, 1200px);
    height: auto;
    aspect-ratio: 3.75;
    /* Expanded by 25% (was 3.0) */
}

/* RED FENCE IMAGE - EDIT THESE VALUES */
.antinomy-layout .pen-surface--red .pen-fence img {
    /* === MANUAL FENCE CONTROLS === */
    /* 1. scale(x, y) -> Increase numbers to make fence bigger. */
    /* 2. left/top -> Move fence position. */

    transform: scale(2.1, 1.2) !important;
    /* Widened X significantly to fit 4 columns */
    left: 0% !important;
    top: 20% !important;

    /* ============================= */

    /* transform-origin determines the anchor point for scaling */
    transform-origin: center center !important;
}



/* RED BORDER GLOW */
.antinomy-layout .pen-surface--red .pen-fence {
    filter: drop-shadow(0 0 6px rgba(229, 115, 115, 0.6));
}

/* RED PEN CONTENT - Ensure animals are above fence */
.antinomy-layout .pen-surface--red .pen-content {
    z-index: 50 !important;
    /* Above fences (fence is z-index: 30) */
}

/* RED LABEL */
.antinomy-layout .pen--red .problem-label {
    background: linear-gradient(135deg, #E57373, #EF5350);
    color: white;
}

/* ============================================================================ */
/* CATEGORY BOX GRIDS - Animals inside green/red boxes                          */
/* ============================================================================ */

.antinomy-layout .pen-surface--green .animal-grid,
.antinomy-layout .pen-surface--red .animal-grid {
    display: flex !important;
    width: 100%;
    height: 100%;
    /* Switched to FLEX to prevent wrapping of Question Mark */
    flex-wrap: nowrap !important;
    gap: 0.5vw;
    justify-content: center !important;
    align-items: flex-end !important;
}

/* RED BOX OVERRIDE - Removed grid-template-columns as we are using Flex */
/* .antinomy-layout .pen-surface--red .animal-grid { } -- REMOVED */



/* QUESTION MARK ADDITION */
/* QUESTION MARK SLOT (REAL ELEMENT) */
.antinomy-layout .question-mark-slot {
    /* DEBUG REMOVED */

    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);

    /* Simulate Animal Slot Positioning */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Explicit width to match .animal-slot (11vw) so it takes up space in Flex row */
    width: 11vw;
    flex: 0 0 11vw;
    height: 100%;
    padding-bottom: 0;

    /* Font style - MOVED TO SPAN */
    /* Transform REMOVED to keep container as valid Logic Target */
    cursor: default;
}

.antinomy-layout .question-mark-slot .question-mark-text {
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    transform: translateY(-20%);
    /* Visual Lift ONLY - Logic Target stays at bottom */
    display: block;
}

/* FLYING SIZING - MATCH ANOMALY/BASE SIZING */
/* FLYING SIZING - MATCH ANOMALY/BASE SIZING */
.antinomy-flying-animal.animal-image--small {
    /* Remove constraints so JS-calculated pixel size applies fully */
    max-height: none !important;
    max-width: none !important;
    transform: none !important;
}

.antinomy-flying-animal.animal-image--medium {
    /* Remove constraints so JS-calculated pixel size applies fully */
    max-height: none !important;
    max-width: none !important;
    transform: none !important;
}

.antinomy-flying-animal.animal-image--large {
    /* Remove constraints */
    max-height: none !important;
    max-width: none !important;

    /* CRITICAL FIX: The JS getBoundingClientRect() already captures the 1.25x scale.
       Do NOT apply scale(1.25) again via CSS, or it will double-scale. */
    transform: none !important;
    transform-origin: bottom center !important;
}

.antinomy-layout .pen-surface--green .animal-slot,
.antinomy-layout .pen-surface--red .animal-slot {
    width: 100%;
    height: 100%;
    cursor: default;
    pointer-events: none;
}

/* STAGGERED ALIGNMENT (User Request) */
/* Lift every even-numbered animal by 35% to create a zig-zag */
/* STAGGERED ALIGNMENT (User Request: Reversed Order) */
/* Lift every ODD-numbered animal by 35% so the even ones (incl. Q-Mark) stay low */
.antinomy-layout .pen-surface--green .animal-slot:nth-child(odd) .animal-image,
.antinomy-layout .pen-surface--red .animal-slot:nth-child(odd) .animal-image {
    margin-bottom: 35% !important;
}

/* ============================================================================ */
/* CHOICES PEN - The answer choices                                             */
/* ============================================================================ */

.antinomy-layout .pen--choices {
    margin-top: calc(var(--space-md) + 5vh);
    /* Moved down ~5% visually */
}

/* HIDE CHOICES LABEL */
.antinomy-layout .pen--choices .problem-label {
    display: none !important;
}

/* CHOICES PEN SIZE */
.antinomy-layout .pen-surface--choices {
    width: clamp(530px, 86vw, 1200px);
    height: auto;
    aspect-ratio: 4.8;
    /* Matches height of Green/Red pens (narrower but taller ratio) */
}

/* CHOICES PEN CONTENT POSITIONING - Global Baseline Control */
/* CHOICES PEN CONTENT POSITIONING - Matching Green/Red */
.antinomy-layout .pen-surface--choices .pen-content {
    position: absolute !important;
    top: 40% !important;
    /* Match Green/Red Content top */
    left: 5% !important;
    right: 5% !important;
    bottom: -2% !important;
    /* Lowered from 8% -> -2% per user request "too high" */
    /* Match Green/Red Content bottom */
    padding: 0 !important;
    z-index: 200 !important;
    /* Boosted significantly to ensure Clickability */
    pointer-events: none;
    /* Let clicks pass through grid to slots */
}

/* CHOICES FENCE IMAGE - EDIT THESE VALUES */
.antinomy-layout .pen-surface--choices .pen-fence img {
    /* === MANUAL FENCE CONTROLS (USER REQUEST) === */
    /* instructions: */
    /* 1. scale(x, y) -> Increase numbers to make fence bigger. */
    /* 2. left/top -> Move fence position. */
    /*    - top: Negative moves UP, Positive moves DOWN. */

    /* MATH: (AR 4.8 / AR 3.0) * 1.6 ~= 2.6 */
    transform: scale(2.65, 0.98) !important;
    left: 0% !important;
    top: 15% !important;
    /* Lowered from -15% based on feedback */

    /* =========================================== */

    transform-origin: center bottom !important;
}

/* CHOICES GRID - Revert to Grid for correct spacing */
.antinomy-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;
    /* Ensure equal height rows */
    gap: 3.5vw;
    justify-items: center;
    align-items: stretch;
    /* Stretch slots to full height so bottom:25% is consistent */
    justify-content: center;
}

/* CHOICES ANIMAL SLOTS - Fill Grid Cell */
.antinomy-layout .pen-surface--choices .animal-slot {
    width: 100%;
    height: 100%;
    /* Removed min-height: 30vh to allow scaling */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    pointer-events: auto !important;
    /* Re-enable clicks on slots */
    z-index: 210;
    /* Above content container */
}

/* Reset animal-group to remove Flexbox and use Absolute Bottom */
.antinomy-layout .pen-surface--choices .animal-group {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0% !important;
    /* MATCH CONTENT BOTTOM */

    /* Disable Flexbox - Use Direct Positioning */
    display: block !important;
}

/* Position animals - ABSOLUTE TRUTH ALIGNMENT */
/* All animals must sit at exactly bottom: 0 relative to the slot */

.antinomy-layout .pen-surface--choices .animal-slot .animal-image {
    position: absolute !important;
    bottom: 0% !important;
    /* STRICT BASELINE */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: auto !important;
    /* CRITICAL FIX: Capture clicks on the image itself since it sticks out of the slot */
}

/* ============================================================================ */
/* ANIMAL BASELINE CONTROLS - ADJUST VERTICAL POSITIONS HERE                    */
/* This is where you can shift large/medium/small animals individually           */
/* ============================================================================ */

/* ============================================================================ */
/* ANIMAL BASELINE & SIZING CONTROLS - ANOMALY BASELINE MATCH                   */
/* ============================================================================ */

/* Global Position Reset */
.antinomy-layout .animal-slot .animal-image {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    /* Height is inherited from animal-slot.css (Base) */
    display: block !important;
}

/* Large Animals - Match Anomaly Scaling (1.25x) */
.antinomy-layout .animal-slot .animal-image--large {
    transform: translateX(-50%) scale(1.25) !important;
    transform-origin: bottom center !important;
    bottom: -15% !important;
}

/* Medium Animals */
.antinomy-layout .animal-slot .animal-image--medium {
    bottom: 0% !important;
}

/* Small Animals */
.antinomy-layout .animal-slot .animal-image--small {
    bottom: 8% !important;
}

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

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

/* --- OVERRIDES TO FIX RED PEN BASELINES (Specific shift) --- */
/* The Red Pen needs to be shifted down globally, handled by .pen-content rule at end of file */
/* But we don't need distinct per-animal overrides here anymore since we use uniform VH */


/* --- CHOICES PEN ANIMALS - AUTOMATIC ALIGNMENT --- */
/* Now handled by the global absolute rule above */
/* Individual tweaks can be added here if needed, but baseline is enforced */

/* Fix: Large animals sit too high due to internal padding. Pull them down. */
.antinomy-layout .pen-surface--choices .animal-slot .animal-image--large {
    transform: translateX(-50%) scale(1.25) !important;
    transform-origin: bottom center !important;
    bottom: -15% !important;
    /* Pulled down to match smaller animals and global scaling */
}


/* SELECTED ANIMAL */
.antinomy-layout .pen-surface--choices .animal-slot--selected {
    /* transform: translateY(-28vh);  <-- REMOVED to fix duplication */
    /* opacity is handled by JS now */
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    z-index: 100;
}

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

/* ============================================================================ */
/* VS INDICATOR                                                                 */
/* ============================================================================ */

.antinomy-layout .vs-indicator {
    display: none !important;
    /* USER REQUEST: Remove VS element */
}

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

/* GREEN BOX GROUND */
.antinomy-layout .pen-surface--green .pen-ground {
    /* === MANUAL GROUND CONTROLS === */
    top: 42%;
    left: 5%;
    right: 5%;
    bottom: -15%;
    /* ============================== */
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
}

/* RED BOX GROUND */
.antinomy-layout .pen-surface--red .pen-ground {
    /* === MANUAL GROUND CONTROLS === */
    top: 42%;
    left: 5%;
    right: 5%;
    bottom: -15%;
    /* ============================== */
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
}

/* CHOICES BOX GROUND */
.antinomy-layout .pen-surface--choices .pen-ground {
    /* === MANUAL GROUND CONTROLS === */
    /* Adjust 'top', 'left', 'right', 'bottom' to shape the dirt */
    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 (green/red) - animals inside ground area */
.antinomy-layout .pen-surface--green .pen-content,
.antinomy-layout .pen-surface--red .pen-content {
    position: absolute;
    top: 25%;
    left: 10%;
    right: 10%;
    bottom: 11%;
    /* Visual Correction: Lowered slightly from 13% -> 11% */
}

/* ============================================================================ */
/* RED PEN STAGGER FIX (Moved to end for cascade precedence)                    */
/* ============================================================================ */

/* Decrease stagger lift for Red Pen because 3-col slots are wider */
/* 4 cols (25%) -> 35% margin. 3 cols (33%) -> ~26% margin to equal same px height */
/* User requested "another magnitude or two" lower -> trying 12% */
/* REVERT: Restoring stagger to 26% (proportional to 3-col width) */
.antinomy-layout .pen-surface--red .animal-slot:nth-child(odd) .animal-image {
    margin-bottom: 26% !important;
}

/* ============================================================================ */
/* RED PEN BASELINE SHIFT (Move entire group down together)                     */
/* ============================================================================ */

/* Override shared content rule (11%) -> Lower entire pen content significantly */
.antinomy-layout .pen-surface--red .pen-content {
    bottom: -1% !important;
}