/* Tower of Cats: page-specific pieces on top of house-style.css */

:root { --paper: #f1e6cf; --paper-ink: #5a3a28; }

/* ---------- Stage: one pane per rail item ---------- */
.stage { background: #000; }
.view, .layer { position: absolute; inset: 0; overflow: hidden; }
/* a sprite: a box the size of the regular picture; a themed picture sits in it by its measured offset */
.sp { position: relative; }
.sp > img { position: absolute; left: 0; top: 0; width: 100%; display: block; max-width: none; pointer-events: none; }
.view.paper, .layer.paper {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, color-mix(in srgb, var(--paper-ink) 12%, transparent)),
    var(--paper);
}
.stage-play { transition: opacity 0.2s; z-index: 2; }
.stage.playing .stage-play { opacity: 0; pointer-events: none; }

/* 01 play */
.poster, #game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
#game { background: #000; }
.stage.playing #main { visibility: hidden; }
/* over the live game the stage tools sit bottom right, clear of the game's own buttons at the top */
.stage.playing[data-view='title'] .stage-top { inset: auto 14px 14px auto; }

/* 02 cats: placed by app.js at one scale, feet on a painted floor line */
.cat-row { position: absolute; inset: 0; }
.cat { position: absolute; margin: 0; }
.cat-art { position: relative; }
.cat-art .frame { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.cat figcaption {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; white-space: nowrap;
  font: 400 clamp(13px, 1.5vw, 20px) / 1 'Instrument Serif', serif; color: var(--paper-ink);
}
.cat-row.no-caps figcaption { display: none; }
.cat-row .floor {
  position: absolute; height: 8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper-ink) 24%, transparent), transparent);
}

/* 03 styles */
.sheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* 04 world: positions are % of the scene (16:9) */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene > img, .scene > div { position: absolute; display: block; height: auto; }
.scene .star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 4px #fff3; }
.scene .bird { aspect-ratio: 459 / 436; }
.scene .bird img { position: absolute; left: 0; top: 0; width: 100%; }
.scene .bird img.flap { left: -0.87%; top: 31.65%; width: 107%; } /* bird2 pinned on the same eye point (382,90 vs 378,228) */
.scene .yarn { aspect-ratio: 1; z-index: 1; }
.scene .yarn > .sp { z-index: 1; width: 100%; }
/* string and cat swing together from the ball's centre; padding % is of the width, so the string length scales with the scene */
.scene .swing { position: absolute; left: 50%; top: 50%; translate: -50% 0; transform-origin: 50% 0; animation: swing 3s ease-in-out infinite alternate; }
.scene .swing .string { display: block; width: 2px; height: 0; padding-top: 46%; margin: 0 auto; background: var(--paper-ink); opacity: 0.85; }
.scene .swing .sp { display: block; width: 100%; margin: -10.4% 0 0 -5.3%; } /* the string meets Long Boi's body (box 80,72 to 686,274), not its ears */
.scene .bob { animation: bob 4.5s ease-in-out infinite alternate; }
.scene .drift { animation: drift 14s ease-in-out infinite alternate; }
.scene .twinkle { animation: twinkle 2.4s ease-in-out infinite alternate; }
.scene .slow { animation-duration: 6s; }
.scene .late { animation-delay: -1.7s; }
@keyframes swing { from { rotate: -5deg; } to { rotate: 5deg; } }
@keyframes bob { from { translate: 0 -2%; } to { translate: 0 3%; } }
@keyframes drift { from { translate: -6% 0; } to { translate: 6% 0; } }
@keyframes twinkle { from { opacity: 0.35; scale: 0.8; } to { opacity: 1; scale: 1.1; } }

/* UI board: logo, the kit, both medals */
.board { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1.25fr 0.7fr; align-items: center; gap: 3%; padding: 64px 4% 5%; }
.board .b-logo { width: 100%; }
.b-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 6% 6%; align-items: center; }
.b-kit .k-wide { width: 100%; }
.b-kit .k-panel { grid-column: 1 / -1; width: 62%; justify-self: center; }
.k-icons { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4%; }
.k-icons .sp { width: 12%; }
.b-medals { display: flex; flex-direction: column; align-items: center; gap: 4%; }
.b-medals .sp { width: 60%; }

/* 06 sound: a grid of glass tiles over the night sky */
.view[data-pane='sound'] { background: linear-gradient(rgb(20, 28, 68), rgb(48, 54, 116)); overflow-y: auto; }
.sounds { list-style: none; margin: 0; padding: 72px 4% 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.sounds button, .ref-audio {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); backdrop-filter: blur(10px); color: var(--ink);
}
.sounds button:hover, .sounds button[aria-pressed='true'], .ref-audio:hover, .ref-audio[aria-pressed='true'] { border-color: var(--accent); color: var(--ink); }
.sounds .icon, .ref-audio .icon { color: var(--accent); flex: 0 0 18px; width: 18px; height: 18px; }
.sounds strong { display: block; font-size: 13px; font-weight: 500; }
.sounds small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.i-stop { display: none; }
[aria-pressed='true'] > .icon .i-play { display: none; }
[aria-pressed='true'] > .icon .i-stop { display: inline; }

