/* raybreaker.com: the constellation page with the build planner (/constellation/, /de/konstellation/), on top of
   site.css. The look follows the game's constellation after UI round W2 (StyleGuide §10): stars as circle, diamond
   (notable), hexagon (keystone) and crown in their arm's colour, the details in a fixed column right of the map, the
   learned stars in a list left of it, the focus in cyan. Arm and star colours come from the game's export
   (data/planner.<hash>.json; the build puts the arm colours in place of the marker below); the hold to reset fills in the
   game's warning red for what is final (UiTokens.FinalHex #FF3355). Built by Tools/site/build.py. */

.con-arm-offense, .pl-arm-offense { --c: #FF9A1F; }
.con-arm-mobility, .pl-arm-mobility { --c: #47F0FF; }
.con-arm-fortune, .pl-arm-fortune { --c: #FFD23F; }
.con-arm-defense, .pl-arm-defense { --c: #3D8BFF; }

.planner-page { width: var(--wrap); margin: 0 auto; padding: 44px 0 88px; }
.pl-head { max-width: 900px; margin: 0 0 26px; }
.pl-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin: 0 0 16px; }
.pl-head .intro { margin: 0; }

/* the four arms (website v2 "Observatorium") */
.con-arms { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.con-arm {
  position: relative; padding: 22px 20px 18px; background: var(--glass); border: 1px solid var(--edge);
  border-top: 2px solid var(--c, var(--cyan));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), calc(100% - 10px) 100%, 0 100%);
}
.con-arm-name { font-size: 1.45rem; margin: 0 0 4px; color: var(--c, var(--cyan)); }
.con-focus {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px;
}
.con-crown { color: #D3DBEE; margin: 0 0 10px; }
.con-crown b { color: var(--gold); font-weight: 600; }
.con-keys { color: var(--dim); font-size: 0.95rem; margin: 0; }
.pl-section > h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 12px; }
.pl-section > .intro { max-width: 900px; margin: 0 0 10px; }
.pl-section > .pl-facts { margin: 0 0 20px; }
.pl-arm-h { color: var(--c, #FFFFFF); }
.pl-facts {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 0;
}
.pl-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* No flash or frame around what a finger taps (Michael, 18.10.2026, Android/Chrome: a white outline around the container);
   the keyboard's focus keeps its ring through :focus-visible (site.css) and the map's cyan focus ring. */
.planner { --pl-map-h: clamp(440px, calc(100vh - 230px), 860px); -webkit-tap-highlight-color: transparent; }

/* ---------- the bar: rank, points, link, reset ---------- */
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 14px 20px; margin: 0 0 14px; }
.pl-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 380px; min-width: 0; }
/* what the chosen rank buys, one quiet line under the slider (planner.js) */
.pl-context { flex: 1 1 100%; margin: 0; color: var(--dim); font-size: 0.92rem; line-height: 1.35; min-height: 1.35em; }
/* the sound toggle: the game's menu sounds on clicks and keys */
.pl-sound {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 10px; cursor: pointer;
  background: transparent; color: var(--dim); border: 1px solid var(--edge-hi);
  font: 600 0.92rem/1 "Barlow Semi Condensed", "Barlow", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
}
.pl-sound:hover { color: var(--text); border-color: var(--cyan); }
.pl-sound svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-sound .pl-snd-body { fill: currentColor; stroke: none; }
.pl-sound[aria-pressed="true"] { color: var(--cyan); }
.pl-sound[aria-pressed="true"] .pl-snd-off { display: none; }
.pl-sound[aria-pressed="false"] .pl-snd-wave { display: none; }
.pl-rank label, .pl-sum-title, .pl-d-cap, .pl-linkbox label {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.pl-rank input[type="range"] { flex: 1 1 auto; min-width: 80px; accent-color: var(--cyan); height: 28px; margin: 0; }
.pl-rank-value {
  font-family: "Oxanium", "Barlow", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1;
  min-width: 2.6ch; text-align: right; color: #FFFFFF;
}
.pl-step, .pl-zoom button {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0;
  background: var(--glass-hi); color: var(--text); border: 1px solid var(--edge-hi); cursor: pointer;
  font: 600 1.25rem/1 "Oxanium", "Barlow", sans-serif;
}
.pl-step:hover, .pl-zoom button:hover { border-color: var(--cyan); color: var(--cyan); }
.pl-points { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; flex: 1 1 320px; }
.pl-avail { font-family: "Oxanium", "Barlow", sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--cyan); }
.pl-spent, .pl-next, .pl-need { color: var(--dim); font-size: 0.95rem; }
.pl-need:empty { display: none; }
.pl-need { color: var(--gold); }
.pl-actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
/* site.css draws .btn for links; as a <button> it must drop the browser's own face and frame, which else show grey in the
   chamfered corners */
.planner button.btn {
  -webkit-appearance: none; appearance: none; background: transparent; border: 0; border-radius: 0; margin: 0;
  cursor: pointer;
}
.pl-actions .btn, .pl-d-actions .btn { min-height: 42px; padding: 0.55em 1.1em; font-size: 0.95rem; }
.pl-share.pl-done::before { background: #8CF7FF; }
.pl-reset::after { background: linear-gradient(90deg, rgba(255, 51, 85, 0.55) calc(var(--hold, 0) * 100%), var(--deep) 0); }
.pl-reset.pl-holding { color: #FFFFFF; }
.pl-reset.pl-holding::before { background: #FF3355; }
/* a finger holds the button: no text selection, no long-press menu (planner.js) */
.pl-reset { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pl-linkbox { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pl-linkbox[hidden] { display: none; }
.pl-linkbox input {
  flex: 1 1 280px; min-width: 0; padding: 8px 10px; background: var(--depth); color: var(--text);
  border: 1px solid var(--edge-hi); font: 400 0.95rem/1.3 "Barlow", sans-serif;
}

.pl-notice {
  margin: 0 0 14px; padding: 10px 16px; border: 1px solid rgba(255, 210, 63, 0.45); background: rgba(255, 210, 63, 0.07);
  color: #F3E7B8;
}
.pl-noscript { margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--edge); color: var(--text); }
.pl-failed .pl-body { opacity: 0.35; }

/* ---------- the three columns ---------- */
.pl-body { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; }
.pl-sum, .pl-detail {
  contain: size; min-height: 440px; overflow: auto; padding: 18px 18px 16px; scrollbar-width: thin; scrollbar-color: var(--edge-hi) transparent;
}
/* the browser's scroll anchoring never holds on to the list or the details: on a narrow screen both stand under the map
   (the list first in the page's order), picking a star grows the details, and the browser scrolled the page 135 to
   190 px to keep the list in place, the map away from under the finger (18.10.2026, phone emulation 390 x 844) */
.pl-sum, .pl-detail { overflow-anchor: none; }
.pl-mapcol { min-width: 0; }
.pl-map-wrap {
  position: relative; border: 1px solid var(--edge);
  background: radial-gradient(circle at 50% 50%, #0C1122 0%, #070912 62%, #05060B 100%);
}
/* one finger scrolls the page over the whole map (pan-y; this also keeps a double tap from zooming the page), the planner
   takes taps, holds and two fingers (planner.js); zoomed in, one finger pans the map */
.pl-map {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: var(--pl-map-h); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pl-map.pl-zoomed { touch-action: none; cursor: grab; }
.pl-map.pl-zoomed:active { cursor: grabbing; }
.pl-zoom { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; }
.pl-zoom button { background: rgba(13, 17, 32, 0.88); }
.pl-fit-icon { width: 14px; height: 14px; border: 2px solid currentColor; display: block; }
.pl-help { margin: 8px 2px 0; font-size: 0.9rem; color: var(--dim); }
.pl-quick { display: none; }
.pl-q-name { font-family: "Oxanium", "Barlow", sans-serif; font-weight: 700; font-size: 1.1rem; color: #FFFFFF; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-q-level { font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; color: var(--arm, var(--cyan)); margin-right: auto; }
.pl-q-btn {
  width: 48px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--glass-hi); color: var(--cyan); border: 1px solid var(--cyan); font: 600 1.4rem/1 "Oxanium", "Barlow", sans-serif;
}
.pl-q-btn[disabled] { opacity: 0.35; cursor: default; color: var(--dim); border-color: var(--edge-hi); }
.pl-help-touch { display: none; }
@media (pointer: coarse) {
  .pl-help-mouse { display: none; }
  .pl-help-touch { display: inline; }
}
/* planner.js knows the hand: touch from the first touch until a real mouse moves (a tapped button never turns it) */
.planner[data-input="mouse"] .pl-help-mouse, .planner[data-input="touch"] .pl-help-touch { display: inline; }
.planner[data-input="mouse"] .pl-help-touch, .planner[data-input="touch"] .pl-help-mouse { display: none; }

/* the map (SVG built by planner.js; every colour from the export) */
.pl-star { cursor: pointer; outline: none; }
.pl-star:focus, .pl-star:focus-visible { outline: none; }
.pl-outer { stroke-width: 1; stroke-dasharray: 3 6; stroke-opacity: 0.55; }
.pl-focus-ring { stroke-width: 2; }
.pl-focus-glow { stroke-width: 8; stroke-opacity: 0.2; }
/* a finger's hold to unlearn: the game's warning red for what is taken back (UiTokens.FinalHex), over a faint track */
.pl-hold-track { stroke: #FF3355; stroke-opacity: 0.25; stroke-width: 4; pointer-events: none; }
.pl-hold-ring { stroke: #FF3355; stroke-width: 4; pointer-events: none; }
.pl-pulse { opacity: 0; }
.pl-pulse.pl-on { opacity: 0.5; }
.pl-title { font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; letter-spacing: 0.1em; fill-opacity: 0.95; }
.pl-label {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; text-anchor: middle;
  paint-order: stroke; stroke: #05060B; stroke-width: 3px; stroke-opacity: 0.85; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .pl-pulse.pl-on { animation: pl-pulse 1.6s ease-in-out infinite; }
  .pl-row-btn { transition: background-color 0.15s ease; }
}
@keyframes pl-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.75; } }

/* ---------- the list of learned stars ---------- */
.pl-sum .pl-sum-title { margin: 0 0 12px; font-size: 0.95rem; color: var(--text); }
.pl-sum-empty { color: var(--dim); font-size: 0.95rem; }
.pl-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pl-row-btn {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 5px 6px;
  background: transparent; border: 0; color: var(--text); font: 400 0.98rem/1.35 "Barlow", sans-serif; cursor: pointer;
}
.pl-row-btn:hover, .pl-row-btn:focus-visible { background: var(--glass-hi); }
.pl-mark { flex: none; width: 8px; height: 8px; background: var(--c, var(--cyan)); transform: rotate(45deg) translateY(-1px); }
.pl-rule .pl-row-btn { color: var(--gold); }
.pl-mark-keystone { transform: none; width: 11px; height: 11px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pl-mark-notable { width: 9px; height: 9px; }
.pl-mark-crown {
  transform: none; width: 12px; height: 12px; background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pl-rule-line { height: 1px; background: var(--edge); margin: 8px 0; }

/* ---------- the detail column ---------- */
.pl-detail { display: flex; flex-direction: column; }
.pl-d-cap { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--edge); }
.pl-d-kind { color: var(--dim); }
.pl-d-pick { color: var(--dim); }
.pl-d-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.pl-d-glyph { flex: none; overflow: visible; }
.pl-detail .pl-d-name { font-size: 1.5rem; line-height: 1.15; margin: 0; color: #FFFFFF; }
.pl-d-levelrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 0 10px; margin: 0 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--arm, var(--cyan)) 35%, transparent);
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; color: var(--dim); white-space: pre;
}
.pl-d-segs { display: flex; gap: 4px; }
.pl-d-segs span { width: 14px; height: 4px; background: var(--arm, var(--cyan)); opacity: 0.22; }
.pl-d-segs span.on { opacity: 1; }
.pl-d-stats { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 1.05rem; }
.pl-d-stats .pl-dim { opacity: 0.7; }
.pl-d-stats .pl-next-line { color: var(--dim); font-size: 0.95rem; }
.pl-d-rule { color: var(--gold); margin: 10px 0 0; }
.pl-d-status {
  display: flex; gap: 10px; align-items: baseline; margin: 14px 0 0; color: var(--dim);
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; letter-spacing: 0.04em;
}
.pl-d-status::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg) translateY(-1px); }
.pl-d-status:empty { display: none; }
.pl-d-status.pl-max { color: var(--arm, var(--cyan)); }
.pl-d-status.pl-gate { color: var(--gold); }
.pl-d-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
.pl-d-actions .btn { flex: 1 1 120px; }
.pl-d-actions .btn[disabled] { opacity: 0.38; cursor: default; filter: none; }

/* ---------- all stars as a list ---------- */
.pl-all { margin: 56px 0 0; max-width: 1200px; }
.pl-all h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 10px; }
.pl-all > p { color: #C9D3EA; }
.pl-all-list summary { cursor: pointer; color: var(--cyan); font-weight: 600; padding: 6px 0; }
.pl-arm-h { font-size: 1.2rem; margin: 26px 0 4px; color: #FFFFFF; }
.pl-arm-d { color: var(--dim); margin: 0 0 10px; }
.pl-entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.pl-entry { padding: 10px 12px; border: 1px solid var(--edge); background: rgba(13, 17, 32, 0.6); display: grid; gap: 2px; }
.pl-e-name { font-weight: 600; color: #FFFFFF; }
.pl-e-kind {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.pl-e-meta { color: var(--dim); font-size: 0.92rem; }
.pl-e-rule { color: var(--gold); }
.pl-asof { color: var(--dim); font-size: 0.92rem; margin: 26px 0 0; }

/* ---------- smaller screens: the map first, then the details and the list ---------- */
@media (max-width: 1180px) {
  .con-arms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-mapcol { grid-column: 1 / -1; order: -1; }
  .pl-quick:not([hidden]) {
    display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 8px 10px 8px 14px;
    border: 1px solid var(--edge); border-left: 3px solid var(--arm, var(--cyan)); background: var(--glass);
  }
  .pl-sum, .pl-detail { contain: none; min-height: 260px; }
  .pl-detail { order: 0; }
  .pl-sum { order: 1; }
}
@media (max-width: 720px) {
  .planner-page { padding-top: 28px; }
  .planner { --pl-map-h: min(calc(100vw - 42px), 560px); }
  .con-arms { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
  .pl-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pl-bar { padding: 12px 14px; gap: 12px; }
  .pl-rank { flex-basis: 100%; }
  .pl-actions { margin-left: 0; width: 100%; }
  .pl-actions .btn { flex: 1 1 140px; }
  .pl-entries { grid-template-columns: minmax(0, 1fr); }
  .pl-zoom { top: 8px; right: 8px; }
  .pl-step, .pl-zoom button { width: 40px; height: 40px; }
}