/* ==========================================================================
   HALLUCINATIONS
   Used by /hallucinations/index.html (the full list) and by the Hallucinations
   section on the home page. Load it after /styles/style.css.

   Contents:
     1. The /hallucinations/ page (panel, heading, intro, timeline)
     2. The card (shared by both pages)
     3. Themes: one frame per console
     4. The home page section
     5. Small screens and reduced motion
   ========================================================================== */

/* ---------- 1. The /hallucinations/ page ---------- */
/* The whole page sits in one dark panel, like the sections on the home page */
.hallu-page {
  width: calc(100% - 2rem);
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  background: rgba(31, 31, 31, 0.7);
  border-bottom: 4px solid #33ff7a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.hallu-heading {
  margin: 0 0 0.75rem;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  font-weight: normal;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #33ff7a;
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #33ff7a;
  animation: halluGlitch 6s steps(1) infinite;
}

/* The title "sees double" for a moment every few seconds */
@keyframes halluGlitch {
  0%, 100% { text-shadow: none; }
  91%      { text-shadow: 3px 0 #ff3ea5, -3px 0 #3ed4ff; }
  93%      { text-shadow: -4px 1px #ff3ea5, 4px -1px #3ed4ff; }
  95%      { text-shadow: 2px -1px #ff3ea5, -2px 1px #3ed4ff; }
  97%      { text-shadow: none; }
}

.hallu-intro {
  margin: 0 0 2rem;
  color: #cfcfcf; /* no max-width: the text runs the full width of the panel, lining up with the cards' right edge */
}

.hallu-intro p {
  margin: 0 0 0.75rem;
}

.hallu-intro strong {
  color: #33ff7a;
  font-weight: 600;
}

/* The "Claude's Remarks:" lead-in on every description */
.hallu-remark {
  font-weight: 700;
  color: var(--accent);
}

/* Timeline */
.hallu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Shown in the list if manifest.json can't be loaded */
.hallu-message {
  color: #cfcfcf;
}

/* Each row: year on the spine, card beside it */
.hallu-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: 1.5rem;
}

.hallu-year {
  position: relative;
  padding: 1.1rem 1rem 0 0;
  border-right: 2px solid #33ff7a; /* the spine; rows touch, so it reads as one line */
  font-family: "Press Start 2P", monospace;
  font-size: 0.7rem;
  line-height: 1;
  text-align: right;
  color: #33ff7a;
}

/* Square marker where each row meets the spine */
.hallu-year::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: -7px;
  width: 12px;
  height: 12px;
  background: #33ff7a;
}

/* Wrapper around every card. The card measures this box (not the window) to decide whether
   to lay out sideways or stacked, so it works in the wide list and in the narrower home page column. */
.hallu-slot {
  container-type: inline-size;
  min-width: 0;
}

/* ---------- 2. The card (shared by both pages) ----------
   Each theme below only sets these variables plus a few extras:
     --bg      card background
     --frame   card border
     --ink     description colour
     --title   title colour
     --accent  console label colour
   Every card is the same outer size no matter how thick its frame is. */
/* The frame itself. On the list page it is the card; on the home page it is the whole section
   (.hallu-section), so a frame-xxx class works on either one. */
.hallu-card,
.hallu-section {
  --bg: #1f1f1f;
  --frame: 2px solid #33ff7a;
  --ink: #f0f0f0;
  --title: #ffffff;
  --accent: #33ff7a;

  /* Home page buttons (see section 4) */
  --btn-bg: var(--accent);
  --btn-ink: #121212;
  --btn-edge: var(--accent);
  --btn-radius: 0;
  --btn-shadow: none;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  border: var(--frame);
  color: var(--ink);
}

.hallu-card {
  display: flex;
  gap: 1.25rem;
  height: 212px;
  margin-bottom: 1.5rem;
  padding: 16px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.hallu-card:hover,
.hallu-card:focus-visible {
  color: var(--ink);        /* cancels the site-wide white link hover */
  text-decoration: none;
  transform: translateX(8px);
  filter: brightness(1.08);
}

.hallu-card:focus-visible {
  outline: 3px solid #33ff7a;
  outline-offset: 3px;
}

/* Picture: 4:3, fills the card's inner height */
.hallu-pic {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #141414; /* shows while the image loads, or if it is missing */
}

.hallu-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hallu-pic img.is-missing {
  visibility: hidden;
}

/* CRT filter drawn on top of the picture: scanlines, faint RGB stripes, dark corners.
   To turn it down, lower the 0.28 (scanlines) or delete this rule to remove it. */
.hallu-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.05) 0 1px, rgba(0, 255, 0, 0.05) 1px 2px, rgba(0, 0, 255, 0.05) 2px 3px);
}

