/* ---- Myth board: interactive in-game-style ---- */
.board-hint { margin: 0 0 1rem; font-size: .9rem; }

.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
  align-items: start;
}
.board-main { min-width: 0; }
.side-col { display: grid; gap: 1.25rem; align-content: start; position: sticky; top: 1rem; }

/* board: two stacked layers, aspect locked to 1122:715 */
.myth-board {
  position: relative;
  width: 100%;
  max-width: 1122px;
  margin: 0 auto;
  aspect-ratio: 1122 / 715;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 16% 50%, rgba(157,107,255,.08), transparent 60%),
    rgba(10, 11, 15, .55);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}

/* SVG connector layer */
.board-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* HTML node layer */
.node-layer { position: absolute; inset: 0; }

.myth-node {
  position: absolute;
  width: 3%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid var(--ring, #5aa9e6);
  background: #12141b;
  color: #dfe7ef;
  font: 600 clamp(7px, .85vw, 13px)/1 'Khand', Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.myth-node:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.myth-node.hover,
.myth-node:hover {
  box-shadow: 0 0 10px var(--ring, #5aa9e6), 0 0 4px var(--ring, #5aa9e6) inset;
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 5;
}
.myth-node.is-set {
  box-shadow: 0 0 12px var(--ring, #5aa9e6);
  background: #1b1e27;
}
/* ---- selected node: must be unmistakable on a dense board ----
   Game has no node numbers, so the active highlight is the only "you are here".
   Bright aqua accent (distinct from the blue rings, purple ranks and gold
   reroll marks), a thick ring, a scale-up, and an animated pulse halo. */
.myth-node.is-active {
  border-color: #eafffd;
  background: #15333a;
  box-shadow: 0 0 0 3px #5ffbf1, 0 0 18px 4px rgba(95,251,241,.7), 0 0 6px #fff inset;
  transform: translate(-50%, -50%) scale(1.34);
  z-index: 9;
}
/* expanding pulse ring (own pseudo-element so it never covers the icon) */
.myth-node.is-active::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(95,251,241,.6);
  animation: mythSelPulse 1.5s ease-out infinite;
}
@keyframes mythSelPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95,251,241,.6); }
  70%  { box-shadow: 0 0 0 11px rgba(95,251,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,251,241,0); }
}
/* prereq nodes that feed the selected one — brighter, clearly linked */
.myth-node.is-prereq {
  border-color: #5ffbf1;
  outline: 2px dashed rgba(95,251,241,.85);
  outline-offset: 3px;
  box-shadow: 0 0 9px rgba(95,251,241,.45);
  z-index: 7;
}
/* dim everything unrelated so the eye lands on the selection + its prereqs */
.myth-board.has-selection .myth-node:not(.is-active):not(.is-prereq) {
  opacity: .42;
  filter: saturate(.65);
}
.myth-board.has-selection .myth-node:not(.is-active):not(.is-prereq):hover {
  opacity: 1;
  filter: none;
}
.myth-node.is-rank {
  border-color: #c46bff;
  background: #1a1020;
  color: #e9d5ff;
  width: 3.7%;
  box-shadow: 0 0 10px rgba(196,107,255,.6);
}
.myth-node.is-rank.is-active {
  border-color: #eafffd;
  box-shadow: 0 0 0 3px #5ffbf1, 0 0 20px 5px rgba(95,251,241,.7), 0 0 8px #fff inset;
}
@media (prefers-reduced-motion: reduce) {
  .myth-node.is-active::after { animation: none; }
  .myth-node { transition: none; }
}

/* sprite icon (reused pattern from old/style.css) */
.stat-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../assets/images/myth/stats/spritesheet-stat-icons.webp");
  background-position: var(--icon-pos);
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  flex: 0 0 auto;
}
/* selected-skill icon fills the node circle, clipped round (not square).
   The icon lives in a round-clipped .node-ico wrapper so the value label
   (which sits below the node) is NOT clipped. transform:scale zooms the
   single sprite cell so its square art edges fall outside the circle. */
/* per-option icon (one webp per forceId, from the game client). cover scales
   the single image to any box automatically — no sprite math, fully responsive. */
.force-ico {
  display: inline-block;
  width: 24px; height: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}
