/* Final Persona Team — Wild Card mask wall + dossier.
   Builds on system.css tokens. Loud frame, calm data. */

/* The [hidden] attribute must always win — class rules like .btn / .strip-roster
   set `display`, which would otherwise override the UA hidden rule and leave the
   "Back to wall" button showing on the mask wall. */
[hidden] { display: none !important; }

/* ---- Skeleton ------------------------------------------------------------ */
.wall-skel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.wall-skel .skel { height: 196px; background: var(--panel); border: 1px solid var(--line); }

/* ---- Tool-strip "Back to wall" button (shown while a dossier is open) ----- */
.strip-roster {
  flex: none; border: none; font: inherit;
  font-size: var(--text-sm); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--paper); background: transparent; cursor: pointer;
  padding: var(--space-1) var(--space-2);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.strip-roster::before {
  content: ""; width: 0.55em; height: 0.9em; background: var(--blood);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transition: transform var(--t-fast) var(--ease-out);
}
.strip-roster:hover { color: var(--blood); }
.strip-roster:hover::before { transform: translateX(-3px); }

/* ---- Mask wall ----------------------------------------------------------- */
.wall-grid {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1rem;
}
.mask-tile {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 0.35rem; padding: 1.25rem 0.75rem 1rem; cursor: pointer; color: var(--paper);
  background: var(--panel); border: 1px solid var(--line); overflow: hidden;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
/* The new masks carry their own red vignette, so the tile only needs a faint
   halo that lifts on hover — the art supplies the glow. */
.mask-tile::before {
  content: ""; position: absolute; inset: -40% 0 auto 0; height: 78%;
  background: radial-gradient(60% 70% at 50% 40%, rgba(217, 35, 35, 0.5), transparent 70%);
  opacity: 0.3; transition: opacity 0.2s; pointer-events: none;
}
.mask-tile:hover, .mask-tile:focus-visible {
  border-color: var(--blood); transform: translateY(-3px); background: var(--panel-2); outline: none;
}
.mask-tile:hover::before, .mask-tile:focus-visible::before { opacity: 0.6; }
.mask-wrap {
  position: relative; width: 124px; height: 124px; display: grid; place-items: center;
  transform-style: preserve-3d;
}
.mask-tile .mask {
  width: 124px; height: 124px; object-fit: contain;
}
/* Feather the square red field into the panel — reads as a glowing medallion,
   no hard image box (same treatment as the party-builds emblems). */
.mask-tile .mask, .mask-lg {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 80%);
}
.rail-mask img {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 82%);
          mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 82%);
}
.tile-arcana {
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blood); font-weight: 700;
}
.tile-name { font-size: var(--text-lg); font-weight: 700; line-height: 1.1; text-align: center; }
.tile-epithet {
  font-size: var(--text-xs); font-style: italic; color: var(--smoke-lift);
  text-align: center; text-wrap: balance;
}
.tile-stamp {
  position: absolute; top: 0.7rem; right: -2.6rem; transform: rotate(8deg);
  background: var(--blood); color: var(--paper); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 2.5rem;
  opacity: 0; transition: opacity 0.2s;
}
.mask-tile.is-secured { background: #0b0b0b; border-color: var(--line-strong); }
.mask-tile.is-secured::before { opacity: 0.28; }
.mask-tile.is-secured .mask { filter: grayscale(0.15) drop-shadow(0 0 16px rgba(217, 35, 35, 0.55)); }
.mask-tile.is-secured .tile-stamp { opacity: 1; }

/* ---- Dossier layout ------------------------------------------------------ */
.dossier { margin-top: 1.25rem; }
.mask-rail {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.rail-mask {
  width: 52px; height: 52px; padding: 4px; background: var(--panel); border: 1px solid var(--line);
  cursor: pointer; display: grid; place-items: center; transition: border-color 0.15s, background 0.15s;
}
.rail-mask:hover { border-color: var(--maroon); }
.rail-mask[aria-current="true"] { border-color: var(--blood); background: var(--panel-2); }
.rail-mask.is-secured img { filter: drop-shadow(0 0 6px rgba(217, 35, 35, 0.6)); }

.dossier-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem;
  padding: 1.25rem; background: var(--panel); border: 1px solid var(--line); margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.dossier-head::before {
  content: ""; position: absolute; inset: 0 auto 0 -10%; width: 55%;
  background: radial-gradient(60% 80% at 30% 50%, rgba(217, 35, 35, 0.4), transparent 70%);
  pointer-events: none;
}
.mask-wrap--lg { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.mask-lg {
  width: 120px; height: 120px; object-fit: contain;
}
.mask-wrap--lg.is-secured .mask-lg { filter: drop-shadow(0 0 20px rgba(217, 35, 35, 0.7)); }
.identity { position: relative; z-index: 1; }
.d-arcana {
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blood); font-weight: 700;
}
.d-name { font-size: var(--text-2xl); font-weight: 700; line-height: 1; margin: 0.15rem 0; }
.d-name:focus { outline: none; }
.d-epithet { font-size: var(--text-lg); font-style: italic; color: var(--smoke-lift); }

/* Join button */
.join-btn {
  position: relative; transform: skewX(var(--slant)); background: var(--blood); color: var(--paper);
  border: none; padding: 0.7rem 1.4rem; cursor: pointer; font-family: inherit; font-weight: 700;
  font-size: var(--text-base); letter-spacing: 0.02em; z-index: 1; transition: background 0.15s;
}
.join-btn .join-face { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.join-btn:hover { background: #ef3030; }
.join-btn.is-secured { background: transparent; color: var(--smoke-lift); border: 1px solid var(--line-strong); }
.join-btn.is-secured:hover { color: var(--paper); border-color: var(--blood); }
.stamp-flash {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: skewX(calc(-1 * var(--slant)));
  white-space: nowrap; background: var(--paper); color: var(--ink); font-weight: 700;
  padding: 0.35rem 0.9rem; font-size: var(--text-sm); pointer-events: none; z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.dossier-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }

/* ---- Section heads ------------------------------------------------------- */
.sec-h {
  font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke-lift);
  font-weight: 700; margin: 0 0 0.75rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--blood);
}
.col--tree .sec-h:not(:first-child), .col--data .sec-h:not(:first-child) { margin-top: 1.5rem; }

/* ---- Stats --------------------------------------------------------------- */
.stat-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-row { display: grid; grid-template-columns: 2.2rem 1fr 2rem; align-items: center; gap: 0.6rem; }
.stat-key {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--smoke-lift);
}
.stat-track { height: 10px; background: var(--panel-2); border: 1px solid var(--line); position: relative; }
.stat-fill {
  display: block; height: 100%; width: var(--to); background: var(--blood);
  transform-origin: left; transition: width 0.4s;
}
.stat-val { font-size: var(--text-sm); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Skills -------------------------------------------------------------- */
.skill-group + .skill-group { margin-top: 1.1rem; }
.group-label {
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  margin: 0 0 0.5rem; color: var(--paper); display: inline-block; padding: 0.15rem 0.6rem;
  transform: skewX(var(--slant)); background: var(--maroon);
}
.group-label[data-cat="atk"] { background: var(--maroon); }
.group-label[data-cat="mag"] { background: #7a2a5a; }
.group-label[data-cat="sup"] { background: #2a5a5a; }
.group-label[data-cat="auto"] { background: var(--line-strong); color: var(--smoke-lift); }
/* Compact border-bottom rows, matching the party-builds skill list density. */
.skills-list { list-style: none; margin: 0; padding: 0; }
.skill { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.skill-name { font-weight: 700; font-size: var(--text-sm); }
.skill-cost {
  font-size: var(--text-xs); font-weight: 700; color: var(--blood); font-variant-numeric: tabular-nums;
  white-space: nowrap; justify-self: end;
}
.skill-cost--none { color: var(--smoke); }
.skill-effect { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--smoke-lift); line-height: 1.4; margin-top: 0.1em; max-width: 60ch; }

/* ---- Fusion tree --------------------------------------------------------- */
.tree-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1rem; }
.tree-recipe-label, .tree-tags-label {
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke-lift);
  font-weight: 700; margin-right: 0.3rem;
}
.tree-recipe .x { color: var(--smoke); font-weight: 700; }
.tag {
  display: inline-block; padding: 0.2rem 0.55rem; background: var(--panel-2); border: 1px solid var(--line-strong);
  font-size: var(--text-xs); font-weight: 700;
}
.tag--recipe { background: var(--panel); border-color: var(--maroon); }

.fn-root, .fn-children { list-style: none; margin: 0; padding: 0; }
.fn-children { margin-left: 1rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.fn { position: relative; margin-top: 0.5rem; }
.fn-card { padding: 0.5rem 0.7rem; background: var(--panel); border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.fn-card--fuse { border-left: 3px solid var(--blood); }
.fn--leaf .fn-card { background: var(--panel-2); border-style: dashed; }
.fn-persona { font-weight: 700; font-size: var(--text-sm); }
.fn-meta { font-size: var(--text-xs); color: var(--smoke); }
.fn-inherit { flex-basis: 100%; font-size: var(--text-xs); color: var(--blood); font-weight: 700; }

.preload { margin-top: 1rem; }
.preload-h { font-size: var(--text-sm); font-weight: 700; margin: 0 0 0.4rem; color: var(--paper); }
.tree-note {
  font-size: var(--text-sm); color: var(--smoke-lift); line-height: 1.5; margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem; background: var(--panel-2); border: 1px solid var(--line);
}
.tree-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tree-tags--card .tag { border-color: #2a5a5a; }
.tree-tags--native .tag { border-color: var(--line-strong); color: var(--smoke-lift); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .dossier-cols { grid-template-columns: 1fr; }
  .dossier-head { grid-template-columns: auto 1fr; }
  .join-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .wall-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
  .mask-wrap, .mask-tile .mask { width: 120px; height: 120px; }
  .skill { grid-template-columns: 1fr auto; }
  .d-name { font-size: var(--text-xl); }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .stat-fill { transition: none; }
  .mask-tile { transition: none; }
}

/* ---- Refinements: trait, step-by-step fusion, Rebellion stamp ------------- */

/* Step-by-step fusion */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.step { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.65rem; align-items: start; }
.step-n {
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  background: var(--blood); color: var(--paper); font-weight: 700; font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.step-body { background: var(--panel); border: 1px solid var(--line); padding: 0.5rem 0.7rem; }
.step-fuse { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; }
.step-fuse .sp { font-weight: 700; font-size: var(--text-sm); display: inline-block; line-height: 1.15; }
.step-fuse .sp--result { color: var(--blood); }
.step-fuse .plus, .step-fuse .arrow { color: var(--smoke); font-weight: 700; }
/* the ingredient's arcana, tucked under its name */
.sp-arc {
  display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--smoke);
}
.sp--result .sp-arc { color: var(--maroon); }
.tag--recipe .sp-arc { display: block; margin-top: 0.05rem; }
.step-meta { font-size: var(--text-xs); color: var(--smoke); margin-left: 0.2rem; align-self: center; }
.step-inherit { font-size: var(--text-xs); color: var(--smoke-lift); margin-top: 0.3rem; line-height: 1.5; }
.step-inherit b { color: var(--paper); }
.preload + .preload, .steps + .preload, .preload { margin-top: 1rem; }

/* Rebellion stamp — the greyed Pending Fusion button, stamped over when secured */
.join-slot { position: relative; z-index: 1; display: flex; justify-content: flex-end; min-width: 180px; }
.join-stack { position: relative; display: inline-block; }
.join-stack .join-btn { cursor: pointer; }
.stamp-img {
  position: absolute; left: 50%; top: 50%;
  width: 230px; max-width: 52vw; height: auto;
  transform: translate(-50%, -50%) rotate(-8deg); transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
  pointer-events: none; z-index: 2;
}

@media (max-width: 860px) {
  .join-slot { justify-content: flex-start; }
}

/* ---- Joker band: constant Wild Card identity + gear (above the chosen Persona) */
.joker-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem 2rem; align-items: start;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--blood);
}
.joker-portrait {
  width: 7.5rem; height: 7.5rem; object-fit: contain; align-self: center;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 56%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 46%, #000 56%, transparent 78%);
  filter: drop-shadow(0 0 18px rgba(217, 35, 35, 0.4));
}
.jk-identity { min-width: 0; }
.jk-kicker {
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blood); font-weight: 700;
}
.jk-name {
  font-size: var(--text-2xl); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; margin-top: 0.1rem;
}
.jk-blurb {
  color: var(--smoke-lift); max-width: 58ch; margin: 0.5rem 0 0.75rem;
  font-size: var(--text-sm); line-height: 1.5;
}
.jk-weak { margin-top: 0.65rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.weak-sealed { font-size: var(--text-xs); color: var(--smoke); font-style: italic; }

/* trait line + weakness pill (shared vocabulary with party-builds) */
.trait-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.6rem;
  align-items: baseline; max-width: 54ch; line-height: 1.35;
}
.trait-label {
  grid-column: 1 / -1; color: var(--blood); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.trait-line strong { color: var(--paper); font-size: var(--text-sm); }
.trait-line .trait-effect { min-width: 0; color: var(--smoke-lift); font-size: var(--text-sm); }
.weak-pill {
  display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0.25em 0.8em; transform: skewX(var(--slant));
  background: transparent; color: var(--smoke-lift); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.weak-pill > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.weak-pill b { color: var(--paper); }

/* equipped gear column */
.jk-loadout { display: flex; flex-direction: column; gap: 0.55rem; min-width: 11rem; }
.jk-loadout-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blood); margin-bottom: 0.15rem;
}
.jk-gear { display: flex; flex-direction: column; border-left: 2px solid var(--line-strong); padding-left: 0.7rem; }
.jk-slot { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); }
.jk-item { font-weight: 700; font-size: var(--text-sm); color: var(--paper); }

@media (max-width: 860px) {
  .joker-band { grid-template-columns: auto minmax(0, 1fr); }
  .jk-loadout {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem;
    margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); min-width: 0;
  }
  .jk-loadout-label { flex-basis: 100%; margin-bottom: 0; }
}
@media (max-width: 640px) {
  .joker-band { gap: 0.6rem 1rem; }
  .joker-portrait { width: 5.5rem; height: 5.5rem; }
  .jk-name { font-size: var(--text-xl); }
}