/* Text: label, title spot, description spot */
.hallu-text {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.hallu-console {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
}

.hallu-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--title);
}

/* Clamped to 4 lines so a long description can never make one card taller than the rest */
.hallu-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Decorations drawn by the themes sit behind the picture and text */
.hallu-card::before,
.hallu-card::after,
.hallu-section::before,
.hallu-section::after {
  box-sizing: border-box; /* so a decoration's border counts inside its width/height and it centres properly */
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   3. THEMES: one block per console. To add a console, copy a block, rename it
   frame-yourname, and put "frame": "yourname" in manifest.json.
   ========================================================================== */

/* ---- Atari Jaguar: black box, red frame, claw slashes ---- */
.frame-jaguar {
  --bg: #0a0a0a;
  --frame: 3px solid #c8102e;
  --title: #ff2d46;
  --accent: #ffcc00;
}
.frame-jaguar .hallu-title {
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.frame-jaguar::after {
  content: "";
  position: absolute;
  top: -10%;
  right: 2rem;
  width: 132px;
  height: 120%;
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(200, 16, 46, 0.4) 16px 26px, transparent 26px 44px);
  transform: skewX(-18deg);
}

/* ---- Sega Saturn: deep navy, silver double frame, ringed planet ---- */
.frame-saturn {
  --bg: linear-gradient(135deg, #262a52 0%, #0e1026 100%);
  --frame: 6px double #c9ccd6;
  --title: #f1f3fb;
  --accent: #8fa6ff;
  --ink: #dcdff0;
}
.frame-saturn .hallu-title {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}
/* the planet: a blue ball with the ring passing behind and in front of it (inline SVG, no image file) */
.frame-saturn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 240px;
  height: 156px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130'%3E%3Cdefs%3E%3CradialGradient id='b' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23dfe8ff'/%3E%3Cstop offset='.35' stop-color='%236f8cff'/%3E%3Cstop offset='1' stop-color='%2317226e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-18 100 65)' fill='none' stroke='%23aebcff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 65 A92 24 0 0 1 192 65' stroke-opacity='.55'/%3E%3Ccircle cx='100' cy='65' r='37' fill='url(%23b)' stroke='none'/%3E%3Cpath d='M8 65 A92 24 0 0 0 192 65'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.5;
}

/* ---- PlayStation: grey plastic, bevelled edge, four-colour strip ---- */
.frame-ps1 {
  --bg: linear-gradient(180deg, #dcdcdc 0%, #bdbdbd 100%);
  --frame: 3px solid #8e8e8e;
  --title: #1d1d1d;
  --accent: #3a3a8c;
  --ink: #2a2a2a;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.7), inset -3px -3px 0 rgba(0, 0, 0, 0.25);
}
.frame-ps1 .hallu-pic {
  border: 3px solid #5a5a5a;
}
/* a low-poly orange crystal */
.frame-ps1::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 92px;
  height: 128px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M50 4 12 62 36 74Z' fill='%23ffb347'/%3E%3Cpath d='M50 4 36 74 68 72Z' fill='%23ffe0b0'/%3E%3Cpath d='M50 4 68 72 88 58Z' fill='%23f08a1c'/%3E%3Cpath d='M50 136 12 62 36 74Z' fill='%23d96a0a'/%3E%3Cpath d='M50 136 36 74 68 72Z' fill='%23f79a2e'/%3E%3Cpath d='M50 136 68 72 88 58Z' fill='%23b3520a'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.6;
}
/* the four-colour strip along the bottom */
.frame-ps1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, #df0024 0 25%, #f3c300 25% 50%, #00ac9f 50% 75%, #2e6db4 75% 100%);
}

