/* Lumen (domain Lumen): the home cards, the example, the board of lamps. Prefixed classes, the colours of the page
   from the tokens of neurostim.css; the lamps their own (a lit lamp is warm yellow on any theme). */
.lu { --lu-on: #ffd23f; --lu-glow: rgba(255, 196, 0, 0.55); --lu-off: rgba(255, 255, 255, 0.07); --lu-frame: var(--ns-ink, #2a2124); }
.lu-day { font-size: var(--ns-size-lg, 1.125rem); font-weight: 400; }
.lu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4, 1rem); margin: 0 0 var(--ns-space-5, 1.5rem); }
.lu-card { display: flex; flex-direction: column; gap: var(--ns-space-2, 0.5rem); }
.lu-card h3 { margin: 0; }
.lu-card p, .lu-card form { margin: 0; }
.lu-time { font-size: var(--ns-size-2xl, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #1a1416); }
.lu-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5, 1.5rem); }
.lu-rules { margin-top: var(--ns-space-6, 2rem); }

/* The bar above the board: clock, presses, lamps still lit. */
.lu-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ns-space-2, 0.5rem) var(--ns-space-5, 1.5rem); margin: 0 0 var(--ns-space-3, 0.75rem); font-size: var(--ns-size-lg, 1.125rem); font-variant-numeric: tabular-nums; }
.lu-bar p { margin: 0; }
.lu-bar output { font-weight: 700; color: var(--ns-text-strong, #1a1416); }
#lu-clock { font-size: var(--ns-size-xl, 1.375rem); }

/* The board: a dark frame, n × n lamps that fill the width of a phone and stop at 26rem. */
.lu-board { --lu-gap: clamp(4px, 1.4vw, 8px); display: grid; grid-template-columns: repeat(var(--lu-n), 1fr); gap: var(--lu-gap); width: min(100%, 26rem); margin: 0 auto var(--ns-space-4, 1rem); padding: var(--lu-gap); box-sizing: border-box; background: var(--lu-frame); border-radius: var(--ns-radius-lg, 12px); user-select: none; -webkit-user-select: none; }
/* Above the global button rules (button:hover, button:disabled): a lamp keeps its colours under the pointer and once
   the grid is off. */
.lu-board .lu-lamp { display: block; aspect-ratio: 1; width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22%; background: var(--lu-off); box-shadow: none; cursor: pointer; touch-action: manipulation; transition: background-color 0.18s ease, box-shadow 0.25s ease, transform 0.12s ease; }
.lu-board .lu-lamp[aria-pressed="true"], .lu-board .lu-lamp[data-on] { background: var(--lu-on); border-color: #fff3b0; box-shadow: 0 0 14px 2px var(--lu-glow), inset 0 -3px 0 rgba(160, 110, 0, 0.35); }
/* The hover of a mouse only: on a touch screen it stays on the lamp tapped. */
@media (hover: hover) {
    .lu-board .lu-lamp:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
    .lu-board .lu-lamp[aria-pressed="true"]:hover:not(:disabled) { background: #ffe07a; }
}
.lu-board .lu-lamp:disabled { cursor: default; background: var(--lu-off); border-color: rgba(255, 255, 255, 0.12); }
.lu-board .lu-lamp.lu-aim { outline: 2px dashed rgba(255, 255, 255, 0.7); outline-offset: -5px; }
.lu-board .lu-lamp:focus-visible { outline: 3px solid var(--ns-focus, #1a73e8); outline-offset: 2px; position: relative; z-index: 1; }
.lu-board .lu-lamp:active:not(:disabled) { transform: scale(0.92); }
.lu-lamp.lu-f { animation: lu-pop 0.28s ease-out; }
@keyframes lu-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.lu-done .lu-lamp { animation: lu-wave 0.7s ease-out; }
@keyframes lu-wave { 0% { box-shadow: 0 0 0 0 var(--lu-glow); } 40% { box-shadow: 0 0 18px 4px var(--lu-glow); } 100% { box-shadow: none; } }
.lu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3, 0.75rem); justify-content: center; }
.lu-won { margin: 0 0 var(--ns-space-3, 0.75rem); text-align: center; font-size: var(--ns-size-xl, 1.375rem); font-weight: 700; color: var(--ns-ok, #2e7d32); }

/* The example of the home page: 3 × 3, two presses in a loop of 8 s (a: top left, b: lit by the first press, c: lit
   until the second); the finger presses top left, then the centre. */
.lu-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3, 0.75rem) var(--ns-space-4, 1rem); margin: 0 0 var(--ns-space-5, 1.5rem); }
.lu-demo figcaption { flex: 1 1 14rem; color: var(--ns-muted, #6b5f63); }
.lu-demo-grid { --lu-d: 2.25rem; --lu-dg: 6px; position: relative; display: grid; grid-template-columns: repeat(3, var(--lu-d)); gap: var(--lu-dg); padding: var(--lu-dg); background: var(--lu-frame); border-radius: var(--ns-radius, 8px); }
.lu-demo-grid > span:not(.lu-demo-finger) { height: var(--lu-d); border-radius: 22%; background: var(--lu-off); border: 1px solid rgba(255, 255, 255, 0.12); }
.lu-demo-a { animation: lu-da 8s infinite; }
.lu-demo-b { animation: lu-db 8s infinite; }
.lu-demo-c { animation: lu-dc 8s infinite; }
@keyframes lu-da { 0%, 24% { background: var(--lu-on); box-shadow: 0 0 12px var(--lu-glow); } 27%, 92% { background: var(--lu-off); box-shadow: none; } 96%, 100% { background: var(--lu-on); box-shadow: 0 0 12px var(--lu-glow); } }
@keyframes lu-db { 0%, 24% { background: var(--lu-off); box-shadow: none; } 27%, 54% { background: var(--lu-on); box-shadow: 0 0 12px var(--lu-glow); } 57%, 100% { background: var(--lu-off); box-shadow: none; } }
@keyframes lu-dc { 0%, 54% { background: var(--lu-on); box-shadow: 0 0 12px var(--lu-glow); } 57%, 92% { background: var(--lu-off); box-shadow: none; } 96%, 100% { background: var(--lu-on); box-shadow: 0 0 12px var(--lu-glow); } }
.lu-demo-finger { position: absolute; top: var(--lu-dg); left: var(--lu-dg); width: var(--lu-d); height: var(--lu-d); border: 3px solid #fff; border-radius: 50%; box-sizing: border-box; opacity: 0; pointer-events: none; animation: lu-df 8s infinite; }
@keyframes lu-df {
    0%, 12% { opacity: 0; transform: scale(1.5); }
    19%, 26% { opacity: 1; transform: scale(0.8); }
    32%, 38% { opacity: 0; transform: translate(calc(var(--lu-d) + var(--lu-dg)), calc(var(--lu-d) + var(--lu-dg))) scale(1.5); }
    46%, 53% { opacity: 1; transform: translate(calc(var(--lu-d) + var(--lu-dg)), calc(var(--lu-d) + var(--lu-dg))) scale(0.8); }
    60%, 100% { opacity: 0; transform: translate(calc(var(--lu-d) + var(--lu-dg)), calc(var(--lu-d) + var(--lu-dg))) scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .lu-demo-a, .lu-demo-b, .lu-demo-c, .lu-demo-finger, .lu-lamp.lu-f, .lu-done .lu-lamp { animation: none; }
    .lu-demo-b, .lu-demo-c { background: var(--lu-on) !important; }
    .lu-board .lu-lamp { transition: none; }
}

/* The result: the grid of the start beside the time, the curve under them. */
.lu-result-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-4, 1rem); }
.lu-small .lu-board { width: 9rem; margin: 0; --lu-gap: 3px; }
.lu-small .lu-board .lu-lamp { cursor: default; }
.lu-result-top > div:last-child { flex: 1 1 10rem; min-width: 0; }
.lu-result-top p { margin: 0 0 var(--ns-space-2, 0.5rem); }
.lu-moves-line { font-size: var(--ns-size-lg, 1.125rem); }