/* CCNDR 2026 Wrap-Up: page, stage, colour fields, story chrome and shared motion.
   Everything inside the stage is sized in --u (1% of the stage's width, set by js/engine.js),
   so one layout scales from a phone to a desktop "device". */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: var(--ccndr-plum-950); color: var(--ccndr-white);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
a { color: inherit; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-drag: none; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Visible focus everywhere; the ring colour flips on light fields. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus, #fff); outline-offset: 3px; border-radius: 6px; }

/* ================= Page (what surrounds the stage on wider screens) ================= */
.page {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  --glow-a: #8851a1; --glow-b: #df6e26;
}
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ambient i {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  transition: background-color 1.4s ease;
  will-change: transform;
}
.ambient i:nth-child(1) { width: 56vmin; height: 56vmin; left: calc(50% - 62vmin); top: 4%; background: var(--glow-a); animation: amb-a 17s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { width: 48vmin; height: 48vmin; left: calc(50% + 12vmin); bottom: 2%; background: var(--glow-b); animation: amb-b 21s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { width: 30vmin; height: 30vmin; left: calc(50% + 28vmin); top: 10%; background: var(--glow-a); opacity: .28; animation: amb-b 25s ease-in-out infinite alternate-reverse; }
@keyframes amb-a { to { transform: translate(6vmin, 8vmin) scale(1.12); } }
@keyframes amb-b { to { transform: translate(-7vmin, -6vmin) scale(.9); } }
.page.is-bleed .ambient, .page.is-bleed .aside, .page.is-bleed .side, .page.is-bleed .hints { display: none; }

.aside {
  position: absolute; left: clamp(20px, 3.2vw, 48px); top: clamp(20px, 3.2vw, 44px); max-width: min(26vw, 300px);
  color: rgba(239, 226, 239, .78); font-size: 13px; line-height: 1.45;
}
.aside img { height: 34px; width: auto; margin-bottom: 14px; opacity: .95; }
.aside strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #fff; margin-bottom: 2px; }

.hints {
  position: absolute; left: clamp(20px, 3.2vw, 48px); bottom: clamp(18px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 9px; color: rgba(239, 226, 239, .7); font-size: 12.5px;
}
.hints span { display: flex; align-items: center; gap: 8px; }
.hints kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 7px; border: 1px solid rgba(239, 226, 239, .28); background: rgba(255, 255, 255, .05);
  font: 600 11.5px/1 var(--font-body); color: rgba(255, 255, 255, .88);
}

.side {
  position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(239, 226, 239, .3); background: rgba(255, 255, 255, .04);
  transition: background-color .2s, transform .2s var(--ease-out), opacity .2s, border-color .2s;
}
.side:hover { background: rgba(255, 255, 255, .14); border-color: rgba(239, 226, 239, .6); }
.side:active { transform: scale(.92); }
.side[disabled] { opacity: .28; cursor: default; }
.side svg { width: 18px; height: 18px; }
.side--prev { left: calc(50% - var(--stage-w, 400px) / 2 - 74px); }
.side--next { left: calc(50% + var(--stage-w, 400px) / 2 + 28px); }
@media (max-width: 760px) { .aside, .hints, .side { display: none; } }
@media (max-width: 1080px) { .aside { max-width: 200px; } .aside p { display: none; } }

/* ================= Stage ================= */
.stage {
  /* tone: dark (default). Light and ember tones are set by the engine per card. */
  --fg: #fff; --fg-soft: rgba(255, 255, 255, .74); --accent: var(--ccndr-orange-400);
  --track: rgba(255, 255, 255, .26); --fill: #fff;
  --chip-bg: rgba(255, 255, 255, .13); --chip-fg: #fff; --chip-dot: var(--ccndr-orange-400);
  --ctl-bg: rgba(255, 255, 255, .13); --ctl-fg: #fff; --ctl-on-bg: #fff; --ctl-on-fg: var(--ccndr-plum-900);
  --focus: #fff;

  position: relative; flex: none; width: var(--stage-w, 100vw); height: var(--stage-h, 100vh);
  overflow: hidden; border-radius: calc(var(--u) * 4.4); background: var(--ccndr-plum-900);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .09);
  isolation: isolate; color: var(--fg);
  font-size: calc(var(--u) * 4); line-height: 1.38;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent;
}
.page.is-bleed .stage { border-radius: 0; box-shadow: none; }
.stage.tone-light {
  --fg: var(--ccndr-plum-900); --fg-soft: rgba(43, 32, 51, .74); --accent: var(--ccndr-orange-600);
  --track: rgba(76, 45, 97, .2); --fill: var(--ccndr-purple-700);
  --chip-bg: rgba(76, 45, 97, .1); --chip-fg: var(--ccndr-purple-700); --chip-dot: var(--ccndr-orange-500);
  --ctl-bg: rgba(76, 45, 97, .1); --ctl-fg: var(--ccndr-purple-700); --ctl-on-bg: var(--ccndr-purple-700); --ctl-on-fg: #fff;
  --focus: var(--ccndr-purple-700);
}
.stage.tone-ember {
  --fg: var(--ccndr-plum-900); --fg-soft: rgba(43, 32, 51, .82); --accent: #fff;
  --track: rgba(43, 32, 51, .26); --fill: var(--ccndr-plum-900);
  --chip-bg: var(--ccndr-plum-900); --chip-fg: #fff; --chip-dot: var(--ccndr-orange-400);
  --ctl-bg: rgba(43, 32, 51, .16); --ctl-fg: var(--ccndr-plum-900); --ctl-on-bg: var(--ccndr-plum-900); --ctl-on-fg: #fff;
  --focus: var(--ccndr-plum-900);
}

.fields, .field, .grain, .sky, .cards, .card, .fx { position: absolute; inset: 0; }
.fields { z-index: 0; }
.field { will-change: clip-path; }
.grain {
  z-index: 1; pointer-events: none; opacity: .34; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 -.1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: calc(var(--u) * 46) auto;
}
.sky { z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.cards { z-index: 3; }
.fx { z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Colour fields: one per card mood ---------- */
.field--night {
  background:
    radial-gradient(95% 52% at 50% 36%, rgba(136, 81, 161, .46) 0%, rgba(76, 45, 97, .22) 46%, transparent 76%),
    linear-gradient(180deg, #2b2033 0%, #241a2b 58%, #1c1422 100%);
}
.field--ember {
  background:
    radial-gradient(85% 46% at 92% 4%, rgba(251, 208, 163, .8) 0%, rgba(245, 165, 90, .3) 45%, transparent 68%),
    radial-gradient(95% 55% at 0% 104%, rgba(203, 94, 28, .95) 0%, transparent 70%),
    linear-gradient(165deg, #f18b33 0%, #e87a2a 46%, #dc6c25 100%);
}
.field--royal {
  background:
    radial-gradient(75% 44% at 84% 10%, rgba(136, 81, 161, .8) 0%, transparent 70%),
    radial-gradient(85% 50% at 6% 98%, rgba(43, 32, 51, .85) 0%, transparent 72%),
    linear-gradient(180deg, #54316b 0%, #4c2d61 48%, #3a2249 100%);
}
.field--paper {
  background:
    radial-gradient(75% 40% at 96% 0%, rgba(239, 226, 239, 1) 0%, transparent 70%),
    radial-gradient(70% 40% at 0% 100%, rgba(251, 208, 163, .55) 0%, transparent 70%),
    var(--ccndr-paper-100);
}
.field--violet {
  background:
    radial-gradient(70% 42% at 104% 62%, rgba(238, 133, 45, .5) 0%, transparent 66%),
    radial-gradient(95% 60% at 0% 104%, rgba(58, 34, 73, .95) 0%, transparent 74%),
    linear-gradient(172deg, #8f54a8 0%, #8851a1 34%, #6f3f86 100%);
}
.field--lilac {
  background:
    radial-gradient(75% 42% at 100% 6%, rgba(251, 208, 163, .6) 0%, transparent 66%),
    radial-gradient(80% 50% at 0% 58%, rgba(201, 168, 210, .55) 0%, transparent 70%),
    linear-gradient(180deg, #f6f0f6 0%, #efe2ef 58%, #e8d6ea 100%);
}
.field--stage {
  background:
    radial-gradient(64% 36% at 50% 40%, rgba(136, 81, 161, .6) 0%, rgba(76, 45, 97, .22) 56%, transparent 80%),
    radial-gradient(60% 18% at 50% 74%, rgba(238, 133, 45, .2) 0%, transparent 72%),
    linear-gradient(180deg, #1f1626 0%, #2b2033 48%, #1c1422 100%);
}
.field--dawn {
  background:
    radial-gradient(130% 50% at 50% 112%, #f18b33 0%, rgba(223, 110, 38, .82) 28%, rgba(136, 81, 161, .42) 60%, transparent 82%),
    radial-gradient(70% 40% at 90% 0%, rgba(136, 81, 161, .7) 0%, transparent 70%),
    linear-gradient(180deg, #35203f 0%, #4c2d61 44%, #6a3b80 100%);
}

/* ================= Story chrome ================= */
.chrome { position: absolute; left: 0; right: 0; top: 0; z-index: 6; pointer-events: none; padding: calc(var(--u) * 3) calc(var(--u) * 4) 0; transition: opacity .25s ease; }
.chrome > * { pointer-events: none; }
.chrome button { pointer-events: auto; }
.stage.is-holding .chrome { opacity: 0; }

.progress { display: flex; gap: calc(var(--u) * .9); height: calc(var(--u) * .9); }
.progress span { flex: 1; border-radius: 99px; background: var(--track); overflow: hidden; transition: background-color .5s ease; }
.progress i { display: block; height: 100%; border-radius: 99px; background: var(--fill); transform-origin: 0 50%; transform: scaleX(0); transition: background-color .5s ease; }

.chrome__row { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 2.4); }
.chrome__brand { display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.chrome__mark { width: calc(var(--u) * 7); height: calc(var(--u) * 6.4); color: var(--fg); flex: none; transition: color .5s ease; }
.chrome__mark svg { display: block; width: 100%; height: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.3); white-space: nowrap;
  height: calc(var(--u) * 5.6); padding: 0 calc(var(--u) * 2.3) 0 calc(var(--u) * 1.9); border-radius: 99px;
  background: var(--chip-bg); color: var(--chip-fg);
  font: 700 calc(var(--u) * 2.45)/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase;
  transition: background-color .5s ease, color .5s ease;
}
.chip i { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 50%; background: var(--chip-dot); flex: none; }

.chrome__ctl { display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.lang { display: flex; padding: calc(var(--u) * .6); border-radius: 99px; background: var(--ctl-bg); transition: background-color .5s ease; }
.lang__btn {
  position: relative; min-width: calc(var(--u) * 8.2); height: calc(var(--u) * 6.6); padding: 0 calc(var(--u) * 1.6); border-radius: 99px;
  font: 700 calc(var(--u) * 2.9)/1 var(--font-body); letter-spacing: .06em; color: var(--ctl-fg);
  transition: background-color .25s ease, color .25s ease;
}
.lang__btn[aria-pressed="true"] { background: var(--ctl-on-bg); color: var(--ctl-on-fg); }
.ctl {
  position: relative; width: calc(var(--u) * 7.8); height: calc(var(--u) * 7.8); border-radius: 50%;
  display: grid; place-items: center; background: var(--ctl-bg); color: var(--ctl-fg);
  transition: background-color .25s ease, color .5s ease, transform .2s var(--ease-out);
}
.ctl:active { transform: scale(.9); }
.ctl svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); grid-area: 1 / 1; transition: opacity .2s ease, transform .3s var(--ease-out); }
.ctl svg:not(.is-on) { opacity: 0; transform: scale(.4) rotate(-40deg); }
/* Bigger hit areas than the visible controls */
.ctl::after, .lang__btn::after { content: ''; position: absolute; inset: calc(var(--u) * -1.6); }
.lang__btn::after { inset: calc(var(--u) * -1.8) 0; }

.paused {
  position: absolute; left: 50%; top: calc(var(--u) * 19); z-index: 7; transform: translate(-50%, calc(var(--u) * -2)); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.7) calc(var(--u) * 3.2); border-radius: 99px;
  background: rgba(28, 20, 34, .82); color: #fff; font: 700 calc(var(--u) * 2.7)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .2s ease, transform .3s var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.paused::before { content: ''; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.4); border-left: calc(var(--u) * .75) solid var(--ccndr-orange-400); border-right: calc(var(--u) * .75) solid var(--ccndr-orange-400); }
.stage.is-holding .paused { opacity: 1; transform: translate(-50%, 0); top: calc(var(--u) * 6); }

/* ================= Cards: shared ================= */
.card {
  z-index: 3; display: flex; flex-direction: column;
  padding: calc(var(--u) * 20) calc(var(--u) * 7) calc(var(--u) * 7);
}
.card.is-leaving { animation: card-out .3s var(--ease-in-out) both; pointer-events: none; }
@keyframes card-out { to { opacity: 0; transform: translateY(calc(var(--u) * -2.4)) scale(.985); } }
.stage.is-frozen .card *, .stage.is-frozen .card *::before, .stage.is-frozen .card *::after { animation-play-state: paused !important; }

.kicker {
  font: 700 calc(var(--u) * 3.05)/1.25 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--kicker, var(--ccndr-orange-400));
}
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.028em; line-height: 1.02; text-wrap: balance; }
.is-accent { color: var(--accent); }

/* Pill buttons, as on ccndr.ca: orange filled, or outline */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.8);
  min-height: calc(var(--u) * 11.4); padding: 0 calc(var(--u) * 5.2); border-radius: 99px;
  font: 600 calc(var(--u) * 3.9)/1 var(--font-display); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease-out), background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.pill:active { transform: scale(.96); }
.pill svg { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); flex: none; }
.pill--solid { background: var(--ccndr-orange-400); color: var(--ccndr-plum-900); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3.4) rgba(28, 20, 34, .32), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pill--solid:hover { background: var(--ccndr-orange-300); }
.pill--ghost { color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * .35) rgba(255, 255, 255, .78); }
.pill--ghost:hover { background: rgba(255, 255, 255, .14); }

/* ================= Kinetic type ================= */
.kw { display: inline-block; overflow: hidden; vertical-align: top; padding: .18em .07em .22em; margin: -.18em -.07em -.22em; }
.kw > i { display: inline-block; font-style: normal; }
.kword { display: inline-block; white-space: nowrap; }
.card.is-active .kw > i {
  animation: k-rise .95s var(--spring) both;
  animation-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--s, 55ms));
}
@keyframes k-rise { from { transform: translateY(130%) rotate(7deg); } to { transform: none; } }

.card.is-active [data-k] { animation-duration: .8s; animation-fill-mode: both; animation-timing-function: var(--ease-out); animation-delay: var(--d, 0ms); }
.card.is-active [data-k="up"] { animation-name: k-up; }
.card.is-active [data-k="down"] { animation-name: k-down; }
.card.is-active [data-k="left"] { animation-name: k-left; }
.card.is-active [data-k="fade"] { animation-name: k-fade; }
.card.is-active [data-k="pop"] { animation-name: k-pop; animation-duration: .9s; animation-timing-function: var(--spring); }
@keyframes k-up { from { opacity: 0; transform: translateY(calc(var(--u) * 5)); } to { opacity: 1; transform: none; } }
@keyframes k-down { from { opacity: 0; transform: translateY(calc(var(--u) * -5)); } to { opacity: 1; transform: none; } }
@keyframes k-left { from { opacity: 0; transform: translateX(calc(var(--u) * 9)); } to { opacity: 1; transform: none; } }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-pop { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* After a language switch the card re-sets its type quickly instead of replaying every delay. */
.card.is-settled .kw > i, .card.is-settled [data-k] { animation-delay: 0ms !important; animation-duration: .45s !important; }

/* Rolling digits */
.odo { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odo__row { display: inline-flex; align-items: flex-start; }
.odo__d { display: inline-block; height: 1.08em; width: .62em; overflow: hidden; text-align: center; }
.odo__strip { display: block; will-change: transform; }
.odo__strip b { display: block; height: 1.08em; line-height: 1.08em; font-weight: inherit; }
.odo__sep { display: inline-block; height: 1.08em; line-height: 1.08em; width: .3em; text-align: center; }
.odo__gap { display: inline-block; width: .2em; }

/* ================= Reduced motion =================
   No auto-advance (js), transitions become fades, count-ups jump to their value (js). */
.is-reduced .card.is-active .kw > i,
.is-reduced .card.is-active [data-k] {
  animation-name: k-fade !important; animation-duration: .35s !important; animation-delay: 0ms !important; animation-timing-function: ease !important;
}
.is-reduced .card.is-leaving { animation: k-fade .2s ease reverse both; }
.is-reduced .ambient i { animation: none; }
.is-reduced .card *, .is-reduced .card *::before, .is-reduced .card *::after { animation-iteration-count: 1 !important; }