/* ---- Nintendo 64: charcoal with a different logo colour on each side ---- */
.frame-n64 {
  --bg: #1d1d21;
  --frame: 6px solid;
  --title: #ffffff;
  --accent: #f7b500;
  border-color: #009e42 #e1261c #0a3cba #f7b500;
}
.frame-n64 .hallu-title {
  font-weight: 900;
  letter-spacing: 0.02em;
}
.frame-n64::after {
  content: "64";
  position: absolute;
  right: 1rem;
  bottom: -1.4rem;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
}

/* ---- Dreamcast: clean white, soft corners, orange swirl ---- */
.frame-dreamcast {
  --bg: linear-gradient(180deg, #ffffff 0%, #eef0f2 100%);
  --frame: 2px solid #d4d7db;
  --title: #3b3f45;
  --accent: #d9600a;
  --ink: #4a4f57;
  border-radius: 18px;
}
.frame-dreamcast .hallu-pic {
  border-radius: 10px;
}
.frame-dreamcast .hallu-title {
  font-weight: 300;
  letter-spacing: 0.03em;
}
/* a real spiral, drawn as an inline SVG so no image file is needed */
.frame-dreamcast::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 150px;
  height: 150px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M48.7 45.9 L47.9 45.8 L47.0 45.9 L46.2 46.2 L45.3 46.6 L44.5 47.2 L43.8 48.0 L43.2 48.9 L42.8 50.0 L42.5 51.2 L42.5 52.5 L42.6 53.8 L43.0 55.1 L43.6 56.4 L44.5 57.6 L45.6 58.7 L46.9 59.6 L48.4 60.3 L50.0 60.8 L51.7 61.0 L53.6 61.0 L55.4 60.6 L57.2 59.9 L58.9 58.9 L60.5 57.6 L61.9 56.1 L63.0 54.2 L63.9 52.2 L64.4 50.0 L64.6 47.7 L64.4 45.3 L63.8 43.0 L62.8 40.7 L61.5 38.5 L59.8 36.6 L57.7 34.9 L55.3 33.5 L52.8 32.5 L50.0 32.0 L47.1 31.8 L44.2 32.2 L41.3 33.0 L38.6 34.2 L36.0 36.0 L33.7 38.1 L31.7 40.7 L30.1 43.5 L29.0 46.7 L28.4 50.0 L28.3 53.4 L28.7 56.9 L29.8 60.3 L31.3 63.6 L33.4 66.6 L36.0 69.3 L39.0 71.5 L42.4 73.3 L46.1 74.6 L50.0 75.2 L54.0 75.3 L58.0 74.7 L62.0 73.5 L65.7 71.6 L69.1 69.1 L72.2 66.1 L74.7 62.6 L76.8 58.7 L78.1 54.5 L78.9 50.0 L78.9 45.4 L78.1 40.9 L76.7 36.4 L74.5 32.2 L71.7 28.3 L68.2 24.9 L64.2 22.0 L59.8 19.8 L55.0 18.3 L50.0 17.5 L44.9 17.6 L39.7 18.4 L34.8 20.1 L30.1 22.6 L25.8 25.8 L22.0 29.6 L18.8 34.1 L16.4 39.1 L14.7 44.4 L13.9 50.0 L14.0 55.7 L15.0 61.4 L16.9 66.9 L19.7 72.0 L23.2 76.8 L27.5 80.9 L32.5 84.4 L38.0 87.0 L43.9 88.8 L50.0 89.7 L56.3 89.5 L62.5 88.4 L68.5 86.3 L74.2 83.3 L79.3 79.3 L83.8 74.6 L87.6 69.2 L90.5 63.2 L92.4 56.7 L93.3 50.0 L93.1 43.2 L91.8 36.4' fill='none' stroke='%23f47b20' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.28;
}

