/* Shared pieces of the child's pages in every theme: unit cards, progress gate, check progress, mini-game.
   Colours come from variables; trial.css and space.css override them. */
:root { --lamp: var(--green); --lamp-glow: transparent; --idle: var(--muted); --track: var(--line); }
main { position: relative; z-index: 1; }

/* points & rank */
.pts { font-weight: 600; color: var(--lamp); text-shadow: 0 0 10px var(--lamp-glow); white-space: nowrap; }
.rank { color: var(--muted); font-size: 14px; margin: -6px 0 6px; }
.theme-link { white-space: nowrap; }

/* unit cards (generator / module / task) */
.gen-card { display: flex !important; gap: 12px; align-items: center; }
.gen-card .body { flex: 1; min-width: 0; }
.gen { width: 42px; height: 42px; flex: none; color: var(--idle); }
.gen .lamp { fill: var(--track); }
.gen.on { color: var(--lamp); }
.gen.on .lamp { fill: var(--lamp); filter: drop-shadow(0 0 6px var(--lamp-glow)); }
.gen.busy .lamp { fill: var(--blue); animation: blink 1.1s infinite; }
.gen.fail .lamp { fill: var(--red); }
@keyframes blink { 50% { opacity: .25; } }
.card.lit { border-color: color-mix(in srgb, var(--lamp) 40%, transparent); }
.card.failing { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.card.skip { opacity: .5; }

/* progress gate */
.gate { display: flex; gap: 4px; margin: 2px 0 10px; }
.gate span { flex: 1; height: 6px; border-radius: 2px; background: var(--track); }
.gate span.on { background: var(--lamp); box-shadow: 0 0 8px var(--lamp-glow); }
.escaped { text-align: center; color: var(--lamp); font-weight: 600; margin: 4px 0 12px; text-shadow: 0 0 12px var(--lamp-glow); }

/* check in progress + mini-game */
.repair { height: 8px; background: var(--track); border-radius: 3px; overflow: hidden; margin: 10px 0 4px; }
.repair b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--lamp));
  animation: repair 60s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes repair { to { width: 96%; } }
.sc { display: grid; place-items: center; margin: 12px 0 4px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.sc svg { width: 150px; height: 150px; cursor: pointer; }
.sc .ring { fill: none; stroke: var(--track); stroke-width: 6; }
.sc .good { fill: none; stroke: var(--text); stroke-width: 10; opacity: .85; }
.sc .great { fill: none; stroke: var(--lamp); stroke-width: 12; }
.sc .needle { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.sc .msg { font-weight: 600; font-size: 15px; fill: var(--text); text-anchor: middle; }
.sc.miss svg { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.sc-score { text-align: center; font-size: 14px; color: var(--muted); }

/* theme picker */
.themes { display: grid; gap: 10px; }
.theme-opt { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit; }
.theme-opt .sw { width: 58px; height: 58px; border-radius: 10px; flex: none; border: 1px solid var(--line); }
body .card.theme-opt.cur { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .repair b { animation: none; width: 60%; }
}

/* day sections: finished days fold to their header; past days collapse into one block */
.head-r { display: flex; align-items: center; gap: 10px; }
.refresh { width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--accent); }
.refresh:active { transform: scale(.92); }
.refresh.spin svg { animation: spin .8s linear infinite; }
details.day > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
details.day > summary::-webkit-details-marker { display: none; }
details.day > summary h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
details.day > summary h2 > span:first-child::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
details.day[open] > summary h2 > span:first-child::before { transform: rotate(90deg); }
details.day:not([open]) > summary h2 { opacity: .75; }
details.overdue { margin-top: 28px; }
details.day > summary h2 > .muted { white-space: nowrap; }