/**
 * Antithesis Game Mode - COMPLETE SELF-CONTAINED STYLES
 * "Choose the option that matches the pattern"
 *
 * ============================================================================
 * ALL ANTITHESIS CONTROLS ARE IN THIS FILE
 * ============================================================================
 */

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

.antithesis-layout {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* === EDIT THESE === */
    gap: var(--space-lg);
    /* Space between box row and options */
    width: 100%;
    padding: var(--space-md) 0;
    margin-top: 5vh;
    /* ================== */

    overflow: visible;
}

/* ============================================================================ */
/* BOX ROW - The 3 sequence boxes                                               */
/* ============================================================================ */

.antithesis-layout .box-row {
    display: flex;
    align-items: center;
    justify-content: center;

    /* === EDIT THESE === */
    /* Reduced gap by half per user request from previous (was 120-300) */
    gap: clamp(60px, 9vw, 150px);
    /* Drop the boxes down per user request */
    margin-top: 5vh;
    /* ================== */

    width: 100%;
}

/* ============================================================================ */
/* SEQUENCE BOXES - Box 1, Box 2 (question), Box 3                              */
/* Inded to match Anomaly "Does Not Belong" Pen Size                            */
/* ============================================================================ */

.antithesis-layout .pen--box1,
.antithesis-layout .pen--box2,
.antithesis-layout .pen--box3 {
    flex: 0 0 auto;
}

/* BOX SIZE - Matches Anomaly "Does Not Belong" Pen */
.antithesis-layout .pen-surface--box {
    /* Anomaly Out Pen Size logic: width: clamp(160px, 24vw, 560px); ratio: 0.8 */
    width: clamp(140px, 22vw, 400px);
    /* Slightly reduced max-width to fit 3 in row */
    height: auto;
    aspect-ratio: 0.8;
    overflow: visible;
    position: relative;
}

/* BOX FENCE - Matches Anomaly "Does Not Belong" Pen style */
.antithesis-layout .pen-surface--box .pen-fence {
    /* Reset inherited styles */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1;
    /* Ensure visible */
    pointer-events: none;
    z-index: 30;
}

.antithesis-layout .pen-surface--box .pen-fence img {
    /* Anomaly Out Pen Fence Scaling */
    position: absolute !important;
    max-width: none !important;
    max-height: none !important;

    /* MATCHING ANOMALY "Does Not Belong" SCALING */
    width: 155% !important;
    height: 165% !important;
    left: -27.5% !important;
    top: -52% !important;
    transform: none !important;
    /* Reset existing transforms */

    object-fit: fill !important;
}

