:root {
  color-scheme:dark;
  --lime:#d4ff62;
  --mono:'JetBrains Mono',monospace;
  --body:'Inter',sans-serif;
  --display:'Bricolage Grotesque',sans-serif;
}
* {
  box-sizing:border-box;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
  cursor:pointer;
}
button:disabled {
  cursor:default;
  opacity:.45;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--ch-amber);
  outline-offset:4px;
}
button,a,summary {
  touch-action:manipulation;
}
[hidden] {
  display:none!important;
}
.pulse-stage {
  max-width:1160px;
  gap:18px;
}
.pulse-stage .ch-topbar {
  gap:20px;
}
.pulse-stage .ch-btn {
  min-height:44px;
}
.pulse-stage .ch-title h1 {
  font-size:27px;
}
.session-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 6px;
}
.session-bar h2 {
  font:700 27px var(--display);
  margin:0;
  color:var(--ch-ink);
}
.session-bar h2 span {
  color:var(--ch-brass);
}
.session-bar p {
  font:12px var(--body);
  color:var(--ch-ink2);
  margin:6px 0 0;
}
.input-options {
  display:flex;
  gap:3px;
  border:1px solid var(--ch-line);
  padding:4px;
  border-radius:12px;
  background:#08040266;
}
.input-options button {
  min-height:40px;
  border:0;
  padding:8px 14px;
  border-radius:8px;
  color:var(--ch-ink2);
  background:transparent;
  font:500 12px var(--body);
}
.input-options button[aria-pressed=true] {
  background:#d89c5625;
  color:var(--ch-amber);
  box-shadow:inset 0 0 0 1px #d89c5644;
}
.input-options button:disabled {
  opacity:.65;
}
#fit {
  position:relative;
  width:100%;
  margin:0 auto;
}
.console {
  display:grid;
  grid-template-columns:minmax(0,1fr) 246px;
  gap:8px;
  padding:8px;
  border:1px solid #9b784b;
  border-radius:18px;
  background:linear-gradient(140deg,#60432a,#302319 28%,#6d4b2b 80%,#332317);
  box-shadow:0 15px 40px #0006,inset 0 1px 0 #ecc79055;
  transform-origin:top left;
}
.playfield {
  padding:21px;
  background:linear-gradient(135deg,#20291f,#101810);
  border:1px solid #060c06;
  border-radius:12px;
  box-shadow:inset 0 1px 1px #b7c68b25;
}
.panel-heading,.panel-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font:10px var(--mono);
  letter-spacing:.5px;
  color:#a4b298;
}
.panel-heading>span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-heading b {
  font-weight:500;
}
.status-dot {
  height:6px;
  width:6px;
  background:var(--lime);
  border-radius:50%;
  box-shadow:0 0 8px #d4ff6255;
}
.grid-wrap {
  position:relative;
  margin:18px 0;
}
.light-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
}
.node {
  position:relative;
  display:grid;
  place-items:center;
  height:110px;
  isolation:isolate;
  border:1px solid #0b1009;
  border-radius:10px;
  background:linear-gradient(145deg,#344030,#222b20);
  box-shadow:0 4px 0 #070c07,0 6px 12px #0005,inset 0 1px 0 #ecffd922;
  color:#dae5ce;
  touch-action:manipulation;
  user-select:none;
}
.node:disabled {
  opacity:1;
}
.lens {
  width:58px;
  height:58px;
  border:1px solid #4d5b3f;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 40% 30%,#394730,#182315 75%);
  box-shadow:0 2px 5px #0008,inset 0 1px 3px #a3b98a15;
  position:relative;
}
.lens b {
  font:500 26px var(--mono);
  color:#e7ffb8;
  opacity:0;
}
.node .key {
  position:absolute;
  left:10px;
  top:9px;
  font:10px var(--mono);
  color:#a1b38e;
}
.node .number {
  position:absolute;
  right:9px;
  bottom:8px;
  font:9px var(--mono);
  color:#7d906e;
}
.life-ring {
  position:absolute;
  width:74px;
  height:74px;
  transform:rotate(-90deg);
  pointer-events:none;
  overflow:visible;
  opacity:0;
}
.life-ring circle {
  fill:none;
  stroke:var(--lime);
  stroke-width:2;
  stroke-dasharray:100;
  stroke-dashoffset:calc((1 - var(--life,1))*100);
  stroke-linecap:round;
}
.node.lit {
  border-color:#c5ee5677;
  background:linear-gradient(145deg,#52643a,#34432a);
  box-shadow:0 4px 0 #0c1607,0 0 25px #b9ef3920,inset 0 1px 0 #e4ff9755;
}
.node.lit .lens {
  background:radial-gradient(circle at 40% 28%,#f6ffd0,#d0ff58 60%,#95c832);
  border-color:#e7ffac;
  box-shadow:0 0 18px #c8ff6270,0 0 40px #c8ff6222;
}
.node.lit .lens b {
  opacity:1;
  color:#3d5916;
}
.node.lit .life-ring {
  opacity:1;
}
.node.hit .lens {
  background:#68863e;
  border-color:var(--lime);
}
.node.hit .lens b {
  opacity:1;
}
.node.wrong {
  background:#713a34;
}
.node.wrong .lens {
  border-color:#ff9e8c;
}
.node.expired .lens {
  border-color:#efb163;
}
.keyboard-mode .node .key {
  font-size:14px;
  color:#e0e6d5;
  font-weight:600;
}
.keyboard-mode .node .number {
  display:none;
}
.overlay,.countdown {
  position:absolute;
  top:-5px;right:-5px;bottom:-5px;left:-5px;
  inset:-5px;
  display:grid;
  place-items:center;
  background:#11190edb;
  backdrop-filter:blur(3px);
  border-radius:10px;
  z-index:2;
  text-align:center;
}
.overlay-card {
  padding:16px;
  width:100%;
}
.eyebrow {
  font:10px var(--mono);
  letter-spacing:1.4px;
  color:var(--ch-brass);
}
.overlay .eyebrow {
  color:var(--lime);
}
.overlay h2 {
  font:700 37px var(--display);
  letter-spacing:-1px;
  margin:16px 0 10px;
}
.overlay p {
  font:13px/1.75 var(--body);
  color:#c1cbb6;
  margin:0 0 22px;
}
.primary {
  min-height:48px;
  min-width:230px;
  border:1px solid #e5ffb1;
  border-radius:9px;
  padding:12px 20px;
  background:var(--lime);
  box-shadow:0 3px 20px #d4ff6220;
  color:#1c2a0f;
  font:700 14px var(--body);
  text-align:left;
}
.primary span {
  float:right;
  font-size:21px;
  line-height:20px;
  margin-left:18px;
}
.primary:hover {
  background:#e5ffad;
}
.primary:active {
  transform:translateY(1px);
}
.start-hint {
  display:block;
  font:10px/1.6 var(--body);
  color:#adba9f;
  margin:14px auto 0;
  max-width:290px;
}
.countdown {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.countdown b {
  font:800 100px/1 var(--display);
  color:var(--lime);
}
.countdown span {
  font:12px var(--mono);
  letter-spacing:3px;
  color:#c8d2ba;
}
.lockout {
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  inset:0;
  z-index:3;
  border:2px solid #ed8b76;
  border-radius:10px;
  pointer-events:none;
}
.lockout span {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  background:#3a1815f5;
  color:#ffd6cb;
  padding:10px 14px;
  font:600 11px var(--mono);
  border-radius:8px;
}
.lockout>i {
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:100%;
  background:#f59b81;
  transform-origin:left;
}
.panel-footer {
  min-height:18px;
  font-size:9px;
}
.panel-footer b {
  white-space:nowrap;
  color:var(--lime);
  font-weight:500;
}
.telemetry {
  padding:22px 19px;
  background:linear-gradient(120deg,#20170f,#181109);
  border:1px solid #c0925533;
  border-radius:10px;
}
.label {
  font:10px var(--mono);
  letter-spacing:1px;
  color:var(--ch-ink2);
}
.timer {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:6px 0 12px;
}
.timer strong {
  font:700 58px/1 var(--display);
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
}
.timer strong span {
  font-size:35px;
  color:#baa17f;
  letter-spacing:-1px;
}
.timer small {
  font:10px var(--mono);
  color:var(--ch-ink2);
}
.time-track {
  height:4px;
  background:#d4ac6333;
  border-radius:2px;
  overflow:hidden;
}
.time-track i {
  display:block;
  height:100%;
  background:var(--ch-amber);
  transform-origin:left;
}
.hits-block {
  padding:20px 0;
  border-bottom:1px solid var(--ch-line);
}
.hits-block strong {
  display:block;
  font:700 65px/1.1 var(--display);
  color:var(--lime);
  font-variant-numeric:tabular-nums;
  letter-spacing:-2px;
}
.hits-block>span:last-child {
  font:9px/1.5 var(--mono);
  display:block;
  margin-top:4px;
  color:var(--ch-ink2);
}
.metrics {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:20px;
}
.metrics .label {
  font-size:8px;
  letter-spacing:.4px;
}
.metrics b {
  display:block;
  font:500 20px var(--mono);
  margin-top:9px;
}
.metrics small {
  font:10px var(--mono);
  color:var(--ch-ink2);
}
.signal {
  margin-top:25px;
}
.signal>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.signal .label,.signal span {
  font:8px var(--mono);
  letter-spacing:0;
  color:var(--ch-ink2);
}
.trace {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:32px;
  margin-top:12px;
}
.trace i {
  flex:1;
  background:#a2b88430;
  min-height:2px;
}
.trace i.recorded {
  background:#c3df87;
}
.under-panel {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:0 5px;
  color:var(--ch-ink2);
  font:11px/1.5 var(--body);
}
.under-panel b {
  color:var(--ch-ink);
  font-weight:500;
}
.urgent .timer strong,.urgent .timer strong span {
  color:#ffb887;
}
.urgent .time-track i {
  background:#ff9256;
}
.urgent .console {
  border-color:#ef9457;
}
.urgent .status-dot {
  background:#ff9256;
}
.pulse-stage+.game-overview {
  margin-top:24px;
}
summary {
  cursor:pointer;
  color:var(--ch-brass);
  font:600 13px var(--body);
  padding:8px 0;
}
details p:first-of-type {
  margin-top:14px;
}
dialog {
  position:fixed;
  border:1px solid #b7894f;
  border-radius:20px;
  padding:0;
  width:calc(100vw - 24px);
  max-width:520px;
  width:min(520px,calc(100vw - 24px));
  max-height:calc(100vh - 28px);
  max-height:calc(100svh - 28px);
  overflow:auto;
  background:linear-gradient(135deg,#2a1d12,#140d08);
  color:var(--ch-ink);
  box-shadow:0 30px 100px #000c;
}
dialog::backdrop {
  background:#080603c9;
  backdrop-filter:blur(5px);
}
.result-card {
  position:relative;
  padding:27px;
  text-align:center;
}
.close-result {
  position:absolute;
  right:5px;
  top:5px;
  border:0;
  border-radius:50%;
  width:44px;
  height:44px;
  background:transparent;
  color:var(--ch-ink2);
  font-size:25px;
}
.result-card .eyebrow {
  font-size:10px;
  margin-top:10px;
}
.result-card h2 {
  font:700 29px var(--display);
  letter-spacing:-.7px;
  margin:12px 0 0;
}
.result-score {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:8px;
}
.result-score strong {
  font:800 84px/1.1 var(--display);
  color:var(--lime);
  letter-spacing:-4px;
}
.result-score>span {
  text-align:left;
  font:12px var(--mono);
  color:var(--ch-ink);
}
.result-score small {
  display:block;
  font:9px var(--mono);
  color:var(--ch-ink2);
  margin-top:6px;
}
#comparison {
  font:12px/1.6 var(--body);
  color:var(--ch-ink2);
  margin:6px 0 18px;
}
.result-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--ch-line);
  padding:16px 0;
  gap:8px;
}
.result-stats b {
  display:block;
  font:600 20px var(--mono);
  color:var(--ch-ink);
}
.result-stats span {
  display:block;
  font:10px var(--body);
  color:var(--ch-ink2);
  margin-top:6px;
}
.result-misses {
  font:10px var(--mono);
  color:var(--ch-ink2);
  margin:12px 0;
}
.history {
  margin:15px 0;
}
.history .label {
  font-size:9px;
}
#history {
  display:flex;
  gap:6px;
  justify-content:center;
  margin:9px 0 16px;
}
#history span {
  padding:5px 12px;
  border:1px solid var(--ch-line);
  border-radius:6px;
  font:12px var(--mono);
  color:var(--ch-ink2);
}
#history span:last-child {
  border-color:#d4ff6255;
  color:var(--lime);
  background:#d4ff620b;
}
.result-card>.primary {
  width:100%;
}
.save-note {
  font:9px/1.6 var(--body);
  color:var(--ch-ink2);
  margin:16px 0 0;
}
#celebration:not(:empty) {
  margin:14px 0 18px;
}
#result-next {
  text-align:left;
}
@media(max-width:760px) {
  .pulse-stage {
    margin:12px auto;
    padding:0 12px;
    gap:12px;
  }
  .pulse-stage .ch-topbar {
    grid-template-columns:auto 1fr auto;
    grid-template-areas:'back title scores' 'controls controls controls';
    gap:10px;
    padding:10px 12px;
    border-radius:13px;
  }
  .pulse-stage .ch-title h1 {
    font-size:23px;
  }
  .pulse-stage .ch-eyebrow {
    font-size:8px;
    letter-spacing:1px;
  }
  .pulse-stage .ch-controls {
    justify-content:flex-end;
  }
  .pulse-stage .ch-back {
    padding:10px;
    min-height:42px;
  }
  .pulse-stage .ch-score b {
    font-size:20px;
  }
  .pulse-stage .ch-score .ch-l {
    font-size:8px;
    letter-spacing:.4px;
  }
  .pulse-stage .ch-scores {
    padding:0;
  }
  .pulse-stage .ch-btn {
    min-width:90px;
  }
  .session-bar {
    display:block;
    padding:0 2px;
  }
  .session-bar h2 {
    font-size:22px;
  }
  .session-bar p {
    font-size:11px;
    margin-top:4px;
  }
  .input-options {
    margin-top:12px;
    width:100%;
  }
  .input-options button {
    flex:1;
    font-size:12px;
    min-height:40px;
  }
  .console {
    display:flex;
    flex-direction:column-reverse;
    padding:5px;
    gap:5px;
    border-radius:13px;
  }
  .telemetry {
    display:grid;
    grid-template-columns:1fr 1fr 1.1fr;
    gap:10px;
    padding:12px;
  }
  .label {
    font-size:9px;
    letter-spacing:.5px;
  }
  .timer {
    margin:6px 0 7px;
    gap:3px;
  }
  .timer strong {
    font-size:36px;
    letter-spacing:-1px;
  }
  .timer strong span {
    font-size:23px;
  }
  .timer small {
    font-size:8px;
  }
  .hits-block {
    padding:0 8px;
    border:0;
    border-inline:1px solid var(--ch-line);
  }
  .hits-block strong {
    font-size:39px;
    letter-spacing:-1px;
  }
  .hits-block>span:last-child,.signal {
    display:none;
  }
  .metrics {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    margin:0;
    gap:6px;
  }
  .metrics .label {
    font-size:7px;
  }
  .metrics b {
    font-size:14px;
    margin:2px 0 0;
  }
  .metrics small {
    font-size:9px;
  }
  .playfield {
    padding:13px 10px 11px;
  }
  .panel-heading {
    font-size:8px;
    letter-spacing:0;
  }
  .grid-wrap {
    margin:14px 0;
  }
  .light-grid {
    gap:10px;
  }
  .node {
    height:76px; height:clamp(58px,10svh,85px);
    border-radius:8px;
  }
  .lens {
    width:40px;
    height:40px;
  }
  .lens b {
    font-size:21px;
  }
  .life-ring {
    width:51px;
    height:51px;
  }
  .node .key {
    font-size:8px;
    left:6px;
    top:5px;
  }
  .node .number {
    font-size:7px;
    right:5px;
    bottom:4px;
  }
  .keyboard-mode .node .key {
    font-size:11px;
  }
  .panel-footer {
    font-size:7px;
    gap:4px;
    min-height:13px;
  }
  .panel-footer b {
    font-size:8px;
  }
  .overlay-card {
    padding:10px;
  }
  .overlay h2 {
    font-size:29px;
    margin:10px 0;
  }
  .overlay .eyebrow {
    font-size:8px;
    letter-spacing:1px;
  }
  .overlay p {
    font-size:11px;
    line-height:1.6;
    margin-bottom:15px;
  }
  .start-hint {
    font-size:9px;
    margin-top:10px;
    max-width:240px;
  }
  .primary {
    min-width:210px;
    font-size:13px;
    min-height:46px;
    padding:12px 16px;
  }
  .under-panel {
    display:block;
    font-size:10px;
  }
  .under-panel>span {
    display:block;
    margin-bottom:3px;
  }
  .result-card {
    padding:24px 18px 20px;
  }
  .result-card h2 {
    font-size:25px;
  }
  .result-score strong {
    font-size:70px;
  }
  .result-stats b {
    font-size:16px;
  }
  .result-card .eyebrow {
    font-size:9px;
  }
  .game-overview {
    width:calc(100% - 24px)!important;
    padding:20px!important;
  }
  .countdown b {
    font-size:80px;
  }
}
@media(max-height:720px) and (max-width:760px) {
  .pulse-stage .ch-topbar {
    grid-template-columns:auto 1fr auto;
    grid-template-areas:'back title controls';
  }
  .pulse-stage .ch-scores {
    display:none;
  }
  .pulse-stage .ch-controls {
    gap:4px;
  }
  .pulse-stage .ch-btn {
    min-width:0;
    padding:8px;
    font-size:10px;
  }
  .pulse-stage .ch-eyebrow {
    display:none;
  }
  .pulse-stage .ch-title h1 {
    font-size:20px;
  }
  .session-bar h2,.session-bar p {
    display:none;
  }
  .input-options {
    margin:0;
  }
  .node {
    height:56px; height:clamp(50px,10svh,68px);
  }
  .telemetry {
    padding:9px;
  }
  .under-panel {
    font-size:9px;
  }
  .overlay h2 {
    font-size:24px;
  }
  .overlay p {
    font-size:10px;
    margin-bottom:10px;
  }
  .overlay .start-hint {
    display:none;
  }
  .overlay .eyebrow {
    font-size:7px;
  }
}
@media(prefers-reduced-motion:no-preference) {
  .node.hit .lens {
    animation:hit .18s ease-out;
  }
  .hits-block strong.bump {
    animation:score .16s ease-out;
  }
  .countdown b {
    animation:count .3s ease-out;
  }
  .urgent .status-dot {
    animation:warning 1s ease-in-out infinite;
  }
  .result-score strong {
    animation:reveal .4s ease-out;
  }
  @keyframes hit {
    from {
      transform:scale(1.12);
      box-shadow:0 0 30px #d4ff6270;
    }
    to {
      transform:scale(1);
    }
  }
  @keyframes score {
    50% {
      transform:translateY(-2px);
    }
  }
  @keyframes count {
    from {
      transform:scale(1.18);
      opacity:.3;
    }
    to {
      transform:scale(1);
      opacity:1;
    }
  }
  @keyframes warning {
    50% {
      opacity:.45;
    }
  }
  @keyframes reveal {
    from {
      transform:translateY(8px);
      opacity:0;
    }
    to {
      transform:none;
      opacity:1;
    }
  }
}
/* Compact phones keep a single header row so the playable panel stays large. */
@media (max-height:720px) and (max-width:760px) {
  .pulse-stage .ch-topbar { gap:6px; }
  .pulse-stage .ch-controls { flex-wrap:nowrap; }
  .pulse-stage .ch-back { font-size:0; min-width:38px; padding:8px; }
  .pulse-stage .ch-back:not(.lg-home)::before { content:'←'; font:16px var(--body); }
}