/* ---------- Rail rows are buttons with a picture ---------- */
#rail .rail-item { color: var(--ink); }
#rail .rail-item:last-child { border-bottom: 1px solid var(--rule); }
#rail .thumb { margin-left: auto; flex: 0 0 64px; width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); opacity: 0.75; transition: opacity 0.2s, border-color 0.2s; }
#rail .paper-thumb { object-fit: contain; padding: 3px; background: var(--paper); }
#rail .thumb-icon { display: grid; place-items: center; color: var(--accent); background: var(--panel); }
#rail .thumb-icon svg { width: 22px; height: 22px; }
#rail .rail-item:hover .thumb, #rail .rail-item.selected .thumb { opacity: 1; }
#rail .rail-item.selected .thumb { border-color: var(--accent); }

/* Card facts */
.card .count { margin: 0 0 10px; }
.card > p:not(.count) { margin: 10px 0 0; line-height: 1.6; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 14px 0 0; font-size: 12px; line-height: 1.5; }
.facts dt { color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.facts dd { margin: 0; color: var(--ink); }
.card-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px;
  font-size: 12px; color: var(--accent); text-decoration: none;
}
.card-link:hover { text-decoration: underline; }

/* the world: the whole climb in one taller picture */
.stage[data-view='world'] { aspect-ratio: 4 / 3; }
.scene.world { position: absolute; inset: 0; }

/* keep the stage badge under the stage */
.stage-layout { align-items: start; }
.stage-badge {
  position: static; max-width: 100%; margin: 10px 0 0; padding: 0; white-space: normal;
  border: 0; border-radius: 0; background: none; backdrop-filter: none;
  font-size: 12px; color: var(--muted);
}

