/* Light and Color: a skin over the shared paper workbench (game.css).
   The page stays on paper like the other games. The experiments sit on dark
   panels because coloured light can only be seen properly in a dark room,
   which is also the first thing the page teaches. The one exception is the
   filter experiment, which sits on a white light box, because filters are
   held up against light rather than shone into the dark. */

:root {
  --stage: #0b0d11;
  --stage-edge: #262b33;
  --stage-ink: #d8d4cb;
  --stage-faint: #7c7a74;
  --lightbox: #ffffff;
  --ray-red: #ff3b30;
  --ray-green: #31d158;
  --ray-blue: #2f7bff;
}

.wrap { max-width: 720px; }

.lede { font-size: 19px; line-height: 1.5; margin: 0 0 12px; }
.lede + .lede { color: var(--muted); font-size: 17px; }

.contents {
  margin: 22px 0 8px; padding: 14px 18px 14px 40px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: 16px; line-height: 1.8;
}
.contents a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contents a:hover { color: var(--accent); border-color: var(--accent); }

.step { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.step-num {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); font-weight: 700; margin: 0 0 6px;
}
.step h2 { font-size: 27px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -.01em; }
.step h3 { font-size: 20px; margin: 30px 0 8px; }
.step p { margin: 0 0 12px; }

.stage {
  position: relative; margin: 18px 0 14px; border-radius: 14px; overflow: hidden;
  background: var(--stage); border: 1px solid var(--stage-edge);
}
.stage svg { display: block; width: 100%; height: auto; }
.stage.lightbox { background: var(--lightbox); border-color: var(--line); }
.stage .hint-on-stage {
  position: absolute; left: 12px; bottom: 10px; margin: 0; pointer-events: none;
  font-size: 13px; color: var(--stage-faint);
}
.stage.lightbox .hint-on-stage { color: var(--muted); }

/* Spotlights and filters are dragged with a finger, so only they swallow
   touch scrolling. The rest of the panel still scrolls the page. */
.dragme { cursor: grab; touch-action: none; }
.dragme:active { cursor: grabbing; }

/* ---- buttons that switch something on ---- */
.picks { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.pick {
  min-height: 52px; padding: 10px 18px; font: inherit; font-weight: 700; font-size: 17px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
}
.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--accent-soft); }
.pick:disabled { opacity: .4; cursor: default; }
.pick .dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1px solid rgb(0 0 0 / .25); background: var(--dot, #fff);
}
.pick svg { width: 30px; height: 30px; flex: none; }

/* ---- brightness sliders ---- */
.sliders { display: grid; gap: 10px; margin: 0 0 16px; }
.slider { display: grid; grid-template-columns: 74px 1fr 44px; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.slider output { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.slider input[type="range"] { width: 100%; height: 36px; accent-color: var(--tint, var(--accent)); }

/* ---- what your eye gets, at the spot you tapped ---- */
.readout {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; margin: 0 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.readout .swatch {
  width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--sw, var(--stage));
}
.readout .says { margin: 0 0 6px; font-size: 16px; }
.readout .says b { font-size: 19px; }
.readout .empty { color: var(--muted); margin: 0; grid-column: 1 / -1; }
.cones { display: grid; gap: 4px; }
.cone { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cone .bar { height: 10px; border-radius: 5px; background: #ece8df; overflow: hidden; }
.cone .bar i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--c); transition: width .2s ease; }

/* ---- challenges ---- */
.goals-title { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; margin: 0 0 8px; }
.goals { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.goal {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px;
  border: 1px dashed var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; background: #fff;
}
.goal .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .2); background: var(--dot); }
.goal .tick { width: 16px; color: var(--accent); font-weight: 800; }
.goal.done { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.goal.task { border-radius: 12px; padding: 9px 13px; }
.goals-done { margin: -6px 0 16px; color: var(--accent); font-weight: 600; }

/* ---- the thing worth noticing, shown once you have tried it ---- */
.aha {
  padding: 14px 16px; margin: 6px 0 14px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 12px 12px 0; font-size: 17px;
}
.aha p:last-child { margin-bottom: 0; }
.aha.reveal-in { animation: aha-in .45s ease both; }
@keyframes aha-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.small { font-size: 14px; color: var(--muted); }
.small b { color: var(--ink); }

/* ---- step 3: swallow and bounce ---- */
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 12px; }
.ledger div { padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ledger dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.ledger dd { margin: 3px 0 0; font-weight: 700; font-size: 17px; }

.ray { fill: none; stroke-width: 5; stroke-linecap: round; }
.ray.half { stroke-width: 3; opacity: .55; }
.ray.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ray-draw .55s ease-out forwards; }
.ray.out.draw { animation-delay: .5s; }
@keyframes ray-draw { to { stroke-dashoffset: 0; } }
.stage-label { fill: var(--stage-ink); font: 600 19px ui-rounded, system-ui, sans-serif; }
.stage-faint { fill: var(--stage-faint); font: 500 17px ui-rounded, system-ui, sans-serif; }
.stage-line { fill: none; stroke: var(--stage-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- step 1: prism ---- */
.prism-glass { fill: rgb(200 220 255 / .12); stroke: var(--stage-ink); stroke-width: 2.5; stroke-linejoin: round; }
.prism { transition: transform .7s cubic-bezier(.3, .8, .3, 1); }
.fan path, .beam-white { transition: opacity .4s ease; }

/* ---- screen zoom ---- */
.zoombox { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0; }
.zoombox canvas { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--stage-edge); background: #000; }

/* ---- step 6: sky ---- */
.through { display: grid; gap: 6px; margin: 0 0 12px; }
.through .cone { grid-template-columns: 70px 1fr 46px; font-size: 14px; }
.through output { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; font-weight: 600; }

/* ---- step 7: try it ---- */
.tries { margin: 0; padding-left: 22px; }
.tries li { margin: 0 0 16px; }
.tries b { display: block; font-size: 18px; margin-bottom: 2px; }
.ending { font-size: 20px; line-height: 1.45; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }

/* The screen as a flashlight: the whole window turns one colour. */
.torch {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center;
  padding-bottom: max(24px, env(safe-area-inset-bottom)); cursor: pointer;
}
.torch p {
  margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgb(0 0 0 / .55); color: #fff;
}

@media (max-width: 520px) {
  .step h2 { font-size: 23px; }
  .ledger { grid-template-columns: 1fr; }
  .slider { grid-template-columns: 60px 1fr 40px; }
  .cone { grid-template-columns: 96px 1fr; }
  .pick { padding: 10px 14px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ray.draw { animation: none; stroke-dashoffset: 0; }
  .aha.reveal-in { animation: none; }
  .prism { transition: none; }
}