/* scenes/arsenal.css: the arsenal, 13 towers (agent S).
   A live stage (the chosen tower on a lit pad, firing at practice targets), the readout panel
   and a rail of all 13 towers. --el = the chosen tower's element hue (set by arsenal.js). */

.arsenal { --el: var(--starlight); }

.ars {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "stage panel" "rail rail";
  column-gap: clamp(1.4rem, 2.6vw, 2.4rem);
  align-items: start;
}
.ars-stage { grid-area: stage; }
@media (min-width: 1000px) { .ars-panel { min-height: clamp(540px, 45vw, 660px); } }
.ars-panel { grid-area: panel; }
.ars-rail { grid-area: rail; }

/* ------------------------------------------------------------------ stage */
.ars-stage { position: relative; min-width: 0; }
.ars-scene {
  width: 100%;
  height: clamp(540px, 45vw, 660px);
  border: 1px solid var(--hair);
  background:
    radial-gradient(ellipse 60% 70% at 32% 52%, color-mix(in srgb, var(--el) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(var(--nebula-violet-rgb), 0.5), transparent 75%),
    var(--void-2);
  transition: background 600ms ease;
}
.ars-scene::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 3; --tk: 14px;
  background:
    linear-gradient(var(--tick), var(--tick)) left top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 1px var(--tk) no-repeat;
}
.ars-scene > .scene-poster { filter: none; }
.ars-stage-hud p { position: absolute; z-index: 4; pointer-events: none; }
.ars-hud-tl { left: 1.2rem; top: 1rem; display: flex; align-items: center; }
.ars-hud-tl strong { margin-left: 0.5em; }
.ars-hud-dot { width: 7px; height: 7px; margin-right: 0.7rem; background: var(--el); box-shadow: 0 0 12px var(--el); transition: background 400ms ease, box-shadow 400ms ease; }
.ars-hud-tr { right: 1.2rem; top: 1rem; }
.ars-hud-bl { right: 1.2rem; bottom: 1rem; color: rgba(var(--star-rgb), 0.5); }
.no-js .ars-hud-bl, .ars-scene[data-state="poster"] ~ .ars-stage-hud .ars-hud-bl { display: none; }

/* level radios, bottom left of the stage */
.ars-levels {
  position: absolute; z-index: 5; left: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.45rem 0.5rem 0.45rem 0.9rem;
  background: rgba(var(--void-rgb), 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hair);
}
.no-js .ars-levels { display: none; }
.ars-levels-label { font-size: 0.62rem; color: rgba(var(--star-rgb), 0.6); }
.ars-levels-row { display: flex; gap: 0.3rem; }
.ars-levels-row button {
  min-width: 2.9rem; height: 2.3rem; padding: 0 0.55rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.62);
  border: 1px solid var(--hair);
  background: rgba(var(--star-rgb), 0.03);
  transition: color var(--t-micro) ease, border-color var(--t-micro) ease, background var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
.ars-levels-row button span { font-size: 0.6rem; font-weight: 500; margin-right: 0.3em; color: rgba(var(--star-rgb), 0.5); }
.ars-levels-row button:hover { color: var(--ink); border-color: var(--hair-2); }
.ars-levels-row button[aria-checked="true"], .ars-levels-row button.is-checked {
  color: var(--on-amber); background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 18px rgba(var(--machine-rgb), 0.45);
}
.ars-levels-row button[aria-checked="true"] span, .ars-levels-row button.is-checked span { color: rgba(18, 12, 2, 0.6); }
.ars-levels-row button[data-level="4"]::after, .ars-levels-row button[data-level="5"]::after {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 0.35em; vertical-align: 0.2em;
  background: var(--el); box-shadow: 0 0 6px var(--el);
}