/* GROUND POSITIONING - Matches Anomaly "Does Not Belong" Pen */
.antithesis-layout .pen-surface--box .pen-ground {
    /* Match Anomaly Out Pen Ground positioning */
    top: 29%;
    left: 5%;
    right: 5%;
    bottom: 15%;

    /* Match Anomaly Ground Scaling logic */
    transform: scaleX(1.6) scaleY(0.8) translateY(-58%);
    transform-origin: center bottom;
    z-index: 9;

    /* Match Anomaly Ground Clip Path (Trapezoid from Anomaly.css) */
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

/* BOX CONTENT */
.antithesis-layout .pen-surface--box .pen-content {
    /* Full area matching Anomaly logic */
    position: absolute;
    /* Revert to absolute for precise layering */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: block;
    pointer-events: none;
}


/* ANIMAL SLOT in boxes */
.antithesis-layout .pen-surface--box .animal-slot {
    width: 100%;
    /* Use Anomaly height/positioning logic */
    height: 120%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    position: absolute;
    /* FIX: Lift slot up to match the "shifted" ground/fence */
    bottom: 45% !important;
    /* Match Anomaly base */
    left: 0;
    z-index: 40;
}

/* ANIMAL SLOT GROUPING - FIX: USE BLOCK TO ALLOW ABSOLUTE POSITIONING */
.antithesis-layout .animal-group {
    /* Switch to Block to support Antinomy "Absolute Truth" logic */
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* ============================================================================ */
/* ANIMAL BASELINE & SIZING CONTROLS - ANTINOMY STANDARD                        */
/* ============================================================================ */

/* Global Position Reset for Antithesis layout */
.antithesis-layout .animal-image {
    position: absolute !important;
    left: 50% !important;
    /* Start centered */
    transform: translateX(-50%) !important;
    width: auto !important;
    /* Use natural width */
    /* Height is inherited from animal-slot.css (Base) - DO NOT OVERRIDE HEIGHT */
    display: block !important;
    pointer-events: none;
}

/* Large Animals - Match Antinomy Scaling (1.25x) */
.antithesis-layout .animal-image--large {
    transform: translateX(-50%) scale(1.25) !important;
    transform-origin: bottom center !important;
    bottom: -15% !important;
    /* Pull down to account for scale */
}

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

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

/* Box 1 & 3 Centering Overrides */
.antithesis-layout .pen-surface--box .animal-image--large {
    bottom: -5% !important;
}

.antithesis-layout .pen-surface--box .animal-image--medium {
    bottom: 5% !important;
}

/* OPTIONS PEN ANIMAL SIZING - Explicit per-size heights so all Antithesis questions
   (including Sample and Q1, which lack .antithesis-group-layout) render at the
   correct size. Heights mirror the values used in the group-layout section below. */
.antithesis-layout .pen-surface--choices .animal-image--large {
    height: 28vh !important;
    max-height: 28vh !important;
    /* 
     * USER INSTRUCTION: You can modify the baseline bottom offset for all animals
     * in the choices box here. Increase the percentage to move them higher up.
     */
    bottom: 31% !important;
}

.antithesis-layout .pen-surface--choices .animal-image--medium {
    height: 24vh !important;
    max-height: 24vh !important;
    bottom: 31% !important;
}

.antithesis-layout .pen-surface--choices .animal-image--small {
    height: 13vh !important;
    max-height: 13vh !important;
    bottom: 31% !important;
}


/* === CAT SPECIFIC SCALING (0.9x) === */
/* Large Cats: 1.25 * 0.9 = 1.125 */
.antithesis-layout .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 */
.antithesis-layout .animal-image--medium.animal-image--cat {
    transform: translateX(-50%) scale(0.9) !important;
    transform-origin: bottom center !important;
}


/* Middle box (Box 2 - Question) */
/* .antithesis-layout .pen--box2 .pen-surface--box {}  <-- Removed empty ruleset */

/* QUESTION MARK SLOT - Matches Antinomy Logic */
.antithesis-layout .question-mark-slot {
    font-size: clamp(80px, 14vw, 140px);
    /* Slightly smaller than Antinomy due to box size */
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Bottom align match */
    width: 100%;
    height: 100%;
    padding-bottom: 0;

    /* Position absolutely like animal slots */
    position: absolute;
    /* FIX: Match animal slot lift */
    bottom: 45% !important;
    left: 0;
    z-index: 45;


    cursor: default;
}

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


/* ============================================================================ */
/* ARROW INDICATORS                                                             */
/* ============================================================================ */

.antithesis-layout .arrow-indicator {
    /* Increased size */
    font-size: clamp(3rem, 5vw, 5rem);
    color: var(--dirt-secondary);
    z-index: 100;

    /* Lift arrow to visual middle of the shifted pens */
    /* Pens are shifted ~50% up visually */
    transform: translateY(-100%);

    font-weight: bold;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

/* ============================================================================ */
/* OPTIONS/CHOICES PEN - The answer choices (Matches Antinomy Choices)          */
/* ============================================================================ */

.antithesis-layout .pen--options {
    margin-top: calc(var(--space-md) + 2vh);
}

/* OPTIONS PEN SIZE - Matches Antinomy Choices (Enlarged for Antithesis) */
.antithesis-layout .pen-surface--choices {
    /* Base width increased by ~75% */
    width: clamp(920px, 150vw, 2100px);
    height: auto;
    /* Aspect ratio adjusted to reflect +75% width and +15% height change (4.8 * 1.75 / 1.15 =~ 7.3) */
    aspect-ratio: 7.3;
    position: relative;
    overflow: visible;
}

/* OPTIONS FENCE - Matches Antinomy Choices Fence */
.antithesis-layout .pen-surface--choices .pen-fence {
    /* Reset inherited styles */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 30;
    pointer-events: none;
}

.antithesis-layout .pen-surface--choices .pen-fence img {
    /* MATCHING ANTINOMY CHOICES SCALING (Enlarged) */
    position: absolute !important;
    max-width: none !important;
    max-height: none !important;

    /* 
     * USER INSTRUCTION: You can personally modify the width and height of the pen SVG here.
     * transform: scale(WIDTH_MULTIPLIER, HEIGHT_MULTIPLIER)
     * e.g., scale(3.18, 1.35) makes it 3.18x wider and 1.35x taller.
     */
    /* Scale factor increased by 20% on width (2.65 * 1.2 = 3.18) */
    transform: scale(4.9, 1.85) !important;
    left: 0% !important;
    top: -1% !important;
    transform-origin: center bottom !important;
}

/* OPTIONS GROUND - Matches Antinomy Choices Ground */
.antithesis-layout .pen-surface--choices .pen-ground {
    top: -35%;
    /* Revert to 5% to match original overlap */
    left: -5%;
    right: -5%;
    bottom: 20%;
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
    z-index: 10;
}

/* OPTIONS CONTENT */
.antithesis-layout .pen-surface--choices .pen-content {
    position: absolute !important;
    top: -10% !important;
    left: 5% !important;
    right: 5% !important;
    bottom: 8% !important;
    padding: 0 !important;
    z-index: 200 !important;
    pointer-events: none;
    /* Pass clicks to slots */
}

/* OPTIONS GRID - Matches Antinomy Logic */
.antithesis-layout .pen-surface--choices .animal-grid {
    display: grid !important;
    width: 100%;
    height: 100%;
    /* Base grid: Force 4 columns to distribute width evenly across the enlarged pen */
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: 1fr;
    gap: 3.5vw;
    justify-items: center;
    align-items: stretch;
    justify-content: center;
}

/* OPTIONS ANIMAL SLOTS */
.antithesis-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;
}

/* OVERRIDE FOR SINGLE ANIMALS IN CHOICES PEN TO KEEP THEM CENTERED */
/* If the slot has only one animal, we can center it */
/* With 'Absolute Truth', they are centered by default (left: 50%, translate -50%) */
/* So no specific override needed here unless 'animal-group' interferes */

/* STAGGERED ALIGNMENT - Matches Antinomy */
.antithesis-layout:not(.antithesis-group-layout) .pen-surface--choices .animal-slot:nth-child(even) .animal-image {
    /* margin-bottom: 35% !important;  <-- REMOVE MARGIN BOTTOM for Flex Items */
    /* Use transform on the image instead for stagger */
    /* Combine with existing translateX */
    /* Applied ONLY to non-grouped layouts so groups don't overlap */
    transform: translateX(-50%) translateY(-35%) !important;
    /* Scale is separate rule, will cascade? No, we need to be careful with scale overrides */
}

/* FIX: Stagger needs to handle scale constants too. */
/* It is better to lift the whole slot for stagger? */
/* Antinomy lifts the slot via margin-bottom on image? No, antinomy.css says: margin-bottom: 35% !important; */
/* But we are using absolute positioning now. So we must use bottom or transform */

.antithesis-layout .pen-surface--choices .animal-slot:nth-child(even) {
    /* Lift the whole slot - Reduced stagger by half (15% -> 7.5%) */
    transform: translateY(-7.5%);
}


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

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

/* HIDE CHOICE LABELS IF THEY EXIST */
.antithesis-layout .pen--options .problem-label {
    display: none !important;
}

/* ============================================================================ */
/* FLYING ANIMAL STYLES                                                         */
/* ============================================================================ */
/* These must match the active layout styles for consistency */

.antinomy-flying-animal {
    display: block !important;
    /* Changed from flex to block for absolute children */
    pointer-events: none;
    z-index: 99999;
    position: fixed;
    /* Ensure fixed */
}

.antinomy-flying-animal .animal-image {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    width: auto !important;
    /* Height comes from base classes */
}

/* Apply scaling to flying animals too */
.antinomy-flying-animal .animal-image--large {
    transform: translateX(-50%) scale(1.25) !important;
    transform-origin: bottom center !important;
    bottom: -15% !important;
}

.antinomy-flying-animal .animal-image--medium {
    bottom: 0% !important;
}

.antinomy-flying-animal .animal-image--small {
    bottom: 8% !important;
}

/* Cat scaling for flying */
.antinomy-flying-animal .animal-image--large.animal-image--cat {
    transform: translateX(-50%) scale(1.125) !important;
}

.antinomy-flying-animal .animal-image--medium.animal-image--cat {
    transform: translateX(-50%) scale(0.9) !important;
}


/* Hide Labels */
.antithesis-layout .pen--options .problem-label {
    display: none !important;
}

/* ============================================================================ */
/* SCOPED GROUP LAYOUT (Questions 3-7)                                          */
/* Reverts "Absolute Truth" to "Flex Flow" for multi-animal groups              */
/* ============================================================================ */

/* 1. RESTORE FLEX CONTAINER */
.antithesis-group-layout .animal-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Force side-by-side */
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 8px !important;
    /* We handle bottom lift directly on the images now */
    padding-bottom: 0 !important;
    /* Maintain Absolute Position of the GROUP container itself */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}

/* 2. MAKE CHILDREN RELATIVE (So they flow in Flex) */
.antithesis-group-layout .animal-image {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    /* Bottom is handled by specific overrides, generally ok to keep or reset if needed */
    /* We keep 'bottom' from global rules to lift them up, but position must be relative */

    /* Prevent Flexbox from shrinking them to fit container width which distorts true size */
    flex-shrink: 0 !important;

    /* Remove Global Centering Transform */
    transform: none !important;

    /* Spacing: Use gap on parent instead of negative margins to prevent overlap */
    margin: 0 !important;
}

/* 3. RESTORE SCALING (Without translateX -50%) */

/* Large Animals in Groups */
.antithesis-group-layout .animal-image--large {
    transform: scale(1.25) !important;
    transform-origin: bottom center !important;
}

/* Cats in Groups */
.antithesis-group-layout .animal-image--large.animal-image--cat {
    transform: scale(1.125) !important;
}

.antithesis-group-layout .animal-image--medium.animal-image--cat {
    transform: scale(0.9) !important;
}

/* OVERRIDE GROUP SHRINKING: Prevent animal-slot.css from shrinking grouped animals */
.antithesis-group-layout .animal-slot--grouped .animal-image--large {
    height: 28vh !important;
    max-height: 28vh !important;
}

.antithesis-group-layout .animal-slot--grouped .animal-image--medium {
    /* Increased medium size */
    height: 24vh !important;
    max-height: 24vh !important;
}

.antithesis-group-layout .animal-slot--grouped .animal-image--small {
    height: 13vh !important;
    max-height: 13vh !important;
}

/* Keep the lift, but without X translation so groups align correctly */
.antithesis-group-layout .pen-surface--choices .animal-slot:nth-child(even) {
    /* 
     * USER INSTRUCTION: This controls the vertical stagger for alternating choice groups.
     * modify the translateY percentage. A larger negative number (e.g. -40%) increases the stagger height.
     */
    transform: translateY(-40.0%) !important;
}

/* 5. FLYING GROUP STYLES (Fixes Stacking during Animation) */
.antithesis-flying-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 8px !important;
    /* Reset any block/fixed overrides from base class if needed, checking specificity */
}

/* Ensure children flow relative */
.antithesis-flying-group .animal-image {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: scale(1.25) !important;
    /* Match Box Scale to prevent resize glitch */
    /* Match the tighter margin applied to static boxes */
    margin: 0 !important;
}

/* Flying Cats */
.antithesis-flying-group .animal-image--large.animal-image--cat {
    transform: scale(1.125) !important;
}

.antithesis-flying-group .animal-image--medium.animal-image--cat {
    transform: scale(0.9) !important;
}