/* style.css (Canvas UI Version) */
/* Styles for the Starship Battle Simulation */
/* This version primarily styles the body, canvas container, and DOM-based obstacles. */
/* On-canvas UI (menus, buttons) is drawn by UIManager in ui.js and not styled here. */

/* ========================================= */
/* === Global Styles & Layout ============ */
/* ========================================= */

html {
    /* Responsive base font size using clamp for smooth scaling */
    font-size: clamp(10px, calc(10px + (16 - 10) * (100vw - 320px) / (1200 - 320)), 16px);
    box-sizing: border-box; /* Consistent box model */
}

*,
*:before,
*:after {
    box-sizing: inherit; /* Inherit box-sizing for all elements */
}

body {
    margin: 0;
    overflow: hidden; /* Prevent scrollbars as canvas fills viewport */
    background: #000; /* Dark background for space theme */
    color: #eee; /* Light default text color */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern sans-serif stack */
    user-select: auto; /* Allow text selection by default */
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    font-size: 1rem; /* Base font size relative to html element's font size */
    position: relative; /* For potential absolute/fixed children positioning context */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    line-height: 1.4; /* Default line spacing */
}

/* Cursor changes based on global interaction state classes added to body by JS */
body.placing-ship {
    cursor: crosshair; /* Cursor for ship placement mode */
}
body.dragging-obstacle,
body.dragging-boid {
    cursor: grabbing; /* Cursor when an item is being actively dragged */
}

/* Cursor when hovering over a draggable boid (ship) */
body.boid-hover {
    cursor: grab; /* Cursor when hovering over a draggable boid */
}

/* ========================================= */
/* === Canvas & Content Area ============ */
/* ========================================= */

/* Container for the p5.js canvas */
/* This element holds the canvas and is fixed to cover the entire viewport, behind other content. */
#canvas-container {
    position: fixed !important; /* Ensure it stays fixed; use !important judiciously */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Positioned behind DOM obstacles and any potential HTML UI overlays */
    pointer-events: none; /* Allows clicks to pass through to elements underneath (if any were there) */
    /* Prevent text selection on the canvas background itself */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* The p5.js canvas element itself */
canvas {
    display: block; /* Removes extra space below the canvas often caused by inline display */
    /* Pointer events on the canvas are handled by the p5.js sketch (InputHandler) */
}

/* Main content column, intended to hold DOM-based obstacles if they are part of the HTML structure. */
/* This example seems to position obstacles absolutely within the body or another container, */
/* so this specific main-content-column might be less critical if obstacles are direct children of body. */
main.main-content-column {
    position: relative; /* Establishes a positioning context for absolutely positioned children (obstacles) */
    width: 100%;
    height: 100vh; /* Full viewport height */
    z-index: 1; /* Above the canvas container, but below any p5.js drawn UI */
    overflow: hidden; /* Clips any content (like obstacles) that might go outside its bounds */
    margin: 0;
    padding: 0;
    /* Allow text selection on the background of this column, like body */
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
}

/*
.main-content-visible {
    opacity: 1;
}
*/

/* ========================================= */
/* === Obstacle Styling (Article Cards) == */
/* ========================================= */

/* Base style for draggable DOM elements acting as obstacles */
.obstacle {
    background: rgba(60, 60, 70, 0.85); /* Semi-transparent dark grey background */
    color: #ddd; /* Light grey text for readability */
    padding: 0.8rem;
    border-radius: 5px;
    border: 1px solid #445; /* Darker border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: absolute; /* Required for JavaScript-controlled positioning */
    width: 20rem; /* Default width, can be overridden by specific obstacle styles or JS */
    max-width: 90vw; /* Prevent obstacles from becoming too wide on small screens */
    height: auto; /* Height adjusts to content */
    cursor: grab; /* Indicates the element is draggable */
    z-index: 2; /* Above canvas and main content column, below p5 UI and dragged items */
    pointer-events: auto; /* Obstacles themselves are interactive (can be clicked/dragged) */
    will-change: transform, opacity, top, left; /* Performance hint for browsers */
    /* Ensure text within obstacles IS selectable by default */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Class to make the obstacle visible and in its "normal" transformed state */
.obstacle-visible {
    opacity: 1;
    visibility: visible !important; /* Make it visible when this class is added */
    transform: translateY(0) scale(1);
}

/* Class for controlling transitions during initial setup and positioning animation */
.obstacle-positioning {
    /* Slower, smoother transitions for initial placement and move to simulation spot */
    transition: opacity 0.6s ease-out,
                transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), /* Smoother easing for transform */
                top 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),    /* Smooth transition for top */
                left 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);   /* Smooth transition for left */
}