/* ---- PlayStation 2: black void, blue glow, tower lines ---- */
.frame-ps2 {
  --bg: repeating-linear-gradient(90deg, rgba(70, 100, 255, 0.1) 0 2px, transparent 2px 26px),
        linear-gradient(180deg, #000000 0%, #060b34 100%);
  --frame: 1px solid #3550ff;
  --title: #b9c8ff;
  --accent: #6f88ff;
  --ink: #c9d1f5;
  box-shadow: 0 0 18px rgba(53, 80, 255, 0.45), inset 0 0 30px rgba(53, 80, 255, 0.18);
}
.frame-ps2 .hallu-title {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
/* a few towers rising out of the bottom edge */
.frame-ps2::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  width: 176px;
  height: 165px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 150'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236f88ff'/%3E%3Cstop offset='1' stop-color='%236f88ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232a3cc0'/%3E%3Cstop offset='1' stop-color='%232a3cc0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='8' y='62' width='22' height='88' fill='url(%23f)'/%3E%3Cpath d='M30 62 38 56 38 150 30 150Z' fill='url(%23s)'/%3E%3Cpath d='M8 62 16 56 38 56 30 62Z' fill='%23c3cfff'/%3E%3Crect x='46' y='22' width='26' height='128' fill='url(%23f)'/%3E%3Cpath d='M72 22 80 16 80 150 72 150Z' fill='url(%23s)'/%3E%3Cpath d='M46 22 54 16 80 16 72 22Z' fill='%23c3cfff'/%3E%3Crect x='90' y='78' width='20' height='72' fill='url(%23f)'/%3E%3Cpath d='M110 78 118 72 118 150 110 150Z' fill='url(%23s)'/%3E%3Cpath d='M90 78 98 72 118 72 110 78Z' fill='%23c3cfff'/%3E%3Crect x='122' y='44' width='24' height='106' fill='url(%23f)'/%3E%3Cpath d='M146 44 154 38 154 150 146 150Z' fill='url(%23s)'/%3E%3Cpath d='M122 44 130 38 154 38 146 44Z' fill='%23c3cfff'/%3E%3C/svg%3E") center / contain no-repeat;
  background-position: center bottom;
  opacity: 0.55;
}

/* ---- GameCube: indigo block with a chunky bevel and a cube ---- */
.frame-gamecube {
  --bg: linear-gradient(160deg, #6a5cba 0%, #3f347f 100%);
  --frame: 6px solid;
  --title: #ffffff;
  --accent: #d6cfff;
  --ink: #ecebfa;
  border-color: #8f84d6 #2d2460 #2d2460 #8f84d6;
  border-radius: 14px;
}
.frame-gamecube .hallu-pic {
  border-radius: 6px;
}
.frame-gamecube .hallu-title {
  font-weight: 700;
}
.frame-gamecube::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.5rem;
  width: 120px;
  height: 120px;
  border: 12px solid rgba(255, 255, 255, 0.1);
  outline: 12px solid rgba(255, 255, 255, 0.05);
  outline-offset: -36px;
  transform: translateY(-50%) rotate(45deg); /* centred on the card's height */
}

/* ---- Xbox: ribbed black plastic, bevelled edge, glowing green orb ---- */
.frame-xbox {
  --bg: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #161d12 0%, #070a06 100%);
  --frame: 5px solid;
  --title: #b6f24a;
  --accent: #8fd61f;
  --ink: #d5dfc8;
  border-color: #33402a #0c1009 #0c1009 #33402a; /* light from the top left, like the PS1 and GameCube frames */
}
.frame-xbox .hallu-pic {
  border: 2px solid #33402a;
}
.frame-xbox .hallu-title {
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* the orb, with a thin ring round it */
.frame-xbox::before,
.frame-xbox::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}
.frame-xbox::before {
  right: 2rem;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(155, 240, 11, 0.22);
}
.frame-xbox::after {
  right: calc(2rem + 25px);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 38% 34%, #efffc0 0%, #9bf00b 26%, #3f7d00 60%, #16300a 100%);
  box-shadow: 0 0 28px rgba(155, 240, 11, 0.55);
  opacity: 0.4;
}

/* ---- Nintendo DS: silver shell, picture = top screen, text = touch screen ---- */
.frame-ds {
  --bg: linear-gradient(180deg, #e3e6ea 0%, #c3c8cf 100%);
  --frame: 2px solid #9aa0a8;
  --title: #1f2d3d;
  --accent: #1d6fb8;
  --ink: #2d3640;
  border-radius: 10px;
}
.frame-ds .hallu-pic {
  border: 4px solid #2b2d31;
}
.frame-ds .hallu-text {
  padding: 0 0.9rem;
  border: 4px solid #2b2d31;
  background-color: #f6f9fc;
  /* faint touch-screen grid */
  background-image:
    linear-gradient(rgba(29, 111, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 111, 184, 0.1) 1px, transparent 1px);
  background-size: 16px 16px;
}
/* doodled squares. They live inside the touch screen (the text box), which would otherwise cover them */
.frame-ds .hallu-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 130px;
  height: 130px;
  transform: translateY(-50%);
  z-index: -1; /* behind the words, in front of the grid */
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke-width='4' stroke-linejoin='round'%3E%3Crect x='16' y='18' width='62' height='62' rx='8' transform='rotate(-10 47 49)' stroke='%231d6fb8' fill='%231d6fb8' fill-opacity='.12'/%3E%3Crect x='80' y='62' width='44' height='44' rx='6' transform='rotate(12 102 84)' stroke='%232b2d31'/%3E%3Crect x='38' y='98' width='26' height='26' rx='4' transform='rotate(-6 51 111)' stroke='%231d6fb8'/%3E%3Crect x='100' y='20' width='18' height='18' rx='3' transform='rotate(8 109 29)' fill='%231d6fb8' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.3;
}

/* ---- Xbox 360: white shell, green blade edge, ring of light ---- */
.frame-xbox360 {
  --bg: linear-gradient(180deg, #fafafa 0%, #cfd4d8 100%);
  --frame: 2px solid #b9bfc4;
  --title: #3f4347;
  --accent: #4c8a12;
  --ink: #4b5055;
  border-left: 16px solid #8cc63f;
  border-radius: 0 40px 40px 0;
}
.frame-xbox360 .hallu-title {
  font-weight: 500;
}
.frame-xbox360::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.5rem;
  width: 144px;
  height: 144px;
  border: 12px solid rgba(140, 198, 63, 0.18);
  border-top-color: rgba(140, 198, 63, 0.75); /* one lit quadrant: player one */
  border-radius: 50%;
  transform: translateY(-50%) rotate(-45deg); /* centred on the card's height */
}

/* ---- PlayStation 3: glossy black, chrome lip, XMB wave ---- */
.frame-ps3 {
  --bg: linear-gradient(120deg, #07070c 0%, #1a1040 55%, #3a1d5c 100%);
  --frame: 1px solid #4b4b57;
  --title: #ffffff;
  --accent: #b9a8e8;
  --ink: #d8d4e6;
  border-bottom: 4px solid #c9c9d2;
}
.frame-ps3 .hallu-title {
  font-weight: 300;
  letter-spacing: 0.08em;
}
/* the two wave lines along the bottom */
.frame-ps3::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M0 30 Q50 -6 100 20' stroke-opacity='.22' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 39 Q50 8 100 33' stroke-opacity='.12' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* drifting triangle, circle, cross and square */
.frame-ps3::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 176px;
  height: 134px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 130' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 12 56 50 12 50Z' transform='rotate(-8 34 34)'/%3E%3Ccircle cx='124' cy='34' r='20'/%3E%3Cpath d='M32 82 62 112M62 82 32 112' transform='rotate(6 47 97)'/%3E%3Crect x='104' y='78' width='36' height='36' transform='rotate(10 122 96)'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.26;
}

/* ---- Wii: white channel tile, big soft corners, cyan highlight ---- */
.frame-wii {
  --bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #ffffff 0%, #e9edf0 100%);
  --frame: 3px solid #cfd5da;
  --title: #5f6368;
  --accent: #0d8fc2;
  --ink: #6a6f75;
  border-radius: 26px;
}
.frame-wii .hallu-pic {
  border-radius: 14px;
}
.frame-wii .hallu-title {
  font-weight: 400;
}
/* three little figures: a capsule body with a circle for a head */
.frame-wii::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 176px;
  height: 124px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 120'%3E%3Cellipse cx='34' cy='100' rx='14' ry='4' fill='%23000000' fill-opacity='.12'/%3E%3Crect x='23' y='59' width='22' height='38' rx='11' fill='%23f2788c'/%3E%3Ccircle cx='34' cy='45' r='11' fill='%23f9bcc6'/%3E%3Cellipse cx='85' cy='102' rx='17' ry='4' fill='%23000000' fill-opacity='.12'/%3E%3Crect x='71' y='41' width='28' height='58' rx='14' fill='%2334beed'/%3E%3Ccircle cx='85' cy='24' r='14' fill='%23a6e1f7'/%3E%3Cellipse cx='137' cy='102' rx='15' ry='4' fill='%23000000' fill-opacity='.12'/%3E%3Crect x='125' y='53' width='24' height='46' rx='12' fill='%238cc63f'/%3E%3Ccircle cx='137' cy='38' r='12' fill='%23c9e5a3'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.55;
}
.frame-wii:hover,
.frame-wii:focus-visible {
  box-shadow: 0 0 0 4px #34beed; /* the channel-select highlight */
  filter: none;
}

