/*
  BEGINNER MAP FOR css/living-phenomenon.css
  PURPOSE: This file controls shared full-screen layout for the newer canvas Easter eggs.

  CSS READING GUIDE:
  - The selector before { chooses what is styled. .name means a class; #name
    means one unique id; an element name such as body targets that HTML tag.
  - The declarations inside { } are property: value pairs. Each ends with ;.
  - Later rules can override earlier rules when they target the same element.
  - @media rules apply only under a condition such as a narrow screen or a
    visitor requesting reduced motion. Keep their closing braces paired.
  - Shared CSS affects several pages, so test Home, About, Light, and Dark after
    changing a shared rule. Comments below identify each component or feature.
*/

/*
  BEGINNER GUIDE
  PURPOSE: Shared appearance for the six newer creature/phenomenon pages.

  CSS changes appearance, not page wording or behaviour.
  A selector beginning with “.” matches an HTML class; “#” matches an HTML id.
  Later rules can override earlier rules. Keep braces paired: every { needs a }.
*/

/* Shared deep-space colours for the six newer phenomenon pages. */
/* COMPONENT NOTE: Component :root: appearance and layout for the matching HTML element(s). */
:root {
    --bg: #071022;
    --accent: #8be9fd;
    --accent-rgb: 139, 233, 253;
    --text: #f8fafc;
    --dim: #a7b4ca;
}

html,
/* Lock the page to the screen so only the canvas moves. */
/* COMPONENT NOTE: Page foundation for body: controls the overall canvas, background, spacing, or default text. */
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    touch-action: none;
}

/* Full-screen drawing surface used by each page's JavaScript. */
/* COMPONENT NOTE: Drawing surface .phenomenon-canvas: positions the JavaScript-rendered animation. */
.phenomenon-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Shared title/instruction panel above each animation. */
/* COMPONENT NOTE: Readable overlay .overlay: keeps instructions visible above the animation. */
.overlay {
    position: fixed;
    z-index: 10;
    top: 20px;
    left: 20px;
    max-width: min(330px, calc(100vw - 74px));
    padding: 1rem;
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 20px;
    background: rgba(7, 16, 34, 0.78);
    backdrop-filter: blur(12px);
}

/* COMPONENT NOTE: Readable overlay .overlay h1: keeps instructions visible above the animation. */
.overlay h1 {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 1.2rem;
}

/* COMPONENT NOTE: Readable overlay .overlay p: keeps instructions visible above the animation. */
.overlay p {
    margin: 0 0 12px;
    color: var(--dim);
}

/* COMPONENT NOTE: Readable overlay .overlay a: keeps instructions visible above the animation. */
.overlay a {
    color: var(--accent);
    text-decoration: none;
}

.overlay a:hover,
/* COMPONENT NOTE: Readable overlay .overlay a:focus-visible: keeps instructions visible above the animation. */
.overlay a:focus-visible {
    text-decoration: underline;
}

/* Score text used by Pong and Curveball. */
/* COMPONENT NOTE: Readable overlay .overlay .game-score: keeps instructions visible above the animation. */
.overlay .game-score {
    margin: 12px 0 0;
    color: var(--accent);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Collapsible game panel used by Pong and Curveball. */
.game-overlay {
    padding-top: 3.25rem;
}

.game-overlay-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 44px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: var(--accent);
    font: 600 0.72rem/1 "Segoe UI", sans-serif;
    cursor: pointer;
}

.game-overlay-toggle:hover,
.game-overlay-toggle:focus-visible {
    background: var(--accent);
    color: #071022;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Collapsed mode leaves only one small, finger-sized information button. */
.game-overlay.collapsed {
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.game-overlay.collapsed .game-overlay-content {
    display: none;
}

.game-overlay.collapsed .game-overlay-toggle {
    position: static;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
}

/* Phone-sized panel spacing and text. */
/* COMPONENT NOTE: Conditional block: @media (max-width: 520px). The rules inside apply only when this condition is true. */
@media (max-width: 520px) {
    .overlay {
        top: 12px;
        left: 12px;
        padding: 0.85rem;
    }

    .game-overlay {
        padding-top: 3.1rem;
    }

    .game-overlay.collapsed {
        padding: 0;
    }
}

/* Remove decorative panel transitions when requested. */
/* COMPONENT NOTE: Conditional block: @media (prefers-reduced-motion: reduce). The rules inside apply only when this condition is true. */
@media (prefers-reduced-motion: reduce) {
    .phenomenon-canvas {
        opacity: 0.8;
    }
}