/* ------------------------------------------------------------------ readout */
.ars-panel {
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.3rem, 2vw, 1.8rem);
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(var(--star-rgb), 0.04), rgba(var(--star-rgb), 0.01));
}
.ars-panel::before {                        /* the element hue along the top edge */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--el), transparent 80%);
  box-shadow: 0 0 16px var(--el);
  transition: background 500ms ease, box-shadow 500ms ease;
}
.ars-panel.is-swap > * { animation: ars-in 620ms var(--ease-out) both; }
.ars-panel.is-swap > :nth-child(2) { animation-delay: 40ms; }
.ars-panel.is-swap > :nth-child(3) { animation-delay: 80ms; }
.ars-panel.is-swap > :nth-child(4) { animation-delay: 110ms; }
.ars-panel.is-swap > :nth-child(5) { animation-delay: 140ms; }
.ars-panel.is-swap > :nth-child(6) { animation-delay: 170ms; }
@keyframes ars-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ars-kicker { display: flex; align-items: center; color: rgba(var(--star-rgb), 0.8); }
.ars-swatch { width: 10px; height: 10px; margin-right: 0.75rem; background: var(--el); box-shadow: 0 0 14px var(--el); transform: rotate(45deg); }
.ars-name {
  margin-top: 0.65rem;
  font-size: clamp(2.1rem, 3.1vw, 3rem); line-height: 0.92;
  overflow-wrap: anywhere;
}
.ars-desc { margin-top: 0.85rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.ars-effect { margin-top: 0.75rem; font-size: 0.68rem; color: var(--el); letter-spacing: 0.1em; line-height: 1.5; }
.ars-effect .sep { color: rgba(var(--star-rgb), 0.4); }

.ars-stats { margin-top: 1.05rem; border-top: 1px solid var(--hair); }
.ars-stats > div {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 0.8rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--hair);
}
.ars-stats dt { font-size: 0.64rem; color: rgba(var(--star-rgb), 0.62); }
.ars-stats dd { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.ars-stats b {
  flex: 0 0 3.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ars-stats .is-none b { color: rgba(var(--ink-rgb), 0.45); font-size: 1rem; letter-spacing: 0.04em; }
.ars-unit { font-size: 0.64rem; color: rgba(var(--star-rgb), 0.55); }
.ars-bar { position: relative; flex: 1 1 auto; height: 2px; background: rgba(var(--star-rgb), 0.12); }
.ars-bar i {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: var(--el); box-shadow: 0 0 10px var(--el);
  transition: transform 700ms var(--ease-out), background 400ms ease;
}
.ars-bar u {
  position: absolute; top: -4px; width: 1px; height: 10px; margin-left: -0.5px;
  background: rgba(var(--star-rgb), 0.35);
  transition: left 700ms var(--ease-out), background 300ms ease;
}
.ars-bar u.on { background: var(--ink); box-shadow: 0 0 6px var(--ink); }

.ars-special {
  position: relative;
  margin-top: 1rem; padding: 0.75rem 1rem 0.85rem;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--el);
  background: rgba(var(--star-rgb), 0.025);
  transition: opacity 400ms ease;
}
.ars-special-head { display: flex; align-items: center; color: var(--el); }
.ars-special-name { margin-top: 0.35rem; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.ars-special-desc { margin-top: 0.3rem; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.ars-lock { display: none; width: 9px; height: 7px; margin-right: 0.6rem; border: 1.5px solid currentColor; border-radius: 1px; position: relative; top: 1px; }
.ars-lock::before { content: ""; position: absolute; left: 1px; right: 1px; bottom: 100%; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.ars-special[data-locked="true"] { border-left-color: var(--hair-2); }
.ars-special[data-locked="true"] .ars-special-head { color: rgba(var(--star-rgb), 0.6); }
.ars-special[data-locked="true"] .ars-lock { display: inline-block; }
.ars-special[data-locked="true"] .ars-special-name { color: rgba(var(--ink-rgb), 0.7); }
.ars-special[data-locked="true"] .ars-special-desc { display: none; }


/* ------------------------------------------------------------------ rail */
.ars-rail {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  display: grid; grid-template-columns: repeat(13, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
.ars-rail li { min-width: 0; }
.ars-rail button {
  --el: var(--starlight);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  width: 100%; height: 100%;
  padding: 0.8rem 0.25rem 0.9rem;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.55);
  transition: color var(--t-micro) ease, background var(--t-micro) ease;
}
.ars-rail button::before {                 /* the selection bar on the rail line */
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px;
  background: var(--el); box-shadow: 0 0 12px var(--el);
  transform: scaleX(0); transition: transform 380ms var(--ease-out);
}
.ars-rail img {
  width: min(76px, 100%); height: auto; aspect-ratio: 1;
  opacity: 0.62; filter: saturate(0.55) brightness(0.85);
  transition: opacity var(--t-micro) ease, filter var(--t-micro) ease, transform 300ms var(--ease-out);
}
.ars-rail .hud { font-size: 0.6rem; color: rgba(var(--star-rgb), 0.45); }
.ars-rail b { font-weight: 600; font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; }
.ars-rail button:hover { color: var(--ink); background: rgba(var(--star-rgb), 0.03); }
.ars-rail button:hover img { opacity: 1; filter: none; transform: translateY(-2px); }
.ars-rail button[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--el) 9%, transparent), transparent 80%); }
.ars-rail button[aria-selected="true"]::before { transform: scaleX(1); }
.ars-rail button[aria-selected="true"] img { opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--el) 45%, transparent)); }
.ars-rail button[aria-selected="true"] .hud { color: var(--el); }
.ars-rail button:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------ narrower */
@media (max-width: 1180px) {
  .ars-rail { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ars-rail li { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 999px) {
  .ars { grid-template-columns: 1fr; grid-template-areas: "stage" "rail" "panel"; }
  .ars-scene { height: auto; aspect-ratio: 16 / 10; }
  .ars-rail { margin-top: 1rem; margin-bottom: 1.4rem; }
}
@media (max-width: 700px) {
  .ars-scene { aspect-ratio: 1 / 0.9; }
  .ars-levels { position: static; margin-top: 0.8rem; justify-content: space-between; padding: 0.5rem 0.5rem 0.5rem 0.8rem; background: rgba(var(--void-rgb), 0.5); }
  .ars-levels-row button { min-width: 0; flex: 1; padding: 0 0.4rem; }
  .ars-levels-row { flex: 1; max-width: 17rem; }
  .ars-hud-tr { display: none; }
  .ars-hud-bl { display: none; }
  /* the rail becomes a swipeable strip */
  .ars-rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .ars-rail::-webkit-scrollbar { display: none; }
  .ars-rail li { flex: 0 0 6.4rem; scroll-snap-align: start; border-bottom: 0; }
  .ars-stats > div { grid-template-columns: 7rem minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .ars-levels-label { display: none; }
  .ars-levels-row { max-width: none; }
}

.ars [aria-disabled="true"] { cursor: default; }   /* W4: the rail and levels before the data arms them */