/* ==========================================================================
   4. THE HOME PAGE SECTION (#hallucinations in /index.html)
   scripts/indexHallucinations.js puts the picked demo's frame-xxx class on the section,
   so the whole section (background, border, title, buttons) takes on that console's look.
   ========================================================================== */

/* Until a demo has loaded, look like the other home page sections */
.hallu-section:not([class*="frame-"]) {
  --bg: rgba(31, 31, 31, 0.7);
  border-width: 0 0 4px;
}

/* Keep the content in front of the frame's decoration (the spiral, the ring, etc.) */
.hallu-section > * {
  position: relative;
  z-index: 1;
}

/* Section title in the console's colour */
.hallu-section h2 {
  color: var(--accent);
  border-bottom-color: var(--accent);
  animation: halluGlitch 6s steps(1) infinite;
}

#hallucinations-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The section is the frame here, so the card inside it has none of its own */
.hallu-section .hallu-card {
  --bg: transparent;
  --frame: 0 solid transparent;
  --ink: inherit;
  --title: inherit;
  --accent: inherit;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
}

/* Reroll + See All Hallucinations, side by side */
.hallu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* both buttons end up the same height */
  gap: 0.75rem;
}

.see-all-hallucinations-link {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 1rem;
  line-height: normal;
  padding: 0.3rem 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}

