/* Approved matrix artwork in the calculator. Every rule is confined to its
   viewport; the entry form and other result sections keep their own styling. */
#matrix-viewport.matrix-studio {
  --tempo: 1;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  background: #faf4e6 url('./assets/celestial-petals-v4.jpg') center / cover no-repeat;
  border: 1px solid #c7ae7c;
  border-radius: 17px;
  box-shadow: 0 8px 28px #98723112;
}

/* Remove the previous landscape strip and decorative corner patch. The new
   complete image is the background, without a translucent white overlay. */
#matrix-viewport.matrix-studio::before,
#matrix-viewport.matrix-studio::after { content: none; display: none; }

#matrix-viewport.matrix-studio #matrix {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  touch-action: pan-y;
}

#matrix-viewport.matrix-studio.zoomed,
#matrix-viewport.matrix-studio.is-zoomed { touch-action: none; }
#matrix-viewport.matrix-studio.zoomed #matrix,
#matrix-viewport.matrix-studio.is-zoomed #matrix { touch-action: none; cursor: grab; }
#matrix-viewport.matrix-studio.dragging #matrix,
#matrix-viewport.matrix-studio.is-dragging #matrix { cursor: grabbing; }

#matrix-viewport .core-ornaments,
#matrix-viewport .base-line,
#matrix-viewport .semantic-line,
#matrix-viewport .petal,
#matrix-viewport .channel-line { pointer-events: none; }
#matrix-viewport .base-line { fill: none; stroke: #b7a478; stroke-width: 2.1; }
#matrix-viewport .base-line.quiet { stroke: #c4b99e; stroke-width: 1.4; }
#matrix-viewport .semantic-line { fill: none; stroke-width: 2.5; }
#matrix-viewport .petal { fill: #b69b5b; fill-opacity: .014; stroke: #c6b287; stroke-width: 1.65; }
#matrix-viewport .channel-line {
  fill: none;
  stroke: #8f7950;
  stroke-width: 3;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
}
#matrix-viewport .center-caption {
  font: 13px Arial, sans-serif;
  fill: #796b51;
  text-anchor: middle;
  letter-spacing: 1px;
  paint-order: stroke fill;
  stroke: #fff9eb;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}

#matrix-viewport .age-rail { fill: none; stroke: #ab915c; stroke-width: 1.6; pointer-events: none; }
#matrix-viewport .age-tick { fill: #a99872; opacity: .7; pointer-events: none; }
#matrix-viewport .age-pair { cursor: pointer; outline: none; }
#matrix-viewport .age-pair .age-hit { fill: #fffdf4; fill-opacity: 0; stroke: none; pointer-events: all; }
#matrix-viewport .age-pair:hover .age-hit,
#matrix-viewport .age-pair:focus-visible .age-hit,
#matrix-viewport .age-pair.selected .age-hit { fill-opacity: .9; stroke: #27241d; stroke-width: 1.2; }
#matrix-viewport .studio-age,
#matrix-viewport .studio-energy {
  fill: #000;
  text-anchor: start;
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke: #fffcf2;
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
}
#matrix-viewport .studio-age { font: 20px Arial, sans-serif; }
#matrix-viewport .studio-energy {
  font: 600 32px 'Matrix Engraved', Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  text-anchor: middle;
}
#matrix-viewport[data-numerals='modern'] .studio-energy { font-family: 'Matrix Silk', Georgia, serif; }
#matrix-viewport .age-pair.milestone .studio-age { font-size: 22px; font-weight: 800; }
#matrix-viewport .age-pair.milestone .studio-energy {
  font: 800 44px Arial, sans-serif;
  fill: #000;
  stroke: #fffcf2;
  stroke-width: 4.5;
}
#matrix-viewport .age-pair.decade .studio-age { font-size: 22px; font-weight: 800; stroke-width: 5; }

/* Hit targets sit outside the decorative .matrix-orb group. Focus/selection
   marks add an outline, leaving the prescribed sphere colours untouched. */
#matrix-viewport .node { cursor: pointer; outline: none; }
#matrix-viewport .node .node-hit { fill: transparent; stroke: none; pointer-events: all; }
#matrix-viewport .node .matrix-orb { pointer-events: none; }
#matrix-viewport .node .selection-ring {
  fill: none;
  stroke: #332d22;
  stroke-width: 2.4;
  stroke-dasharray: 5 4;
  opacity: 0;
  pointer-events: none;
}
#matrix-viewport .node.selected .selection-ring,
#matrix-viewport .node:focus-visible .selection-ring { opacity: .9; }
#matrix-viewport .node:hover .selection-ring { opacity: .55; }
#matrix-viewport .node .orb-digit { pointer-events: none; }

#matrix-viewport .node-id,
#matrix-viewport .formula-label {
  fill: #645333;
  text-anchor: middle;
  paint-order: stroke fill;
  stroke: #fff9e9;
  stroke-width: 4;
  stroke-linejoin: round;
  pointer-events: none;
}
#matrix-viewport .node-id { font: 700 15px Arial, sans-serif; }
#matrix-viewport .formula-label { font: 14px Arial, sans-serif; }
#matrix-viewport .partner-values { pointer-events: none; }
#matrix-viewport .partner-chip { fill: #fff9edf2; stroke: #c5ab7a; stroke-width: .9; }
#matrix-viewport .partner-values text {
  font: 600 17px Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  fill: #756144;
  text-anchor: middle;
  dominant-baseline: central;
}
#matrix-viewport .partner-values .partner-first { fill: #375f89; }
#matrix-viewport .partner-values .partner-second { fill: #9e5362; }

#matrix-viewport .scene-flash {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle, #fff 0, #fff8dc 15%, #ffecc478 40%, transparent 75%);
  pointer-events: none;
}
#matrix-viewport.revealing .scene-flash {
  animation: matrix-live-flash calc(430ms * var(--tempo, 1)) ease-out both;
}
#matrix-viewport .age-annotations { opacity: 1; }
#matrix-viewport[data-phase='ready'] .age-annotations,
#matrix-viewport[data-phase='playing']:not(.revealing) .age-annotations,
#matrix-viewport[data-phase='ready'] .channel-symbol,
#matrix-viewport[data-phase='playing']:not(.revealing) .channel-symbol { opacity: 0; }
#matrix-viewport.revealing .age-annotations {
  animation: matrix-live-age-appear calc(450ms * var(--tempo, 1)) calc(3120ms * var(--tempo, 1)) both;
}
#matrix-viewport.revealing .channel-symbol {
  animation: matrix-live-symbol-appear calc(300ms * var(--tempo, 1)) ease-out var(--symbol-delay, 0ms) both;
}
@keyframes matrix-live-flash { 0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; } }
@keyframes matrix-live-age-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes matrix-live-symbol-appear { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  #matrix-viewport.matrix-studio { padding: 0; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #matrix-viewport .scene-flash { display: none; }
  #matrix-viewport.revealing .age-annotations,
  #matrix-viewport.revealing .channel-symbol { animation: none; opacity: 1; }
}
@media print {
  #matrix-viewport.matrix-studio { background: #fff; box-shadow: none; padding: 0; }
  #matrix-viewport .scene-flash { display: none; }
  #matrix-viewport .age-annotations,
  #matrix-viewport .channel-symbol { animation: none; opacity: 1; }
}