.myth-node .node-ico {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* the selected-stat icon fills the node and is clipped to a circle (49% trims
   the very edge so the square art corners never poke out). clip-path works in
   every engine where border-radius failed to clip in Firefox. */
.myth-node .node-ico .force-ico,
.myth-node .node-ico .stat-icon {
  width: 100%; height: 100%;
  -webkit-clip-path: circle(49%);
          clip-path: circle(49%);
}

/* ---- node panel ---- */
.node-panel {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}
.node-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.node-title { margin: 0; }
.node-title.rank { color: #d9b8ff; }
.clear-node, .clear-all {
  background: rgba(255,107,107,.12);
  border: 1px solid rgba(255,107,107,.4);
  color: #ffb0b0;
  border-radius: 8px;
  padding: .35rem .7rem;
  cursor: pointer;
  font: 600 .85rem 'Khand', Arial, sans-serif;
}
.clear-node:disabled, .clear-all:disabled { opacity: .35; cursor: default; }

.pool-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.pool-item {
  padding: .45rem .6rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pool-item:hover { background: rgba(255,255,255,.05); }
.pool-item.is-selected { border-color: #cfd8e0; background: rgba(255,210,124,.1); }
.pool-head { display: flex; align-items: center; gap: .55rem; }
.pool-name { flex: 1 1 auto; }
.pool-chosen { color: #cfd8e0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- discrete level picker ---- */
.lv-picker { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.lv-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 64px; padding: .42rem .6rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: #dfe7ef; cursor: pointer; line-height: 1.18;
  font: 600 .92rem 'Khand', Arial, sans-serif;
  transition: background .12s, border-color .12s;
}
.lv-btn:hover { background: rgba(255,255,255,.1); }
.lv-btn .lv-tag { opacity: .7; font-size: .8rem; }
.lv-btn .lv-v { font-size: 1rem; font-variant-numeric: tabular-nums; }
.lv-btn .lv-hp { opacity: .65; font-size: .74rem; color: #b9a7ff; font-variant-numeric: tabular-nums; }
.lv-btn.is-on { border-color: #cfd8e0; background: rgba(255,210,124,.18); color: #fff; }
.lv-btn.is-on .lv-tag { opacity: .9; }
.lv-btn.is-on .lv-hp { color: #d9caff; opacity: .9; }
.lv-btn .lv-chance { font-size: .74rem; color: #5fe8d4; opacity: .85; font-variant-numeric: tabular-nums; }
.lv-btn.is-on .lv-chance { opacity: 1; }
.pool-statchance {
  margin-left: .5rem; font-size: .72rem; color: #5fe8d4; opacity: .85;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* hardcore line: true difficulty of this stat's MAX (expected rerolls) */
.pool-hardcore {
  margin-left: .45rem; padding: .05rem .4rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: #ffce6b; background: rgba(255,206,107,.12);
  border: 1px solid rgba(255,206,107,.3); font-variant-numeric: tabular-nums;
}
/* the max-value button = the "best max slot" target */
.lv-btn.lv-max { border-color: rgba(255,206,107,.55); }
.lv-btn.lv-max .lv-tag { color: #ffce6b; opacity: .95; }
.lv-btn.lv-max.is-on { border-color: #ffce6b; background: rgba(255,206,107,.22); }
.node-hardcore {
  margin: .2rem 0 .6rem; padding: .45rem .65rem; border-radius: 8px;
  font-size: .82rem; color: #ffe2a6;
  background: rgba(255,206,107,.08); border: 1px solid rgba(255,206,107,.22);
}
.node-hardcore strong { color: #fff; }

/* ---- status panel (in-game style holy power + rank) ---- */
.myth-status {
  padding: 1rem;
  background: linear-gradient(160deg, rgba(157,107,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(157,107,255,.35);
  border-radius: 10px;
}
.myth-status h3 { margin: 0 0 .6rem; }
.status-rank {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.status-rank-name {
  font: 700 1.25rem 'Cinzel', serif; color: #e9d5ff;
  text-shadow: 0 0 8px rgba(196,107,255,.5);
}
.status-rank-reward { color: #cfd8e0; font-weight: 700; font-variant-numeric: tabular-nums; }
.status-next { margin: .45rem 0 .6rem; font-size: .85rem; opacity: .8; }
.status-hp { display: grid; gap: .25rem; margin-bottom: .75rem; }
.hp-row { display: flex; justify-content: space-between; gap: .6rem; font-size: .9rem; }
.hp-row .hp-v { font-variant-numeric: tabular-nums; }
.hp-row.hp-total {
  margin-top: .25rem; padding-top: .4rem; border-top: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
}
.hp-row.hp-total .hp-v { color: #b9a7ff; }
.status-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.status-field { display: grid; gap: .25rem; font-size: .8rem; opacity: .9; }
.status-field select, .status-field input {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  color: #dfe7ef;
  padding: .35rem .5rem;
  font: 600 .85rem 'Khand', Arial, sans-serif;
}

/* selected value label on the board node marker */
.myth-node .node-val {
  position: absolute;
  bottom: -.5em; left: 50%;
  transform: translate(-50%, 100%);
  font: 700 clamp(7px, .8vw, 12px)/1 'Khand', Arial, sans-serif;
  color: #cfd8e0;
  text-shadow: 0 0 4px #000, 0 1px 2px #000;
  pointer-events: none;
  white-space: nowrap;
}

/* ---- stat sum panel ---- */
.stat-sum {
  padding: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sum-head h3 { margin: 0; }
.sum-count { margin: .4rem 0 .75rem; opacity: .75; font-size: .9rem; }
.sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sum-list li { display: flex; align-items: center; gap: .55rem; }
.sum-name { flex: 1 1 auto; }
.sum-val { font-weight: 700; color: #cfd8e0; font-variant-numeric: tabular-nums; }

/* ---- existing tables ---- */
.node-panel table { width: 100%; border-collapse: collapse; }
.node-panel td, .node-panel th { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); }
#ranksTable, #stigmaTable { width: 100%; border-collapse: collapse; }
#ranksTable td, #ranksTable th, #stigmaTable td, #stigmaTable th { padding: .4rem .6rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.muted { opacity: .6; }

/* ---- responsive: stat-sum below on mobile ---- */
@media (max-width: 900px) {
  .board-layout { grid-template-columns: 1fr; }
  .side-col { position: static; }
  .myth-node { width: 4%; }
  .myth-node.is-rank { width: 4.8%; }
}

/* ---- Cloud-sync (Discord login) widget ---- */
.tool-hero { position: relative; }
.auth-slot {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Khand", sans-serif;
  font-size: 0.9375rem;
}
.sync-btn {
  font-family: "Khand", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e8eaf2;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sync-btn:hover { background: rgba(255, 255, 255, 0.12); }
.sync-btn--login {
  color: #fff;
  background: #5865F2;
  border-color: #5865F2;
}
.sync-btn--login:hover { background: #4752c4; }
.sync-user { color: #e8eaf2; font-weight: 600; }
.sync-status { color: #9aa0b4; font-variant-numeric: tabular-nums; }
.sync-status[data-state="offline"] { color: #e0a93a; }
@media (max-width: 640px) {
  .auth-slot { position: static; justify-content: flex-end; margin-top: 0.6rem; }
}

/* ---- Sync conflict modal ---- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 6, 0.85);
  z-index: 100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: rgba(18, 16, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 1.6rem;
  max-width: 520px;
  width: 90%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
}
.modal h3 {
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: #5fe8d4;
}
.modal p { font-size: 0.9375rem; color: #9aa0b4; margin: 0 0 0.9rem; line-height: 1.5; }
.modal-btns { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.9rem; }
.tool-button {
  font-family: "Khand", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e8eaf2;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tool-button:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Reroll Advisor ── */
.rr-summary { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; margin: .4rem 0 .8rem; }
.rr-summary > div, .rr-target { display: flex; flex-direction: column; gap: .15rem; }
.rr-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8c93a6; }
.rr-v { font-family: 'Cinzel', serif; font-size: 1.25rem; color: #d9caff; font-variant-numeric: tabular-nums; }
.rr-target input {
  width: 8rem; padding: .3rem .5rem; border-radius: 6px;
  border: 1px solid rgba(157,107,255,.4); background: rgba(255,255,255,.05);
  color: #fff; font-variant-numeric: tabular-nums;
}
.rr-plan { margin: .3rem 0 .6rem; padding: .55rem .8rem; border-radius: 8px; font-size: .9rem; line-height: 1.5; }
.rr-plan.ok { background: rgba(95,232,212,.08); border: 1px solid rgba(95,232,212,.28); color: #c8f6ee; }
.rr-plan.warn { background: rgba(255,206,107,.08); border: 1px solid rgba(255,206,107,.28); color: #ffe2a6; }
.rr-plan strong, .rr-tip strong { color: #fff; }
.rr-tip { margin: .2rem 0 .7rem; font-size: .88rem; color: #cfd8e0; }
.rr-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .86rem; }
.rr-table th { text-align: left; font: 600 .72rem 'Khand',sans-serif; text-transform: uppercase;
  letter-spacing: .05em; color: #aeb6c8; padding: .45rem .55rem; border-bottom: 1px solid rgba(157,107,255,.25); }
.rr-table td { padding: .4rem .55rem; border-bottom: 1px solid rgba(255,255,255,.05); color: #dfe7ef; }
.rr-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rr-table tr.rr-toprow td { background: rgba(255,206,107,.10); }
.rr-star { color: #ffce6b; }
.rr-badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font: 700 .72rem 'Khand',sans-serif; }
.rr-go { color: #ffce6b; background: rgba(255,206,107,.14); border: 1px solid rgba(255,206,107,.35); }
.rr-keep { color: #7fe8d4; background: rgba(95,232,212,.12); border: 1px solid rgba(95,232,212,.3); }
.rr-keep.rr-max { color: #9aa2b3; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.rr-foot { margin-top: .55rem; font-size: .78rem; }
/* board highlights */
.myth-node.is-reroll { box-shadow: 0 0 0 2px rgba(255,206,107,.35); }
.myth-node.is-reroll-top { box-shadow: 0 0 0 2px #ffce6b, 0 0 12px 2px rgba(255,206,107,.6); }

/* Reroll Advisor: node/stat cell + clickable rows + aligned numeric headers */
.rr-table th.num { text-align: right; }
.rr-row { cursor: pointer; }
.rr-row:hover td { background: rgba(157,107,255,.12); }
.rr-nodecell { line-height: 1.2; }
.rr-stat { display: flex; align-items: center; gap: .35rem; font-weight: 600; color: #fff; }
.rr-stat .stat-icon,
.rr-stat .force-ico { width: 18px; height: 18px; }
.rr-statname { white-space: nowrap; }
.rr-nodeno { display: block; font-size: .72rem; color: #9aa2b3; margin-top: .1rem; }
.rr-toprow .rr-nodeno { color: #ffce6b; }
.rr-range { color: #9aa2b3; font-weight: 400; font-size: .92em; }

/* ============================================================
   Stellar Force specifics (appended)
   ============================================================ */
/* wider + shorter board => vertically compact; bigger nodes (myth-style) */
.myth-board { aspect-ratio: 1000 / 470; max-width: 880px; }

/* shared palette with the Myth tool: blue node rings (var --ring #5aa9e6),
   gold connector lines, aqua reserved for the ACTIVE node only. Stellar just
   keeps its larger node size; colours come from the shared myth rules. */
.myth-node { width: 4.6%; border-width: 2px; }
.myth-node.is-set { box-shadow: 0 0 12px var(--ring, #5aa9e6); background: #1b1e27; }
.myth-node .node-lv { font-size: clamp(9px,1.05vw,15px); color: #dfe7ef; }
.myth-node .node-val { font-size: clamp(8px,.95vw,13px); }
.myth-node.is-locked { opacity: .5; filter: grayscale(.5); }
.myth-node.is-locked .node-lv { color: #6b7d88; }

/* grade buttons: show grade no + value + (optional) official % */
/* picker buttons use the shared (myth) .lv-btn box — same size/design, not just
   theme. Only the secondary label classes differ (stellar shows value + %). */
.lv-btn .lv-no { font-size: .74rem; opacity: .6; }
.lv-btn .lv-pct { font-size: .74rem; color: #ffce6b; }
/* selected value = identical to the Myth picker's chosen state */
.lv-btn.is-sel { border-color: #cfd8e0; background: rgba(255,210,124,.18); color: #fff; }
.lv-btn.is-top { box-shadow: inset 0 0 0 1px #ffce6b; }
.lv-row { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .5rem; }

/* status panel */
.sf-level { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .8rem; font-size: .9rem; }
.sf-level input { width: 5rem; padding: .3rem .4rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #eaf6fb; border-radius: 6px; }
.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li { display: flex; justify-content: space-between; padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }

.muted.small { font-size: .78rem; opacity: .7; }
/* advisor table has a 540px min-width; on phones let it scroll inside the panel
   instead of stretching the page (which caused horizontal body overflow). */
#advisorPanel { overflow-x: auto; }
.rr-keep td { opacity: .7; }
.rr-best { color: #5ffbf1; font-weight: 600; }