/* Both buttons take their colours and shape from the frame's --btn-* values */
.hallu-section .reroll-button,
.hallu-section .see-all-hallucinations-link {
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 2px solid var(--btn-edge);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: filter 0.2s ease, transform 0.1s ease;
}

.hallu-section .reroll-button:hover:not(:disabled),
.hallu-section .see-all-hallucinations-link:hover {
  color: var(--btn-ink);
  background: var(--btn-bg);
  text-decoration: none;
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.hallu-section .reroll-button:active:not(:disabled),
.hallu-section .see-all-hallucinations-link:active {
  transform: translateY(1px);
}

/* ---- Buttons per console. A new frame without a block here gets buttons in its --accent colour. ---- */
.frame-jaguar    { --btn-bg: #c8102e; --btn-ink: #ffffff; --btn-edge: #ff2d46; }
.frame-saturn    { --btn-bg: linear-gradient(180deg, #eef0f6 0%, #aab0c2 100%); --btn-ink: #14173a; --btn-edge: #c9ccd6; }
.frame-ps1       { --btn-bg: #cfcfcf; --btn-ink: #1d1d1d; --btn-edge: #8e8e8e;
                   --btn-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.7), inset -2px -2px 0 rgba(0, 0, 0, 0.25); }
.frame-n64       { --btn-bg: #009e42; --btn-ink: #ffffff; --btn-edge: #009e42; }
.frame-dreamcast { --btn-bg: #ffffff; --btn-ink: #d9600a; --btn-edge: #f47b20; --btn-radius: 999px; }
.frame-ps2       { --btn-bg: rgba(53, 80, 255, 0.14); --btn-ink: #b9c8ff; --btn-edge: #3550ff;
                   --btn-shadow: 0 0 10px rgba(53, 80, 255, 0.5); }
.frame-gamecube  { --btn-bg: #7d70cc; --btn-ink: #ffffff; --btn-edge: #8f84d6; --btn-radius: 8px;
                   --btn-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.25); }
.frame-xbox      { --btn-bg: #1c2616; --btn-ink: #b6f24a; --btn-edge: #33402a;
                   --btn-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), inset -2px -2px 0 rgba(0, 0, 0, 0.4); }
.frame-ds        { --btn-bg: #f6f9fc; --btn-ink: #1f2d3d; --btn-edge: #2b2d31; --btn-radius: 6px; }
.frame-xbox360   { --btn-bg: linear-gradient(180deg, #b4e36a 0%, #7fbf2e 100%); --btn-ink: #1f3a00; --btn-edge: #6fae1f; --btn-radius: 999px; }
.frame-ps3       { --btn-bg: rgba(255, 255, 255, 0.08); --btn-ink: #ffffff; --btn-edge: rgba(255, 255, 255, 0.45); }
.frame-wii       { --btn-bg: #ffffff; --btn-ink: #5f6368; --btn-edge: #34beed; --btn-radius: 999px; }

/* A few extras so the buttons read like the console, not just its colours */
.frame-jaguar .reroll-button,
.frame-jaguar .see-all-hallucinations-link { font-style: italic; font-weight: 800; }
.frame-n64 .see-all-hallucinations-link    { --btn-bg: #0a3cba; --btn-edge: #0a3cba; }
.frame-ps2 .reroll-button,
.frame-ps2 .see-all-hallucinations-link,
.frame-ps3 .reroll-button,
.frame-ps3 .see-all-hallucinations-link    { font-weight: 300; letter-spacing: 0.18em; }

/* ==========================================================================
   5. SMALL SCREENS AND REDUCED MOTION
   ========================================================================== */

/* When a card has less than 600px to work with (tablets, or the home page column in a
   medium window), it stays sideways but grows taller, with a smaller picture and more lines. */
@container (max-width: 600px) {
  .hallu-card {
    height: auto;
    align-items: center;
    gap: 1rem;
  }

  .hallu-pic {
    width: 42%;
    height: auto;
  }

  /* Always 7 lines tall, so every card is still the same size */
  .hallu-desc {
    -webkit-line-clamp: 7;
    line-clamp: 7;
    min-height: calc(1.45em * 7);
  }

  .frame-ds .hallu-text {
    align-self: stretch;
    padding: 0.6rem 0.9rem;
  }
}

/* Under 420px (phones), the picture goes above the text */
@container (max-width: 420px) {
  .hallu-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }

  .hallu-pic {
    width: 100%;
  }

  .hallu-text {
    flex: none;
    justify-content: flex-start;
  }

  /* The frame decorations sit halfway down, which is behind the picture when stacked.
     Move them down beside the text instead. */
  .frame-jaguar::after,
  .frame-saturn::after,
  .frame-dreamcast::after,
  .frame-gamecube::after,
  .frame-xbox::before,
  .frame-xbox::after,
  .frame-xbox360::after,
  .frame-ps1::before,
  .frame-ps3::after,
  .frame-wii::after {
    top: auto;
    bottom: 1.5rem;
    margin-top: 0;
  }
  .frame-jaguar::after { bottom: -10%; height: 60%; }
  .frame-saturn::after,
  .frame-dreamcast::after,
  .frame-ps1::before,
  .frame-ps3::after,
  .frame-wii::after { transform: none; }
  .frame-gamecube::after { transform: rotate(45deg); bottom: 2.5rem; }
  .frame-xbox360::after { transform: rotate(-45deg); }
  .frame-xbox::before,
  .frame-xbox::after { transform: none; }
  .frame-xbox::after { bottom: calc(1.5rem + 25px); }

  .hallu-card:hover,
  .hallu-card:focus-visible {
    transform: none;
  }
}

/* The timeline on a narrow window: the year goes above its card */
@media (max-width: 700px) {
  .hallu-row {
    display: block;
  }

  .hallu-year {
    padding: 0 0 0.5rem;
    border-right: none;
    text-align: left;
  }

  .hallu-year::after {
    display: none;
  }

  .hallu-page {
    padding: 1.25rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hallu-heading,
  .hallu-section h2 {
    animation: none;
  }

  .hallu-card {
    transition: none;
  }

  .hallu-card:hover,
  .hallu-card:focus-visible {
    transform: none;
  }
}