/* Glass toggle for the sub-views */
.view-toggle {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; max-width: 100%;
  border: 1px solid var(--glass-line); border-radius: 5px;
  background: var(--glass); backdrop-filter: blur(10px);
}
.view-toggle button { min-height: 32px; padding: 0 12px; border-radius: 3px; font-size: 11px; color: var(--ink); white-space: nowrap; }
.view-toggle button[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* ---------- How dialog: references and prompts ---------- */
.how-refs { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.how-refs-lede { margin: 10px 0 16px; max-width: 820px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.game-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.game-tabs button {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  font: 500 13px / 1 var(--mono); color: var(--muted);
}
.game-tabs button[aria-selected='true'] { border-color: var(--accent); color: var(--ink); }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 14px; margin-bottom: 8px; }
.ref { margin: 0; min-width: 0; }
.ref-media {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4%; padding: 6%;
  aspect-ratio: 16 / 10; border: 1px solid var(--rule); background: var(--paper); overflow: hidden;
}
.ref-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.ref-media.many img { max-width: 28%; max-height: 42%; }
.ref-media.lots { gap: 3% 2%; }
.ref-media.lots img { max-width: 21%; max-height: 27%; }
.ref figcaption { margin-top: 8px; }
.ref strong { display: block; font-weight: 500; font-size: 14px; color: var(--ink); }
.ref small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.ref details { margin-top: 6px; font-size: 12px; color: var(--muted); }
.ref summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ref .prompt-excerpt { max-width: none; font-size: 11.5px; }
.ref-audio { font-size: 13px; }

/* Footer: the shared runtime mounts its tool links in [data-exploration-controls] */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 48px;
  padding: 22px 4.2%; border-top: 1px solid var(--rule); background: var(--exploration-footer-bg);
  font: 400 12px / 1.4 var(--mono); color: var(--muted);
}
.foot-id { letter-spacing: 0.1em; text-transform: uppercase; }
.foot-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.foot-link:hover { color: var(--accent); }
.foot [data-exploration-controls] { flex: 1 1 320px; display: flex; justify-content: flex-end; border-top: 0; background: none; } /* the footer draws the rule and background */

@media (max-width: 800px) {
  /* no filled primary in this row, so an odd last action takes the full width */
  .action-row > .action:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* the game is portrait-friendly: give it a taller stage on phones */
  .stage[data-view='title'].playing { aspect-ratio: 3 / 4; }
  .stage.playing[data-view='title'] .stage-top { inset: auto 10px 10px auto; }
  .stage-play span { display: inline; }
  .stage[data-view='cats'] { aspect-ratio: 4 / 3; }
  .stage[data-view='sound'] { aspect-ratio: auto; }
  .view[data-pane='sound'] { position: static; }
  .sounds { padding: 64px 12px 12px; grid-template-columns: 1fr 1fr; }
  .board { grid-template-columns: 1fr 1.2fr 0.55fr; padding: 52px 3% 4%; }
  .k-icons img { width: 11%; }
}
@media (max-width: 480px) {
  .view-toggle button { padding: 0 9px; font-size: 10.5px; }
  .sounds { padding: 60px 10px 10px; gap: 6px; }
  .sounds button { padding: 8px 10px; gap: 8px; }
}

/* the edition note drops under the eyebrow before it can wrap mid-line */
@media (max-width: 1100px) {
  .eyebrow .edition { display: block; margin: 4px 0 0; }
}
@media (max-width: 360px) {
  .view-toggle button { padding: 0 7px; font-size: 10px; }
}

/* ---------- Themes: a palette per edition ---------- */
body.theme-halloween {
  --bg: #1c1328; --panel: #281a36; --ink: #f6ead8; --muted: #c4b5cc; --accent: #f39a4a; --accent-hover: #f8b36f;
  --rule: #4a3560; --glass: #1c1328df; --glass-line: #f6ead855;
}
body.theme-christmas {
  --bg: #13202b; --panel: #1b2c3a; --ink: #f4f1ea; --muted: #b9c4cc; --accent: #f07a6a; --accent-hover: #f69a8c;
  --rule: #34495a; --glass: #13202bdf; --glass-line: #f4f1ea55;
}

/* Theme switch in the action row: three small pill toggles */
.theme-switch { cursor: default; }
.theme-switch:hover { border-color: var(--rule); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.seg button {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 11px; color: var(--muted);
}
.seg button[aria-pressed='true'] { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Before / after: two pictures on one canvas, the themed one revealed right of the slider */
.compare { z-index: 2; background: #0d0f1a; --pos: 50%; }
#cmp-b { clip-path: inset(0 0 0 var(--pos)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #0006; pointer-events: none; }
.cmp-knob {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); backdrop-filter: blur(8px);
}
.cmp-knob svg { width: 20px; height: 20px; }
.compare:focus-within .cmp-knob { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-label {
  position: absolute; bottom: 14px; padding: 6px 10px; border-radius: 4px; pointer-events: none;
  background: var(--glass); border: 1px solid var(--glass-line); font-size: 11px; color: var(--ink);
}
.cmp-label-a { left: 14px; }
.cmp-label-b { right: 14px; }
#cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 1; }
.stage-top { z-index: 3; }
.tool-wide { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 11px; white-space: nowrap; }
.tool-wide .icon { width: 18px; height: 18px; flex: 0 0 18px; }
.tool-wide[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 480px) { .tool-wide span { display: none; } .tool-wide { padding: 0 9px; } }

@media (max-width: 800px) {
  /* four actions: two by two */
  .action-row > .action:last-child:nth-child(even) { grid-column: auto; }
}
@media (max-width: 800px) {
  /* one row of sub-view chips that scrolls sideways, so it never covers the picture */
  .view-toggle { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .view-toggle::-webkit-scrollbar { display: none; }
  .stage-top > div:first-child { min-width: 0; }
  .stage.comparing { aspect-ratio: 4 / 3; }
}

/* glossary tips: out of the layout while hidden (no sideways scroll on phones), kept inside the dialog when shown */
.term:not(:hover):not(:focus-visible):not([aria-expanded='true']) .term-tip { display: none; }
.term-tip { max-width: min(260px, calc(100vw - 64px)); }

/* a night edition in the World view: the scenery in moonlight, like the game's tint (cats and UI stay bright) */
.scene.world.night .moonlit img { filter: brightness(0.66) saturate(0.85) contrast(1.04); }

/* the game's sound button: a speaker, crossed out while muted */
#sound-tool .snd-on { display: none; }
#sound-tool[aria-pressed='true'] .snd-on { display: inline; }
#sound-tool[aria-pressed='true'] .snd-off { display: none; }

/* the theme picker on the stage; while the page swaps themes by itself, a thin bar fills under the current one */
.stage-badges { flex-wrap: wrap; align-items: flex-start; }
.stage-themes button { position: relative; overflow: hidden; }
.stage.auto-tick.auto-cycling .stage-themes button[aria-pressed='true']::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform-origin: left; animation: theme-fill var(--auto-ms, 5000ms) linear forwards;
}
@keyframes theme-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stage.playing[data-view='title'] .stage-badges { display: none; }

/* while a round is on in the embedded game, the stage buttons step aside (they would cover the play area) */
.stage.in-play .stage-top { display: none !important; }

/* the PLAY button of the before / after title screenshots: invisible, over the painted button, above the slider */
.cmp-play { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.cmp-play:hover, .cmp-play:focus-visible { box-shadow: 0 0 0 3px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); outline: none; }

/* The intro line break balances the two lines only where the first one fits. */
@media (max-width: 1399px) { br.wide-only { display: none; } }