/* Specific styling for obstacles that are "article cards" */
.obstacle.article-card {
    background: rgba(40, 45, 60, 0.90); /* Slightly different background for article cards */
    color: #eee; /* Brighter text for article cards */
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #556;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* More pronounced shadow */
    width: 25rem; /* Specific width for article cards */
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* Removed height transition */
}

/* Specific styling for the header obstacle (if used) */
#header-obstacle {
    z-index: 3; /* Potentially higher z-index than other obstacles */
    width: 35rem; /* Custom width for the header */
    background: rgba(60, 40, 50, 0.92); /* Distinct background color */
    border-color: #887; /* Distinct border color */
    text-align: center;
    opacity: 1 !important; /* Ensure header is visible on load for SEO */
    visibility: visible !important; /* Ensure header is visible on load for SEO */
    /* Initial position for header is now handled by script.js */
    /* top: 50px; */
    /* left: 50%; */
    /* transform: translateX(-50%) translateY(0) scale(1); */
}

/* General content styling within obstacles */
.obstacle h3 {
    margin-top: 0;
    color: #adf; /* Light blue for headings */
    border-bottom: 1px solid #556;
    padding-bottom: 0; /* Removed padding to rely on margin for spacing */
    margin-bottom: 1rem; /* Space between h3 and image container */
    font-size: 1.1rem;
    font-weight: 600;
}

.obstacle p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.obstacle p:last-child {
    margin-bottom: 0; /* Remove bottom margin from the last paragraph */
}

.obstacle ul {
    padding-left: 1.2rem; /* Indent for unordered lists */
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
}

.obstacle li {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.obstacle a {
    color: #9cf; /* Light blue for links */
    text-decoration: none;
}

.obstacle a:hover {
    color: #bdf; /* Brighter blue on hover */
    text-decoration: underline;
}

.obstacle img {
    max-width: 100%; /* Responsive images within obstacles */
    height: auto;
    border-radius: 4px;
    display: block; /* Prevents extra space below if container is precisely sized */
}

#article-1 { 
    height: 25rem;
}

#animal-image-container {
    position: relative; /* Crucial for absolute positioning of children */
    width: 100%; /* Or a fixed size if preferred */
    /* Height will be determined by the content (image + description) or specific image height */
}

/* Styles for the dynamically added images for crossfade */
#animal-image-container > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Start transparent, JS will make them visible */
    transition: opacity 1s ease-in-out; /* CSS transition for crossfade */
    box-sizing: border-box;
    border-radius: 4px; /* Match obstacle img style */
    display: block; /* Remove extra space if any */
    z-index: 1;
}

/* Ensure links within obstacles have the correct pointer cursor, overriding .obstacle's grab cursor */
.obstacle a {
    cursor: pointer;
}

/* Style applied to an obstacle when it is being actively dragged */
.obstacle.dragging {
    cursor: grabbing; /* Change cursor to "grabbing" hand */
    box-shadow: 0 5px 15px rgba(80, 150, 255, 0.3); /* Highlight shadow when dragging */
    border-color: #68a; /* Highlight border color */
    z-index: 10; /* Bring to the very front while dragging */
    /* Prevent text selection *while* the obstacle itself is being dragged */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Style for obstacles that are animating off-screen (exiting) */
.obstacle.obstacle-exiting {
    opacity: 0.5; /* Fade out slightly during exit animation */
    /* Transition for opacity is longer, transform (movement) is quicker */
    transition: opacity 0.3s ease, transform 0.1s linear;
}

/* ========================================= */
/* === UI Styles (Now Handled in JS) ===== */
/* ========================================= */

/*
    The following styles for HTML-based UI elements like #ui-container, #menu-container,
    .menu, .menu-header, .menu-list, .faction-header, .sim-button etc., are commented out
    or removed because the current UI implementation (UIManager in ui.js) draws these
    elements directly onto the p5.js canvas. They are not HTML elements anymore.

    The .sim-button-reference is kept as a commented-out reference for the desired
    visual style that the canvas UI aims to replicate.
*/

/*
.sim-button-reference {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    border: 1px solid #667;
    background: #334;
    color: #aae;
    text-align: center;
    white-space: nowrap;
}
.sim-button-reference:hover:not(:disabled) {
    background: #445;
    border-color: #889;
    color: #ccf;
}
.sim-button-reference:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #333;
    border-color: #555;
    color: #888;
}
*/