/* Illustration components shared by every view, in the cover's flat poster idiom:
   the arrow-pen, the stage staircase, the ten-piece target, and the bar meters. */

/* ── Arrow-pen ───────────────────────────────────────── */
/* The kit's arrow-pen-flight (ui/arrow.js): ink with paper inlays, no stake colour. */
.arrow-icon { display: block; overflow: visible; }

/* ── Stage staircase ─────────────────────────────────── */
.tower { width: 100%; height: auto; overflow: visible; }
.tower__ground { stroke: var(--ink); stroke-width: 3; }
.col { outline: none; }
.col__body {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: grow-up 0.8s var(--ease) both;
  animation-delay: calc(var(--i) * 70ms + 100ms);
  transition: fill 0.25s;
}
.col__num { font: 400 22px var(--font-display); fill: var(--paper); animation: fade 0.4s both; animation-delay: calc(var(--i) * 70ms + 600ms); pointer-events: none; }
.col__strike { stroke: var(--crimson); stroke-width: 2; }
.hatch__line { stroke: var(--ink-3); stroke-width: 2; }
@keyframes grow-up { from { transform: scaleY(0); } to { transform: none; } }

.col--floor .col__body { fill: var(--crimson); }
.col--next .col__body { fill: transparent; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 7 5; }
.col--next .col__num { fill: var(--ink); }
.col--slide .col__body { stroke: var(--ink-3); stroke-width: 1.5; }
.col--slide .col__num { fill: var(--ink-2); }
.col--missing .col__body { fill: transparent; stroke: var(--crimson); stroke-width: 2; stroke-dasharray: 3 4; }
.col--missing .col__num { fill: var(--crimson); }
.col--future .col__body { fill: transparent; stroke: var(--stone-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.col--future .col__num { fill: var(--stone-3); }

.tower__next { font: 700 11px var(--font-label); letter-spacing: 0.16em; fill: var(--ink); }
.tower__said { font: 700 11px var(--font-label); letter-spacing: 0.12em; fill: var(--crimson); }
.tower__you { font: 400 20px var(--font-display); letter-spacing: 0.04em; fill: var(--crimson); }
.tower__marker { animation: sign 0.7s cubic-bezier(0.5, 0, 0.75, 0) both; animation-delay: 1s; }
@keyframes sign { from { opacity: 0; transform: translate(-40px, -50px); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }

.tower--interactive .col { cursor: pointer; }
.tower--interactive .col:hover .col__body { fill: var(--ink-2); }
.col--active .col__body, .tower--interactive .col--active:hover .col__body { fill: var(--crimson); }
.col:focus-visible .col__body { stroke: var(--crimson); stroke-width: 3; }

/* ── Ten-piece target ────────────────────────────────── */
.target { width: 100%; height: auto; overflow: hidden; }
.target__rim { fill: var(--ink); }
.wedge__bed { fill: var(--paper-3); }
.wedge__fill {
  fill: var(--ink-2);
  transform-box: view-box;
  transform-origin: 0 0;
  animation: grow 0.9s var(--ease) both;
  animation-delay: calc(var(--i) * 60ms + 200ms);
}
.wedge--heel .wedge__fill { fill: var(--crimson); }
.wedge__num { font: 400 17px var(--font-display); fill: var(--paper); }
.wedge--heel .wedge__num { fill: var(--crimson); }
.target__ring { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; }
.target__boss { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.target__center { font: 400 30px var(--font-display); fill: var(--ink); }
.target__sub { font: 600 9px var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink-3); }
.target__fly { animation: fly 0.55s cubic-bezier(0.5, 0, 0.75, 0) both; animation-delay: 1.2s; }
/* The ink pen crosses the ink rim: a paper keyline under its fill keeps it cut out, as on a poster. */
.target__fly .arrow { stroke: var(--paper); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
@keyframes grow { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fly { from { transform: translateX(-120px); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }

/* ── Meters ──────────────────────────────────────────── */
.meters { display: grid; gap: 22px; }
.meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.meter__act { font: 600 0.84rem var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.meter__value { font: 400 1.9rem/1 var(--font-display); }
.meter__value small { font: 600 0.8rem var(--font-label); color: var(--ink-4); margin-left: 2px; }
.meter__bar { position: relative; height: 14px; background: var(--paper-3); overflow: hidden; }
.meter__bar::after { /* quarter ticks, like the cover's dotted rule */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(25% - 1px), var(--paper) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), var(--paper) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), var(--paper) calc(75% - 1px) 75%, transparent 75%);
}
.meter__fill {
  display: block; height: 100%; width: var(--v); background: var(--ink);
  transform-origin: left; animation: fill-in 0.9s var(--ease) both; animation-delay: calc(var(--i) * 150ms + 300ms);
}
.meter--low .meter__fill { background: var(--crimson); }
.meter__q { margin-top: 8px; font-size: 0.95rem; color: var(--ink-3); font-style: italic; }
@keyframes fill-in { from { transform: scaleX(0); } }