/* Feedback stays local to the pressed node; the next target never moves. */
.hit-fx, .hit-readout { position:absolute; pointer-events:none; opacity:0; }
.hit-fx { width:64px; height:64px; border:2px solid #e7ffba; border-radius:50%; }
.hit-fx::before {
  content:''; position:absolute; width:3px; height:3px; left:28px; top:28px;
  background:var(--lime); border-radius:50%;
  box-shadow:0 -41px #d4ff62, 36px -20px #d4ff62, 36px 20px #d4ff62, 0 41px #d4ff62, -36px 20px #d4ff62, -36px -20px #d4ff62;
}
.hit-readout { right:9px; top:8px; font:600 12px var(--mono); color:#efffc7; }
.node.hit .hit-readout { opacity:1; }
.node.wrong .lens b, .node.expired .lens b { opacity:1; color:#ffc4a2; }
.console.flow { border-color:#d4c17b; box-shadow:0 15px 40px #0006, 0 0 22px #d4ff6210, inset 0 1px 0 #fff6c855; }
.console.flow #streak { color:#f0ffb8; text-shadow:0 0 12px #d4ff6260; }
.playfield { position:relative; }
.milestone {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); white-space:nowrap;
  pointer-events:none; color:#e7ffb8; font:600 11px var(--mono); letter-spacing:1px;
}
.has-milestone .panel-footer { visibility:hidden; }
.challenge-strip {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 18px; border:1px solid var(--ch-line); border-radius:12px;
  background:linear-gradient(110deg,#d89c5610,transparent);
}
.challenge-label { display:block; font:9px var(--mono); letter-spacing:1.2px; color:var(--ch-brass); margin-bottom:5px; }
.challenge-strip strong { font:600 15px var(--display); color:var(--ch-ink); }
.challenge-strip p { font:11px/1.5 var(--body); color:var(--ch-ink2); margin:4px 0 0; }
.challenge-progress { width:120px; flex-shrink:0; text-align:right; }
.challenge-progress b { font:500 12px var(--mono); color:var(--ch-ink); }
.challenge-track { height:4px; overflow:hidden; border-radius:3px; background:#d89c5633; margin-top:9px; }
.challenge-track i { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:var(--ch-brass); }
.challenge-strip.met { border-color:#d4ff6250; background:#d4ff6208; }
.challenge-strip.met .challenge-label, .challenge-strip.met .challenge-progress b { color:var(--lime); }
.challenge-strip.met .challenge-track i { background:var(--lime); }
.challenge-result { padding:13px; border:1px solid var(--ch-line); border-radius:10px; text-align:left; margin:14px 0; background:#d89c560a; }
.challenge-result span { display:block; font:9px var(--mono); letter-spacing:1px; color:var(--ch-brass); }
.challenge-result strong { display:block; font:600 16px var(--display); margin-top:5px; }
.challenge-result p { font:11px/1.6 var(--body); color:var(--ch-ink2); margin:5px 0 0; }
.challenge-result.won { border-color:#d4ff6244; background:#d4ff6208; }
.challenge-result.won span { color:var(--lime); }
@media (hover:hover) { .node.lit:hover { filter:brightness(1.06); } }
@media (prefers-reduced-motion:no-preference) {
  .node.hit { animation:pad-press .18s cubic-bezier(.2,.6,.3,1); }
  .node.hit .hit-fx { animation:hit-ring .18s ease-out both; }
  .node.hit .hit-readout { animation:hit-label .18s ease-out both; }
  .node.wrong { animation:wrong-press .16s ease-out; }
  .challenge-track i { transition:transform .18s ease-out; }
  @keyframes pad-press { 0%{transform:translateY(3px);box-shadow:0 1px 0 #070c07,inset 0 2px 8px #0005} 65%{transform:translateY(-1px)} 100%{transform:none} }
  @keyframes hit-ring { from{opacity:.75;transform:scale(.7)} to{opacity:0;transform:scale(1.35)} }
  @keyframes hit-label { from{opacity:1;transform:translateY(4px)} to{opacity:0;transform:translateY(-4px)} }
  @keyframes wrong-press { from{transform:translateY(2px)} to{transform:none} }
}
@media(max-width:760px) {
  .hit-fx { width:42px; height:42px; }
  .hit-fx::before { left:18px; top:18px; box-shadow:0 -27px #d4ff62, 24px -14px #d4ff62, 24px 14px #d4ff62, 0 27px #d4ff62, -24px 14px #d4ff62, -24px -14px #d4ff62; }
  .hit-readout { font-size:10px; right:5px; top:5px; }
  .milestone { font-size:8px; letter-spacing:.4px; bottom:11px; }
  .challenge-strip { padding:12px; gap:12px; }
  .challenge-progress { width:80px; }
  .challenge-strip strong { font-size:14px; }
  .challenge-strip p { font-size:10px; }
}
/* Landscape phones use the full width instead of shrinking a portrait console. */
@media (max-height:540px) and (min-aspect-ratio:6/5) {
  .pulse-stage { margin:6px auto; gap:7px; padding:0 10px; }
  .pulse-stage .ch-topbar { display:flex; gap:10px; padding:5px 10px; border-radius:10px; }
  .pulse-stage .ch-title { flex:1; }
  .pulse-stage .ch-title h1 { font-size:19px; }
  .pulse-stage .ch-eyebrow, .pulse-stage .ch-scores { display:none; }
  .pulse-stage .ch-controls { flex-wrap:nowrap; }
  .pulse-stage .ch-btn { min-height:38px; min-width:0; padding:6px 12px; font-size:11px; white-space:nowrap; }
  .pulse-stage .ch-back { min-height:38px; }
  .session-bar { display:flex; }
  .session-bar h2, .session-bar p { display:none; }
  .input-options { padding:2px; margin:0; width:100%; border-radius:8px; }
  .input-options button { flex:1; min-height:28px; font-size:10px; padding:4px 10px; }
  .console { display:grid; grid-template-columns:minmax(0,1fr) 150px; padding:4px; gap:4px; }
  .playfield { padding:8px 12px; }
  .panel-heading { font-size:8px; }
  .grid-wrap { margin:8px 0; }
  .light-grid { gap:6px; }
  .node { height:44px; height:clamp(44px,12svh,60px); }
  .lens { width:29px; height:29px; }
  .lens b { font-size:17px; }
  .life-ring { width:39px; height:39px; }
  .node .key { font-size:8px; left:5px; top:5px; }
  .node .number { font-size:7px; }
  .telemetry { display:flex; flex-direction:column; gap:5px; padding:10px; }
  .timer { margin:4px 0; }
  .timer strong { font-size:29px; }
  .timer strong span { font-size:20px; }
  .hits-block { padding:5px 0; border:0; }
  .hits-block strong { font-size:31px; }
  .hits-block>span:last-child, .signal { display:none; }
  .label { font-size:8px; }
  .metrics { display:flex; flex-direction:row; margin:0; gap:8px; }
  .metrics .label { font-size:6px; }
  .metrics b { font-size:12px; margin:4px 0 0; }
  .metrics small { font-size:8px; }
  .panel-footer { font-size:7px; min-height:10px; }
  .panel-footer b { font-size:7px; }
  .overlay-card { padding:6px; }
  .overlay .eyebrow, .overlay .start-hint { display:none; }
  .overlay h2 { font-size:23px; margin:4px 0 6px; }
  .overlay p { font-size:10px; line-height:1.4; margin-bottom:8px; }
  .primary { min-height:40px; padding:9px 14px; font-size:12px; }
  .countdown b { font-size:60px; }
  .under-panel { display:flex; font-size:9px; }
  .milestone { font-size:8px; bottom:8px; }
  .hit-fx { width:35px; height:35px; }
  .hit-fx::before { display:none; }
}