*, *::before, *::after { box-sizing: border-box; }


[hidden] { display: none !important; }

html, body {
  margin: 0;
  
  scrollbar-gutter: stable;
  overflow-x: clip;              
  background: var(--color-stage);
}
body {
  color: var(--color-stage-ink);
  font: var(--text-base)/1.55 var(--font-body);
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
button, select, input { font: inherit; color: inherit; }

input:where([type="text"], [type="number"], [type="password"], [type="email"], [type="url"], [type="tel"], [type="date"], [type="time"], :not([type])),
textarea {
  background: var(--color-stage-3);
  color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
:focus-visible {
  outline: var(--rule-bold) solid var(--focus-ring);
  outline-offset: 2px;           
}


.cham {
  --c: var(--chamfer);
  --bw: var(--rule);
  position: relative;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.cham::before {
  content: "";
  position: absolute;
  inset: var(--bw);
  background: var(--fill, transparent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  z-index: 0;
  pointer-events: none;
}
.cham > * { position: relative; z-index: 1; }


.app-bar {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-stage-2);
  border-bottom: var(--rule) solid var(--color-stage-line);
  flex-wrap: wrap;
}
.app-mark {
  font: 600 var(--text-lg)/1 var(--font-display);
  letter-spacing: var(--track-label);
  color: var(--color-stage-ink-2);
}
.app-mark b { color: var(--color-accent); font-weight: 700; }
.app-status {
  margin-left: auto; font-size: var(--text-xs);
  color: var(--color-stage-ink-2); font-variant-numeric: tabular-nums;
}
.header-tools {
  
  margin-left: auto; flex: 0 1 auto; max-width: 100%; min-width: 0;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  
  flex-wrap: wrap; justify-content: flex-end; row-gap: 2px;
}


.dororong-toggle {
  width: 32px; height: 32px; margin-left: 0; padding: 0;
  position: relative; isolation: isolate; flex: none;
  display: inline-grid; place-items: center;
  border: var(--rule) solid transparent; border-radius: var(--radius-hair);
  background: transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.dororong-toggle::after {
  content: ""; position: absolute; inset: -6px;
}
.dororong-toggle img {
  width: 28px; height: 28px; display: block; object-fit: contain;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dororong-toggle:hover, .dororong-toggle.is-hover {
    background: color-mix(in oklab, var(--color-dororong-pink) 14%, transparent);
  }
}
.dororong-toggle:focus-visible, .dororong-toggle.is-focus {
  outline: var(--rule-bold) solid var(--focus-ring); outline-offset: 2px;
}
.dororong-toggle:active, .dororong-toggle.is-active { transform: translateY(1px); }
.dororong-toggle:disabled, .dororong-toggle.is-disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.dororong-toggle[aria-pressed="true"] {
  background: var(--color-dororong-paper);
  border-color: var(--color-dororong-pink);
  box-shadow: inset 0 -2px 0 var(--color-dororong-pink);
}
.dororong-toggle[aria-pressed="true"] img {
  transform: translateY(-1px);
}

.neon-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 3px;
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 700 11px/1 var(--font-sans, "Noto Sans KR", sans-serif); letter-spacing: .02em;
  color: var(--color-stage-ink-2, #8a909a);
}
.neon-toggle i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor; box-sizing: border-box;
}
.neon-toggle .nt-short { display: none; }

.neon-toggle.neon-empty i { display: none; }
.neon-toggle[aria-pressed="true"] { color: #ff9cf8; text-shadow: 0 0 6px rgb(255 61 240 / .6); }
.neon-toggle[aria-pressed="true"] i { background: #ff3df0; border-color: #ff3df0; box-shadow: 0 0 6px #ff3df0; }
@media (hover: hover) and (pointer: fine) {
  .neon-toggle:hover span { text-decoration: underline; text-underline-offset: 3px; }
}
.neon-toggle:focus-visible { outline: var(--rule-bold) solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 600px) {
  .neon-toggle {
    padding: 0 8px; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px;
    background: rgb(255 255 255 / .03); font-size: 10px;
  }
  .neon-toggle[aria-pressed="true"] { border-color: rgb(255 61 240 / .55); }
}

@media (min-width: 1281px) and (max-width: 1599px) {
  .tabs .tab { padding-inline: var(--space-xs); }
}

@media (min-width: 1281px) and (max-width: 1379px) {
  .neon-toggle .nt-full { display: none; }
  .neon-toggle .nt-short { display: inline; }
}

:root:not([data-lang="ko"]) .neon-toggle .nt-full { display: none; }
:root:not([data-lang="ko"]) .neon-toggle .nt-short { display: inline; }

@media (max-width: 380px) {
  .neon-toggle .nt-full { display: none; }
  .neon-toggle .nt-short { display: inline; }
}


.neon-band {
  --neon-cell: 3px;
  position: relative; overflow: hidden; line-height: 0;
  padding: calc(var(--neon-cell) * 1.5) 0;
  cursor: pointer;                      
  background-color: #04050a;
  border-top: 1px solid rgb(255 255 255 / .06); border-bottom: 1px solid rgb(255 255 255 / .08);
  box-shadow: inset 0 0 30px rgb(0 0 0 / .9);
}
.neon-band[hidden] { display: none; }
.neon-canvas {
  display: block; width: 100%; height: calc(var(--neon-cell) * 32);
  background-image: radial-gradient(circle at center, rgb(255 255 255 / .055) 0 calc(var(--neon-cell) * .36), transparent calc(var(--neon-cell) * .36 + .6px));
  background-size: var(--neon-cell) var(--neon-cell);
}

.neon-act {
  position: absolute; right: 6px; bottom: 5px; line-height: 1.2;
  padding: 3px 9px; border: 0; border-radius: 999px; cursor: pointer; background: rgb(4 5 10 / .85);
  font: 600 11px/1.2 var(--font-sans, "Noto Sans KR", sans-serif); color: rgb(255 255 255 / .6);
  outline: 1px solid rgb(255 255 255 / .16);
}
.neon-act:hover { color: #fff; background: #04050a; }
.neon-act:focus-visible { outline: var(--rule-bold) solid var(--focus-ring); }


.neon-page { max-width: 1500px; margin: 0 auto; padding: var(--space-md) var(--space-sm) var(--space-xl, 2rem); display: grid; gap: var(--space-sm); }
.neon-page > * { min-width: 0; }
.neon-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.neon-page-head .fb-title { margin: 0; }
.neon-ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }   
.neon-prev { background: #04050a; border-radius: 6px; overflow: hidden; padding: 5px 0; line-height: 0; box-shadow: inset 0 0 24px rgb(0 0 0 / .9); }
.neon-prev canvas { display: block; width: 100%; }
.neon-cap { margin: -4px 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.neon-tools { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; }

.neon-tools { gap: 8px 0 !important; }
.neon-tg { display: flex; gap: 6px; align-items: center; padding: 0 12px; border-left: 1px solid var(--color-stage-line); }
.neon-tg:first-child { padding-left: 0; border-left: 0; }
.neon-ic {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid var(--color-stage-line); border-radius: 8px; cursor: pointer;
  background: var(--color-stage-2); color: var(--color-stage-ink);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.neon-ic:hover { border-color: var(--color-accent); }
.neon-ic.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.neon-ic:focus-visible { outline: var(--rule-bold) solid var(--focus-ring); outline-offset: 2px; }
.neon-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.neon-ic svg .neon-dot { fill: currentColor; stroke: none; }
#neon-zoom-v { width: 3em; text-align: center; }

.neon-page input[type="text"], .neon-page input[type="number"], .neon-page select {
  background: var(--color-stage-2); color: var(--color-stage-ink); color-scheme: dark;
  border: var(--rule) solid var(--color-stage-line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: var(--text-sm);
}
.neon-page select option, .neon-page select optgroup { background: #15171d; color: #e8eaf0; }

.neon-color { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: flex-start; }
.neon-picker { display: grid; gap: 6px; flex: 0 1 260px; min-width: 200px; }
.neon-sv { width: 100%; height: 140px; border-radius: 6px; cursor: crosshair; touch-action: none; display: block; }
.neon-hue { width: 100%; height: 16px; border-radius: 4px; cursor: ew-resize; touch-action: none; display: block; }
.neon-cside { display: grid; gap: 6px; flex: 1 1 280px; min-width: 0; align-content: start; }
.neon-rgb { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--text-sm); }
.neon-rgb label { display: inline-flex; align-items: center; gap: 4px; color: var(--color-stage-ink-2); font-weight: 700; }
.neon-rgb input[type="number"] { width: 4.2em; }
.neon-rgb #neon-hex { width: 6.2em; font-family: var(--font-mono, ui-monospace, monospace); }
.neon-cur { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 12px var(--glow, transparent), inset 0 0 0 1px rgb(255 255 255 / .25); flex: none; }
.neon-rgbtxt { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm); }
.neon-usedrow { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.neon-size { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-stage-ink-2); white-space: nowrap; flex: none; }
.neon-size select { min-width: 4.5em; }
.neon-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.neon-sw {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 0 8px var(--sw), inset 0 0 0 2px #04050a; background: var(--sw);
}
.neon-sw[aria-checked="true"] { border-color: #fff; transform: scale(1.12); }

.neon-sw.neon-sw-erase {
  background: repeating-linear-gradient(45deg, #2a2d36 0 3px, #12141a 3px 6px); box-shadow: inset 0 0 0 2px #04050a;
  border-color: rgb(255 255 255 / .35);
}
.neon-sw.neon-sw-erase[aria-checked="true"] { border-color: #fff; }
.neon-keys { margin: -4px 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
@media (pointer: coarse) { .neon-keys { display: none; } }
.neon-tg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.neon-tg .btn { min-width: 2.4rem; }
.neon-tool.on { background: var(--color-accent); color: var(--color-accent-ink); }
.neon-zoom span { min-width: 3.2em; text-align: center; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.neon-text-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.neon-text-row #neon-text { flex: 1 1 12rem; max-width: 22rem; min-width: 0; }
.neon-hint { margin: -4px 0 0; font-size: var(--text-xs); color: #ff9cf8; }
.neon-board { width: max-content; max-width: 100%; overflow-x: auto; overflow-y: hidden; background: #05060a; border-radius: 6px; line-height: 0; scrollbar-width: thin; }
.neon-board canvas { display: block; touch-action: none; cursor: crosshair; }
.neon-scroll { width: 100%; accent-color: var(--color-accent); }
.neon-rules { margin: 0; padding-left: 1.2em; font-size: var(--text-xs); color: var(--color-stage-ink-2); line-height: 1.7; }
.neon-mine { font-size: var(--text-sm); display: grid; gap: 2px; }
.neon-mine b { font-weight: 700; }
.neon-foot { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; padding-top: var(--space-sm); border-top: var(--rule) solid var(--color-stage-line); }
.neon-foot #neon-nick { flex: 0 1 12rem; min-width: 0; }
.neon-msg { flex: 1 1 10rem; font-size: var(--text-sm); color: var(--color-stage-ink-2); }
.neon-msg.ok { color: #7dff4d; }
.neon-msg.bad { color: var(--color-alert); }
.neon-foot .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.neon-foot #neon-send:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
@media (max-width: 600px) { .neon-foot #neon-nick { flex: 1 1 100%; } }


:root[data-dororong="on"] :focus-visible,
:root[data-dororong="on"] .dororong-toggle.is-focus {
  outline-color: var(--color-dororong-ink);
  box-shadow: 0 0 0 var(--space-2xs) var(--color-dororong-paper);
}
@media (prefers-reduced-motion: reduce) {
  .dororong-toggle, .dororong-toggle img {
    transition: none; animation: none;
  }
}


.dororong-playground {
  position: absolute; inset: 0 auto auto 0; z-index: var(--z-dororong);
  width: 100%; height: var(--doro-canvas-height, 100dvh);
  display: block; overflow: clip; pointer-events: none;
  contain: layout paint; isolation: isolate;
}
.dororong-runner {
  position: absolute; inset: 0 auto auto 0;
  width: var(--doro-size); opacity: 0;
  animation: dororong-roam var(--doro-duration) var(--ease-in-out) var(--doro-delay) both;
  pointer-events: auto; touch-action: none; user-select: none;
  cursor: grab; -webkit-user-drag: none;
  will-change: transform, opacity;
}
.dororong-runner.is-interacting {
  z-index: 2;
  animation-play-state: paused;
}
.dororong-runner.is-grabbed { cursor: grabbing; }
.dororong-runner.is-interacting .dororong-runner__sprite,
.dororong-runner.is-interacting img {
  animation-play-state: paused;
}
.dororong-runner__grab {
  display: block;
  will-change: transform;
}
.dororong-runner__sprite {
  display: block;
  animation: dororong-hop var(--dur-dororong-hop) var(--ease-in-out) var(--doro-delay) var(--doro-hop-count);
}
.dororong-runner img {
  display: block; width: 100%; height: auto;
  transform: rotate(var(--doro-tilt)) scaleX(var(--doro-face));
  filter: drop-shadow(0 var(--space-3xs) var(--space-2xs) var(--color-stage-line));
}
.dororong-runner--spinner img {
  animation: dororong-spin var(--doro-spin-duration) linear var(--doro-delay) var(--doro-spin-count);
}
@keyframes dororong-roam {
  0% {
    opacity: 0;
    transform: translate3d(var(--doro-start-x), var(--doro-start-y), 0);
  }
  5% { opacity: var(--doro-alpha); }
  34% {
    opacity: var(--doro-alpha);
    transform: translate3d(var(--doro-curve-1-x), var(--doro-curve-1-y), 0);
  }
  68% {
    opacity: var(--doro-alpha);
    transform: translate3d(var(--doro-curve-2-x), var(--doro-curve-2-y), 0);
  }
  92% { opacity: var(--doro-alpha); }
  100% {
    opacity: 0;
    transform: translate3d(var(--doro-end-x), var(--doro-end-y), 0);
  }
}
@keyframes dororong-hop {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%      { transform: translate3d(0, calc(var(--space-xs) * -1), 0) rotate(2deg); }
}
@keyframes dororong-spin {
  from { transform: rotate(var(--doro-tilt)) scaleX(var(--doro-face)); }
  to   { transform: rotate(calc(var(--doro-tilt) + var(--doro-spin-turn))) scaleX(var(--doro-face)); }
}

:root[data-dororong="off"] .dororong-playground,
:root[data-fx="off"] .dororong-playground {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .dororong-playground { display: none; }
  .dororong-runner, .dororong-runner__sprite,
  .dororong-runner img { animation: none; }
}


.tabs { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--space-2xs); }
.tab {
  background: none; border: 0; cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  font: 500 var(--text-sm)/1 var(--font-body);
  color: var(--color-stage-ink-2);
  border-bottom: var(--rule-bold) solid transparent;
  white-space: nowrap;                       
  transition: color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--color-stage-ink); }

.tab-acct { display: inline-flex; align-items: center; gap: 5px; }
.tab-ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab.on { color: var(--color-accent); border-bottom-color: var(--color-accent); }


.stage {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--color-stage-2), transparent 60%),
    var(--color-stage);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}
.stage-head {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap; margin-bottom: var(--space-md);
}


.weak { display: flex; align-items: center; gap: var(--space-xs); }
.weak-label {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label);
  color: var(--color-stage-ink-2);
}
.weak-label i { font-style: normal; color: var(--color-stage-line); }
.brackets { position: relative; padding: 6px 10px; }

.brackets::before, .brackets::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: var(--rule-bold) solid var(--code, var(--color-stage-line));
}
.brackets[data-code="작열"] { --code: var(--code-fire); }
.brackets[data-code="수냉"] { --code: var(--code-water); }
.brackets[data-code="풍압"] { --code: var(--code-wind); }
.brackets[data-code="전격"] { --code: var(--code-elec); }
.brackets[data-code="철갑"] { --code: var(--code-iron); }
.brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.weak-ico { width: 20px; height: 22px; display: block; }

.stage-head .brackets { min-height: 44px; }

@media (min-width: 481px) {
  .stage-head:has(> #nd-toggle:not([hidden])) > #solo-weak,
  .stage-head:has(> #nd-toggle:not([hidden])) > #nd-boss { min-width: 14rem; }
}

@media (max-width: 480px) {
  .stage-head #solo-weak, .stage-head #nd-boss { flex: 1 1 13rem; min-width: 0; }
  #nd-boss .brackets, .nd-boss-btn { min-width: 0; }
}
.brackets { display: flex; align-items: center; gap: var(--space-2xs); }
.brackets select {
  background: var(--color-stage-2); border: var(--rule) solid var(--color-stage-line);
  color: var(--color-stage-ink); padding: 2px var(--space-xs);
  font-size: var(--text-sm); border-radius: var(--radius-hair);
}


.deck-tabs { display: flex; gap: var(--space-2xs); }

.deck-tab {
  --c: var(--chamfer-sm);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: var(--color-stage-2);
  border: 0; cursor: pointer; padding: var(--space-xs) var(--space-sm);
  min-width: 46px;
  font: 600 var(--text-sm)/1 var(--font-display);
  letter-spacing: 0.06em; color: var(--color-stage-ink-2);
  white-space: nowrap; user-select: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.deck-tab:hover { color: var(--color-stage-ink); }
.deck-tab.on { background: var(--color-accent); color: var(--color-accent-ink); }
.deck-tab.filled:not(.on) { color: var(--color-amber); }
.deck-tab[disabled] { opacity: 0.4; cursor: default; }


.squad {
  position: relative;
  border-top: var(--rule-bold) solid var(--color-accent);
  background: linear-gradient(180deg, var(--color-accent-soft), transparent 40%);
  
  
  padding: calc(var(--space-md) + 22px) var(--space-sm) var(--space-sm);
}


.squad-notch {
  --c: 6px;
  position: absolute; top: calc(var(--rule-bold) * -1); left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: var(--space-2xs);
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: 3px 12px 4px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  font: 600 var(--text-xs)/1.4 var(--font-display);
  letter-spacing: var(--track-label);
  white-space: nowrap;
}
.notch-ico { opacity: 0.75; }
.notch-val { font-variant-numeric: tabular-nums; font-weight: 700; }

.slots {
  position: relative;   
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xs); max-width: 34rem; margin-inline: auto;
}
.slot > .nk { width: 100%; }   
@media (max-width: 30rem) { .slots { gap: var(--space-2xs); } }



.adj-frame {
  position: absolute; grid-row: 1; top: 0; left: 0; right: 0; pointer-events: none;
  border: 2px solid var(--adj-frame-c, var(--color-info));
}

.squad-foot {
  display: flex; align-items: flex-end; gap: var(--space-sm);
  flex-wrap: wrap; margin-top: var(--space-md);
}

.squad-foot > #deck-ask:not(:empty) { flex: 1 0 100%; width: 100%; }
.squad-foot > #deck-ask:empty { display: none; }
.field { display: flex; align-items: center; gap: var(--space-2xs); }
.field-label {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
  white-space: nowrap;
}
.field input, .field select {
  background: var(--color-stage-2); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  border-radius: var(--radius-hair); padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
}
.field input[type="number"] { width: 4.5rem; font-family: var(--font-num); }
.field-unit { font-size: var(--text-xs); color: var(--color-stage-ink-2); }

.btn {
  --c: var(--chamfer-sm); --bw: var(--rule-bold);
  position: relative; border: 0; cursor: pointer;
  padding: var(--space-xs) var(--space-md);
  font: 600 var(--text-sm)/1 var(--font-body);
  white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover, .btn-primary.is-hover { filter: brightness(1.12); }
.btn-ghost {
  background: var(--color-stage-line); color: var(--color-stage-ink);
}
.btn-ghost:hover, .btn-ghost.is-hover { filter: brightness(1.25); }
.btn-alert { background: var(--color-alert); color: var(--color-stage-ink); }
.btn-amber { background: var(--color-amber-deep); color: var(--color-stage); }
.btn-amber:hover, .btn-amber.is-hover { filter: brightness(1.12); }

.btn-lab { background: var(--color-lab); color: var(--color-lab-ink); }
.btn-lab:hover, .btn-lab.is-hover { filter: brightness(1.06); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: default; transform: none; filter: none; }
.btn[data-state="loading"] { color: transparent; }
.btn[data-state="loading"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: var(--rule-bold) solid currentcolor; border-top-color: transparent;
  color: var(--color-stage);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notes {
  margin: var(--space-sm) 0 0; font-size: var(--text-xs);
  color: var(--color-amber); white-space: pre-wrap;
}
.notes:empty { display: none; }


.growth-flags { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.gf-group-label {
  display: block; font: 600 var(--text-xs)/1.6 var(--font-body);
  color: var(--color-amber-deep);
}
.gf-cards { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: 2px; }
.gf-card {
  display: flex; align-items: center; gap: 6px;
  padding: 3px var(--space-2xs) 3px 3px; background: var(--color-stage-2);
  border-radius: 3px;
}
.gf-card .cmp-art { width: 22px; height: 29px; border-radius: 2px; flex: none; }
.gf-card-nm { font-size: var(--text-xs); color: var(--color-stage-ink); }
.gf-card-v {
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

.score {
  display: flex; align-items: baseline; gap: var(--space-sm);
  flex-wrap: wrap; margin-top: var(--space-md);
  font-size: var(--text-sm); color: var(--color-stage-ink-2);
}
.score b {
  font: 600 var(--text-num-l)/1 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--color-amber);
}
.score-each { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.score-pill {
  font: 500 var(--text-xs)/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  padding: 3px var(--space-xs);
  background: var(--color-stage-2); color: var(--color-stage-ink-2);
  border: var(--rule) solid var(--color-stage-line);
  cursor: grab; touch-action: none; user-select: none;
}
.score-pill.on { color: var(--color-amber); border-color: var(--color-amber-deep); }
.dup-warn {
  margin: var(--space-xs) 0 0; min-height: 1.2em;
  font-size: var(--text-xs); color: var(--color-alert);
}


.nk {
  --c: var(--chamfer-sm); --bw: var(--rule);
  
  --edge: var(--color-amber-deep);
  
  --frame: var(--edge);
  
  --check: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 30%27%3E%3Cpath fill=%27%23000%27 d=%27M0 16h5l13 13h-5zM35 0h5L18 29h-5z%27/%3E%3C/svg%3E");
  position: relative; margin: 0;
  
  aspect-ratio: 1 / 1.95;
  background: var(--frame); --fill: var(--color-stage-3);
  cursor: pointer; overflow: hidden; user-select: none;
  
  touch-action: pan-y;
  
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform var(--dur-fast) var(--ease-out);
}
.nk::before {
  content: ""; position: absolute; inset: var(--bw);
  background: var(--fill);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.nk > * { position: relative; z-index: 1; }

.nk[data-rare="SSR"] { --edge: var(--color-amber-deep); }
.nk[data-rare="SR"]  { --edge: var(--color-grade-sr); }
.nk[data-rare="R"]   { --edge: var(--color-grade-r); }
.nk:hover, .nk.is-hover { transform: translateY(-2px); }

.nk.on { --frame: var(--color-accent); --bw: 3px; }

.nk.on .nk-art::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: color-mix(in oklch, var(--color-accent) 26%, transparent);
}
.nk.on .nk-art::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--color-accent);
  -webkit-mask: var(--check) center 52% / 42% no-repeat;
  mask: var(--check) center 52% / 42% no-repeat;
}
.nk.dup { --frame: var(--color-alert); --bw: 3px; }
.nk.dim { opacity: 0.34; cursor: not-allowed; }

.nk.picked { --frame: var(--color-accent); --bw: 3px; }
.nk.picked .nk-art::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--color-accent-soft);
}

.nk-art { position: absolute; inset: var(--bw); overflow: hidden; z-index: 0; }

.nk-art img {
  width: 100%; height: 84%; object-fit: cover; object-position: center top;
  display: block;
}
.nk-noart {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: var(--text-xs); color: var(--color-stage-ink-2); text-align: center;
  padding: var(--space-2xs);
}


.nk-rail {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
}
.bdg {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  background: color-mix(in oklch, var(--color-stage) 78%, transparent);
  
  border: var(--rule) solid color-mix(in oklch, var(--color-stage-ink) 62%, transparent);
  font: 600 9px/1 var(--font-display);
  color: var(--color-stage-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);  
}
.bdg img { width: 11px; height: 11px; display: block; }

.bdg-cls img, .bdg-burst img { width: 15px; height: 15px; }

.bdg-code {
  background: none; border: 0; clip-path: none;
  width: 16px; height: 18px;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55));
}
.bdg-code img { width: 100%; height: 100%; }

.bdg-cls img, .bdg-burst img { filter: brightness(0) invert(1); }
.bdg-burst { font-size: 10px; letter-spacing: -0.04em; }

:root[data-dororong="on"] .bdg-cls,
:root[data-dororong="on"] .bdg-burst {
  background: var(--color-dororong-ink);
  border-color: var(--color-dororong-pink);
  color: var(--color-dororong-paper);
}


.bdg-fav::after {
  content: ""; width: 10px; height: 10px;
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}
.bdg-fav[data-fav="sub"] {
  background: var(--color-item-light); border-color: transparent;
}
.bdg-fav[data-fav="sub"]::after { background: var(--grade); }

.bdg-fav[data-fav="max"] { background: var(--grade); border-color: transparent; }
.bdg-fav[data-fav="max"]::after { background: var(--color-item-light); }

.bdg-fav[data-fav="max-ssr"] {
  background: var(--color-item-dark);
  border-color: color-mix(in oklch, var(--color-grade-ssr) 70%, transparent);
}
.bdg-fav[data-fav="max-ssr"]::after { background: var(--color-grade-ssr); }



.nk-buffs {
  position: absolute; right: 4px; bottom: -999px; z-index: 5;
  display: flex; flex-direction: row-reverse; justify-content: flex-start;
  align-items: center; gap: 3px;
}

.bdg-adj {
  
  --c: var(--adj-c, var(--color-info));
  width: 16px; height: 16px; border-radius: 999px; clip-path: none;
  background: linear-gradient(155deg,
    color-mix(in oklch, var(--c) 92%, white 8%),
    color-mix(in oklch, var(--c) 78%, black 14%));
  border: 1px solid color-mix(in oklch, var(--c) 55%, white 20%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.35);
  color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: -0.02em;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.35);
}


.nk-stars { display: flex; align-items: center; gap: 1px; }
.nk-stars img { width: 11px; height: 11px; display: block; }
.nk-core {
  display: grid; place-items: center;
  width: 16px; height: 16px; padding: 0;
  background: url("image/icon/nk-evolve.png") center / 100% 100% no-repeat;
  font: 700 7px/1 var(--font-display); color: var(--color-item-light);
}

.nk-core.max { font-size: 5px; letter-spacing: -0.02em; }



.nk-rail-r {
  position: absolute; top: var(--bw); right: var(--bw); z-index: 4;
}

.slot .nk-rail-r, .u-slot .nk-rail-r { top: 22px; }

.nk-rail-r {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.nk-rail-r > * { position: static; }


.nk-party {
  align-self: flex-start; padding: 1px 4px 2px;
  background: var(--color-accent); color: var(--color-accent-ink);
  font: 700 9px/1.3 var(--font-display); letter-spacing: 0.04em;
  clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%);
}

.nk.used .nk-party { background: var(--color-stage-ink-2); }



.nk-foot {
  position: absolute; left: var(--bw); right: var(--bw); bottom: var(--bw); z-index: 2;
  display: grid;
  
  background: color-mix(in oklch, var(--color-stage) 84%, transparent);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  border-bottom: 3px solid var(--edge);
}
.nk-line1 {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px;
  min-height: 26px; padding: 10px 4px 1px;
}

.nk-stars, .nk-core { position: relative; flex: none; }

.nk-nm {
  min-width: 0; overflow: hidden; white-space: nowrap;
  padding: 0 4px 3px;
  color: var(--color-stage-ink);
  font: 600 10px/1.4 var(--font-body); text-align: right;
  
  text-shadow: 0 1px 2px var(--color-stage);
}

.nk-nm > span { display: inline-flex; white-space: nowrap; }
.nk-nm > span > i { font-style: normal; white-space: nowrap; }
.nk-nm.over > span > i { padding-right: 1.6em; }
.nk-nm.over > span { animation: marquee var(--dur, 4s) linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.nk-cog {
  z-index: 5; flex: none;
  width: 18px; height: 18px; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in oklch, var(--color-stage) 78%, transparent);
  color: var(--color-stage-ink-2); font-size: 11px; line-height: 1;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.nk-cog:hover { color: var(--color-accent); }
.nk-cog.edited { color: var(--color-amber); background: var(--color-stage); }


.nk-stat {
  z-index: 5; flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--color-stage) 86%, transparent);
  border: var(--rule) solid currentColor;
  color: var(--color-stage-ink-2);
  font: 700 10px/1 var(--font-display);
  cursor: help; user-select: none;
}
.nk-stat[data-k="bug"] { color: var(--color-alert); }
.nk-stat[data-k="approx"] { color: var(--color-amber); }
.nk-stat[data-k="verifying"] { color: var(--color-accent); }

.nk-stat[data-k="preview"] { color: var(--color-amber); }
.nk-stat[data-k="unsupported"] { color: var(--color-stage-ink-2); }

.nk.compact .nk-stat { display: none; }



.slot {
  
  width: 100%;
  position: relative; aspect-ratio: 1 / 1.95;
  border: var(--rule) dashed var(--color-stage-line);
  display: grid; place-items: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.slot.has { border-style: none; }
.slot.over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.slot-no {
  font: 600 var(--text-lg)/1 var(--font-display);
  color: var(--color-stage-line);
}
.slot-x {
  position: absolute; top: 2px; right: 2px; z-index: 4;
  width: 18px; height: 18px; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in oklch, var(--color-stage) 84%, transparent);
  color: var(--color-stage-ink-2); font-size: 10px; line-height: 1;
}
.slot-x:hover { color: var(--color-alert); }

@media (hover: none) {
  .slot-x {
    width: 32px; height: 32px; top: -5px; right: -5px;
    background: none;                       
    display: grid; place-items: center;     
  }
  .slot-x::before {
    content: ""; position: absolute; top: 50%; left: 50%; z-index: -1;
    width: 18px; height: 18px; transform: translate(-50%, -50%);
    background: color-mix(in oklch, var(--color-stage) 84%, transparent);
  }
}


.roster {
  background: var(--color-roster); color: var(--color-roster-ink);
  padding: var(--space-md);
  border-top: var(--rule-bold) solid var(--color-amber-deep);
}
.roster-solo { min-height: 60vh; }

.filter-bar {
  display: flex; align-items: center; gap: var(--space-xs);
  flex-wrap: wrap; margin-bottom: var(--space-sm);
}
.search {
  display: flex; align-items: center; gap: var(--space-2xs);
  background: var(--color-roster-2);
  border: var(--rule) solid var(--color-roster-line);
  padding: var(--space-2xs) var(--space-xs); flex: 1 1 11rem; min-width: 0;
}
.search-ico { color: var(--color-roster-ink-2); }
.search input {
  border: 0; background: none; flex: 1; min-width: 0;
  font-size: var(--text-sm); color: var(--color-roster-ink);
}
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--color-accent); }

.chips { display: flex; gap: 3px; }
.chip {
  --c: 5px;
  background: var(--color-roster-2); color: var(--color-roster-ink-2);
  border: var(--rule) solid var(--color-roster-line);
  padding: var(--space-2xs) var(--space-xs); cursor: pointer;
  font: 600 var(--text-xs)/1.3 var(--font-display);
  letter-spacing: 0.04em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chip img { width: 14px; height: 14px; display: block; }
.chip:hover { color: var(--color-roster-ink); border-color: var(--color-roster-ink-2); }
.chip.on {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.field-sort .field-label { color: var(--color-roster-ink-2); }
.field-sort select {
  background: var(--color-roster-2); color: var(--color-roster-ink);
  border-color: var(--color-roster-line);
}

.roster-hint {
  margin: 0 0 var(--space-sm); font-size: var(--text-xs);
  color: var(--color-roster-ink-2);
}
.roster-hint b { color: var(--color-roster-ink); }
.roster-count { float: right; font-variant-numeric: tabular-nums; }

.pool {
  display: grid; gap: var(--space-xs);
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}
@media (min-width: 48rem) {
  .pool { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

.roster .nk { --fill: var(--color-roster-2); }
.roster .nk-foot {
  background: linear-gradient(180deg, transparent,
    color-mix(in oklch, var(--color-stage) 82%, transparent) 45%);
}


.sec-label {
  font: 600 var(--text-sm)/1 var(--font-display);
  letter-spacing: var(--track-label);
  color: var(--color-roster-ink-2);
  margin: var(--space-lg) 0 var(--space-sm);
  overflow-wrap: anywhere;
}
.sec-label:first-child { margin-top: 0; }


.prose { margin: 0 0 var(--space-md); font-size: var(--text-sm); max-width: none; }
.prose-sm { font-size: var(--text-xs); color: var(--color-roster-ink-2); }
.prose code {
  font-family: var(--font-num); font-size: 0.95em;
  background: var(--color-roster-2); padding: 1px 4px;
}


.migration-card {
  display: grid; gap: var(--space-sm);
  margin: 0 0 var(--space-xl); padding: var(--space-md);
  border: var(--rule-bold) solid var(--color-accent);
  background: var(--color-stage-2); color: var(--color-stage-ink);
}
.migration-card[hidden] { display: none; }
.migration-card + .sec-label { margin-top: 0; }
.migration-kicker {
  margin: 0;
  font: 600 var(--text-xs)/1.3 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-accent);
}
.migration-title {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font: 700 var(--text-xl)/1.15 var(--font-display);
  letter-spacing: var(--track-tight);
}
.migration-copy, .migration-note, .migration-status { margin: 0; }
.migration-copy { max-width: 72ch; font-size: var(--text-base); line-height: 1.6; }
.migration-steps {
  margin: 0; padding-inline-start: 1.35em;
  display: grid; gap: var(--space-xs);
  max-width: 72ch; font-size: var(--text-base); line-height: 1.5;
}
.migration-steps li::marker {
  color: var(--color-accent); font-family: var(--font-num); font-weight: 700;
}
.migration-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.migration-actions .btn {
  width: 100%; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-base); text-decoration: none; white-space: nowrap;
}
.migration-status {
  min-height: 1.4em; overflow-wrap: anywhere;
  color: var(--color-stage-ink-2); font-size: var(--text-base); line-height: 1.4;
}
.migration-status.ok { color: var(--color-stage-ink); }
.migration-status.warn { color: var(--color-amber); }
.migration-status.err { color: var(--color-alert); }
.migration-note {
  padding-top: var(--space-sm); border-top: var(--rule) solid var(--color-stage-line);
  max-width: 78ch; color: var(--color-stage-ink-2); font-size: var(--text-base); line-height: 1.5;
}
@media (min-width: 40rem) {
  .migration-card { padding: var(--space-lg); }
  .migration-actions { display: flex; flex-wrap: wrap; align-items: center; }
  .migration-actions .btn { width: auto; }
}

.sync {
  border: var(--rule) solid var(--color-roster-line);
  background: var(--color-roster-2);
  padding: var(--space-sm); margin-bottom: var(--space-sm);
}
.sync .field-label { display: block; margin-bottom: var(--space-2xs); color: var(--color-roster-ink-2); }
.sync-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.sync-row input {
  flex: 1 1 16rem; min-width: 0;
  background: var(--color-roster); color: var(--color-roster-ink);
  border: var(--rule) solid var(--color-roster-line);
  padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm);
}
.steps-list {
  margin: 0 0 var(--space-sm); padding-left: 1.4em;
  font-size: var(--text-sm); display: grid; gap: var(--space-2xs);
}
.steps-list code {
  font-family: var(--font-num); font-size: 0.95em;
  background: var(--color-roster); padding: 1px 4px;
}
.bm-alt { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }

.bm {
  display: inline-block; margin-top: var(--space-2xs);
  background: var(--color-amber-deep); color: var(--color-stage);
  padding: var(--space-2xs) var(--space-md); cursor: grab;
  font: 600 var(--text-sm)/1.4 var(--font-body);
  text-decoration: none; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.drop {
  border: var(--rule-bold) dashed var(--color-roster-line);
  padding: var(--space-lg) var(--space-md); text-align: center; cursor: pointer;
  display: grid; gap: var(--space-2xs); color: var(--color-roster-ink-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.drop:hover, .drop.over { border-color: var(--color-accent); color: var(--color-roster-ink); }
.acct-msg { min-height: 1.2em; font-size: var(--text-sm); margin: var(--space-sm) 0 0; }
.acct-msg.err { color: var(--color-alert); }
.acct-msg.ok { color: var(--color-ok); }

.acct-msg.warn { color: var(--color-amber); }

.prof-list { display: grid; gap: var(--space-xs); }

@media (min-width: 900px) {
  #preset-list { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); align-items: start; }
}
.prof {
  border: var(--rule) solid var(--color-roster-line);
  background: var(--color-roster-2); padding: var(--space-sm);
  display: grid; gap: var(--space-2xs);
}
.prof.on { border-color: var(--color-accent); border-left-width: 3px; }
.prof-top { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.prof-name { font-weight: 700; }
.prof-meta {
  font: 500 var(--text-xs)/1.4 var(--font-num);
  color: var(--color-roster-ink-2); font-variant-numeric: tabular-nums;
}
.prof-acts { display: flex; gap: var(--space-2xs); margin-left: auto; flex-wrap: wrap; }
.prof-acts .btn { padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); }
.prof-notice { font-size: var(--text-xs); color: var(--color-roster-ink-2); }
.prof-notice.warn { color: var(--color-amber-deep); }


.sheet {
  
  border: 0; padding: 0; max-width: 40rem; width: min(40rem, calc(100vw - 1.5rem));
  background: var(--color-stage); color: var(--color-stage-ink);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.6);
  outline: var(--rule) solid var(--color-stage-line);
}
.sheet::backdrop { background: rgb(0 0 0 / 0.72); }
.sheet-form { display: grid; gap: 0; }

.sheet-head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-stage-2);
  border-bottom: var(--rule-bold) solid var(--color-accent);
}
.sheet-who { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.sheet-thumb {
  width: 42px; height: 56px; flex: none; overflow: hidden; display: block;
  background: var(--color-stage-3);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.sheet-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.sheet-name { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.sheet-sub {
  font: 600 var(--text-xs)/1.4 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}

.sheet-head .fclear { position: static; box-shadow: none; margin-left: auto; }


.bossdraw-sheet {
  inset: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none;
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  background: var(--color-stage); color: var(--color-stage-ink);
}
.bossdraw-sheet::backdrop { background: var(--color-stage); }
html.bd-open, html.bd-open body { overflow: hidden; }
.bd-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bd-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs, 6px);
  padding: var(--space-xs, 6px) var(--space-sm, 10px);
  border-bottom: var(--rule, 1px) solid var(--color-stage-line);
}
.bd-bar > b { font-size: var(--text-base, 15px); margin-right: var(--space-sm, 8px); }
.bd-bar #bossdraw-x { margin-left: auto; }

.bd-main { flex: 1; min-height: 0; display: flex; --bd-side-w: 420px; }
.bd-side {
  
  width: var(--bd-side-w); flex: none; overflow-y: auto; overflow-x: hidden; padding: var(--space-sm, 10px);
  display: grid; align-content: start; gap: 10px;
}
.bd-split {
  flex: none; width: 7px; cursor: col-resize; touch-action: none;
  border-left: var(--rule, 1px) solid var(--color-stage-line); background: transparent;
}
.bd-split:hover, .bd-split.on, .bd-split:focus-visible { background: oklch(70% 0.06 250 / .35); outline: none; }
.bd-main.bd-folded .bd-side, .bd-main.bd-folded .bd-split { display: none; }
.bd-hints { display: grid; gap: 8px; }
.bd-tools { display: flex; flex-wrap: wrap; gap: var(--space-xs, 6px); align-items: center; }
.bd-grp { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bd-grp.off { opacity: .45; }
.bd-sep { width: 1px; height: 20px; background: var(--color-stage-line); margin: 0 2px; }
.bd-ib2 { min-width: 30px; padding-inline: 6px; }
.bd-disk { display: inline-flex; align-items: center; gap: 6px; }

.bd-manual { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgb(0 0 0 / .55); padding: 16px; }
.bd-man-box {
  width: min(860px, 100%); max-height: 100%; display: flex; flex-direction: column; min-height: 0;
  background: var(--color-stage, #14161b); color: var(--color-stage-ink, #e8ebf0);
  border: 1px solid var(--color-stage-line, #333); border-radius: 12px; box-shadow: 0 16px 48px rgb(0 0 0 / .5);
}
.bd-man-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--color-stage-line, #333); font-size: 16px; }
.bd-man-body { overflow-y: auto; padding: 6px 20px 24px; font-size: 14px; line-height: 1.7; }
.bd-man-toc { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; position: sticky; top: 0;
  background: var(--color-stage, #14161b); border-bottom: 1px solid var(--color-stage-line, #333); z-index: 1; }
.bd-man-toc button { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer; color: inherit;
  background: oklch(60% 0.02 260 / .15); border: 1px solid var(--color-stage-line, #333); }
.bd-man-toc button:hover { background: oklch(60% 0.05 250 / .3); }
.bd-man-body section { padding-top: 14px; scroll-margin-top: 52px; }
.bd-man-body h3 { margin: 0 0 6px; font-size: 16px; }
.bd-man-body h4 { margin: 12px 0 2px; font-size: 14px; }
.bd-man-body p { margin: 4px 0; }
.bd-man-body ul, .bd-man-body ol { margin: 4px 0; padding-left: 22px; }
.bd-man-body li { margin: 3px 0; }
.bd-man-tip { padding: 8px 12px; border-left: 3px solid #ffd166; background: oklch(80% 0.12 85 / .1); border-radius: 0 6px 6px 0; font-weight: 600; }
.bd-man-q { font-weight: 700; margin-top: 10px !important; }
.bd-man-a { opacity: .9; padding-left: 12px; }
.bd-man-keys { border-collapse: collapse; font-size: 13px; width: 100%; }
.bd-man-keys th, .bd-man-keys td { text-align: left; padding: 5px 8px; border-bottom: 1px solid oklch(60% 0.01 260 / .25); vertical-align: top; }
.bd-man-keys th { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-weight: 600; width: 1%; }
.bd-disk svg { flex: none; }
.bd-menu {
  position: fixed; z-index: 20; display: grid; min-width: 240px; max-width: min(340px, calc(100vw - 16px)); padding: 4px;
  background: var(--color-stage, #14161b); color: var(--color-stage-ink, #e8ebf0);
  border: 1px solid var(--color-stage-line, #333); border-radius: 8px; box-shadow: 0 10px 28px rgb(0 0 0 / .45);
}
.bd-menu button {
  display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600;
}
.bd-menu button:hover:not(:disabled), .bd-menu button:focus-visible { background: oklch(60% 0.02 260 / .22); outline: none; }
.bd-menu button:disabled { opacity: .4; cursor: default; }
.bd-menu small { font-weight: 400; font-size: 11px; opacity: .7; }
.bd-menu-note { margin: 4px 6px 2px; padding-top: 6px; border-top: 1px solid var(--color-stage-line, #333); font-size: 11px; opacity: .7; max-width: 300px; }
.bd-stage.drop { outline: 2px dashed oklch(75% 0.12 230); outline-offset: -8px; }
.bd-ratio tr.sel th, .bd-ratio tr.sel td { background: oklch(60% 0.08 250 / .22); }
.bd-ratio td.z { opacity: .35; }
.bd-zoom { font-size: 12px; min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; opacity: .85; }
.bd-hint { margin: 0; font-size: 12px; opacity: .8; }
.bd-alpha { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.bd-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: #0b0d11; }
.bd-stage canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; }
.bd-empty {
  position: absolute; inset: 16px; margin: 0; padding: 16px; font: inherit; font-size: 13px; color: inherit; opacity: .75;
  display: grid; place-items: center; text-align: center; cursor: pointer;
  background: none; border: 1px dashed oklch(60% 0.01 260 / .5); border-radius: 10px;
}
.bd-tip, .bd-toast {
  position: absolute; margin: 0; padding: 4px 9px; font-size: 12px; border-radius: 6px; pointer-events: none;
  background: oklch(16% 0.01 260 / .85); color: #e8ebf0; max-width: calc(100% - 16px);
}
.bd-tip { left: 8px; bottom: 8px; }
.bd-toast { left: 50%; top: 10px; transform: translateX(-50%); font-size: 13px; border: 1px solid oklch(70% 0.06 250 / .5); }
.bd-out { display: grid; gap: 10px; font-size: 13px; }

@media (max-width: 760px) {
  .bd-main { flex-direction: column; }
  .bd-split { display: none; }
  .bd-side { width: auto; max-height: 45%; border-top: var(--rule, 1px) solid var(--color-stage-line); }
}

.bd-list { display: grid; gap: 2px; }
.bd-list-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 2px; }
.bd-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 3px 4px; border-radius: 6px; min-width: 0; }
.bd-item.sel { background: oklch(60% 0.08 250 / .22); }
.bd-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bd-name { flex: 1 1 6em; min-width: 0; padding: 2px 0; }
.bd-nm { padding: 0; font: inherit; font-weight: 600; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.bd-name.ren .bd-nm { cursor: text; }
.bd-name.ren .bd-nm:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.bd-name small { font-weight: 400; opacity: .7; }
.bd-acts { display: inline-flex; flex-wrap: wrap; gap: 3px; flex: none; margin-left: auto; }
.bd-ib {
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 5px; font: inherit; font-size: 12px; line-height: 1;
  color: inherit; background: transparent; border: 1px solid var(--color-stage-line); cursor: pointer;
}
.bd-ib:hover:not(:disabled) { background: oklch(60% 0.02 260 / .2); }
.bd-ib:disabled { opacity: .3; cursor: default; }
.bd-ib.on { background: oklch(62% 0.17 18 / .3); border-color: #ff5470; }
.bd-edit { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--color-stage-line); border-radius: 8px; }

.bd-apply { display: grid; gap: 6px; padding: 8px; border: 1px solid oklch(65% 0.1 250 / .55); border-radius: 8px; }
.bd-apply-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-linked { color: oklch(78% 0.12 150); }
.bd-linked.stale { color: var(--color-amber, #e0b050); }
.bd-rename { font: inherit; min-width: 0; box-sizing: border-box; }
.bd-rename { flex: 1 1 8em; }
.bd-item { cursor: pointer; }
.bd-item.off .bd-name, .bd-item.off .bd-sw { opacity: .45; }
.bd-ph-box { display: grid; gap: 4px; }
.bd-ph-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-unit { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bd-unit input { flex: 1 1 auto; min-width: 0; width: 100%; }
.bd-unit em { font-style: normal; font-size: 12px; opacity: .75; }
@media (max-width: 1100px) { .bd-ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.bd-edit-grid label, .bd-code-l { display: grid; gap: 2px; font-size: 12px; min-width: 0; }
.bd-edit-grid input { width: 100%; box-sizing: border-box; }
.bd-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0; min-width: 0; }
.bd-row > .btn { flex: none; }
.bd-code { font-family: ui-monospace, Consolas, monospace; width: 100%; box-sizing: border-box; min-width: 0; }
.bd-side > *, .bd-hints > *, .bd-out > * { min-width: 0; }
.bd-ratio-wrap { overflow-x: auto; max-width: 100%; }
.bd-ratio-box { display: grid; gap: 6px; }
.bd-scale { margin: 0; font-size: 12px; opacity: .75; }
.bd-warn { margin: 0; color: var(--color-amber, #e0b050); font-style: normal; font-size: 12px; }
.bt-ph-shape { font-family: ui-monospace, Consolas, monospace; width: 15em; }
.bd-weapons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bd-weapons .chip { border-width: 2px; }
.bd-lbl { font-size: 12px; opacity: .8; margin-right: 2px; }
.bd-ratio { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.bd-ratio th, .bd-ratio td { padding: 3px 6px; border-bottom: 1px solid oklch(60% 0.01 260 / .25); text-align: right; white-space: nowrap; }
.bd-ratio tr > th:first-child { text-align: left; }
.bd-ratio tr:first-child th { white-space: normal; vertical-align: bottom; }
.bd-help summary { cursor: pointer; font-size: 12px; opacity: .85; }
.bd-help ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; display: grid; gap: 3px; opacity: .85; }
.sheet-head .fclear + .btn { margin-left: var(--space-sm); }
.sheet-head .btn { margin-left: auto; }

@media (max-width: 760px) {
  .sheet-head .btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-md);
    background: var(--color-stage-3);
    border: var(--rule) solid var(--color-stage-line);
  }
}

.sheet-body {
  padding: var(--space-md); display: grid; gap: var(--space-lg);
  max-height: min(66vh, 36rem); overflow-y: auto;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--color-stage-2), transparent 55%),
    var(--color-stage);
}
.sheet-foot {
  display: flex; gap: var(--space-xs); justify-content: flex-end;
  flex-wrap: wrap; padding: var(--space-sm) var(--space-md);
  background: var(--color-stage-2);
  border-top: var(--rule) solid var(--color-stage-line);
}

.notice-date {
  margin: 0; font: 600 var(--text-xs)/1.4 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}
.notice-date + .steps-list { margin-top: var(--space-2xs); }

#notice-list .steps-list, #calclog-list .steps-list { gap: var(--space-md); }

#notice-list, #calclog-list { word-break: keep-all; overflow-wrap: anywhere; }
.notice-link {
  color: var(--color-accent); text-decoration: underline;
  text-decoration-thickness: var(--rule); text-underline-offset: 0.18em;
}
.notice-link:hover { color: var(--color-stage-ink); }

.notice-tag { color: var(--color-alert); }

.notice-date ~ .notice-date,
.steps-list:not(.notice-pin) + .notice-date {
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: var(--rule) solid var(--color-stage-line);
}


#notice-dismiss { margin-right: auto; }


.grp { display: grid; gap: var(--space-xs); }
.grp-label {
  display: flex; align-items: center; gap: var(--space-xs);
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-accent);
  white-space: nowrap;
}
.grp-label::after { content: ""; flex: 1; height: var(--rule); background: var(--color-stage-line); }
.grp-row { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

.con-num { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }


.steps { display: flex; flex-wrap: wrap; gap: 3px; }
.step {
  --c: 4px;
  min-width: 32px; padding: 5px 6px; cursor: pointer; border: 0;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  font: 600 var(--text-xs)/1.3 var(--font-num);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.step:hover, .step.is-hover { background: var(--color-stage-line); color: var(--color-stage-ink); }
.step:active, .step.is-active { transform: translateY(1px); }
.step.on { background: var(--color-accent); color: var(--color-accent-ink); }
.step.star.on { background: var(--color-amber-deep); color: var(--color-stage); }
.step[disabled] { opacity: 0.35; cursor: default; }


.sheet select,
.stage select {
  --c: 5px;
  appearance: none; -webkit-appearance: none;
  border: var(--rule) solid var(--color-stage-line);
  background-color: var(--color-stage-3); color: var(--color-stage-ink);
  padding: 5px 26px 5px var(--space-xs); cursor: pointer; max-width: 100%;
  font: 500 var(--text-sm)/1.3 var(--font-body);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background-image: linear-gradient(45deg, transparent 50%, var(--color-stage-ink-2) 50%),
                    linear-gradient(135deg, var(--color-stage-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sheet select:hover,
.stage select:hover { border-color: var(--color-stage-ink-2); }
.sheet select:disabled,
.stage select:disabled { opacity: 0.35; cursor: default; }
.sheet select option,
.stage select option { background: var(--color-stage-2); color: var(--color-stage-ink); }

.ol-part {
  font: 600 var(--text-xs)/1.6 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
  min-width: 5rem; flex: none;
}

.ol-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 4.4rem;
  gap: var(--space-2xs); align-items: center; margin-left: 5rem;
}

.eq-part .ol-row {
  margin-left: 0;
  grid-template-columns: minmax(0, 11.5rem) auto;
  justify-content: start;
}
.eq-part .ol-val { grid-column: 1 / -1; text-align: right; }
.eq-part .grp-row { flex-wrap: nowrap; }
.ol-val {
  font: 600 var(--text-xs)/1 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--color-amber); text-align: right;
}
@media (max-width: 32rem) {
  .ol-row { grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; }
  .ol-val { grid-column: 1 / -1; text-align: left; }
  .ol-part { min-width: 0; }
}
.sum-line {
  margin: 0; font: 500 var(--text-xs)/1.7 var(--font-num);
  color: var(--color-stage-ink-2); background: var(--color-stage-2);
  padding: var(--space-xs); border-left: 3px solid var(--color-amber-deep);
}
.sum-line b { color: var(--color-amber); font-weight: 600; }


.nk.used { cursor: not-allowed; }
.nk-used {
  position: absolute; inset-inline: var(--rule-bold); top: 38%;
  z-index: 3; text-align: center;
  font: 700 var(--text-xs)/1.8 var(--font-display);
  letter-spacing: var(--track-label);
  background: color-mix(in oklch, var(--color-stage) 80%, transparent);
  color: var(--color-accent);
}


.prof-names { font-size: var(--text-xs); }
.prof-names summary { cursor: pointer; color: var(--color-roster-ink-2); }
.name-chips {
  margin-top: var(--space-2xs); color: var(--color-roster-ink-2);
  line-height: 1.7; word-break: keep-all;
}


.ghost {
  position: fixed; left: 0; top: 0; width: 72px; z-index: 99;
  pointer-events: none; opacity: 0.92;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
}

.deck-drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 99;
  pointer-events: none; opacity: 0.85;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .nk-nm.over > span { animation: none; }           
  .nk-nm.over { text-overflow: ellipsis; }
  .nk:hover, .nk.is-hover { transform: none; }
}



.foot-gap { flex: 1; }


.fpanel {
  display: grid; gap: var(--space-sm); margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-roster-2);
  border: var(--rule) solid var(--color-roster-line);
}
.fsec { display: grid; gap: var(--space-2xs); }
.fsec-label {
  display: flex; align-items: center; gap: var(--space-xs);
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-roster-ink-2);
}
.fsec-label::after {
  content: ""; flex: 1; height: var(--rule); background: var(--color-roster-line);
}
.fpanel .chips { flex-wrap: wrap; }

.fpanel .chip { border-radius: 7px; padding: var(--space-2xs) var(--space-sm); }


.nk-fav {
  z-index: 3;
  width: 20px; height: 20px; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in oklch, var(--color-stage) 62%, transparent);
  
  color: var(--color-stage-ink-2); font-size: 12px; line-height: 1;
  display: grid; place-items: center;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.nk-fav { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.nk:hover .nk-fav, .nk:focus-within .nk-fav { opacity: 1; }
.nk-fav:hover { color: var(--color-amber); }
.nk-fav.on { opacity: 1; color: var(--color-amber); background: var(--color-stage); }


@media (hover: none) {
  .nk-fav { opacity: .45; width: 32px; height: 32px; font-size: 15px; }
}


.stage-solo { min-height: 70vh; }
.res-head {
  display: flex; align-items: flex-start; gap: var(--space-md);
  flex-wrap: wrap; margin-bottom: var(--space-md);
}
.hero {
  margin: var(--space-2xs) 0 0;
  font: 600 clamp(2rem, 9vw, 3.25rem)/1 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--color-amber);
  overflow-wrap: anywhere;
}
.res-cond {
  margin: var(--space-2xs) 0 0; font-size: var(--text-xs);
  color: var(--color-stage-ink-2);
}
.res-acts { margin-left: auto; display: flex; gap: var(--space-xs); flex-wrap: wrap; }

.legend { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.legend-item {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.legend-swatch { width: 11px; height: 11px; flex: none; display: block; }

.bars { display: grid; gap: var(--space-sm); }
.bar-row { display: grid; gap: 3px; }
.bar-head {
  display: flex; align-items: baseline; gap: var(--space-xs);
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.bar-no {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: 0.06em; color: var(--color-stage-ink);
  background: var(--color-stage-3); padding: 3px var(--space-xs);
}
.bar-total {
  margin-left: auto; font: 600 var(--text-sm)/1 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--color-amber);
  
  white-space: nowrap; flex: none;
}

.bar-track {
  display: flex; height: 26px; gap: 2px;
  background: var(--color-stage-2);
}
.bar-seg {
  position: relative; min-width: 2px; overflow: hidden;
  display: flex; align-items: center;
}
.bar-seg > span {
  padding: 0 5px; font-size: 10px; line-height: 1;
  color: var(--color-stage); white-space: nowrap;
  font-weight: 600;
}
.bar-empty {
  display: grid; place-items: center; height: 26px;
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
  background: var(--color-stage-2);
  border: var(--rule) dashed var(--color-stage-line);
}

.ext { color: var(--color-accent); }
.cube-eff {
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
  padding-left: 5rem; margin: 0;
}
@media (max-width: 32rem) { .cube-eff { padding-left: 0; } }



.filter-bar {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: var(--space-xs);
}
.search { flex: 0 1 12rem; }

.sq {
  width: 38px; height: 32px; padding: 0; border: 0; cursor: pointer;
  border-radius: 6px;
  background: var(--color-stage-2); color: var(--color-stage-ink);
  font: 600 var(--text-sm)/1 var(--font-display);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.sq:hover { background: var(--color-stage-3); }
.sq.on { background: var(--color-accent); color: var(--color-accent-ink); }
#f-burst { gap: 5px; }

.fwrap { position: relative; }

.ftrig {
  
  display: inline-flex; align-items: center; height: 32px;
  border-radius: 6px; overflow: hidden; min-width: 8.5rem;
  
  background: var(--color-stage-2); color: var(--color-stage-ink);
  font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap;
  border: 0; padding: 0 var(--space-sm); cursor: pointer;
  gap: var(--space-xs); justify-content: center;
}

.ftrig:has(.ftrig-main) { padding: 0; gap: 0; }
.ftrig-main {
  align-self: stretch;                 
  display: inline-flex; align-items: center; gap: var(--space-xs);
  flex: 1; justify-content: center; padding: 0 var(--space-sm);
  border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; white-space: nowrap;
}
.ftrig-main:hover { filter: brightness(1.08); }
.ftrig.filtered { background: var(--color-accent); color: var(--color-accent-ink); }
.ftrig:hover { filter: brightness(1.08); }

.ftrig-ico {
  width: 11px; height: 11px; flex: none;
  background: currentColor;
  -webkit-mask: var(--funnel) center / contain no-repeat;
  mask: var(--funnel) center / contain no-repeat;
}
.ftrig.filtered .ftrig-ico { background: currentColor; }

.ftrig-dir {
  align-self: stretch;
  display: grid; place-items: center; flex: none;
  
  padding: 0 var(--space-sm); border: 0; background: none; cursor: pointer;
  border-left: var(--rule) solid color-mix(in oklch, var(--color-stage) 34%, transparent);
  color: inherit; font-size: 9px; line-height: 1;
}
.ftrig-dir:hover { filter: brightness(1.15); }

.chip-sort { position: relative; }
.chip-sort.on::after {
  content: "\25BC"; position: absolute; right: 4px; bottom: 1px;
  font-size: 7px; line-height: 1;
}
.chip-sort.on.asc::after { content: "\25B2"; }

.ftrig-caret {
  font-size: 9px; padding-left: var(--space-xs);
  border-left: var(--rule) solid color-mix(in oklch, var(--color-stage) 30%, transparent);
}
#f-trig-label { min-width: 3.2rem; text-align: center; }

.fclear {
  position: absolute; right: -6px; top: calc(100% + 4px); z-index: 22;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--color-roster); color: var(--color-roster-ink);
  padding: var(--space-xs) var(--space-md);
  font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
}
.fclear:hover { color: var(--color-accent-deep); }


.fpanel {
  position: absolute; right: 0; top: calc(100% + 38px); z-index: 20;
  width: min(30rem, calc(100vw - 1.5rem));
  display: grid; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--color-roster-2); border: 0;
  box-shadow: 0 16px 44px rgb(0 0 0 / 0.32);
}
.fsec { display: grid; gap: var(--space-xs); }
.fsec-label {
  font: 600 var(--text-sm)/1.5 var(--font-body);
  letter-spacing: 0; color: var(--color-roster-ink);
  border-bottom: var(--rule) solid var(--color-roster-ink-2);
  padding-bottom: 3px;
}
.fsec-label::after { content: none; }
.fsec-head { margin-top: var(--space-2xs); }
.fsub {
  text-align: center; font: 500 var(--text-xs)/1.6 var(--font-body);
  color: var(--color-roster-ink-2);
}

.fsec-sub .chips { justify-content: start; }
.fpanel .chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  justify-items: stretch;
}

.fpanel .chip {
  min-width: 0; height: 30px; border: 0; border-radius: 6px;
  padding: 0 var(--space-sm); justify-content: center;
  background: var(--color-stage-2); color: var(--color-stage-ink);
  font: 600 var(--text-xs)/1 var(--font-body);
}
.fpanel .chip:hover { background: var(--color-stage-3); color: var(--color-stage-ink); }
.fpanel .chip.on { background: var(--color-accent); color: var(--color-accent-ink); }

@media (max-width: 40rem) {
  .fpanel { right: auto; left: 50%; transform: translateX(-50%);
            width: min(24rem, calc(100vw - 1rem)); padding: var(--space-md); }
  .fpanel .chip { min-width: 4.2rem; height: 28px; }
  .fpanel .chips { gap: 4px; }
  .sq { width: 34px; height: 30px; }
  .ftrig { height: 30px; min-width: 7.5rem; }
  #f-burst { gap: 4px; }
  .filter-bar { gap: 4px; }
}


.ftrig-dark {
  background: var(--color-stage-2); color: var(--color-stage-ink);
  border-color: var(--color-stage-line);
}

#boss-rec-solo { min-width: 0; flex: 0 0 auto; }

.rsjoin { display: inline-flex; align-items: stretch; border-radius: 6px;
  border: var(--rule) solid var(--color-stage-line); overflow: hidden; }
.rsjoin > * + * { border-left: var(--rule) solid var(--color-stage-line); }

.rsjoin:not(:has(> :not([hidden]))) { display: none; }
.rsjoin .ftrig { border-radius: 0; }

#bt-toggle { min-width: 6rem; }


#brecpick-list { grid-template-columns: 1fr; }
#brecpick-list .preset-line { align-items: center; }
#brecpick-list .preset-boss { flex: 1 1 auto; max-width: none; }
#brecpick-list .btn { margin-left: auto; }


.ftrig-dark.filtered { background: var(--color-accent); color: var(--color-accent-ink); }
.ftrig-dark:hover { border-color: var(--color-stage-ink-2); }
.ftrig-dark .ftrig-ico, .ftrig-dark .ftrig-caret { color: var(--color-stage-ink-2); }
.fclear-dark {
  background: var(--color-stage-2); color: var(--color-stage-ink);
  border-color: var(--color-stage-line);
}

.fpanel-dark {
  background: var(--color-stage-2); color: var(--color-stage-ink);
  border-color: var(--color-stage-line);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.55);
}

.fpanel-dark .fclear-dark {
  position: static; justify-self: end; align-self: start;
  margin: 0 0 var(--space-2xs) auto; box-shadow: none;
}
.fpanel-dark .fsec-label { color: var(--color-accent); }
.fpanel-dark .fsec-label::after { background: var(--color-stage-line); }
.fpanel-dark .fsub { color: var(--color-stage-ink-2); }
.fpanel-dark .chip {
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  border-color: var(--color-stage-line);
}
.fpanel-dark .chip.on {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.fpanel-dark .prose-sm { color: var(--color-stage-ink-2); margin: 0; }

.bt-grid { display: grid; gap: var(--space-2xs); }
.bt-row {
  display: grid; grid-template-columns: 8rem auto 1fr; gap: var(--space-xs);
  align-items: center; font-size: var(--text-sm);
}
.bt-row > span { color: var(--color-stage-ink-2); }
.bt-row em {
  font-style: normal; font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.bt-row input[type="number"] {
  width: 7rem; background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  padding: 4px var(--space-xs); font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.bt-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); }

.share-opt {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-sm); color: var(--color-stage-ink-2); white-space: nowrap;
}
.share-opt input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); }

.share-opt-strong {
  margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm);
  border: var(--rule) solid var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 10%, transparent);
  color: var(--color-stage-ink); font-size: var(--text-sm); cursor: pointer;
}

.share-boss-opt { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }


#cycle-host > .bt-adv > summary { display: none; }
#cycle-host > .bt-adv { border: 0; padding: 0; }


.fpanel-head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding-bottom: var(--space-xs); margin-bottom: var(--space-xs);
  border-bottom: var(--rule-bold) solid var(--color-accent);
}

.fpanel-head .fclear { margin-left: auto; }
.fpanel-head .fclear + .btn { margin-left: 0; }
.fpanel-head .btn { margin-left: auto; }


.fg-row-cy {
  --c: var(--chamfer-sm); border: 0; cursor: pointer; white-space: nowrap;
  padding: 1px var(--space-xs);
  background: var(--color-stage-line); color: var(--color-stage-ink);
  font: 700 10px/1.6 var(--font-body);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.fg-row-cy:hover { filter: brightness(1.25); }
.share-copy { display: grid; gap: var(--space-2xs); }
.share-copy-row { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }

.share-copy-label { flex: none; width: 4.5rem; white-space: nowrap; color: var(--color-stage-ink-2); font-size: var(--text-sm); }
.share-copy-val {
  flex: 1 1 auto; min-width: 0; background: var(--color-stage-3);
  color: var(--color-stage-ink); border: var(--rule) solid var(--color-stage-line);
  padding: 4px var(--space-xs); font-family: var(--font-num); font-size: var(--text-sm);
}

.bt-pair { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.bt-pair select { min-width: 0; }
.bt-row .bt-pair input[type="number"] { width: 4.5rem; }


.coeff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-sm); }
.coeff-item {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-sm); white-space: nowrap; min-width: 0;
}
.coeff-item .coeff-name { flex: 1 1 auto; min-width: 0; color: var(--color-stage-ink-2); }
.coeff-item .coeff-name em {
  font-style: normal; font-size: var(--text-xs); color: var(--color-stage-ink-2);
  opacity: .65; margin-left: 4px;
}
.coeff-item input[type="number"] {
  flex: 0 0 auto; width: 4.5rem; background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  padding: 4px var(--space-xs); font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.coeff-stage-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-2xs); font-size: var(--text-sm); color: var(--color-stage-ink-2);
}
.coeff-stage-head b { color: var(--color-accent); font: 600 var(--text-sm)/1.6 var(--font-display); }
.coeff-stages { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.coeff-stages:empty { display: none; }
.coeff-stage { border-left: 3px solid var(--color-accent); padding-left: var(--space-xs); }
.coeff-stage-t { display: inline-flex; align-items: center; gap: 4px; }
.coeff-stage-t input[type="number"] {
  width: 5rem; background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  padding: 4px var(--space-xs); font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.coeff-stage-t em { font-style: normal; font-size: var(--text-xs); }
.coeff-stage-off { font-size: var(--text-xs); color: var(--color-alert); }
.coeff-stage-add { margin-top: var(--space-xs); justify-self: start; align-self: flex-start; width: auto; }
.bt-adv summary {
  cursor: pointer; font: 600 var(--text-xs)/1.8 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}
.bt-adv[open] summary { color: var(--color-accent); }

@media (max-width: 32rem) {
  .bt-row { grid-template-columns: 6.5rem auto minmax(0, 1fr); }
  .bt-row > span { word-break: keep-all; }
  .bt-row em:not(.bt-unit) { grid-column: 1 / -1; }
}




.pool { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
@media (min-width: 48rem) {
  .pool { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

.slots { max-width: 30rem; }
.slot-no { font-size: var(--text-2xl); font-weight: 300; }


.rec-decks { display: grid; gap: var(--space-sm); margin-top: var(--space-xs); }
.rec-deck {
  display: grid; gap: 3px;
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  background: var(--color-stage-2);
}
.rec-deck-h {
  display: flex; align-items: baseline; gap: var(--space-xs);
  padding-bottom: 4px; border-bottom: var(--rule) solid var(--color-stage-line);
}
.rec-no {
  font: 700 var(--text-sm)/1 var(--font-display); color: var(--color-accent);
  letter-spacing: 0.06em;
}
.rec-deck-sub { font-size: var(--text-xs); color: var(--color-stage-ink-2); }

.rec-deck-bursts { margin-left: var(--space-sm); }
.rec-deck-bursts.cut { color: var(--color-amber); }
.rec-deck-total {
  margin-left: auto; font: 700 var(--text-base)/1 var(--font-display);
  color: var(--color-amber);
}

.rec-ch {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: var(--space-sm); align-items: center; padding: 4px 0;
}
.rec-ch-art {
  width: 30px; height: 46px; overflow: hidden; background: var(--color-stage-3);
}

.rec-ch-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  display: block;
}
.rec-ch-mid { display: grid; gap: 3px; min-width: 0; }
.rec-ch-nm {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: var(--text-xs); color: var(--color-stage-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-ch-b {
  flex: none; min-width: 16px; text-align: center;
  font: 700 9px/1.5 var(--font-display); color: var(--color-stage);
  background: var(--color-stage-ink-2);
}
.rec-ch-bar { height: 6px; background: var(--color-stage-3); overflow: hidden; }
.rec-ch-bar i { display: block; height: 100%; }
.rec-ch-v { text-align: right; line-height: 1.25; }
.rec-ch-v b {
  display: block; font: 700 var(--text-xs)/1.25 var(--font-display);
  color: var(--color-stage-ink);
}
.rec-ch-v span { font-size: 10px; color: var(--color-stage-ink-2); }
.rec-ch-none, .rec-note {
  margin: 4px 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.rec-sum {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-3); font-size: var(--text-xs);
  color: var(--color-stage-ink-2);
}
.rec-sum b { font: 700 var(--text-lg)/1 var(--font-display); color: var(--color-amber); }



.nk-rail-r > * { position: static; inset: auto; }



.sq-burst img { width: 15px; height: 15px; display: block; filter: brightness(0) invert(1); }
.sq-burst.on img { filter: brightness(0); }



.busy {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  
  width: max-content; max-width: min(40rem, calc(100vw - 2rem));
  word-break: keep-all; overflow-wrap: anywhere;
  z-index: 60; display: flex; align-items: center; gap: var(--space-xs);
  padding: 7px var(--space-md);
  
  background: color-mix(in oklch, var(--color-stage) 97%, transparent);
  border: var(--rule) solid var(--color-accent);
  color: var(--color-stage-ink); font-size: var(--text-sm);
  box-shadow: 0 8px 26px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.busy-spin {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--color-accent) 30%, transparent);
  border-top-color: var(--color-accent);
  animation: busy-spin 0.8s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation: none; } }



.sum-list { display: grid; gap: 2px; }
.sum-row {
  display: flex; align-items: baseline; gap: var(--space-sm);
  margin: 0; font-size: var(--text-sm);
  padding: 3px 0; border-bottom: var(--rule) solid var(--color-stage-line);
}
.sum-row:last-child { border-bottom: 0; }
.sum-k { color: var(--color-stage-ink-2); }
.sum-v {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: var(--color-amber); font-weight: 700;
}

.sum-row.has-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5em; align-items: center;
  column-gap: var(--space-sm); row-gap: 4px;
}
.sum-k .sum-max { display: block; margin-top: 1px; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.sum-ins { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.sum-in {
  width: 4rem; padding: 3px var(--space-xs);
  background: var(--color-stage-3); color: var(--color-amber); font-weight: 700;
  border: var(--rule) solid var(--color-stage-line); font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.sum-row.is-lines .sum-in { width: 3.5rem; }

.sum-step { display: inline-flex; align-items: stretch; }
.sum-arrows { display: inline-flex; flex-direction: column; margin-left: 1px; }
.sum-arrow {
  flex: 1 1 0; width: 14px; min-height: 0; padding: 0; border: 0; cursor: pointer;
  background: var(--color-stage-line); color: var(--color-stage-ink-2); font-size: 7px; line-height: 1;
}
.sum-arrow + .sum-arrow { margin-top: 1px; }
.sum-arrow:hover { color: var(--color-amber); filter: brightness(1.25); }

.sum-in { appearance: textfield; -moz-appearance: textfield; }
.sum-in::-webkit-inner-spin-button, .sum-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sum-in::placeholder { color: var(--color-stage-ink-2); }
.sum-pct { color: var(--color-stage-ink-2); }
.sum-tot { text-align: right; color: var(--color-amber); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-tot.is-zero { color: var(--color-stage-ink-2); font-weight: 400; }
@media (max-width: 520px) {
  .sum-row.has-in { grid-template-columns: minmax(0, 1fr) auto 5em; }
  .sum-row.is-lines .sum-ins { grid-column: 1 / 3; grid-row: 2; }   
  .sum-row.is-lines .sum-tot { grid-column: 3; grid-row: 1; }
  .sum-in { width: 3.6rem; padding: 3px 4px; }
  .sum-arrow { width: 12px; }
  
  .sum-row.is-lines .sum-in { width: 2.9rem; }
  .sum-row.is-lines .sum-ins { gap: 2px; }
  .sum-row.is-lines .sum-pct { display: none; }
}
.ol-sum-note { margin: 0 0 6px; font-size: var(--text-xs); line-height: 1.5; color: var(--color-stage-ink-2); word-break: keep-all; }
.ol-sum-note.is-on { color: var(--color-amber); }
.ol-sum-lock { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-sm) 0; }
.ol-sum-lock .ol-sum-note { margin: 0; flex: 1 1 16em; color: var(--color-amber); }

.eq-grid.is-locked { opacity: 0.75; }



.rec-ch-split {
  display: flex; height: 4px; overflow: hidden;
  
}
.rec-ch-split i { display: block; height: 100%; }
.seg-normal { background: color-mix(in oklch, var(--color-accent) 75%, transparent); }
.seg-skill { background: var(--color-amber-deep); }
.rec-ch-sub {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  font-size: 10px; color: var(--color-stage-ink-2);
}
.rec-ch-v span { display: block; font-size: 10px; color: var(--color-stage-ink-2); }



.credit {
  padding: var(--space-lg) var(--space-md) calc(var(--space-xl) + env(safe-area-inset-bottom));
  border-top: var(--rule) solid var(--color-stage-line);
  color: var(--color-stage-ink-2); font-size: var(--text-xs); line-height: 1.7;
  text-align: center;
}

.credit p { margin: 0 auto; max-width: none; }
.credit p + p { margin-top: var(--space-2xs); }
.credit a { color: var(--color-accent); }
.credit a:hover { color: var(--color-accent-deep); }



.eq-grid {
  display: grid; gap: var(--space-sm);
  
  grid-template-columns: max-content; justify-content: start;
}
@media (min-width: 34rem) {
  .eq-grid { grid-template-columns: repeat(2, max-content); }
}
.eq-part {
  display: grid; gap: 3px; align-content: start;
  padding: var(--space-xs); background: var(--color-stage-2);
}
.eq-part .ol-part { min-width: 2.4rem; }



.fpanel-dark {
  position: fixed;
  left: 50%; right: auto; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0; z-index: 40;
  
  width: min(38rem, calc(100vw - 1.5rem));
  max-height: min(82vh, 46rem); overflow-y: auto;
}


.fpanel-dark { max-height: min(82dvh, 46rem); }






#bt-range { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.fpanel-dark > .prose-sm { grid-column: 1 / -1; max-width: none; margin: 0; }



.cog-btn {
  --c: 4px;
  width: 28px; height: 28px; flex: none; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; align-self: end;
  background: var(--color-stage-2); color: var(--color-stage-ink-2);
  font-size: 13px; line-height: 1;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.cog-btn:hover { color: var(--color-accent); }
.cog-btn.edited { color: var(--color-amber); background: var(--color-stage-3); }



#profile-pick { max-width: 12rem; }



#acct-sheet { max-width: 24rem; width: min(24rem, calc(100vw - 1.5rem)); }
#acct-body .grp-row { gap: var(--space-sm); }
#acct-body .ol-part { min-width: 4.5rem; }



#code, #profile-pick {
  height: 32px; padding-block: 0; line-height: 1;
}
.cog-btn {
  width: 32px; height: 32px; align-self: center;
}
.weak, .field { align-items: center; }



.ftrig, .ftrig-main { line-height: 1.5; }
.ftrig-ico, .ftrig-dir { align-self: center; }






#code { text-align: center; text-align-last: center; }
#code option { text-align: center; }



.res-detail { margin-top: var(--space-lg); }
.res-detail > summary {
  cursor: pointer; font: 600 var(--text-sm)/1.6 var(--font-body);
  color: var(--color-stage-ink-2);
}
.res-detail > summary:hover { color: var(--color-stage-ink); }
#res-detail { margin-top: var(--space-sm); }



.rec-donut {
  position: relative; margin: 0 auto;
  width: min(100%, 200px); aspect-ratio: 1;
}
.rec-donut svg { width: 100%; height: 100%; display: block; }
.rec-donut-mid {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none; line-height: 1.15;
}
.rec-donut-mid b {
  font: 700 var(--text-lg)/1 var(--font-num); color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}
.rec-donut-mid span { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.rec-donut-lead {
  display: grid; gap: 1px; margin-top: 3px; max-width: 8.5rem;
}
.rec-donut-lead i {
  font-style: normal; font-size: 10px; color: var(--color-stage-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-donut-lead em {
  font-style: normal; font: 700 var(--text-xs)/1 var(--font-num);
  color: var(--color-stage-ink-2);
}

.rec-ch-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; display: block; }

.rec-rows { display: grid; gap: 2px; min-width: 0; }


@media (min-width: 40rem) {
  .rec-deck {
    grid-template-columns: clamp(9rem, 18vw, 15rem) minmax(0, 1fr);
    column-gap: var(--space-lg); align-items: center;
  }
  .rec-deck > .rec-deck-h { grid-column: 1 / -1; }
  .rec-deck > .rec-timeline { grid-column: 1 / -1; }
  .rec-donut { margin: 0; width: 100%; max-width: none; }
}


.rec-timeline { margin-top: var(--space-sm); }
.rec-timeline > summary {
  display: flex; align-items: baseline; gap: var(--space-xs);
  cursor: pointer; font: 600 var(--text-sm)/1.6 var(--font-body);
  color: var(--color-stage-ink-2); list-style: none;
  
  flex-wrap: wrap; word-break: keep-all;
}
.rec-timeline > summary::-webkit-details-marker { display: none; }
.rec-timeline > summary::before {
  content: "▸"; display: inline-block; color: var(--color-accent);
  transition: transform 0.15s ease;
}
.rec-timeline[open] > summary::before { transform: rotate(90deg); }
.rec-timeline > summary:hover { color: var(--color-stage-ink); }
.rec-timeline-hint { font-size: var(--text-xs); font-weight: 400; color: var(--color-stage-ink-2); white-space: nowrap; }

.tl-wrap { margin-top: var(--space-sm); }


.tl-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.tl-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.tl-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: block; }


.tl-plot { position: relative; margin-top: 22px; overflow: visible; }

.tl-fb {
  position: absolute; top: -3px; bottom: -3px; border-radius: 3px;
  background: color-mix(in oklch, var(--color-amber) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-amber) 30%, transparent);
  pointer-events: none;
}


.tl-bars {
  position: relative; display: flex; gap: 2px;
  height: 96px; border-bottom: var(--rule) solid var(--color-stage-line);
}
.tl-col {
  flex: 1 1 0; min-width: 2px; height: 100%;
  display: flex; flex-direction: column-reverse; gap: 2px;
  cursor: default;
}
.tl-seg { width: 100%; flex: none; background: var(--color-stage-ink-2); }
.tl-col > .tl-seg:last-child { border-radius: 4px 4px 0 0; }


.tl-mark {
  position: absolute; top: -8px; left: 0; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--color-amber);
  filter: drop-shadow(0 0 3px color-mix(in oklch, var(--color-amber) 60%, transparent));
  cursor: default;
}

.tl-mark-stray {
  top: -5px;
  border-left-width: 3.5px; border-right-width: 3.5px; border-top-width: 5.5px;
  border-top-color: var(--color-stage-ink-2);
  filter: none; opacity: 0.65;
}
.tl-axis {
  display: flex; justify-content: space-between;
  margin-top: 4px; font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.tl-note { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-stage-ink-2); }


.stage-solo .sync,
.stage-solo .prof {
  background: var(--color-stage-2);
  border-color: var(--color-stage-line);
}

.stage-solo .prof-notice { color: var(--color-stage-ink-2); }
.stage-solo .prof-notice.warn { color: var(--color-amber); }
.stage-solo .prof-names summary,
.stage-solo .name-chips { color: var(--color-stage-ink-2); }
.stage-solo .field-label,
.stage-solo .prof-meta { color: var(--color-stage-ink-2); }
.stage-solo .prof-name { color: var(--color-stage-ink); }
.stage-solo input[type="url"],
.stage-solo input[type="text"] {
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.stage-solo .drop {
  background: var(--color-stage-2); border-color: var(--color-stage-line);
  color: var(--color-stage-ink-2);
}
.stage-solo .steps-list, .stage-solo .steps-list li { color: var(--color-stage-ink); }

.stage-solo .steps-list li::marker { color: var(--color-accent); font-weight: 700; }


.stage-solo .prose-sm { color: var(--color-stage-ink-2); }


.stage-solo .sec-label {
  display: flex; align-items: center; gap: var(--space-sm);
  color: var(--color-amber);
}
.stage-solo .sec-label::after {
  content: ""; flex: 1; height: var(--rule);
  background: linear-gradient(to right,
    var(--color-stage-line), color-mix(in oklch, var(--color-stage-line) 20%, transparent));
}
.stage-solo code {
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border-color: var(--color-stage-line);
}



.stage :is(p, li, td, .prose) a { color: var(--color-accent); }
.stage :is(p, li, td, .prose) a:visited { color: var(--color-accent); }
.stage :is(p, li, td, .prose) a:hover { color: var(--color-accent-deep); }



.bm {
  background: var(--color-stage-2) !important;
  color: var(--color-amber) !important;
  border: var(--rule-bold) solid var(--color-amber-deep);
}
.bm:hover { background: var(--color-stage-3) !important; color: var(--color-amber) !important; }





.slot-more {
  --c: 5px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin-top: 2px; padding: 4px; cursor: pointer;
  border: var(--rule) solid var(--color-stage-line);
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  font: 500 var(--text-xs)/1.3 var(--font-body); white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.slot-more:hover { border-color: var(--color-stage-ink-2); }

.slot-more-gap {
  pointer-events: none; cursor: default;
  color: var(--color-stage-line);
  border-color: color-mix(in oklch, var(--color-stage-line) 55%, transparent);
  background: color-mix(in oklch, var(--color-stage-3) 60%, transparent);
}
.slot-more:hover { color: var(--color-stage-ink); }
.slot-more i { font-style: normal; font-size: 8px; transition: transform var(--dur-fast); }
.slot-more.on i { transform: rotate(180deg); }

.slot-more.has {
  background: var(--color-accent); color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

.slot { overflow: visible; }
.slot-wrap { display: grid; }


.cube-cell {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: 2px;
}
.cube-cell select { width: 100%; font-size: var(--text-xs); }

.ctrl-panel {
  margin: var(--space-md) auto 0; max-width: 34rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-stage-2);
  border-top: var(--rule-bold) solid var(--color-accent);
}
.ctrl-head {
  display: flex; align-items: baseline; gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.ctrl-head b { font-size: var(--text-sm); }
.ctrl-head span { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.ctrl-head .btn { margin-left: auto; }
.ctrl-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ctrl-panel .prose-sm { margin: var(--space-xs) 0 0; color: var(--color-stage-ink-2); }


.ctrl-chip {
  --c: 4px;
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  border: 0; padding: 4px var(--space-xs);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.ctrl-chip:hover { color: var(--color-stage-ink); }
.ctrl-chip.on { background: var(--color-accent); color: var(--color-accent-ink); }

.ctrl-chip .ctrl-auto-tag {
  margin-left: 5px; padding: 0 3px;
  font-size: 0.72em; line-height: 1.5;
  border: 1px solid currentColor; border-radius: 3px; opacity: 0.8;
}

.ctrl-opts select { font-size: var(--text-xs); padding: 3px 24px 3px var(--space-xs); }

.ctrl-at-wrap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ctrl-at {
  width: 4.5rem; font-size: var(--text-xs);
  padding: 3px var(--space-xs); text-align: right;
  font-variant-numeric: tabular-nums;
}

.ctrl-at.ctrl-lead { width: 3rem; }
.ctrl-at.ctrl-times { width: 9rem; text-align: left; }
.ctrl-at-em {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}



.movebar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px var(--space-xs);
  padding: var(--space-2xs) 40px var(--space-2xs) var(--space-sm);
  background: rgba(124, 215, 255, 0.14);
  border-bottom: var(--rule-bold) solid #4bb8e8;
  color: #d6f2ff; font-size: var(--text-sm); text-align: center;
  position: relative;
}
.movebar b { color: #7cd7ff; }

.movebar-move { display: inline-flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap;
                justify-content: center; letter-spacing: .01em; }
.movebar-move i { font-style: normal; color: #7cd7ff; }
.movebar a { color: #fff; font-weight: 700; text-decoration: underline;
             text-underline-offset: 2px; text-decoration-color: #7cd7ff; }
.movebar a:hover { color: #7cd7ff; }
.movebar .btn {
  margin-left: var(--space-2xs); padding: 1px var(--space-xs);
  color: #7cd7ff; border-color: rgba(124, 215, 255, .55);
}

.movebar-x {
  position: absolute; right: var(--space-xs); top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #7cd7ff; cursor: pointer;
  font: 400 22px/1 var(--font-body); padding: 2px 8px;
}
.movebar-x:hover { color: #fff; }


.pool-note {
  grid-column: 1 / -1; margin: 0 0 var(--space-2xs);
  
  font-size: var(--text-xs); color: var(--color-roster-ink-2);
}


.credit-data, .credit-about {
  color: var(--color-stage-ink-2);
}
.credit-data b, .credit-about b { color: var(--color-stage-ink); }


.btn.ctrl-auto {
  --c: 4px;
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  border: 0; padding: 4px var(--space-sm);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.btn.ctrl-auto:hover { color: var(--color-stage-ink); }
.btn.ctrl-auto.on {
  background: var(--color-accent); color: var(--color-accent-ink);
  cursor: default;
}
.btn.ctrl-auto.on:hover { color: var(--color-accent-ink); }


#slots .nk { touch-action: none; }


.ctrl-lbl { font-size: var(--text-xs); color: var(--color-stage-ink-2); align-self: center; }


.ctrl-pat {
  width: 11rem; font-size: var(--text-xs); padding: 3px var(--space-2xs);
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.ctrl-pat.bad { border-color: var(--color-alert); }


.ctrl-pat-warn { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-alert); }


.ctrl-chip:disabled { opacity: 0.35; cursor: not-allowed; }


.ctrl-chip.taken { opacity: 0.4; }
.ctrl-chip.taken:hover { opacity: 0.75; }


.cog-btn.cog-labeled { width: auto; padding: 0 var(--space-xs); white-space: nowrap; }


.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }

  
  .tab, .tab-cta { min-height: 40px; display: inline-flex; align-items: center; }
  .mode-btn, #mode-solo, #mode-union { min-height: 40px; }
  .btn, .deck-tab, .lang-btn, .chip { min-height: 36px; }
  .btn, .lang-btn { display: inline-flex; align-items: center; justify-content: center; }
  .row-btn { min-height: 36px; }
  
  .fg-row-cy, .fg-row-fbc, .fg-row-calc, .btn.rec-kind { min-height: 30px; }
  
  .sq, #f-fav, #f-toggle, #f-dir, #bt-toggle, .slot-more, select { min-height: 32px; }
  
  footer a, .prose a, .ext { padding: 5px 0; display: inline-block; }

  
}


.tab-sep { opacity: 0.35; padding: 0 var(--space-2xs); user-select: none; align-self: center; }
.coop-bar { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin: var(--space-sm) 0; }
#coop-search {
  min-width: 220px; padding: 6px 10px;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}

.coop-src { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.coop-result { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap;
  margin: var(--space-sm) 0 var(--space-md); }
.coop-power-label { font-size: var(--text-sm); margin-right: var(--space-2xs); }
#coop-cp { font-size: 2rem; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.coop-stats { display: flex; gap: var(--space-sm); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; }
#coop-body { display: grid; gap: var(--space-md); }
.coop-lv { width: 80px; padding: 4px 8px;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); }
.coop-step { padding: 2px 10px; }



.cp-screen {
  
  --cp-art-h: 680px;
  position: relative; display: grid;
  grid-template-columns: 1fr min(46%, 520px);
  
  min-height: var(--cp-art-h); width: 100%;
  overflow: hidden;
  
  --color-stage:       var(--color-cp);
  --color-stage-2:     var(--color-cp-2);
  --color-stage-3:     var(--color-cp-3);
  --color-stage-ink:   var(--color-cp-ink);
  --color-stage-ink-2: var(--color-cp-ink-2);
  --color-stage-line:  var(--color-cp-line);
  --color-accent:      var(--color-cp-accent);
  --color-grade-r:     var(--color-cp-grade-r);
  --color-grade-sr:    var(--color-cp-grade-sr);
  --color-grade-ssr:   var(--color-cp-grade-ssr);
  background: linear-gradient(178deg, var(--color-cp-stage), var(--color-cp-stage-2));
  border: var(--rule) solid var(--color-cp-line);
  
  color: var(--color-cp-ink);
}

.cp-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(108deg,
    var(--color-cp-stripe) 0 24px, transparent 24px 58px);
  -webkit-mask-image: linear-gradient(180deg, transparent 46%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 46%, #000 100%);
}


.cp-art { position: absolute; left: 0; right: 0; top: 0;
  height: var(--cp-art-h); display: flex;
  align-items: flex-end; justify-content: center; overflow: hidden; }

.cp-art img { height: 100%; width: auto; max-width: none; object-fit: contain; }
.cp-art.fit img { position: absolute; height: auto; object-fit: fill; }

.cp-side {
  grid-column: 2; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-sm);
  color: var(--color-cp-ink);
  
  background: linear-gradient(90deg, transparent,
                              var(--color-cp-veil) 10px, var(--color-cp-veil));
  backdrop-filter: blur(6px);
}

.cp-side .cp-hex {
  background: var(--color-cp-fill); border-color: var(--color-cp-line);
  color: var(--color-cp-ink);
}
.cp-side .cp-hex-lv input { color: var(--color-cp-ink); }
.cp-side .cp-hex img.mono { filter: brightness(0) opacity(0.8); }
.cp-back {
  position: absolute; left: var(--space-sm); bottom: var(--space-sm); z-index: 2;
  padding: 6px 14px; font-size: var(--text-sm);
  background: var(--color-cp-chip); color: var(--color-cp-chip-ink);
  border: var(--rule) solid var(--color-cp-chip-line); cursor: pointer;
}
.cp-back:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.cp-head { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.cp-name { font-size: var(--text-lg); font-weight: 700; color: var(--color-stage-ink); }
.cp-rare { font-weight: 800; letter-spacing: 0.04em; font-size: var(--text-sm); }
.cp-rare.rare-ssr { color: var(--color-grade-ssr); }
.cp-rare.rare-sr  { color: var(--color-grade-sr); }
.cp-rare.rare-r   { color: var(--color-grade-r); }

.cp-star { margin-left: auto; }
.cp-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-badge {
  font-size: var(--text-xs); padding: 1px 7px;
  background: var(--color-cp-fill); border: var(--rule) solid var(--color-stage-line);
  color: var(--color-stage-ink);
}
.cp-lvbar { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.cp-lv-label { font-size: var(--text-sm); opacity: 0.8; }
.cp-lv { width: 74px; padding: 3px 6px; font-variant-numeric: tabular-nums;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); }
.cp-steps { display: flex; gap: 3px; }
.cp-power { position: relative; display: flex; align-items: baseline; gap: var(--space-xs);
  border-top: var(--rule) solid var(--color-stage-line);
  border-bottom: var(--rule) solid var(--color-stage-line); padding: var(--space-2xs) 0; }

.cp-delta-fx {
  position: absolute; left: 0; top: -0.1rem; pointer-events: none;
  font: 700 1.1rem/1 var(--font-display); color: #4cb3ef;
  text-shadow: 0 0 10px color-mix(in oklch, #4cb3ef 65%, transparent), 0 1px 2px rgb(0 0 0 / 0.5);
  animation: cp-delta-pop 1.15s cubic-bezier(.2,.7,.3,1) forwards;
}
.cp-delta-fx.down { color: var(--color-alert);
  text-shadow: 0 0 10px color-mix(in oklch, var(--color-alert) 65%, transparent),
               0 1px 2px rgb(0 0 0 / 0.5); }
@keyframes cp-delta-pop {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.75); }
  18%  { opacity: 1; transform: translate(-50%, -4px) scale(1.2); }
  38%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-delta-fx { animation: none; opacity: 0; }
}
.cp-power-label { font-size: var(--text-sm); opacity: 0.85; }
#coop-cp { font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.1;
  color: var(--color-accent); font-variant-numeric: tabular-nums; }
.cp-status { display: grid; gap: 2px; }
.cp-status div { display: flex; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-sm); }
.cp-status b { font-variant-numeric: tabular-nums; color: var(--color-stage-ink); }
.cp-tabs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: var(--space-2xs); }

.cp-tab {
  padding: 3px 12px; font-size: var(--text-sm);
  background: var(--color-cp-fill); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.cp-tab:hover { background: var(--color-cp-fill-2); }
.cp-tab.on { background: var(--color-accent); color: var(--color-accent-ink); }
.cp-reset {
  background: var(--color-cp-fill); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.cp-steps .coop-step {
  background: var(--color-cp-fill); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.cp-pane { display: grid; gap: var(--space-sm); }
.cp-pane .eq-grid { grid-template-columns: 1fr 1fr; }
.coop-pick { margin-top: var(--space-md); }

.cp-squad {
  position: relative;
  border-top: var(--rule-bold) solid var(--color-accent);
  background: linear-gradient(180deg, var(--color-accent-soft), transparent 40%);
  padding: calc(var(--space-md) + 22px) var(--space-sm) var(--space-sm);
}
.cp-squad .slot:not(.has) { cursor: pointer; }
.cp-squad .slot:not(.has):hover, .cp-squad .slot:not(.has):focus-visible { border-color: var(--color-accent); }
.cp-squad-cp {
  min-height: 1.4em; margin-top: var(--space-2xs); text-align: center; white-space: nowrap;
  font: 700 var(--text-sm)/1.4 var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--color-stage-ink);
}
@media (max-width: 30rem) { .cp-squad-cp { font-size: var(--text-xs); letter-spacing: -0.02em; } }
.cp-squad-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-xs) var(--space-sm); max-width: 30rem; margin: var(--space-md) auto 0;
}
.cp-squad-hint {
  flex: 1 0 100%; text-align: center; word-break: keep-all;
  font-size: var(--text-xs); font-weight: 600; color: var(--color-accent);
}
.cp-squad-hint.off { visibility: hidden; }
.cp-squad-hint.mute { font-weight: 500; color: var(--color-stage-ink-2); }

.cp-squad-score { justify-content: center; margin: var(--space-sm) 0 var(--space-sm); }

@media (max-width: 30rem) { .cp-squad-score > .score-each { flex-basis: 100%; justify-content: center; } }
.cp-band {
  display: inline-flex; gap: var(--space-2xs); padding: 3px var(--space-xs);
  font: 500 var(--text-xs)/1 var(--font-num); font-variant-numeric: tabular-nums;
  background: var(--color-stage-2); color: var(--color-stage-ink-2);
  border: var(--rule) solid var(--color-stage-line);
}

.cp-pen-side { display: none; }
.cp-pen { max-width: 30rem; margin: 0 auto var(--space-xl); word-break: keep-all; }

.cp-pen > summary {
  cursor: pointer; list-style: none; display: block; text-align: center; text-wrap: balance;
  font-size: var(--text-xs); color: var(--color-stage-ink-2);
}
.cp-pen > summary::-webkit-details-marker { display: none; }
.cp-pen > summary::before { content: "▸ "; }
.cp-pen[open] > summary::before { content: "▾ "; }
.cp-pen[open] > summary { color: var(--color-accent); }

.cp-pen-body { display: grid; margin-top: var(--space-sm); }
.cp-pen-body, .cp-pen-side { gap: var(--space-xs); align-content: start; word-break: keep-all; }
.cp-pen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.cp-pen-body .cp-pen-head { justify-content: center; }
.cp-pen-h { margin: 0; font: 600 var(--text-sm)/1.3 var(--font-display); color: var(--color-stage-ink); }
.cp-pen-tabs { display: flex; gap: var(--space-2xs); }

.cp-pen-tabs .btn { padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); }
.cp-pen-body .cp-pen-head { margin-bottom: var(--space-2xs); }
.cp-pen-pane { display: grid; gap: var(--space-xs); align-content: start; }
.cp-pen-pane.off { display: none; }
.cp-pen-p, .cp-pen-note { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-stage-ink-2); }
.cp-pen-t { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.cp-pen-t th, .cp-pen-t td {
  padding: 4px var(--space-xs); text-align: left; border-bottom: var(--rule) solid var(--color-stage-line);
}
.cp-pen-t th { font-weight: 600; color: var(--color-stage-ink-2); white-space: nowrap; }
.cp-pen-t th[colspan] { text-align: center; border-bottom-style: dashed; }

.cp-pen-t td { font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-stage-ink); white-space: nowrap; }

.cp-pen-t td.num, .cp-pen-t thead tr + tr th, .cp-pen-t th:last-child { text-align: right; }
.cp-pen-t thead tr:first-child th:not([colspan]):not(:first-child):not(:last-child) { text-align: right; }
@media (max-width: 26rem) { .cp-pen-t th, .cp-pen-t td { padding: 4px var(--space-2xs); } }

@media (min-width: 68rem) {
  .cp-squad-wrap {
    display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 30rem);
    justify-content: center; align-items: start; column-gap: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
  .cp-pen-side {
    display: grid; padding-top: var(--space-sm);
    border-top: var(--rule-bold) solid var(--color-stage-line);
  }
  .cp-pen { display: none; }
}

.cp-band-k { font-family: var(--font-body); letter-spacing: 0; }
.cp-band-v { font-weight: 700; color: var(--color-stage-ink); }
.coop-src { font-size: var(--text-xs); opacity: 0.75; margin: var(--space-2xs) 0 0; }
.coop-step { padding: 1px 8px; }
.coop-lv { width: 80px; padding: 4px 8px;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); }
.tab-sep { opacity: 0.35; padding: 0 var(--space-2xs); user-select: none; align-self: center; }


@media (max-width: 780px) {
  .cp-screen {
    
    --cp-art-h: 680px;
    display: block; min-height: 0; padding-bottom: var(--space-xs);
  }
  
  
  .cp-screen .cp-art  { position: absolute; top: 0; left: 0; right: 0; height: 0;
             overflow: visible; z-index: 0; }
  .cp-screen .cp-back { position: absolute; left: var(--space-sm); top: var(--space-sm);
             bottom: auto; z-index: 2; }
  .cp-screen .cp-rail { position: absolute; right: var(--space-sm); top: var(--space-sm);
             left: auto; z-index: 2; padding: 0; max-width: 45%; }
  .cp-screen .cp-side { position: relative; z-index: 1; width: 100%;
             margin-top: var(--cp-clear, 380px); padding-top: var(--space-2xs); }
  .cp-pane .eq-grid { grid-template-columns: 1fr; }
  
  .cp-rail { display: flex; gap: var(--space-sm); max-width: none; }
  
  .cp-screen .ovl-sum-grid { grid-template-columns: 1fr; }
}

.cp-rail {
  grid-column: 1; position: relative; z-index: 1;
  align-self: start; justify-self: start;
  padding: var(--space-sm); display: grid; gap: var(--space-xs);
}
.cp-item {
  display: grid; gap: 2px; padding: 0;
  background: none; border: 0;              
}
.cp-item-label { font-size: var(--text-xs); opacity: 0.85; }
.cp-attr { display: flex; align-items: center; gap: var(--space-2xs); }
.cp-attr-label { font-size: var(--text-sm); opacity: 0.85; }






.cp-rail { align-self: start; justify-self: start; width: max-content; max-width: 40%; }
.cp-item-art {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0;
}
.cp-item-art img { width: 100%; height: 100%; object-fit: contain; }
.cp-item-art.empty { font-size: var(--text-xs); opacity: 0.6; }


.cp-star {
  display: inline-grid; place-items: center; gap: 0; padding: 1px 6px;
  background: none; border: 0; cursor: pointer; line-height: 1.1;
  color: var(--color-stage-ink-2);
}
.cp-star:hover { color: var(--color-stage-ink); }
.cp-star em { font-style: normal; font-size: 10px; opacity: 0.85; }
.cp-star.on { color: var(--color-accent); }


.cp-box { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs); align-content: start; }
.cp-side > .cp-box { flex: 1 1 auto; }   
.cp-pane { align-content: start; }
.cp-box > .cp-pane { height: 100%; }
.eq-tiles { grid-auto-rows: minmax(56px, 1fr); height: 100%; }
.cp-tabs { flex-direction: column; align-content: start; width: 64px; }
.cp-tab { white-space: nowrap; width: 100%; padding: 6px 4px; text-align: center; }
.cp-pane { min-width: 0; }


@media (max-width: 760px) {
  .cp-box { grid-template-columns: minmax(0, 1fr); }
  .cp-tabs { flex-direction: row; width: auto; flex-wrap: wrap; }
  .cp-tab { width: auto; flex: 1 1 0; min-width: 0; padding: 6px var(--space-xs); }
  
  .eq-tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}

.ovl-eff-row select:first-of-type { flex: 1 1 auto; min-width: 0; }
.ovl-eff-row select + select { flex: 0 0 auto; }


.eq-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
.eq-tile {
  display: grid; gap: 2px; padding: var(--space-2xs) var(--space-xs);
  background: var(--color-cp-fill); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); cursor: pointer; text-align: left;
}
.eq-tile:hover { background: var(--color-cp-fill-2); }
.eq-tile.empty { opacity: 0.55; }
.eq-tile-part { font-size: var(--text-xs); opacity: 0.85; }
.eq-tile-tier { font-weight: 700; }
.eq-tile-lv { font-size: var(--text-xs); color: var(--color-accent); }
.eq-tile-ol { display: flex; gap: 3px; }
.eq-dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-cp-fill-2); }
.eq-dot.on { background: var(--color-accent); }


.sk-tiles { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.sk-tile {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  gap: 0; background: var(--color-cp-fill); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); cursor: pointer; line-height: 1.1;
}
.sk-tile:hover { background: var(--color-cp-fill-2); }
.sk-tile.burst { border-color: var(--color-accent); }
.sk-tile-nm { font-size: 10px; opacity: 0.85; }
.sk-tile-lv { font-size: var(--text-lg); font-weight: 700; }


.cube-box { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.cube-tile {
  width: 68px; height: 68px; display: grid; place-items: center; gap: 0;
  background: var(--color-cp-fill);
  border: var(--rule) solid var(--color-stage-line); line-height: 1.15;
}
.cube-tile.empty { opacity: 0.55; }
.cube-tile-nm { font-size: 10px; opacity: 0.85; }
.cube-tile-lv { font-weight: 700; font-size: var(--text-sm); }
.cube-stats { display: grid; gap: 2px; font-size: var(--text-sm); }
.cube-stats div { display: flex; gap: var(--space-sm); justify-content: space-between; }
.cube-stats b { font-variant-numeric: tabular-nums; }


.eq-modal { max-width: 520px; width: min(92vw, 520px); }
.skill-text {
  white-space: pre-wrap; font-family: inherit; font-size: var(--text-sm);
  margin: 0; line-height: 1.5;
}


.cp-item-stars { display: flex; gap: 2px; justify-content: center; }
.cp-star-pip {
  width: 8px; height: 8px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: var(--color-cp-fill-2);
}
.cp-item-stars.grade-r   .cp-star-pip.on { background: var(--color-grade-r); }
.cp-item-stars.grade-sr  .cp-star-pip.on { background: var(--color-grade-sr); }
.cp-item-stars.grade-ssr .cp-star-pip.on { background: var(--color-grade-ssr); }
.cp-item { min-width: 76px; justify-items: center; }
.cp-item select {
  max-width: 92px; font-size: var(--text-xs);
  background: var(--color-cp-3); color: var(--color-cp-ink);
  border: var(--rule) solid var(--color-cp-line);
}

.cp-grade { display: inline-flex; align-items: center; gap: 3px; }
.cp-gstar { background: none; border: 0; cursor: pointer; padding: 0 1px;
  color: var(--color-cp-line); font-size: var(--text-md); line-height: 1; }
.cp-gstar.on { color: var(--color-grade-ssr); }
.cp-core { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.cp-core-lb { font-size: 10px; opacity: 0.8; }
.cp-core select { font-size: var(--text-xs); padding: 1px 4px;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); }
.cp-core.on select { color: var(--color-accent); }


.cp-hexrow { display: flex; gap: var(--space-2xs); align-items: center; flex-wrap: wrap; }
.cp-hex {
  display: inline-flex; align-items: center; gap: 3px; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 6px; font-size: var(--text-xs);
  background: rgba(255, 255, 255, 0.07);
  border: var(--rule) solid var(--color-stage-line); color: var(--color-stage-ink);
}
.cp-hex img { width: 18px; height: 18px; }
.cp-hex-lb { opacity: 0.75; font-size: 10px; }
.cp-hex-lv input { width: 44px; padding: 1px 3px; font-size: var(--text-xs);
  background: none; color: var(--color-stage-ink); border: 0;
  font-variant-numeric: tabular-nums; }


.eq-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: var(--space-2xs); }

.eq-tile-art { width: 38px; height: 38px; display: grid; place-items: center; }
.eq-tile-art img { width: 100%; height: 100%; object-fit: contain; }
.eq-tile-meta { display: grid; gap: 0; min-width: 0; }
.eq-tile-ol { grid-column: 1 / -1; }


.sk-tile-img { width: 34px; height: 34px; object-fit: contain; }
.cube-tile-img { width: 40px; height: 40px; object-fit: contain; }
.cube-name { font-size: var(--text-sm); }



.inline-ask {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-3);
  border-left: var(--rule-bold) solid var(--color-amber);
}
.inline-ask-t { font-size: var(--text-sm); color: var(--color-stage-ink); }
.inline-ask-in {
  flex: 1 1 10rem; min-width: 0;
  background: var(--color-stage-2); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  border-radius: var(--radius-hair);
  padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm);
}
.inline-ask-acts { display: flex; gap: var(--space-2xs); margin-left: auto; }
.inline-ask-acts .btn { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); }


.topatk {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-2);
  border-left: var(--rule-bold) solid var(--color-accent);
}

.topatk.lowatk { border-left-color: var(--color-amber); }
.topatk.lowatk .topatk-k { color: var(--color-amber); }

.topatk-k {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-accent);
}

.topatk-line { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
.topatk-sum { font-size: var(--text-sm); color: var(--color-stage-ink); }
.topatk-sum.warn { color: var(--color-amber); }
.topatk-sum.ok { color: var(--color-ok); }

.topatk .btn { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); }



.fbc {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-2);
  border-left: var(--rule-bold) solid var(--color-accent);
}
.fbc-pin { margin: 0; font: 700 var(--text-sm)/1.5 var(--font-body); color: var(--color-amber-deep); }
.fbc-who { margin: 0; font: 700 var(--text-sm)/1.5 var(--font-body); color: var(--color-accent); }
.fbc-msg { margin: 0; font-size: var(--text-sm); color: var(--color-stage-ink-2); }
.fbc-msg.warn { color: var(--color-amber-deep); }
.fbc-best { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-stage-ink); }
.fbc-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.fbc-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs);
  padding: var(--space-2xs) 0;
}

.fbc-gain {
  flex: 0 0 auto; min-width: 4rem;
  font: 700 var(--text-sm)/1.4 var(--font-body); color: var(--color-accent);
}
.fbc-total { flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.fbc-pick {
  flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere;
  font-size: var(--text-sm); color: var(--color-stage-ink);
}
.fbc-row > .btn { flex: 0 0 auto; }   


.row-fbc, .row-fbc-undo { background: var(--color-stage-2); color: var(--color-stage-ink); }
.row-fbc:hover:not(:disabled), .row-fbc-undo:hover { filter: brightness(1.15); }   


.fg-row-fbc {
  --c: var(--chamfer-sm); border: 0; cursor: pointer;
  padding: 1px var(--space-xs);
  background: var(--color-stage-line); color: var(--color-stage-ink);
  font: 700 10px/1.6 var(--font-body);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.fg-row-fbc:hover { filter: brightness(1.15); }
.fg-row-fbc:disabled { opacity: .45; cursor: default; }

.fg-row-tools { display: inline-flex; gap: 2px; }
.fg-row-fbc.on { color: var(--color-accent); }

.fast-ctrl-pick { margin-bottom: var(--space-xs); flex-wrap: wrap; }

.squad-warn {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-2);
  border-left: var(--rule-bold) solid var(--color-amber);
}
.squad-warn-line {
  margin: 0; font-size: var(--text-sm); color: var(--color-amber-deep);
}
.squad-warn-line::before { content: "⚠ "; }

.squad-warn-line.pin { color: var(--color-accent); font-weight: 700; }
.squad-warn-line.pin::before { content: "※ "; }

.squad-warn-line.stat { color: var(--color-stage-ink-2); }
.squad-warn-line.stat::before { content: "! "; font-weight: 700; color: currentColor; }
.squad-warn-line.stat[data-k="bug"] { color: var(--color-alert); }
.squad-warn-line.stat[data-k="approx"] { color: var(--color-amber); }
.squad-warn-line.stat[data-k="verifying"] { color: var(--color-accent); }


.bar-stat {
  margin: 2px 0 0; font-size: var(--text-xs); line-height: 1.5;
  color: var(--color-stage-ink-2); cursor: help;
}
.bar-stat::before { content: "! "; font-weight: 700; }
.bar-stat[data-k="bug"] { color: var(--color-alert); }
.bar-stat[data-k="approx"] { color: var(--color-amber); }
.bar-stat[data-k="verifying"] { color: var(--color-accent); }

.ta-buff { margin-top: var(--space-xs); }
.ta-buff-h {
  display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap;
  padding-bottom: 4px; border-bottom: var(--rule) solid var(--color-stage-line);
}
.ta-stat { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.ta-case {
  margin-top: var(--space-2xs); padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-2);
  border-left: var(--rule-bold) solid var(--color-ok);
}

.ta-case.miss { border-left-color: var(--color-amber); }
.ta-case-h {
  display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: 4px;
}
.ta-cyc {
  font: 700 var(--text-xs)/1 var(--font-display); color: var(--color-accent);
}
.ta-dealer { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.ta-mark { margin-left: auto; font-size: var(--text-xs); }
.ta-mark.ok { color: var(--color-ok); }
.ta-mark.miss { color: var(--color-amber); }
.ta-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  gap: var(--space-sm); align-items: center; padding: 2px 0;
}
.ta-row.got { color: var(--color-stage-ink); }
.ta-nm {
  font-size: var(--text-xs); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-atk {
  font: 500 var(--text-xs)/1 var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--color-stage-ink);
}
.ta-need { font-size: 10px; color: var(--color-stage-ink-2); white-space: nowrap; }
.ta-need.got { color: var(--color-ok); font-weight: 700; }
.ta-need.tie { color: var(--color-amber); }


.compare-sheet { max-width: 56rem; width: min(56rem, calc(100vw - 1.5rem)); }
.cmp-sum {
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-xs) var(--space-sm); background: var(--color-stage-3);
}
.cmp-sum-k {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}
.cmp-sum-v {
  font: 700 var(--text-lg)/1.2 var(--font-num); color: var(--color-stage-ink);
  font-variant-numeric: tabular-nums;
}

.cmp-delta {
  display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-delta b { font: 700 var(--text-sm)/1 var(--font-num); }
.cmp-delta span { font-size: 10px; opacity: 0.8; }
.cmp-delta.up { color: var(--color-ok); }
.cmp-delta.down { color: var(--color-alert); }
.cmp-delta.flat { color: var(--color-stage-ink-2); }

.cmp-deck {
  display: grid; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  background: var(--color-stage-2); margin-top: var(--space-xs);
}
.cmp-deck.lone { opacity: 0.75; }
.cmp-deck-h {
  display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap;
  padding-bottom: 4px; border-bottom: var(--rule) solid var(--color-stage-line);
}
.cmp-arrow { color: var(--color-stage-ink-2); }
.cmp-overlap { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.cmp-tot {
  margin-left: auto; font: 600 var(--text-sm)/1 var(--font-num);
  color: var(--color-stage-ink); font-variant-numeric: tabular-nums;
}
.cmp-deck-h .cmp-delta { margin-left: 0; }

.cmp-swap { display: flex; gap: var(--space-sm); flex-wrap: wrap; font-size: var(--text-xs); }
.cmp-out { color: var(--color-alert); }
.cmp-in { color: var(--color-ok); }

.cmp-rows { display: grid; gap: 1px; }
.cmp-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  gap: var(--space-sm); align-items: center; padding: 3px 0;
}
.cmp-art { width: 26px; height: 34px; overflow: hidden; background: var(--color-stage-3); }
.cmp-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block;
}
.cmp-nm {
  font-size: var(--text-xs); color: var(--color-stage-ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-tag {
  margin-left: 5px; padding: 1px 4px; font: 700 9px/1.4 var(--font-display);
  font-style: normal; border: var(--rule) solid currentColor;
}
.cmp-tag.in { color: var(--color-ok); }
.cmp-tag.out { color: var(--color-alert); }
.cmp-v {
  font: 500 var(--text-xs)/1 var(--font-num); color: var(--color-stage-ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 34rem) {
  .cmp-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .cmp-v { grid-column: 2 / -1; }
}




.foot-sep {
  align-self: stretch; width: var(--rule); min-height: 1.6rem;
  background: var(--color-stage-line);
}

.preset-bar {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.preset-count {
  font: 500 var(--text-xs)/1.4 var(--font-num);
  color: var(--color-stage-ink-2); font-variant-numeric: tabular-nums;
}

.preset-kind {
  flex: none; padding: 2px 6px;
  font: 700 10px/1.4 var(--font-display); letter-spacing: var(--track-label);
  border: var(--rule) solid currentColor;
}
.preset-kind.single { color: var(--color-accent); }
.preset-kind.bundle { color: var(--color-amber); }


.face-strip { display: flex; gap: var(--space-2xs); flex-wrap: wrap; min-width: 0; }

.face { width: clamp(54px, 13vw, 84px); display: grid; gap: 2px; }
.face > img {
  width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: cover;
  object-position: center 14%; background: var(--color-stage-3);
}
.face.empty > .face-none {
  background: none; border: var(--rule) dashed var(--color-stage-line);
}
.face-none {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4;
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  font: 700 var(--text-base)/1 var(--font-display);
}
.face-nm {
  font-size: var(--text-xs); line-height: 1.3; color: var(--color-stage-ink);
  text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}


.preset-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-2xs) var(--space-md);
}

.preset-line .face-strip { flex-wrap: nowrap; }
.preset-line .face { flex: 1 1 0; min-width: 0; max-width: 84px; width: auto; }


.mimir-deck .face-strip { flex-wrap: nowrap; width: 100%; max-width: 34rem; }
.mimir-deck .face { flex: 1 1 0; min-width: 0; max-width: 84px; width: auto; }
.mimir-deck .rec-deck-h { display: flex; align-items: baseline; gap: var(--space-xs); }

.mimir-deck .share-deck-act { justify-content: flex-start; }
.preset-line {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: 2px 0; color: var(--color-stage-ink); font-size: var(--text-xs);
}
.preset-line > .rec-no { padding-top: 2px; }
.preset-line > span:not(.rec-no):not(.prof-meta) { min-width: 0; overflow-wrap: anywhere; }



.chips, #rec-kinds { flex-wrap: wrap; }


.boss-gear {
  position: absolute; top: 25px; right: 4px; z-index: 5;
  
  --c: 3px;
  width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--color-stage-2); color: var(--color-stage-ink-2);
  font-size: 14px; line-height: 1;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.boss-gear:hover { color: var(--color-accent); }
.boss-gear:focus-visible { outline: var(--rule-bold) solid var(--color-accent); }

@media (hover: none) {
  .boss-gear {
    
    width: 36px; height: 36px; top: 19px; right: -2px;
    background: none; clip-path: none;
  }
  .boss-gear::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 24px; height: 24px; transform: translate(-50%, -50%);
    background: var(--color-stage-2); z-index: -1;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                       calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  }
}

.boss { position: relative; }

.boss-gear-all {
  position: static; width: auto; height: auto; clip-path: none;
  background: none; font-size: 26px; color: var(--color-stage-ink-2);
  align-self: end; padding: 0 var(--space-2xs) 2px;
}
.boss-gear-all:hover { color: var(--color-accent); }

@media (hover: none) {
  .boss-gear-all { padding: 6px var(--space-xs) 8px; margin: -6px calc(var(--space-2xs) - var(--space-xs)) -6px; }
}

.folder-row {
  flex-basis: 100%; width: 100%;
  margin-top: var(--space-2xs); padding-top: var(--space-2xs);
  border-top: var(--rule) dashed var(--color-stage-line);
}

#preset-filter .chip, #rec-kinds .chip, .folder-row .chip {
  background: var(--color-stage-2);
  color: var(--color-stage-ink-2);
  border-color: var(--color-stage-line);
}
#preset-filter .chip:hover, #rec-kinds .chip:hover, .folder-row .chip:hover {
  color: var(--color-accent); border-color: var(--color-accent);
}

#preset-filter .chip.on, #rec-kinds .chip.on, .folder-row .chip.on {
  background: var(--color-accent); color: var(--color-stage);
  border-color: var(--color-accent);
}
.chip-folder { border-style: dashed; }          
.chip-add { font-weight: 700; padding-inline: var(--space-sm); }
.chip-quiet { color: var(--color-stage-ink-2); border-style: dotted; }

.chip-drop {
  border-color: var(--color-accent); color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.prof[draggable="true"] { cursor: grab; }
.prof-dragging { opacity: 0.45; cursor: grabbing; }

.preset-more {
  align-self: start; margin-top: var(--space-2xs);
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}
.preset-more:hover { color: var(--color-accent); }
.preset-more:focus-visible { outline: var(--rule-bold) solid var(--color-accent); }

.preset-io {
  display: flex; gap: var(--space-xs); flex-wrap: wrap;
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: var(--rule) solid var(--color-stage-line);
}


.preset-sheet { max-width: 48rem; width: min(48rem, calc(100vw - 1.5rem)); }
.preset-sheet .sheet-body { gap: var(--space-md); }
.preset-name-row { display: flex; align-items: center; gap: var(--space-xs); }
.preset-name-in {
  flex: 1 1 12rem; min-width: 0;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  border-radius: var(--radius-hair);
  padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm);
}

.preset-target { flex: none; margin-left: auto; align-self: center; }
.preset-target:disabled { opacity: 0.4; }


.share-pair.pick { cursor: pointer; }
.share-pair.pick:hover { border-color: var(--color-stage-ink-2); }
.share-pair.pick:focus-visible { outline: var(--rule-bold) solid var(--color-accent); }
.share-pair.pick.on:hover { border-color: var(--color-amber); }

.share-pair.pick .preset-target { cursor: default; }
.preset-cond {
  display: flex; align-items: center; gap: var(--space-2xs);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-xs); font-size: var(--text-xs);
  background: var(--color-stage-2); color: var(--color-stage-ink-2);
  border: var(--rule) solid var(--color-stage-line);
}
.preset-cond.on { color: var(--color-stage-ink); border-color: var(--color-amber); }


.share-out {
  margin-top: var(--space-xs); padding: var(--space-sm);
  background: var(--color-stage-2);
  border: var(--rule) solid var(--color-stage-line);
  display: grid; gap: var(--space-xs);
}
.share-out .prose-sm { color: var(--color-stage-ink-2); margin: 0; }
.share-row { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

.share-url {
  flex: 1 1 18rem; min-width: 0;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  border-radius: var(--radius-hair);
  padding: var(--space-2xs) var(--space-xs);
  font: 500 var(--text-xs)/1.6 var(--font-num);
}

.share-acts { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-sm); }

.share-deck-act {
  display: flex; justify-content: flex-end; gap: var(--space-xs);
  margin-top: var(--space-xs); padding-top: var(--space-xs);
  border-top: var(--rule) solid var(--color-stage-line);
}
.share-deck-act .btn { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); }


.share-pick {
  margin-top: var(--space-xs); padding: var(--space-sm);
  background: var(--color-stage-3);
  border: var(--rule) solid var(--color-accent);
  display: grid; gap: var(--space-xs);
}
.share-pick-h {
  margin: 0; font: 600 var(--text-sm)/1.4 var(--font-display);
  color: var(--color-stage-ink);
}
.share-pick-src {
  margin: 0; font-size: var(--text-xs); color: var(--color-accent);
  overflow-wrap: anywhere;
}
.share-targets { display: grid; gap: var(--space-2xs); }
.share-target {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-xs); border: var(--rule) solid var(--color-stage-line);
  background: var(--color-stage-2); color: var(--color-stage-ink);
}
.share-target:hover { border-color: var(--color-stage-ink-2); }
.share-target.on { border-color: var(--color-amber); background: var(--color-stage); }
.share-target-mid { display: grid; gap: 2px; min-width: 0; }
.share-target-now {
  font-size: var(--text-xs); color: var(--color-stage-ink); overflow-wrap: anywhere;
}
.share-target-note { font-size: 10px; color: var(--color-stage-ink-2); overflow-wrap: anywhere; }

.share-target-note.warn { color: var(--color-amber); }
.share-pick-note { margin: 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }

.share-pick.done { border-color: var(--color-ok); }
.share-pick.done.warn { border-color: var(--color-amber); }
.share-pick-done { margin: 0; font-size: var(--text-sm); color: var(--color-ok); }
.share-pick.done.warn .share-pick-done { color: var(--color-amber); }
.share-pick-foot { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.share-pick-note.warn { color: var(--color-amber); }


.share-sheet .sheet-body { gap: var(--space-md); }
.share-pairs { display: grid; gap: var(--space-2xs); }
.share-pair {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-xs); border: var(--rule) solid var(--color-stage-line);
  background: var(--color-stage-2); color: var(--color-stage-ink);
}
.share-pair:hover { border-color: var(--color-stage-ink-2); }
.share-pair.on { border-color: var(--color-amber); background: var(--color-stage-3); }

.share-pair-ck {
  flex: none; width: 1.1em; text-align: center;
  font: 700 var(--text-sm)/1.4 var(--font-display); color: var(--color-amber);
}
.share-pair-mid { display: grid; gap: 2px; min-width: 0; }
.share-pair-src { font-size: var(--text-xs); color: var(--color-stage-ink); overflow-wrap: anywhere; }
.share-pair-dst { font-size: 10px; color: var(--color-stage-ink-2); overflow-wrap: anywhere; }
.share-pair-dst.on { color: var(--color-accent); }
.share-sheet-notes { display: grid; gap: var(--space-2xs); }


.cp-head { align-items: center; gap: var(--space-xs); }
.cp-rare { font-size: var(--text-lg); }
.cp-lvbar { align-items: baseline; }
.cp-name { font-size: var(--text-md); font-weight: 700; margin-left: auto;
  color: var(--color-stage-ink); }
.cp-subbar { display: flex; align-items: center; gap: var(--space-xs);
  justify-content: flex-end; }
.cp-reset {
  padding: 2px 8px; font-size: var(--text-xs); cursor: pointer;
  background: var(--color-cp-fill); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}

.cp-status { display: grid; gap: 2px; }
.cp-status-hd {
  font-size: var(--text-xs); letter-spacing: 0.08em; padding: 1px 6px;
  background: var(--color-cp-fill-2); color: var(--color-stage-ink);
}
.cp-status b { color: var(--color-accent); }


.cp-art { touch-action: pan-y; cursor: grab; }
.cp-art:active { cursor: grabbing; }

body.cp-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }


.cp-item-art.grade-r   { box-shadow: inset 0 0 0 2px var(--color-grade-r); }
.cp-item-art.grade-sr  { box-shadow: inset 0 0 0 2px var(--color-grade-sr); }
.cp-item-art.grade-ssr { box-shadow: inset 0 0 0 2px var(--color-grade-ssr); }

.cp-modal-ico { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.cp-modal-ico img { width: 100%; height: 100%; object-fit: contain; }
.eq-modal .sheet-body { gap: var(--space-md); }

.filter-bar > .field { display: flex; align-items: center; gap: var(--space-2xs); }



.sk-grid { display: flex; align-items: center; gap: var(--space-sm); }
.sk-col { display: grid; gap: var(--space-2xs); }

.sk-tile, .cube-sk, .cube-card {
  background: var(--color-cp-fill); color: var(--color-cp-ink);
  border-color: var(--color-cp-line);
}
.sk-tile:hover { background: var(--color-cp-fill-2); }

.sk-tile-img, .cube-sk-img { filter: brightness(0) opacity(0.82); }
.sk-tile {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border-style: solid; border-width: var(--rule);
}
.sk-tile.big { width: 84px; height: 84px; }
.sk-tile-img { width: 62%; height: 62%; object-fit: contain; }
.sk-tile-nm { font-size: 10px; opacity: 0.85; }

.tile-lv {
  position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px;
  padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
  background: var(--color-stage-ink); color: var(--color-stage);
  font: 700 11px/1 var(--font-display); font-variant-numeric: tabular-nums;
}

.sk-burst-badge {
  position: absolute; left: -6px; top: -6px; width: 22px; height: 22px;
  display: grid; place-items: center; font: 700 11px/1 var(--font-display);
  background: var(--color-cp-chip); color: var(--color-cp-chip-ink);
  border: var(--rule) solid var(--color-cp-chip-line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}


.cube-pane {
  display: grid; justify-items: center; align-content: start;
  gap: var(--space-sm); padding-top: var(--space-2xs);
}
.cube-card {
  position: relative; width: 112px; height: 134px; display: grid; place-items: center;
  border: var(--rule) solid var(--color-stage-line);
}
.cube-card.empty { opacity: 0.5; }
.cube-card-img { width: 80%; height: 80%; object-fit: contain; }
.cube-card-lv {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font: 700 var(--text-sm)/1.7 var(--font-display);
  background: var(--color-accent); color: var(--color-accent-ink);
}
.cube-stats { display: flex; gap: var(--space-2xs); justify-content: center;
  flex-wrap: wrap; }
.cube-stat {
  display: flex; align-items: center; gap: 4px; padding: 2px 8px;
  background: var(--color-cp-fill);
  border: var(--rule) solid var(--color-stage-line); font-size: var(--text-xs);
}
.cube-stat b { font-variant-numeric: tabular-nums; }
.cube-skills { display: flex; gap: var(--space-md); justify-content: center; }
.cube-sk {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: var(--rule) solid var(--color-stage-line);
}
.cube-sk-img { width: 62%; height: 62%; object-fit: contain; }

.cube-form {
  display: grid; grid-template-columns: auto minmax(9rem, 12rem);
  gap: var(--space-2xs) var(--space-sm); align-items: center;
}
.cube-form-k { text-align: right; font-size: var(--text-sm); color: var(--color-stage-ink-2); }
.cube-form select {
  width: 100%; font-size: var(--text-sm); padding: 3px 8px;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.cube-note {
  margin: 0; text-align: center; font-size: var(--text-xs);
  color: var(--color-stage-ink-2);
}

.cp-art img { user-select: none; -webkit-user-drag: none; pointer-events: none; }


.ovl-sum { display: grid; gap: 2px; margin-bottom: var(--space-2xs); }
.ovl-sum-hd {
  font-size: var(--text-xs); letter-spacing: 0.06em; padding: 1px 6px;
  background: var(--color-cp-fill-2); color: var(--color-stage-ink);
}
.ovl-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.ovl-sum-row { display: flex; justify-content: space-between; gap: 6px;
  font-size: var(--text-xs); color: var(--color-stage-ink); }

.ovl-sum-row b { font-variant-numeric: tabular-nums; }

.ovl-part {
  display: flex; align-items: stretch; gap: var(--space-xs); width: 100%;
  padding: var(--space-2xs); text-align: left; cursor: pointer;
  
  background: none; color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.ovl-part:hover { background: var(--color-cp-fill); }
.ovl-part.empty { opacity: 0.5; }
.ovl-art { display: grid; place-items: center; flex: none; }
.ovl-art img { object-fit: contain; }
.ovl-cols { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs); flex: 1; min-width: 0; }
.ovl-hd {
  display: block; font-size: 10px; letter-spacing: 0.06em; margin-bottom: 2px;
  padding: 1px 5px; background: var(--color-cp-fill-2);
}
.ovl-stat, .ovl-eff { display: block; min-width: 0; }
.ovl-stat-row, .ovl-eff-row {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--text-xs); padding: 1px 3px;
}
.ovl-stat-row b { font-variant-numeric: tabular-nums; }
.ovl-eff-row b { font-variant-numeric: tabular-nums; }   

.ovl-eff-row.blue b { color: var(--color-ovl-blue); }
.ovl-eff-row.black {
  background: var(--color-ovl-black); color: var(--color-ovl-label-fg);
}
.ovl-eff-row.black b { color: var(--color-ovl-black-ink); }

.ovl-eff-row.black select {
  background: transparent; color: inherit; border-color: currentColor;
}
.ovl-eff-row.black select option { background: var(--color-cp); color: var(--color-cp-ink); }
.ovl-none { font-size: var(--text-xs); opacity: 0.7; }

.cp-art { transition: transform 160ms ease-out, opacity 160ms ease-out; }
.cp-art.dragging { transition: none; }



.ovl-set-row { display: flex; gap: 4px; flex-wrap: nowrap; margin-bottom: 2px; }

.ovl-set-row select, .ovl-eff-row select {
  font-size: var(--text-xs); padding: 1px 5px; max-width: 100%;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}
.ovl-set-row select:hover, .ovl-eff-row select:hover {
  border-color: var(--color-accent);
}

.ovl-set-row select.plain { color: var(--color-cp-amber); }
.ovl-eff-row { align-items: center; gap: 4px; }
.ovl-eff-row select:first-child { flex: 1 1 auto; min-width: 0; }
.ovl-eff-row select:nth-child(2) { width: 48px; flex: none; }

.ovl-eff-row b { margin-left: auto; flex: none; width: 4.1em; text-align: right; }

.ovl-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

.ovl-part { container-type: inline-size; }
@container (max-width: 430px) {
  .ovl-cols { grid-template-columns: minmax(0, 1fr); }
}


.ovl-art {
  position: relative; width: 48px; height: 48px;
  background: url("image/icon/nikke-equip-bg.png") center / 100% 100% no-repeat;
}
.ovl-art.ovl {
  background: url("image/icon/nikke-equip-bg.png") center / 100% 100% no-repeat,
              linear-gradient(180deg, transparent 45%, var(--color-ovl-glow));
}
.ovl-art > img { width: 39px; height: 39px; }
.ovl-part.empty .ovl-art { background-image: none; }
.ovl-badges {
  position: absolute; left: 0; top: 0; display: grid; gap: 2px; z-index: 1;
}

.ovl-bg {
  width: 19px; height: 21px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--color-cp-chip);
}
.ovl-bg img { width: 82%; height: 82%; object-fit: contain; }

.ovl-bg.ol { background: none; clip-path: none; }
.ovl-bg.ol img { width: 100%; height: 100%; }

.ovl-bg.corp img { width: 74%; }

.ovl-art-lv {
  position: absolute; left: 2px; bottom: 3px; z-index: 1; padding: 0 3px;
  font: 700 10px/1.5 var(--font-display); font-variant-numeric: tabular-nums;
  color: var(--color-cp-chip-ink); background: var(--color-ovl-plate);
}
.ovl-part.empty .ovl-art-lv { background: none; color: var(--color-cp-ink-2); }


.shot-drop {
  margin: var(--space-sm) 0; padding: var(--space-md);
  border: var(--rule-bold) dashed var(--color-stage-line);
  background: var(--color-stage-2);
}
.shot-drop.over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.shot-drop:focus-visible { outline: var(--rule-bold) solid var(--color-accent); }
.shot-drop-hd { margin: 0 0 var(--space-2xs); font-weight: 700; }
.shot-sheet { max-width: 60rem; width: min(60rem, calc(100vw - 1.5rem)); }

.shot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2xs); }
.shot-row-hd {
  grid-column: 1 / -1; margin-top: var(--space-2xs);
  font: 700 var(--text-xs)/1.6 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
}
.shot-cell {
  display: grid; gap: 2px; justify-items: center; padding: var(--space-2xs);
  border: var(--rule) solid var(--color-stage-line);
}

.shot-cell.weak { border-color: var(--color-amber); background: var(--color-amber-soft, transparent); }
.shot-cell.locked { border-color: var(--color-ok); }
.shot-thumb { width: 56px; height: 56px; object-fit: contain; image-rendering: auto; }
.shot-pick { width: 100%; max-width: 100%; font-size: var(--text-xs); }
.shot-foot {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: var(--rule) solid var(--color-stage-line);
}
.shot-name-row { display: flex; align-items: center; gap: var(--space-xs); flex: 1 1 16rem; }
@media (max-width: 780px) {
  .shot-grid { grid-template-columns: repeat(3, 1fr); }
}


.rec-kinds { display: flex; gap: 3px; margin: var(--space-xs) 0 var(--space-sm); }

#history-kinds, #nd-boss-kinds { margin: var(--space-md) var(--space-md) var(--space-sm); gap: var(--space-xs); }
.rec-kind {
  padding: 3px 12px; font-size: var(--text-sm); cursor: pointer;
  background: var(--color-stage-2); color: var(--color-stage-ink-2);
  border: var(--rule) solid var(--color-stage-line);
}
.rec-kind:hover { color: var(--color-stage-ink); }
.rec-kind.on { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.rec-badge {
  flex: none; padding: 1px 6px; font: 700 10px/1.5 var(--font-display);
  letter-spacing: var(--track-label);
  color: var(--color-accent); border: var(--rule) solid currentColor;
}
.rec-badge.shot { color: var(--color-amber); }

.shot-tag {
  font: 700 10px/1.5 var(--font-display); letter-spacing: var(--track-label);
  padding: 0 5px; border: var(--rule) solid currentColor;
}
.shot-tag.sure  { color: var(--color-ok); }
.shot-tag.weak  { color: var(--color-amber); }
.shot-tag.fixed { color: var(--color-accent); }

.shot-row-hd { display: flex; align-items: center; gap: var(--space-sm); }
.shot-power {
  flex: 0 0 7.5rem; padding: 2px 8px; font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; text-align: right;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}

.shot-power.weak { border-color: var(--color-amber); }

.shot-power-img {
  height: 30px; object-fit: contain; object-position: left center;
  border: var(--rule) solid var(--color-stage-line); background: #fff;
  image-rendering: -webkit-optimize-contrast;
}

.shot-power.shaky { border-color: var(--color-alert); }
.shot-eok {
  font-size: var(--text-sm); color: var(--color-stage-ink-2);
  font-variant-numeric: tabular-nums; min-width: 5.5rem;
}


@media (min-width: 40rem) {
  .rec-deck.rec-deck-faces { grid-template-columns: minmax(0, 1fr); }
}
.rec-deck-faces .face-strip { gap: var(--space-xs); }


.cmp-rank {
  display: grid; gap: 3px; align-items: center; width: 100%;
  padding: var(--space-2xs) 0;
}
.cmp-rank-k {
  font: 700 10px/1.6 var(--font-display); letter-spacing: var(--track-label);
  color: var(--color-stage-ink-2); padding-right: var(--space-2xs); text-align: right;
}
.cmp-rcell { display: grid; place-items: center; }

.cmp-face {
  width: clamp(74px, 9.5vw, 128px); aspect-ratio: 3 / 4;
  overflow: hidden; display: grid; place-items: center;
  border: var(--rule) solid var(--color-stage-line); background: var(--color-stage-3);
}
.cmp-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.cmp-face.out { border-color: var(--color-alert); }
.cmp-face.in  { border-color: var(--color-ok); }

.cmp-face.out img { opacity: 0.55; filter: grayscale(0.6); }
.cmp-face-none { font: 700 12px/1 var(--font-display); color: var(--color-stage-ink-2); }


.shot-find-btn { width: 100%; margin-top: 3px; font-size: 11px; padding: 2px 4px; }
.find-sheet { max-width: 30rem; }

.find-sheet .sheet-body {
  overflow: hidden; gap: var(--space-sm);
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(72vh, 40rem);
}
#shot-find-q { width: 100%; }
.shot-find-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-2xs); align-content: start;
  min-height: 0; overflow-y: auto; padding-right: var(--space-2xs);
  
  scrollbar-width: thin;
  scrollbar-color: var(--color-stage-line) transparent;
}
.shot-find-list::-webkit-scrollbar { width: 8px; }
.shot-find-list::-webkit-scrollbar-track { background: transparent; }
.shot-find-list::-webkit-scrollbar-thumb {
  background: var(--color-stage-line); border: 2px solid transparent;
  background-clip: content-box;
}
.shot-find-list::-webkit-scrollbar-thumb:hover { background: var(--color-stage-ink-2); }
.shot-find-item {
  display: flex; align-items: center; gap: var(--space-2xs); text-align: left;
  padding: 3px 5px; background: var(--color-stage-3); color: inherit;
  border: var(--rule) solid var(--color-stage-line); cursor: pointer;
}
.shot-find-item:hover { border-color: var(--color-accent); }
.shot-find-item img { width: 26px; height: 34px; object-fit: cover; object-position: center 12%; }
.shot-find-nm { font-size: 12px; line-height: 1.3; }

.shot-find-item.used { opacity: 0.6; }
.shot-find-used { font-size: 10px; color: var(--color-stage-ink-2); margin-left: auto; }

#shot-summary.warn { color: var(--color-alert); font-weight: 700; }


.cmp-nochars {
  font-size: 12px; color: var(--color-stage-ink-2);
  padding: var(--space-2xs) 0 0;
}



:root { scrollbar-width: thin; scrollbar-color: var(--color-stage-line) transparent; }
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-track { background: transparent; }
body ::-webkit-scrollbar-thumb {
  background: var(--color-stage-line); border: 2px solid transparent; background-clip: content-box;
}
body ::-webkit-scrollbar-thumb:hover { background: var(--color-stage-ink-2); }
body ::-webkit-scrollbar-corner { background: transparent; }

.sheet-body { scrollbar-width: thin; scrollbar-color: var(--color-stage-line) transparent; }
.sheet-body::-webkit-scrollbar { width: 8px; }
.sheet-body::-webkit-scrollbar-track { background: transparent; }
.sheet-body::-webkit-scrollbar-thumb {
  background: var(--color-stage-line); border: 2px solid transparent; background-clip: content-box;
}
.sheet-body::-webkit-scrollbar-thumb:hover { background: var(--color-stage-ink-2); }


.tab-cta {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  background: none; border: 0; cursor: pointer; color: var(--color-stage-ink);
  font: inherit; font-weight: 700; padding: var(--space-2xs) var(--space-xs);
  letter-spacing: var(--track-label);
}
.tab-cta:hover { color: var(--color-accent); }



#history-open {
  font: 500 var(--text-sm)/1 var(--font-body); letter-spacing: normal;
  color: var(--color-stage-ink-2);
  border-bottom: var(--rule-bold) solid transparent;
}
#history-open:hover { color: var(--color-stage-ink); }


.tab-cta-2 {
  flex-direction: column; align-items: center; justify-content: center; gap: 0;   
  padding-top: 0; padding-bottom: 0;
  font-size: 12px; line-height: 1.15; text-decoration: none;
  white-space: nowrap;
}
.tab-cta-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--color-stage-ink-2);
}
.tab-cta-2:hover .tab-cta-sub { color: inherit; }
.tab-cta:focus-visible { outline: var(--rule-bold) solid var(--color-accent); }
.tab-cta-tag {
  font: 700 10px/1 var(--font-display); letter-spacing: var(--track-label);
  padding: 3px 5px; font-style: normal;
  color: var(--color-accent-ink); background: var(--color-accent);
}

#shot-open.on { background: var(--color-accent); color: var(--color-accent-ink); }


.guide-sheet { max-width: 32rem; }
.guide-fig { margin: 0; display: grid; gap: var(--space-2xs); justify-items: center; }
.guide-fig img {
  width: auto; max-width: 100%; max-height: 52vh; height: auto;
  outline: var(--rule) solid var(--color-stage-line);
}
.guide-fig figcaption {
  font-size: 12px; color: var(--color-stage-ink-2); text-align: center;
}
.guide-list {
  margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-2xs);
  font-size: 13px; line-height: 1.55; color: var(--color-stage-ink);
}
.guide-list b { color: var(--color-accent); }


@media (max-width: 640px) {
  .app-bar { gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); }
  .tabs { width: 100%; row-gap: 2px; }
  .tabs .tab-sep { display: none; }
  .tab { padding: var(--space-2xs) var(--space-xs); }
  
  .tab-cta { padding: var(--space-2xs) var(--space-xs); margin-left: auto; }
  .tab-cta + .tab-cta { margin-left: var(--space-xs); }
  
  #history-open { margin-left: 0; }
  
  .tab-cta-2 > span:first-child { display: none; }
  .tab-cta-sub { font-size: 12px; font-weight: 700; color: inherit; }
}


.cp-power-coop {
  font-size: 13px; color: var(--color-stage-ink-2); margin-left: var(--space-2xs);
}
.cp-power-coop b { color: var(--color-stage-ink); font-weight: 700; }



.fast-toggle-wrap { position: relative; display: inline-flex; margin-left: auto; }

.panel.fast-on .fast-toggle-wrap { margin-left: 0; }


.fast-wrap { --fg-content-w: calc(1.6rem + var(--space-sm) + 28rem); padding-top: var(--space-2xs); }
.fast-top {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm); max-width: var(--fg-content-w); margin-bottom: var(--space-sm);
}

.fast-total { display: inline-flex; align-items: baseline; flex: none; white-space: nowrap; }
.fast-top-acts { display: inline-flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

.fast-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-xs); max-width: var(--fg-content-w); margin-top: var(--space-sm);
}
.fast-foot-acts { display: inline-flex; gap: var(--space-xs); flex-wrap: wrap; }
.fast-foot-add { margin-left: auto; }

.fast-io {
  display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-xs);
  max-width: var(--fg-content-w); margin-top: var(--space-xs);
}
.fast-foot-acts:not(:has(.btn:not([hidden]))) { display: none; }

.fast-wrap.fg-multi :is(.fast-top, .fast-foot, .fast-io) { max-width: none; }

.shot-cap :is(.fg-row-cy, .fg-row-tools, .fg-row-fbc, .fg-row-calc, .fg-set-acts) { display: none; }
.shot-cap :is(.slot-x, .slot-no) { visibility: hidden; }
.shot-cap .fg-total-wrap { margin-left: 18px; }
.shot-nodmg :is(.nk-dmg, .fg-row-total, .fg-set-total) { visibility: hidden; }

.fast-preset-pick { align-items: center; }
.fast-save-sets { margin-bottom: var(--space-xs); flex-wrap: wrap; }
.fast-preset-pick .share-pair-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fast-total-label {
  font: 600 var(--text-sm)/1 var(--font-display); color: var(--color-stage-ink-2);
}

.fast-total-val {
  margin-left: var(--space-2xs);
  font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}

.fast-grid { display: flex; flex-direction: column; gap: var(--space-xs); }


.fg-row { display: flex; align-items: stretch; cursor: grab; user-select: none; }

.fg-row .fg-slot, .fg-row .fg-row-calc { cursor: pointer; }

.fg-row .fg-total-wrap { cursor: default; }
.fg-row-label {
  flex: none; width: 1.6rem; margin-right: var(--space-sm);
  display: flex; align-items: center; justify-content: center;
  font: 700 var(--text-xs)/1 var(--font-display); color: var(--color-stage-ink-2);
  cursor: grab; touch-action: none; user-select: none;
}

.fg-cells {
  flex: 1 1 auto; min-width: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xs); max-width: 28rem;
}


.fg-total-wrap {
  flex: none; margin-left: var(--space-2xs);
  display: flex; flex-direction: column; justify-content: center;
  cursor: grab; touch-action: none; user-select: none;
}

.fg-total-wrap .fg-row-calc { cursor: pointer; }
.fg-total-col {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}

.fg-row.deck-dragging, .score-pill.deck-dragging, .deck-tab.deck-dragging { opacity: 0.4; }
.fg-row.deck-drop-target, .score-pill.deck-drop-target, .deck-tab.deck-drop-target {
  outline: var(--rule-bold) solid var(--color-accent); outline-offset: 2px;
}

.fg-row-calc {
  --c: var(--chamfer-sm); border: 0; cursor: pointer;
  padding: 1px var(--space-xs);
  background: var(--color-accent); color: var(--color-accent-ink);
  font: 700 10px/1.6 var(--font-body);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.fg-row-calc:hover { filter: brightness(1.15); }
.fg-row-calc:disabled {
  background: var(--color-stage-line); color: var(--color-stage-ink-2);
  opacity: 0.6; cursor: default;
}

.fg-row-total {
  font: 700 var(--text-sm)/1 var(--font-display); color: var(--color-stage-ink);
  font-variant-numeric: tabular-nums;
}

.fg-set {
  display: flex; flex-direction: column; gap: var(--space-xs);
  border: var(--rule) solid var(--color-stage-line); padding: var(--space-xs) var(--space-sm) var(--space-sm);
  background: var(--color-stage-2);
}
.fg-set-head { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: 1.75rem; }
.fg-set-name { font: 700 var(--text-sm)/1.2 var(--font-display); color: var(--color-stage-ink); }
.fg-set-total { display: inline-flex; align-items: baseline; }
.fg-set-total .fast-total-val { font-size: var(--text-base); }
.fg-set-acts { margin-left: auto; display: flex; gap: 4px; }
.fg-set-acts .btn { padding: 2px var(--space-xs); font-size: var(--text-xs); line-height: 1.4; }
.fg-set-add { align-self: flex-start; }

.fg-set-label {
  display: inline-flex; align-items: baseline; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  max-width: 14rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 700 var(--text-base)/1.2 var(--font-display); color: var(--color-stage-ink);
}
.fg-set-label.empty { color: var(--color-stage-ink-2); }
.fg-set-label.main { color: var(--color-accent); }         

.fg-set-label:hover, .fg-set-label:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.fg-set-label:hover { color: var(--color-accent); }

.fg-set-no {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 3px;
  border: var(--rule) solid var(--color-stage-line); color: var(--color-stage-ink-2);
  font: 700 var(--text-xs)/1 var(--font-display);
}

.fg-set-main {
  padding: 2px 6px; border: var(--rule) solid var(--color-accent); color: var(--color-accent);
  font: 700 10px/1.2 var(--font-body); white-space: nowrap;
}
.fg-set-total .fast-total-label { margin-right: 6px; }
.fg-set-part { margin-left: 6px; font: 600 var(--text-xs)/1 var(--font-display); color: var(--color-stage-ink-2); }
.fast-total .fg-set-label { margin-right: var(--space-xs); }
.fg-name-in {
  width: 10rem; max-width: 100%; padding: 1px 6px; outline: none;
  font: 700 var(--text-sm)/1.2 var(--font-display); color: var(--color-stage-ink);
  background: var(--color-stage-3); border: var(--rule) solid var(--color-accent);
}

.score-set-name { font-weight: 700; color: var(--color-amber); margin-right: var(--space-xs); }

.fg-slot { aspect-ratio: 1 / 1; }
.fg-slot .slot-no { font-size: var(--text-sm); }
.fg-slot .slot-x { width: 14px; height: 14px; font-size: 8px; }


.nk.compact { aspect-ratio: 1 / 1; }

.nk.compact .nk-art img { height: 100%; }
.nk-dmg {
  position: absolute; left: var(--bw); right: var(--bw); bottom: var(--bw); z-index: 2;
  background: color-mix(in oklch, var(--color-stage) 82%, transparent);
  color: var(--color-stage-ink);
  
  font: 700 9px/1.6 var(--font-display); text-align: center; letter-spacing: -0.02em;
}


.mimir-io {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: var(--rule) solid var(--color-roster-line);
}
.mimir-io h3 {
  margin: 0 0 var(--space-2xs);
  font: 700 var(--text-sm)/1.4 var(--font-display); letter-spacing: var(--track-label);
}
.mimir-io .prose { margin: 0 0 var(--space-xs); }
.mimir-io .bt-share-row { display: flex; gap: var(--space-2xs); align-items: center; }
.mimir-io input { flex: 1 1 auto; min-width: 0; }


.res-spread { margin-top: var(--space-2xs); gap: 4px; align-items: center; }
.res-spread .chip { font-size: var(--text-xs); padding: 2px 8px; }

.res-spread-n { color: var(--color-stage-ink-2); font-size: var(--text-xs); margin-left: var(--space-2xs); }


.bar-range {
  margin-left: var(--space-2xs);
  font: 600 var(--text-xs)/1 var(--font-num);
  color: var(--color-stage-ink-2); white-space: nowrap;
}


.bt-rng-why {
  grid-column: 1 / -1; margin: 2px 0 0;
  font: 400 var(--text-xs)/1.65 var(--font-body);
  color: var(--color-stage-ink-2);
  background: color-mix(in oklch, var(--color-stage-3) 60%, transparent);
  border-left: 2px solid var(--color-stage-line);
  padding: var(--space-2xs) var(--space-xs);
}
.bt-rng-why b { color: var(--color-stage-ink); font-weight: 700; }


.bar-cards {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px; margin: 6px 0 5px; max-width: 26rem;
}
.bar-cards .nk.compact {
  cursor: default;
  --frame: color-mix(in oklch, var(--seg-c, var(--color-stage-line)) 72%, transparent);
}
.bar-cards .nk-dmg { font-size: 10px; }

.nk-dmg.nk-dmg-full {
  top: 56%; bottom: auto;
  
  font-size: 12px; line-height: 1.75;
}


.panel.fast-on .roster-hint { display: none; }

.panel.fast-on .pool { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
@media (min-width: 48rem) {
  .panel.fast-on .pool { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}


@media (min-width: 64rem) {
  .panel.fast-on { display: flex; align-items: flex-start; gap: 0; }
  .panel.fast-on .stage { flex: 0 0 auto; width: 38rem; }
  .panel.fast-on .fg-cells { flex: none; width: 28rem; }
  
  .panel.fast-on .fg-set .fg-cells { width: 26rem; }
  
  .panel.fast-on .roster {
    flex: 1 1 20rem; min-width: 0;
    border-top: 0; border-left: var(--rule-bold) solid var(--color-amber-deep);
  }
  
  .panel.fast-on .stage { align-self: stretch; }
  .panel.fast-on .roster { position: sticky; top: 0; max-height: 100vh; display: flex; flex-direction: column; }
  .panel.fast-on .roster .filter-bar { flex: none; }
  .panel.fast-on .pool {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    align-content: start; scrollbar-width: thin; grid-auto-rows: max-content;
    padding-right: var(--space-xs);
  }
}



.fb-open { white-space: nowrap; }
.fb-wrap {
  max-width: 720px; margin: 0 auto;
  padding: var(--space-md) var(--space-sm); display: grid; gap: var(--space-sm);
}
.fb-wrap > * { min-width: 0; }
.fb-title { font-size: var(--text-lg, 18px); }
.fb-title .fb-note { font-weight: normal; margin-left: var(--space-2xs); }
.fb-form { display: grid; gap: var(--space-2xs); }

.fb-extra { display: grid; gap: var(--space-2xs); }
.fb-form:not(.open) .fb-extra { display: none; }
.fb-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.fb-row-end { justify-content: flex-end; }
.fb-row select,
.fb-row input[type="text"],
.fb-row input[type="password"] {
  background: var(--color-stage-3, #222); color: inherit;
  border: var(--rule) solid var(--color-stage-line, #444);
  padding: 4px var(--space-xs); border-radius: 6px;
}
.fb-row input[type="text"],
.fb-row input[type="password"] { flex: 1 1 12ch; min-width: 0; }
.fb-form textarea {
  width: 100%; background: var(--color-stage-3, #222); color: inherit;
  border: var(--rule) solid var(--color-stage-line, #444);
  padding: var(--space-xs); border-radius: 6px; resize: vertical;
  font: inherit; font-size: var(--text-base); line-height: 1.5;   
}

.fb-form:not(.open) textarea {
  height: 2.9em; min-height: 0; resize: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;      
}

.fb-form textarea::placeholder { color: var(--color-stage-ink-2); opacity: 1; }
.fb-form:not(.open) .fb-row-end { display: none; }
.fb-note { font-size: var(--text-xs); color: var(--color-stage-ink-2, #999); margin-right: auto; }
.fb-priv { display: inline-flex; align-items: center; gap: 4px;
           font-size: var(--text-sm); white-space: nowrap; }
#fb-pw { width: 9rem; }


.fb-cats {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--space-sm)); padding: 2px var(--space-sm);
}
.fb-cats::-webkit-scrollbar { display: none; }
@media (max-width: 39.99rem) {
  
  .fb-cats {
    padding-right: calc(var(--space-sm) + 24px);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  }
}
.fb-cat {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: var(--rule) solid var(--color-stage-line); background: transparent;
  color: var(--color-stage-ink-2); font: inherit; font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; word-break: keep-all;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.fb-cat:hover { color: var(--color-stage-ink); border-color: var(--color-stage-ink-2); }
.fb-cat:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fb-cat.on {
  color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent);
}
.fb-cat-n { font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: .8; }
@media (min-width: 40rem) {
  .fb-cats { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.fb-list { display: grid; gap: var(--space-xs); }
.fb-empty { margin: var(--space-sm) 0; }
.fb-item {
  display: grid; gap: var(--space-xs); min-width: 0;
  border: var(--rule) solid var(--color-stage-line, #333);
  border-radius: 10px; padding: var(--space-xs) var(--space-sm);
  background: var(--color-stage-2);
}
.fb-item > * { min-width: 0; }

.fb-item.mine { border-color: color-mix(in oklch, var(--color-accent) 60%, var(--color-stage-line)); }
.fb-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: var(--text-sm); color: var(--color-stage-ink-2, #999);
}
.fb-who { font-size: var(--text-sm); font-weight: 700; color: var(--color-stage-ink); overflow-wrap: anywhere; }
.fb-item.locked .fb-who { font-weight: 600; color: var(--color-stage-ink-2); }
.fb-when { font-variant-numeric: tabular-nums; }
.fb-mine {
  padding: 0 6px; border-radius: 4px; font-size: var(--text-xs); font-weight: 700; line-height: 1.6;
  color: var(--color-accent-ink); background: var(--color-accent);
}
.fb-head .fb-status { margin-left: auto; }
.fb-body {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--text-base); line-height: 1.6; color: var(--color-stage-ink);
}
.fb-lock-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }


.fb-reply {
  display: grid; gap: var(--space-2xs); min-width: 0;
  padding: var(--space-xs) var(--space-sm); border-radius: 8px;
  border-left: 3px solid var(--color-accent, #4a8);
  background: color-mix(in oklch, var(--color-accent) 10%, var(--color-stage-2));
}
.fb-reply-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--text-sm); color: var(--color-stage-ink-2);
}
.fb-reply-head b { font-size: var(--text-sm); color: var(--color-accent); letter-spacing: .02em; }
.fb-reply-seg { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.fb-reply-seg + .fb-reply-seg {
  padding-top: var(--space-2xs);
  border-top: var(--rule) dashed color-mix(in oklch, var(--color-accent) 35%, transparent);
}
.fb-reply-text {
  white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; justify-self: stretch;
  font-size: var(--text-base); line-height: 1.65; color: var(--color-stage-ink);
}

.fb-ai {
  padding: 1px 7px; border-radius: 4px; font-size: var(--text-sm); line-height: 1.5;
  color: var(--color-stage-ink-2); border: var(--rule) solid var(--color-stage-line);
  overflow-wrap: anywhere;
}


.fb-status {
  display: inline-block; vertical-align: baseline; white-space: nowrap;
  padding: 1px 8px; border: var(--rule) solid currentColor; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; line-height: 1.5; letter-spacing: .02em;
  color: var(--color-stage-ink-2, #999);
}
.fb-status[data-k="wait"] { color: var(--color-stage-ink, #ddd); border-style: dashed; }
.fb-status[data-k="review"] { color: var(--color-amber, #db3); }
.fb-status[data-k="answered"] { color: var(--color-stage-ink-2, #999); }
.fb-status[data-k="done"] { color: var(--color-accent, #4a8); }

.fb-kind {
  display: inline-block; white-space: nowrap; padding: 1px 8px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; line-height: 1.5;
  color: var(--color-stage-ink, #ddd); background: var(--color-stage-3, #222);
}


.fb-modes { display: flex; gap: 0; border-bottom: var(--rule) solid var(--color-stage-line, #444); }
.fb-mode {
  background: transparent; color: var(--color-stage-ink-2, #999); border: 0; cursor: pointer; font: inherit;
  padding: var(--space-2xs) var(--space-sm); border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: var(--text-base); font-weight: 700;
}
.fb-mode.on { color: var(--color-stage-ink, #ddd); border-bottom-color: var(--color-accent, #4a8); }
.fb-form[hidden] { display: none; }


.tr-box { display: grid; gap: var(--space-2xs); }
.tr-box[hidden] { display: none; }
.tr-panel { display: grid; gap: var(--space-2xs); padding: var(--space-xs);
            border: var(--rule) solid var(--color-stage-line, #444); border-radius: 8px; }
.tr-panel[hidden] { display: none; }
.tr-panel select, .tr-panel input, .tr-panel textarea {
  background: var(--color-stage-3, #222); color: inherit;
  border: var(--rule) solid var(--color-stage-line, #444); border-radius: 6px;
  padding: 4px var(--space-xs); font: inherit; font-size: var(--text-base); min-width: 0;
}
.tr-panel .tr-q { flex: 1 1 14ch; }
.tr-panel textarea { width: 100%; resize: vertical; line-height: 1.5; }
.tr-results { display: grid; gap: 2px; max-height: 18rem; overflow-y: auto; }
.tr-hit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2xs);
  text-align: left; padding: 4px var(--space-xs); border-radius: 6px; cursor: pointer;
  background: transparent; color: inherit; border: var(--rule) solid transparent; font: inherit;
}
.tr-hit:hover, .tr-hit:focus-visible { border-color: var(--color-stage-line, #444); background: var(--color-stage-3, #222); }
.tr-ko, .tr-tr { overflow-wrap: anywhere; font-size: var(--text-sm); }
.tr-arrow { color: var(--color-stage-ink-2, #999); }
.tr-picked { display: grid; gap: 2px; padding: var(--space-2xs) var(--space-xs); border-radius: 6px;
             background: var(--color-stage-3, #222); font-size: var(--text-sm); }
.tr-picked[hidden] { display: none; }
.tr-pick-text { overflow-wrap: anywhere; }
.tr-unpick { justify-self: start; }


.fb-comments { display: grid; gap: var(--space-2xs); justify-items: start; min-width: 0; }
.fb-comments > * { min-width: 0; }
.fb-thread[hidden] { display: none; }
.fb-thread {
  justify-self: stretch; display: grid; gap: var(--space-2xs);
  padding-left: var(--space-xs);
  border-left: var(--rule) solid var(--color-stage-line, #333);
}
.fb-comment { display: grid; gap: 1px; font-size: var(--text-base); min-width: 0; }
.fb-cmeta { font-size: var(--text-sm); color: var(--color-stage-ink-2, #999); }
.fb-cbody { white-space: pre-wrap; min-width: 0; overflow-wrap: anywhere; line-height: 1.55; }
.fb-comment.admin .fb-cmeta { color: var(--color-accent, #4a8); font-weight: 700; }

.fb-copen {
  min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: var(--rule) solid var(--color-stage-line); background: transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-stage-ink-2);
  transition: color .15s ease, border-color .15s ease;
}
.fb-copen:hover { color: var(--color-stage-ink); border-color: var(--color-stage-ink-2); }
.fb-copen:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }


.fb-cform {
  justify-self: stretch;
  display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center;
}
.fb-cform[hidden] { display: none; }
.fb-cform input[type="text"],
.fb-cform textarea {
  background: var(--color-stage-3, #222); color: inherit;
  border: var(--rule) solid var(--color-stage-line, #333); border-radius: 6px;
  padding: 5px 8px; font: inherit; font-size: var(--text-sm); min-width: 0;
}
.fb-cinput {
  flex: 1 1 100%; order: 1;
  min-height: 3.4em; resize: vertical;
  line-height: 1.45;
}
.fb-cform .fb-cnick { order: 2; flex: 1 1 11ch; max-width: 14rem; min-height: 34px; }
.fb-cform button { order: 3; margin-left: auto; }      
.fb-cform .fb-note { order: 4; flex-basis: 100%; margin-right: 0; }


@media (max-width: 40rem) {
  .fb-wrap { padding-block: var(--space-sm); }
  .fb-form textarea, .fb-row input[type="text"], .fb-row input[type="password"],
  .fb-cform input[type="text"], .fb-cform textarea { font-size: 16px; }
  .fb-row input[type="text"], .fb-row input[type="password"], .fb-cform .fb-cnick { min-height: 40px; }
  .fb-form .btn, .fb-cform .btn, .fb-lock-row .btn, #fb-more { min-height: 40px; }
  .fb-copen { min-height: 40px; }
  .fb-cat { min-height: 40px; padding: 0 14px; }
  .fb-item { padding: var(--space-xs); }
  .fb-reply { padding: var(--space-xs); }
}



.bt-block { margin-top: var(--space-sm); padding-top: var(--space-sm);
            border-top: var(--rule) solid var(--color-stage-line); }

.bt-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.bt-head > span { font-weight: 700; font-size: var(--text-sm); margin-right: auto; white-space: nowrap; }
.bt-ph {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center;
  margin-bottom: var(--space-2xs);
}
.bt-ph select { flex: 0 1 9rem; min-width: 0; }

.bt-ph input[type="number"] {
  flex: 0 1 5.5rem; min-width: 0;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  padding: 4px var(--space-xs);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.bt-ph em { font-style: normal; font-size: var(--text-xs); color: var(--color-stage-ink-2); }

.bt-ph[data-k="element_gate"] select { border-color: var(--color-amber); }
.bt-ph[data-k="immune"] select { border-color: var(--color-alert); }
.bt-ph[data-k="vanish"] select { border-color: rgb(96, 170, 180); }

.bt-ph[data-k="parts"] select { border-color: var(--color-accent); }

.bt-ph[data-k="range"] select { border-color: var(--color-accent-deep, var(--color-accent)); }

.bt-ph[data-k="boss_buff"] select, .bt-ph[data-k="boss_def_pct"] select,
.bt-ph[data-k="boss_dmg_taken_pct"] select, .bt-ph[data-k="boss_def_rate_pct"] select { border-color: var(--color-magenta); }
.bt-ph-w { flex: 0 0 100%; order: 2; gap: var(--space-2xs); }
.bt-ph-w .chip:disabled { opacity: 1; cursor: default; }
.bt-ph-x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--color-stage-ink-2); font: inherit; padding: 2px 6px;
  margin-left: auto; order: 1;
}
.bt-ph-x:hover { color: var(--color-alert); }
.bt-ph-none { font-size: var(--text-xs); color: var(--color-stage-ink-2); margin: 0 0 var(--space-2xs); }

.rec-raid { flex: 0 0 100%; opacity: 0.85; }

.ctrl-bunny, .ctrl-stacks { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 100%; }
.ctrl-bunny .ctrl-lbl, .ctrl-stacks .ctrl-lbl { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.ctrl-bunny select, .ctrl-stacks select { flex: 0 1 18rem; min-width: 0; }


.bt-ed [data-k], .bt-ph[data-k] { --phc: 214, 92, 222; }
.bt-ed [data-k="element_gate"] { --phc: 216, 150, 20; }
.bt-ed [data-k="immune"] { --phc: 229, 72, 77; }
.bt-ed [data-k="vanish"] { --phc: 96, 170, 180; }
.bt-ed [data-k="parts"] { --phc: 90, 162, 255; }
.bt-ed [data-k="body"] { --phc: 195, 202, 214; }
.bt-ed [data-k="pierce_gate"] { --phc: 160, 120, 240; }
.bt-ed [data-k="core"] { --phc: 80, 200, 140; }
.bt-ed [data-k="range"] { --phc: 170, 176, 190; }

.bt-ed {
  inset: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none;
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  background: var(--color-stage); color: var(--color-stage-ink);
}
.bt-ed::backdrop { background: var(--color-stage); }

html.bted-open, html.bted-open body { overflow: hidden; }
.bt-ed-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bt-ed-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule) solid var(--color-stage-line);
}
.bt-ed-bar > b { font-size: var(--text-base); }
.bt-ed-sum { font-size: var(--text-xs); color: var(--color-stage-ink-2); margin-right: auto; }
.bt-ed-zoom { display: inline-flex; gap: 2px; align-items: center; }
.bt-ed-undo { margin-left: var(--space-xs); }
.bt-ph[data-k="boss_def_rate_pct"] select { border-color: var(--color-magenta); }
.bt-ed-zbtn { padding-inline: var(--space-sm); font-family: var(--font-num); }
.bt-ed-back { margin-left: var(--space-xs); }
.bt-ed-palwrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule) solid var(--color-stage-line);
}
.bt-ph-pal { flex-wrap: wrap; gap: var(--space-2xs); }
.bt-ed-hint { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.bt-ph-chip {
  border-left: 3px solid rgb(var(--phc));
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.bt-ph-chip:active { cursor: grabbing; }

.bt-ph-ghost {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  padding: 3px 10px; font: 600 var(--text-sm)/1.5 var(--font-display);
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
}



.bt-ed-scroll {
  --lab: 8rem;
  flex: 0 1 auto; max-height: 62vh; min-height: 0; overflow: auto; outline: none;
  background: var(--color-stage-2);
}
.bt-ed-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--color-stage-ink-2); }

.bt-tl-in { width: calc(100% * var(--zoom, 1)); min-width: 100%; }
.bt-tl-lane {
  display: grid; grid-template-columns: var(--lab) minmax(0, 1fr);
  border-top: var(--rule) solid var(--color-stage-line);
}
.bt-tl-head { position: sticky; top: 0; z-index: 4; border-top: 0; background: var(--color-stage-2); }
.bt-tl-lab {
  position: sticky; left: 0; z-index: 3; align-self: stretch;
  display: flex; align-items: center;
  background: var(--color-stage-2); border-right: var(--rule) solid var(--color-stage-line);
  padding: 2px var(--space-xs); font-size: var(--text-sm); color: var(--color-stage-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-tl-corner { z-index: 5; }
.bt-tl-lane[data-k] .bt-tl-lab { box-shadow: inset 4px 0 0 rgb(var(--phc)); }

.bt-tl-grab { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.bt-tl-grab:active { cursor: grabbing; }
.bt-tl-lane.lane-lift { opacity: 0.55; }
.bt-tl-lane.drop-before { box-shadow: inset 0 3px 0 var(--color-accent); }
.bt-tl-lane.drop-after { box-shadow: inset 0 -3px 0 var(--color-accent); }
.bt-tl-axis { position: relative; min-width: 0; }
.bt-tl-ruler { height: 24px; }
.bt-tl-tick { position: absolute; top: 16px; bottom: 0; border-left: 1px solid var(--color-stage-line); }
.bt-tl-tick.major { top: 9px; border-left-color: var(--color-stage-ink-2); }
.bt-tl-tick.major::after {
  content: attr(data-t); position: absolute; left: 3px; top: -9px;
  font: var(--text-xs)/1 var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--color-stage-ink-2);
}

.bt-tl-row {
  min-height: 34px; cursor: crosshair;
  background-image: linear-gradient(to right, var(--color-stage-line) 1px, transparent 1px);
  background-size: calc(100% / var(--ticks, 18)) 100%;
}

.bt-tl-stagelab { font-size: var(--text-xs); color: var(--color-accent); border-top: var(--rule) solid var(--color-stage-line); }
.bt-tl-stagebar { height: 22px; border-top: var(--rule) solid var(--color-stage-line); }
.bt-tl-stage {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box; padding: 0 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 var(--text-xs)/21px var(--font-display); color: var(--color-stage-ink);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-left: 2px solid var(--color-accent);
}
.bt-tl-stage.alt { background: color-mix(in srgb, var(--color-accent) 28%, transparent); }
.bt-tl-stage:first-child { border-left-color: transparent; }
.bt-tl-stageline {
  position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none;
  border-left: 2px dashed var(--color-accent); opacity: 0.85;
}
.bt-tl-blk {
  position: absolute; height: 30px; margin-top: 2px; box-sizing: border-box; min-width: 8px;
  display: flex; align-items: stretch;
  background: rgba(var(--phc), 0.26); border: 1px solid rgba(var(--phc), 0.9);
  color: var(--color-stage-ink); cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.bt-tl-blk:active { cursor: grabbing; }
.bt-tl-blk.sel { z-index: 2; box-shadow: 0 0 0 2px rgb(var(--phc)), 0 0 0 4px var(--color-stage-2); }
.bt-tl-body {
  flex: 1 1 auto; min-width: 0; padding: 0 4px; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--text-xs)/28px var(--font-num); font-variant-numeric: tabular-nums;
}

.bt-tl-h { flex: 0 0 8px; position: relative; cursor: ew-resize; background: rgba(var(--phc), 0.6); }
.bt-tl-h::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: -8px; right: -8px; }
.bt-tl-pv {
  opacity: 0.7; border-style: dashed; pointer-events: none;
  font: 600 var(--text-xs)/28px var(--font-num); padding: 0 4px; white-space: nowrap;
}

.bt-tl-x {
  position: absolute; top: -9px; right: -9px; z-index: 3;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid rgb(var(--phc)); background: var(--color-stage);
  color: var(--color-stage-ink); font: 700 12px/20px var(--font-num); text-align: center;
  cursor: pointer; display: none;
}
.bt-tl-blk.sel .bt-tl-x { display: block; }
@media (hover: hover) and (pointer: fine) { .bt-tl-blk:hover .bt-tl-x { display: block; } }
.bt-tl-x:hover { color: var(--color-alert); border-color: var(--color-alert); }
.bt-tl-blk.lift .bt-tl-x { display: none; }
.bt-ed-clear.armed { color: var(--color-alert); border-color: var(--color-alert); }

.bt-tl-blk.lift { z-index: 6; opacity: 0.9; box-shadow: 0 6px 18px rgb(0 0 0 / 0.45), 0 0 0 2px rgb(var(--phc)); }
.bt-tl-lane.over .bt-tl-row { background-color: rgba(var(--phc), 0.14); }
.bt-tl-lane.over .bt-tl-lab { color: var(--color-stage-ink); }

.bt-ed-foot {
  flex: 1 1 auto; min-height: 3.6rem; overflow: auto;
  display: grid; gap: var(--space-2xs); align-content: start;
  padding: var(--space-xs) var(--space-sm);
  border-top: var(--rule) solid var(--color-stage-line);
}
.bt-ed-keys { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.bt-ed-foot .bt-ph-none { margin: 0; }
.bt-ed-det {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm);
  padding: 4px 8px; cursor: pointer;
  background: var(--color-stage-2); border-left: 4px solid rgb(var(--phc));
}
.bt-ed-det.sel { background: rgba(var(--phc), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--phc), 0.7); }
.bt-ed-det > select { flex: 0 1 9rem; min-width: 0; }
.bt-ed-grp { display: inline-flex; align-items: center; gap: 3px; }
.bt-ed-lbl { font-size: var(--text-xs); color: var(--color-stage-ink-2); margin-right: 3px; }
.bt-ed-grp em { font-style: normal; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.bt-ed-num {
  width: 4.8rem; padding: 4px var(--space-2xs); text-align: center;
  background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line);
  font: 700 var(--text-base)/1.2 var(--font-num); font-variant-numeric: tabular-nums;
}
.bt-ed-step {
  appearance: none; cursor: pointer; min-width: 2rem; height: 1.9rem; padding: 0 var(--space-2xs);
  border: var(--rule) solid var(--color-stage-line); background: var(--color-stage-3);
  color: var(--color-stage-ink); font: 700 var(--text-sm)/1 var(--font-num);
}
.bt-ed-step:hover { filter: brightness(1.25); }
.bt-ed-del { margin-left: auto; display: inline-flex; align-items: center; padding: 4px 8px; }
.bt-ed-del svg { display: block; }
.bt-ed-del:hover { color: var(--color-alert); }
@media (max-width: 40rem) {
  .bt-ed-num { width: 4.6rem; }
  .bt-ed-det { gap: var(--space-2xs) var(--space-xs); }
}
@media (max-width: 40rem) {
  .bt-ed-scroll { --lab: 5.2rem; }
  .bt-tl-lab { font-size: var(--text-xs); padding-inline: var(--space-2xs); }
}


@media (min-width: 1100px) {
  .squad {
    display: grid; align-items: start;
    
    
    
    grid-template-columns: minmax(8rem, auto) minmax(0, 34rem);
    justify-content: center;
    column-gap: var(--space-sm);
  }
  
  
  .squad > *:not(.squad-left):not(.squad-main):not(.museum-target) {
    grid-column: 1 / -1;
    
    width: 0; min-width: 100%;
  }
  .squad > .squad-left { grid-column: 1; }
  .squad > .squad-main { grid-column: 2; max-width: 56rem; }
  
  .squad > .squad-foot { grid-column: 2; }
  .squad-side { display: grid; gap: var(--space-2xs); align-content: start; }
  .squad-side .btn, .squad-side .ftrig { width: 100%; }
}

@media (max-width: 1099px) {
  .squad-side { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
}


.acct-fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-xs);
}
.acct-fold > summary::-webkit-details-marker { display: none; }
.acct-fold > summary::before {
  content: "▸"; font-size: var(--text-sm); color: var(--color-stage-ink-2);
  transition: transform 120ms ease-out;
}
.acct-fold[open] > summary::before { content: "▾"; }
.acct-fold[open] { margin-bottom: var(--space-md); }


.bt-row-moot { opacity: .42; }
.bt-row-moot input { pointer-events: none; }


.sheet-mini { max-width: 26rem; width: min(26rem, calc(100vw - 1.5rem)); }
.sheet-mini .preset-name-in { width: 100%; }

.lab-tag {
  font-style: normal; font-size: var(--text-xs); line-height: 1;
  padding: 2px 5px; margin-left: 4px; white-space: nowrap;
  background: var(--color-amber-deep); color: var(--color-stage);
}


#btpanel { grid-template-columns: minmax(0, 1fr); }

.bt-share { margin-top: var(--space-sm); padding-top: var(--space-sm);
            border-top: var(--rule) solid var(--color-stage-line); }
.bt-share-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.bt-share-row input[type="text"] {
  flex: 1 1 14ch; min-width: 0;
  background: var(--color-stage-2); color: inherit;
  border: var(--rule) solid var(--color-stage-line); border-radius: 4px;
  padding: 3px 8px; font: inherit; font-size: var(--text-sm);
}
.bt-share-note { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.bt-draw-import { margin-top: var(--space-xs); }
.bt-share-note.ok { color: var(--color-accent); }
.bt-share-note.err { color: var(--color-alert); }

.bt-share-note b { color: var(--color-stage-ink); font-family: var(--font-display);
                   letter-spacing: .08em; user-select: all; }




.union-lv { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm);
            color: var(--color-stage-ink-2, #9aa); }
.union-lv input { width: 5.5rem; background: var(--color-stage-3, #222); color: inherit;
                  border: var(--rule) solid var(--color-stage-line, #444);
                  padding: 3px var(--space-2xs); border-radius: 6px;
                  font-family: var(--font-num); font-variant-numeric: tabular-nums; }



.mode-sw {
  margin-left: var(--space-2xs);     
  display: inline-flex; align-items: stretch; gap: 0;
  position: relative; isolation: isolate;
  
  padding: 12px 4px 2px;
  flex: none;                        
}
.mode-slash {
  width: 1px; align-self: stretch; margin: 2px 10px;
  background: linear-gradient(180deg, transparent, var(--color-stage-line, #4a4d57), transparent);
  transform: skewX(-18deg);
}
.mode-btn {
  
  --glow: var(--color-accent);
  
  flex: none; min-width: max-content;
  position: relative; border: 0; background: none; cursor: pointer;
  padding: 3px 4px 4px; line-height: 1;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  color: var(--color-stage-ink-2, #7c828c);
  transition: color .18s ease, transform .18s ease;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.mode-btn b {
  font: 700 var(--text-sm)/1 var(--font-display, inherit);
  letter-spacing: .14em; text-transform: uppercase;
}
.mode-btn i {
  font: 600 9px/1 var(--font-display, inherit); font-style: normal;
  letter-spacing: .22em; opacity: .5; text-transform: uppercase;
}

.mode-guide {
  flex: none; min-width: max-content; align-self: center;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 3px 2px 4px; line-height: 1; word-break: keep-all;
  color: var(--color-stage-ink-2, #7c828c);
}
.mode-guide-links { display: inline-flex; align-items: baseline; gap: 4px; }
.mode-guide-links > span { opacity: .45; font-size: var(--text-xs); }
.mode-guide a {
  font: 700 var(--text-sm)/1 var(--font-display, inherit); letter-spacing: .04em; text-transform: uppercase;
  color: inherit; text-decoration: none; padding: 7px 3px; margin: -7px -3px;      
  transition: color .18s ease;
}
.mode-guide a:hover, .mode-guide a:focus-visible { color: var(--color-accent); }
.mode-guide i { font: 600 10px/1 var(--font-display, inherit); font-style: normal; letter-spacing: .08em; opacity: .7; text-transform: uppercase; }

.mode-guide i::after { content: " ↗"; }

.mode-slash:has(+ .mode-guide) { margin-inline: 6px; }

.mode-btn:not(.on) { transform: scale(.94); }


.coach { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.coach-dim { position: absolute; inset: 0; width: 100%; height: 100%; }
.coach-dim path { fill: rgb(0 0 0 / 0.78); pointer-events: auto; }
.coach-ring {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 22px 4px color-mix(in srgb, var(--color-accent) 45%, transparent);
  animation: coach-pulse 1.8s ease-in-out infinite;
}
@keyframes coach-pulse {
  50% { box-shadow: 0 0 0 3px var(--color-accent), 0 0 34px 10px color-mix(in srgb, var(--color-accent) 30%, transparent); }
}
.coach-box {
  position: absolute; pointer-events: auto; box-sizing: border-box;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--color-stage); color: var(--color-stage-ink);
  outline: var(--rule) solid var(--color-stage-line); border-radius: 10px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.55);
}
.coach-arrow {
  position: absolute; top: -7px; width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--color-stage); box-shadow: -1px -1px 0 0 var(--color-stage-line);
}
.coach-box.up .coach-arrow { top: auto; bottom: -7px; box-shadow: 1px 1px 0 0 var(--color-stage-line); }
.coach-title { display: block; font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.coach-body { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: 1.6; color: var(--color-stage-ink-2, inherit); word-break: keep-all; }
.coach-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-xs); }
.coach-go { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .coach-ring { animation: none; } }
.mode-btn:not(.on):hover { color: var(--color-stage-ink, #e6e8ea); }

.mode-btn.on { color: #fff; }
.mode-btn.on b {
  color: var(--glow);
  text-shadow: 0 0 14px var(--glow);
}
.mode-btn.on::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--glow), transparent);
  box-shadow: 0 0 10px var(--glow);
  animation: mode-underline .32s cubic-bezier(.3,1.4,.5,1);
}
@keyframes mode-underline { from { transform: scaleX(.2); opacity: 0; } }

#mode-solo  { --glow: oklch(70% 0.145 235); }
#mode-union { --glow: var(--color-magenta); }
:root[data-mode="union"] #mode-union { --glow: var(--color-accent); }
:root[data-dororong="on"] #mode-solo {
  --glow: var(--color-dororong-pink);
}
:root[data-dororong="on"] .mode-btn.on {
  color: var(--color-dororong-ink);
}
@media (prefers-reduced-motion: reduce) {
  .mode-btn, .mode-btn.on::after { transition: none; animation: none; }
}




.sortie {
  --union: var(--color-magenta);
  display: flex; align-items: stretch; gap: var(--space-xs);
  min-width: 0;
}
.sortie-slots { display: flex; gap: 6px; min-width: 0; }


.sortie-slot {
  --code-c: var(--color-stage-line);
  position: relative; border: 0; cursor: pointer;
  background: var(--color-stage-2);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  padding: 5px 12px 7px 10px; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 2px var(--space-2xs);
  transition: background var(--dur-fast, .16s) var(--ease-out, ease-out),
              color var(--dur-fast, .16s) var(--ease-out, ease-out);
}
.sortie-no {
  grid-row: 1 / 3; font: 700 var(--text-sm)/1 var(--font-display);
  letter-spacing: .04em; color: var(--color-stage-line);
  font-variant-numeric: tabular-nums;
}
.sortie-code {
  font: 600 var(--text-xs)/1.2 var(--font-display);
  letter-spacing: var(--track-label); color: var(--color-stage-ink-2);
  white-space: nowrap;
}
.sortie-sub {
  font: 500 9px/1 var(--font-display); letter-spacing: .18em;
  color: var(--color-stage-line); text-transform: uppercase; white-space: nowrap;
}

.sortie-slot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--code-c); opacity: .35;
  transform-origin: left; transform: scaleX(.34);
  transition: transform var(--dur, .22s) var(--ease-out, ease-out),
              opacity var(--dur, .22s) var(--ease-out, ease-out);
}
.sortie-slot:hover { background: var(--color-stage-3); }
.sortie-slot:hover .sortie-code { color: var(--color-stage-ink); }
.sortie-slot[aria-selected="true"] { background: var(--color-stage-3); }
.sortie-slot[aria-selected="true"] .sortie-no { color: var(--union); }
.sortie-slot[aria-selected="true"] .sortie-code { color: var(--color-stage-ink); }
.sortie-slot[aria-selected="true"]::after { transform: scaleX(1); opacity: 1; }
.sortie-slot:focus-visible { outline: var(--rule-bold) solid var(--union); outline-offset: 2px; }


.gauge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-stage-2); padding: 4px 10px 4px 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.gauge-key {
  font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .18em;
  color: var(--color-stage-ink-2);
}
.gauge input {
  width: 3.6rem; background: none; border: 0; color: var(--color-stage-ink);
  font: 700 var(--text-md, 16px)/1 var(--font-display);
  font-variant-numeric: tabular-nums; text-align: right; padding: 2px 0;
}

.gauge input::placeholder { color: var(--color-stage-ink-2); opacity: 1; }
.gauge:focus-within { box-shadow: inset 0 -2px 0 var(--union); }
.gauge input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .slot, .sortie-slot::after { transition: none; }
}



:root[data-mode="union"] .stage {
  background:
    linear-gradient(var(--union-grid) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--union-grid) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(90% 70% at 50% -20%, var(--union-veil), transparent 62%),
    var(--color-stage);
}


.stage { position: relative; }
.stage-warp {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  overflow: hidden;
  
  --wx: 88%; --wy: 0%;
}



.stage-warp::before {
  content: ""; position: absolute; left: var(--wx); top: var(--wy);
  width: calc(var(--wr, 1200px) * 2); height: calc(var(--wr, 1200px) * 2);
  margin: calc(var(--wr, 1200px) * -1) 0 0 calc(var(--wr, 1200px) * -1);
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 34px var(--color-accent), inset 0 0 26px var(--color-accent-soft);
  transform: scale(0);
  animation: shock 1000ms cubic-bezier(.22,.72,.24,1) forwards;
}
@keyframes shock {
  0%   { transform: scale(0);    opacity: 0;   border-width: 3px; }
  8%   { opacity: 1; }
  82%  { opacity: .9; }
  100% { transform: scale(1.06); opacity: 0;   border-width: 1px; }
}


.stage-warp::after {
  content: ""; position: absolute; inset: -20% -50%;
  background: repeating-linear-gradient(100deg,
    transparent 0 14px,
    var(--color-accent-soft) 14px 15px,
    transparent 15px 34px);
  transform: translate3d(-30%, 0, 0) scaleX(.6);
  opacity: 0;
  animation: streak 680ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) forwards;
}
@keyframes streak {
  0%   { opacity: 0;   transform: translate3d(-30%, 0, 0) scaleX(.6); }
  30%  { opacity: .85; }
  100% { opacity: 0;   transform: translate3d(38%, 0, 0) scaleX(1.5); }
}


.stage.is-warping {
  animation: punch 900ms cubic-bezier(.2,.9,.25,1);
  transform-style: preserve-3d;
}
@keyframes punch {
  0%   { transform: perspective(900px) translate3d(0,0,0)      rotateY(0);     filter: none; }
  22%  { transform: perspective(900px) translate3d(0,0,-190px) rotateY(-7deg); filter: blur(3px) saturate(1.7); }
  55%  { transform: perspective(900px) translate3d(0,0,40px)   rotateY(2.5deg); filter: blur(0) saturate(1.2); }
  100% { transform: perspective(900px) translate3d(0,0,0)      rotateY(0);     filter: none; }
}


.stage-head.is-swap > * { animation: deal 520ms var(--ease-out, ease-out) both; }
.stage-head.is-swap > *:nth-child(2) { animation-delay: 70ms; }
.stage-head.is-swap > *:nth-child(3) { animation-delay: 140ms; }
.stage-head.is-swap > *:nth-child(4) { animation-delay: 210ms; }
.stage-head.is-swap > *:nth-child(n+5) { animation-delay: 280ms; }
@keyframes deal {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}


.mode-btn.just-on b { animation: ignite 820ms var(--ease-out, ease-out); }
@keyframes ignite {
  0%   { text-shadow: 0 0 0 transparent; }
  30%  { text-shadow: 0 0 28px var(--glow), 0 0 60px var(--glow); }
  100% { text-shadow: 0 0 14px var(--glow); }
}

@media (prefers-reduced-motion: reduce) {
  
  .stage-warp { display: none; }
  .stage.is-warping { animation: none; }
  .stage-head.is-swap > * { animation: fadeonly 140ms linear both; }
  .mode-btn.just-on b { animation: none; }
  @keyframes fadeonly { from { opacity: 0; } to { opacity: 1; } }
}



.bench {
  
  --u-card: 90px; --u-boss: 104px;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-sm); align-items: stretch;
}
.bench-pool {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2xs); justify-items: center;
  padding: var(--space-xs); background: var(--color-stage-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.bench-key { font: 700 9px/1 var(--font-display); letter-spacing: .22em; color: var(--color-stage-line); }

.boss-pool {
  display: grid; grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: var(--space-2xs); height: 100%; min-height: 0;
}


.boss {
  --code-c: var(--color-stage-line);
  position: relative; display: grid; justify-items: stretch; gap: 0;
  width: var(--u-boss, 108px); aspect-ratio: 1 / 1.3;
  padding: 0; cursor: pointer; overflow: hidden;
  
  contain: paint;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--code-c) 16%, transparent), var(--color-stage-3));
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform var(--dur-fast, .16s) var(--ease-out, ease-out),
              background var(--dur-fast, .16s) var(--ease-out, ease-out);
}

.boss::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  box-shadow: inset 3px 0 0 var(--code-c);
}

.boss-pick { aspect-ratio: auto; height: 100%; min-height: 0; }
.boss:hover { transform: translateY(-2px); }
.boss.dragging { opacity: .4; }

.boss.armed { outline: none; }
.boss.armed::after {
  box-shadow: inset 0 0 0 var(--rule-bold, 2px) var(--color-accent),
              inset 3px 0 0 var(--code-c);
}

.boss-no {
  position: absolute; top: 4px; left: 8px; z-index: 4;
  font: 700 var(--text-xs)/1 var(--font-display); color: var(--code-c);
  font-variant-numeric: tabular-nums;
}

.boss-art {
  width: 100%; height: 100%; display: grid; place-items: stretch;
  
  background: color-mix(in oklch, var(--code-c) 12%, transparent);
}


.boss-art .boss-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transform: scale(1.55); transform-origin: 50% 18%;
}
.boss-art img { width: 46%; height: 46%; object-fit: contain; opacity: .95; }
.boss-art-hole { display: none; }

.boss-code {
  position: absolute; top: 4px; left: 5px; z-index: 2;
  width: 18px; height: 18px; object-fit: contain;
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / .7));
}
.boss-set .boss-code { width: 20px; height: 20px; top: 5px; left: 6px; }

.boss-want {
  
  position: absolute; top: 4px; right: 5px; z-index: 4;
  width: 18px; height: 18px; object-fit: contain;
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / .8));
}

.boss-set .boss-want { display: none; }

.u-want {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklch, var(--want-c) 9%, transparent);
  box-shadow: inset 0 0 0 var(--rule) color-mix(in oklch, var(--want-c) 32%, transparent);
}
.u-want img {
  position: absolute; width: 54%; height: 54%; object-fit: contain; opacity: .22;
}
.u-want .u-plus { position: relative; color: color-mix(in oklch, var(--want-c) 70%, var(--color-stage-ink-2)); }

.boss-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 9px 5px 4px;
  background: color-mix(in oklch, var(--color-stage) 84%, transparent);
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
  border-bottom: 3px solid var(--code-c);
  font: 700 var(--text-xs)/1.15 var(--font-display); letter-spacing: var(--track-label);
  color: var(--color-stage-ink); text-align: center; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; word-break: keep-all;
}


.bench-rows { display: grid; gap: var(--space-2xs); min-width: 0; }
.bench-row {
  --code-c: var(--color-stage-line);
  position: relative;
  
  display: grid; grid-template-columns: 1fr auto auto auto 1fr;
  gap: var(--space-md); align-items: stretch; min-width: 0; min-height: 150px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-stage-2); border-left: 3px solid var(--code-c);
  transition: background var(--dur-fast, .16s) var(--ease-out, ease-out);
}
.bench-row.over, .bench-row.armed { background: var(--color-stage-3); }
.bench-row.over { outline: var(--rule-bold) dashed var(--color-accent); outline-offset: -3px; }



.bench-slots {
  display: grid; grid-template-columns: repeat(5, var(--u-card, 100px));
  gap: var(--space-xs); min-width: 0; justify-content: center;
}

.u-cell {
  display: grid; gap: 3px; width: var(--u-card, 100px);
  
  align-content: start;
}
.u-cell .cube-cell select { font-size: 10px; height: 22px; padding: 1px 5px; }
.u-cell .slot-more { font-size: 10px; height: 22px; padding: 1px 6px; }
.u-slot {
  position: relative; width: var(--u-card, 100px);
  
  aspect-ratio: 1 / 1.56;
  min-width: 0; background: var(--color-stage-3);
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.u-slot .nk {
  width: 100%; height: 100%; aspect-ratio: auto;   
}
.u-slot .slot-x {
  position: absolute; top: 1px; right: 1px; z-index: 4;
  width: 16px; height: 16px; font-size: 10px; line-height: 1;
}

.boss-noart {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0 var(--space-2xs);
  font-size: var(--text-xs); line-height: 1.25; text-align: center;
  color: var(--color-stage-ink-2); word-break: keep-all;
}
.boss-set .boss-noart { font-size: 10px; line-height: 1.15; }
.u-plus { font: 300 var(--text-lg)/1 var(--font-display); color: var(--color-stage-line); }


.boss-sheet-grid {
  display: grid; gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  padding: var(--space-xs) 0;
}
.boss-sheet-grid .boss { width: 100%; }

.boss-sheet-grid .boss-used { opacity: .5; }

.boss-set { cursor: pointer; }
.boss-set:focus-visible { outline: var(--rule-bold) solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 1100px) {
  
  .bench { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bench-pool { grid-template-rows: auto auto; }
  .bench-pool { min-width: 0; }
  .boss-pool {
    grid-template-rows: none; grid-auto-flow: column;
    grid-auto-columns: var(--u-boss, 104px);
    
    width: 100%; max-width: 100%; min-width: 0;
    
    justify-content: safe center;
    height: auto; min-height: 0;
    overflow-x: auto; padding-bottom: 4px;
  }
  .boss-pick { aspect-ratio: 1 / 1.3; height: auto; }
  .boss { width: 84px; }
  
  .boss-name { font-size: 10px; letter-spacing: 0; padding-left: 3px; padding-right: 3px; }
}
@media (max-width: 760px) {
  .bench-row { grid-template-columns: minmax(0, 1fr); }
}



.boss-set {
  align-self: stretch; height: auto; aspect-ratio: auto;
  grid-template-rows: 1fr; padding: 0; gap: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.boss-set .boss-art {
  width: 100%; height: 100%; aspect-ratio: auto; min-height: 0;
}

.boss-set .boss-no { left: auto; right: 7px; }
.boss-set .boss-art .boss-img { width: 100%; height: 100%; }
.boss-set .boss-art img { width: 34px; height: 34px; }

.boss-set .boss-name { letter-spacing: var(--track-label); line-height: 1.2; }

.boss-set.empty {
  background: var(--color-stage-3); box-shadow: inset 3px 0 0 var(--color-stage-line);
}
.boss-set.empty .boss-art {
  background: none; border: var(--rule) dashed var(--color-stage-line);
  clip-path: none; display: grid; place-items: center;
}

.boss-set.empty .u-plus {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: var(--text-2xl); font-weight: 300;
}
.boss-set.empty .boss-name { color: var(--color-stage-line); }


.row-side {
  display: grid; align-content: center; justify-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xs);
  min-width: 124px;
}

.row-side { cursor: grab; }
.row-side:hover {
  background: color-mix(in oklch, var(--code-c) 8%, transparent);
  box-shadow: inset -2px 0 0 color-mix(in oklch, var(--code-c) 45%, transparent);
}

.bench-row:has(.row-side:hover) {
  background: color-mix(in oklch, var(--code-c) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--code-c);
}
.row-side.dragging { opacity: .45; cursor: grabbing; }
.row-grip {
  font: 700 15px/1 var(--font-display); letter-spacing: -1px;
  color: var(--color-stage-line);
}
.row-side:hover .row-grip { color: var(--code-c); }
.row-no {
  font: 700 var(--text-xs)/1 var(--font-display); color: var(--code-c);
  letter-spacing: var(--track-label); font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .row-side {
    min-width: 0; padding: 0 0 4px;
    
    display: flex; flex-wrap: wrap; justify-content: center;
    grid-auto-flow: unset;
  }
  .row-side > .row-btn { flex: 0 1 auto; }
}


.boss-short::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  
  background: color-mix(in oklab, var(--color-danger, oklch(52% .19 25)) 34%, transparent);
}

.boss-hatch {
  
  position: absolute; left: 50%; top: 50%;
  width: 300%; height: 300%;
  z-index: 4; pointer-events: none; overflow: hidden;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.boss-hatch b {
  position: absolute; left: 0; right: 0; height: 6px;
  background: color-mix(in oklab, var(--color-danger, oklch(58% .20 25)) 78%, transparent);
  
  transform-origin: 100% 50%;
}


.boss-short.wipe::before { animation: hatch-soak .7s var(--ease-out, ease-out) 1; }
@keyframes hatch-soak { from { opacity: 0; } to { opacity: 1; } }


.boss-short.wipe .boss-hatch b {
  animation: bar-draw .42s cubic-bezier(.3, .7, .3, 1) 1 backwards;
}
@keyframes bar-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.boss::after { z-index: 6; }

.boss-short::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  box-shadow: inset 0 0 0 var(--rule-bold, 2px) var(--color-danger, oklch(58% .20 25)),
              inset 3px 0 0 var(--color-danger, oklch(58% .20 25));
}


.u-slot .nk-foot { border-bottom-color: transparent; }


.bench img, .u-slot img, .boss img { -webkit-user-drag: none; user-drag: none; }


.u-slot .nk-foot {
  
  border-bottom-color: color-mix(in oklab, var(--frame) 62%, #000);
}


.ubadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; margin: 0 var(--space-2xs);
  border: var(--rule) solid color-mix(in oklch, var(--color-accent) 45%, transparent);
  background: color-mix(in oklch, var(--color-accent) 12%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.ubadge b {
  font: 700 var(--text-sm)/1 var(--font-display); letter-spacing: var(--track-label);
  color: var(--color-stage-ink); max-width: 14ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  transition: filter var(--dur-fast, .16s) var(--ease-out, ease-out);
}

.ubadge.masked b { filter: blur(5px); user-select: none; }
.ubadge-eye {
  padding: 0; width: 18px; height: 18px; cursor: pointer;
  border: 0; background: none; color: var(--color-stage-ink-2);
  font: 400 12px/1 var(--font-display);
}
.ubadge-eye:hover { color: var(--color-accent); }


.bench-row.slam { animation: row-quake .55s var(--ease-out, ease-out) 1; }
.bench-row.slam::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0 18%,
    color-mix(in oklab, var(--slam-c) 55%, transparent) 34%,
    color-mix(in oklab, var(--slam-c) 100%, transparent) 50%,
    color-mix(in oklab, var(--slam-c) 55%, transparent) 66%,
    transparent 82% 100%);
  mix-blend-mode: screen;
  animation: row-sweep 1.05s cubic-bezier(.16, .85, .2, 1) 1;
}
@keyframes row-sweep {
  from { transform: translateX(-115%); opacity: 1; }
  to   { transform: translateX(115%);  opacity: 0; }
}
@keyframes row-quake {
  0%   { transform: translateX(0) scaleY(1); }
  10%  { transform: translateX(11px) scaleY(1.07); }
  28%  { transform: translateX(-7px) scaleY(.965); }
  48%  { transform: translateX(5px) scaleY(1.025); }
  68%  { transform: translateX(-3px) scaleY(.99); }
  84%  { transform: translateX(1px) scaleY(1.005); }
  100% { transform: translateX(0) scaleY(1); }
}


.roster { position: relative; }
.roster.wash::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--slam-c) 26%, transparent),
      color-mix(in oklab, var(--slam-c) 6%, transparent) 40%,
      transparent 72%);
  animation: roster-wash 1.1s var(--ease-out, ease-out) 1;
}
@keyframes roster-wash {
  0%   { opacity: 0; transform: translateY(-26px) scaleY(.9); }
  12%  { opacity: 1; transform: translateY(0) scaleY(1); }
  45%  { opacity: .9; }
  100% { opacity: 0; }
}



.u-cell { position: relative; contain: paint; }
.u-cell.slam { contain: none; }
.u-cell.slam { z-index: 4; }
.u-cell.slam .u-slot { animation: slot-punch .5s cubic-bezier(.2, 1.8, .35, 1) 1; }

.u-cell.slam::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 1 / 1.56; pointer-events: none; z-index: 5;
  border: 3px solid color-mix(in oklab, var(--frame, var(--color-accent)) 100%, transparent);
  box-shadow: 0 0 26px color-mix(in oklab, var(--frame, var(--color-accent)) 80%, transparent),
              inset 0 0 22px color-mix(in oklab, var(--frame, var(--color-accent)) 55%, transparent);
  animation: slot-shock .7s cubic-bezier(.1, .8, .2, 1) 1;
}
@keyframes slot-punch {
  0%   { transform: scale(.62) translateY(-10px); }
  34%  { transform: scale(1.2) translateY(0); }
  58%  { transform: scale(.93); }
  78%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes slot-shock {
  0%   { opacity: .95; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.65); }
}


.bench-row.nudge { animation: row-nudge .34s var(--ease-out, ease-out) 1; }
@keyframes row-nudge {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(4px); }
  62%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bench-row.slam, .bench-row.slam::after, .bench-row.nudge,
  .roster.wash::before, .u-cell.slam .u-slot, .u-cell.slam::after { animation: none; }
  .u-cell.slam::after { display: none; }
}


.dust {
  position: absolute; left: 50%; top: calc(var(--u-card, 100px) * 1.4);
  width: 0; height: 0; pointer-events: none; z-index: 5;
}
.dust i {
  position: absolute; left: 0; top: 0;
  width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%;
  background: color-mix(in oklab, var(--frame, var(--color-stage-ink-2)) 45%, #cfcfcf);
  opacity: 0;
  animation: dust-fly .62s cubic-bezier(.15, .7, .25, 1) var(--d, 0ms) 1;
}
@keyframes dust-fly {
  0%   { opacity: .85; transform: translate(0, 0) scale(.5); }
  55%  { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--dx, 20px), var(--dy, -18px)) scale(1.3); }
}


.bench-rows.shuffling .bench-row { transition: transform .18s var(--ease-out, ease-out), opacity .18s; }
.bench-row.lifted {
  
  transform: scale(1.015) translateY(-3px); z-index: 5;
  box-shadow: 0 14px 34px oklch(0% 0 0 / .45);
}
.bench-rows.shuffling .bench-row:not(.lifted) { opacity: .58; }

.bench-row.swap {
  transform: scale(.985);
  box-shadow: inset 0 0 0 2px var(--code-c);
  opacity: 1 !important;
}



#pool .nk.beat { animation: card-beat 2.3s var(--ease-in-out, ease-in-out) var(--hit-d, 0ms) 3; z-index: 2; }

#pool .nk.lit {
  
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--hit-c, var(--color-accent)) 90%, transparent),
              0 0 12px color-mix(in oklab, var(--hit-c, var(--color-accent)) 45%, transparent);
}

@keyframes card-beat {
  0%   { transform: translateY(0) scale(1); }
  26%  { transform: translateY(-11px) scale(1.08); }
  52%  { transform: translateY(0) scale(.985); }
  66%  { transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #pool .nk.beat, .dust i { animation: none; }
  .dust { display: none; }
  .boss-short.wipe::before, .boss-short.wipe .boss-hatch b { animation: none; }
}




.row-btn {
  --c: 5px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 108px; padding: 6px 5px; cursor: pointer;
  border: var(--rule) solid var(--color-stage-line);
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  font: 600 var(--text-xs)/1.2 var(--font-body); white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.row-btn:hover:not(:disabled) { border-color: var(--code-c); color: var(--color-stage-ink); }
.row-btn:disabled { opacity: .38; cursor: default; }
.row-btn i { font-style: normal; font-size: 8px; transition: transform var(--dur-fast); }

.row-raid i { font-style: normal; font-size: 13px; line-height: 1; }
.row-raid span { white-space: nowrap; }

.row-raid { flex-wrap: wrap; row-gap: 2px; }
.row-cfg { flex: 1 0 100%; text-align: center; font: 500 10px/1.2 var(--font-body); color: var(--color-stage-ink-2); }
.row-cfg-rec { color: var(--color-accent); }

.row-raid.has, .row-cycle.has {
  border-color: var(--color-accent);
  color: var(--color-stage-ink);
}
.row-calc[data-state="loading"] { opacity: .6; cursor: progress; }


.row-total {
  margin-top: var(--space-2xs);
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  justify-content: center;
  font: 800 var(--text-xl, 22px)/1 var(--font-display);
  color: var(--color-accent); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-shadow: 0 0 18px color-mix(in oklab, var(--color-accent) 45%, transparent);
}
.row-total.err {
  color: var(--color-danger, oklch(58% .20 25));
  font-size: var(--text-sm); text-shadow: none;
}


#bench-rows > #btpanel {
  position: static; transform: none; margin: 0 0 var(--space-2xs);
  max-width: none; width: auto;
}


.pick-sheet { width: min(92vw, 980px); max-height: 86vh; }
.pick-bar {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule) solid var(--color-stage-line);
}
.pick-bar .search { flex: 1 1 200px; min-width: 160px; }
.pick-count {
  margin-left: auto; font: 700 var(--text-xs)/1 var(--font-display);
  color: var(--color-stage-ink-2); font-variant-numeric: tabular-nums;
}
.pick-body { overflow: auto; padding: var(--space-sm); }
.pick-body .pool { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

.chip-elem { --code-c: var(--color-stage-line); padding: 3px 6px; }
.chip-elem img { width: 16px; height: 16px; object-fit: contain; display: block; }
.chip-elem.on { border-color: var(--code-c); background: color-mix(in oklab, var(--code-c) 22%, transparent); }



.raid-sheet { width: min(94vw, 680px); max-height: 86vh; }

.raid-sheet[open] { display: flex; flex-direction: column; }
.raid-sheet .sheet-head { flex: none; }
.raid-sheet .sheet-body {
  flex: 1 1 auto; min-height: 0; max-height: none;
  overflow-y: auto; padding: var(--space-sm);
}

#raid-host > #btpanel {
  position: static; transform: none; margin: 0;
  max-width: none; width: auto; border: 0; box-shadow: none; background: none;
  
  max-height: none; overflow: visible;
}


#raid-host .fpanel-head > b, #raid-host #bt-close { display: none; }
#raid-host .fpanel-head { justify-content: flex-end; }

#raid-host .fpanel-head { border-bottom: 0; padding-bottom: 0; }
#raid-host .fpanel-head #bt-clear[hidden] { display: inline-flex !important; visibility: hidden; }   

#btpanel #bt-cycle {
  border: 0; padding: var(--space-sm) 0 0; margin-top: var(--space-sm);
  border-top: var(--rule) solid var(--color-stage-line);
}
#btpanel #bt-cycle > summary {
  list-style: none; pointer-events: none; cursor: default;
  font: 700 var(--text-sm)/1.6 var(--font-body); letter-spacing: 0;
  color: var(--color-stage-ink); margin-bottom: var(--space-2xs);
}
#btpanel #bt-cycle > summary::-webkit-details-marker { display: none; }
#btpanel #bt-cycle > summary::before, #btpanel #bt-cycle > summary::after { content: none; }


:root[data-mode="union"] .btn-amber {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
:root[data-mode="union"] .btn-amber:hover:not(:disabled) { filter: brightness(1.12); }


.row-wipe:hover:not(:disabled) {
  border-color: var(--color-danger, oklch(58% .20 25));
  color: var(--color-danger, oklch(58% .20 25));
}


.mode-cell { position: relative; display: inline-flex; align-items: stretch; }

.mode-beta {
  position: absolute; bottom: calc(100% - 3px); right: -2px;
  padding: 1px 4px; font-style: normal;
  font: 700 8px/1 var(--font-display); letter-spacing: .1em;
  color: var(--color-stage-ink-2);
  background: var(--color-stage-3);
  border: var(--rule) solid var(--color-stage-line);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  pointer-events: none;
}


@media (max-width: 40rem) {
  .mode-sw { padding: 12px 0 2px; }
  .mode-slash { margin: 2px 5px; }
  
  .mode-btn { padding: 3px 2px 4px; clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
  .mode-btn b { letter-spacing: .06em; }
  .mode-btn i { letter-spacing: .14em; }
  .mode-beta { right: 0; }
}


.bench-sum {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-accent) 14%, transparent), transparent 70%);
  box-shadow: inset 3px 0 0 var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.bench-sum-key {
  font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .2em;
  color: var(--color-stage-ink-2);
}
.bench-sum-val {
  font: 800 var(--text-3xl, 34px)/1 var(--font-display);
  color: var(--color-accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px color-mix(in oklab, var(--color-accent) 50%, transparent);
}
.bench-sum-val.partial { opacity: .75; }
.bench-sum-note {
  font: 500 var(--text-xs)/1.3 var(--font-body); color: var(--color-stage-ink-2);
}


:root[data-mode="union"] .roster {
  --color-accent:      oklch(70% 0.145 235);
  --color-accent-deep: oklch(56% 0.150 240);
  --color-accent-soft: oklch(70% 0.145 235 / 0.16);
}

.bench-row[draggable="true"] { cursor: grab; }
.bench-row.lifted { cursor: grabbing; }

.bench-row .u-slot, .bench-row .boss, .bench-row .row-btn { cursor: pointer; }


.preset-boss {
  font: 700 var(--text-xs)/1.2 var(--font-display);
  color: var(--color-stage-ink-2);
  
  flex: 0 1 auto; min-width: 5.5rem; max-width: 8rem;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
}


.row-total-el {
  font: 700 var(--text-xs)/1 var(--font-display);
  color: var(--color-stage-ink-2); letter-spacing: .14em;
  text-shadow: none;
}


.u-undo {
  
  position: absolute; bottom: 2px; left: 2px; z-index: 6;
  width: 18px; height: 18px; padding: 0; cursor: pointer;
  border: var(--rule) solid color-mix(in oklab, var(--color-stage-line) 70%, transparent);
  background: color-mix(in oklab, var(--color-stage) 70%, transparent);
  color: var(--color-stage-ink-2); font: 400 11px/1 var(--font-display);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.u-undo:hover {
  border-color: var(--color-accent); color: var(--color-stage-ink);
  background: color-mix(in oklab, var(--color-accent) 20%, var(--color-stage) 85%);
}


.row-grab { min-width: var(--space-md); align-self: stretch; cursor: grab; }
.row-grab:active { cursor: grabbing; }


.u-slot.has-undo .nk-foot, .slot.has-undo .nk-foot { padding-left: 22px; }

.slot-more:disabled { opacity: .45; cursor: default; }


#ctrl-host > #ctrl-panel {
  position: static; transform: none; margin: 0;
  max-width: none; width: auto; border: 0; box-shadow: none; background: none;
}




.boss-x {
  position: absolute; top: 3px; right: 3px; z-index: 5;
  opacity: .45;
  transition: opacity var(--dur-fast, .16s) var(--ease-out, ease-out);
}
.boss:hover .boss-x { opacity: 1; }


#union-level { width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }
#union-level::placeholder { color: var(--color-stage-ink-2); opacity: 1; }
#union-season { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) { #union-season { width: 9rem; } }


:root[data-fx="off"] :is(
  .stage.is-warping, .stage-head.is-swap > *, .mode-btn.just-on b,
  .boss-short.wipe::before, .boss-short.wipe .boss-hatch b,
  .bench-row.slam, .bench-row.slam::after, .bench-row.nudge,
  .roster.wash::before, .u-cell.slam .u-slot, .u-cell.slam::after,
  .dust i, #pool .nk.beat) {
  animation: none !important;
}

.fx-btn { font-size: 13px; line-height: 1; margin-left: 0; align-self: center; }
.fx-btn[aria-pressed="true"] { opacity: .55; }


.nd-toggle {
  --nd-glow: var(--color-amber);
  position: relative; flex: none;
  min-width: max-content;                 
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  align-self: center; margin: 0;
  
  padding: 3px 0 4px;
  border: 0; cursor: pointer; line-height: 1;
  
  background: linear-gradient(90deg, transparent, var(--color-stage-line), transparent) no-repeat 0 100% / 100% var(--rule);
  color: var(--color-stage-ink-2);
  transform-origin: left center;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.nd-toggle::before { content: ""; position: absolute; inset: -8px -4px; }
.nd-toggle b {
  font: 700 var(--text-sm)/1 var(--font-display);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nd-toggle i {
  font: 600 9px/1 var(--font-display); font-style: normal;
  letter-spacing: 0.22em; text-transform: uppercase;
  
  color: color-mix(in oklab, currentColor 50%, transparent);
}

.nd-on, .nd-off { margin-left: 0.45em; font-weight: 700; }
.nd-on { display: none; color: var(--color-stage-ink); }
.nd-off { color: color-mix(in oklab, var(--color-alert) 60%, var(--color-stage-ink-2)); }
.nd-toggle[aria-pressed="true"] .nd-on, .nd-toggle[data-state="success"] .nd-on { display: inline; }
.nd-toggle[aria-pressed="true"] .nd-off, .nd-toggle[data-state="success"] .nd-off { display: none; }

.nd-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule);
  background: linear-gradient(90deg, transparent, var(--nd-glow), transparent);
  filter: drop-shadow(0 0 3px var(--nd-glow));
  opacity: 0; transform: scaleX(0.2);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nd-toggle:hover { color: var(--color-stage-ink); }
}
.nd-toggle.is-hover { color: var(--color-stage-ink); }
.nd-toggle:focus-visible, .nd-toggle.is-focus { outline: var(--rule-bold) solid var(--focus-ring); outline-offset: 2px; }

.nd-toggle:active, .nd-toggle.is-active { color: var(--color-stage-ink); transform: scale(0.96); }
.nd-toggle:disabled, .nd-toggle.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.nd-toggle[aria-pressed="true"], .nd-toggle[data-state="success"] { color: var(--color-stage-ink); }
.nd-toggle[aria-pressed="true"] b, .nd-toggle[data-state="success"] b { color: var(--nd-glow); text-shadow: 0 0 14px var(--nd-glow); }
.nd-toggle[aria-pressed="true"]::after, .nd-toggle[data-state="success"]::after { opacity: 1; transform: none; }

.nd-toggle[data-state="loading"]::after { opacity: 1; animation: nd-wake 1.1s var(--ease-in-out) infinite; }
@keyframes nd-wake { 0%, 100% { transform: scaleX(0.2); } 50% { transform: scaleX(1); } }

.nd-toggle[data-state="error"] { --nd-glow: var(--color-alert); }
.nd-toggle[data-state="error"]::after { opacity: 1; transform: none; }

:root[data-dororong="on"][data-mode] .nd-toggle { --nd-glow: var(--color-amber-deep); }
:root[data-dororong="on"][data-mode] .nd-toggle[data-state="error"] { --nd-glow: var(--color-alert); }   
:root[data-dororong="on"][data-mode] .nd-toggle b { text-shadow: none; }

:root[data-mode="museum"] .nd-toggle { --nd-glow: var(--color-stage-ink); }
:root[data-mode="museum"] .nd-toggle[data-state="error"] { --nd-glow: var(--color-alert); }
:root[data-dororong="on"][data-mode] .nd-toggle::after { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .nd-toggle, .nd-toggle::after { transition: none; }
  .nd-toggle[data-state="loading"]::after { animation: none; transform: none; }
}
:root[data-fx="off"] .nd-toggle[data-state="loading"]::after { animation: none; transform: none; }

@media (max-width: 40rem) {
  .nd-toggle b { letter-spacing: 0.06em; }
  .nd-toggle i { letter-spacing: 0.14em; }
}

.nd-boss-btn {
  display: flex; align-items: center; gap: var(--space-2xs); max-width: 16rem;
  background: var(--color-stage-2); border: var(--rule) solid var(--color-stage-line);
  color: var(--color-stage-ink); padding: 4px var(--space-xs);
  font-size: var(--text-sm); border-radius: var(--radius-hair); cursor: pointer;
}
.nd-boss-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-boss-ico { width: 18px; height: 20px; display: block; flex: none; }
@media (hover: hover) and (pointer: fine) { .nd-boss-btn:hover { border-color: var(--color-amber); } }
.nd-boss-btn:focus-visible { outline: var(--rule-bold) solid var(--focus-ring); outline-offset: 2px; }

#btpanel.nd-on > :not(.fpanel-head):not(#bt-nd) { display: none !important; }
#btpanel.nd-on #bt-clear { display: none !important; }
:root[data-nd="on"] #boss-rec-solo, :root[data-nd="on"] .boss-gear { display: none !important; }

.bt-nd-note { display: none; margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2);
  text-wrap: pretty; word-break: keep-all; }

#bt-cycle .bt-row em { word-break: keep-all; }
:root[data-nd="on"] .bt-nd-note { display: block; }
:root[data-nd="on"] #bt-cycle .bt-row:has(#bt-first, #bt-regen, #bt-gauge-acc) { display: none; }
.bt-nd { display: grid; gap: var(--space-sm); }
.nd-boss-line { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }
.nd-boss-cur { font-size: var(--text-sm); color: var(--color-stage-ink); }
.nd-note { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.nd-boss-note { margin: 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); }

.nd-boss-sheet .sheet-body { gap: var(--space-md); }

.nd-card-name small { display: block; font-size: 9px; letter-spacing: var(--track-label); color: var(--color-stage-ink-2); }
.nd-boss-note:empty { display: none; }


:root[data-i18n="pending"] body { visibility: hidden; }


:root[data-lang="ja"] {
  --font-body: "Pretendard JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
}
:root[data-lang="zh"] {
  --font-body: "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

.credit-lang { margin-top: var(--space-sm); display: flex; gap: var(--space-2xs); justify-content: center; flex-wrap: wrap; }
.lang-btn {
  appearance: none; border: var(--rule) solid var(--color-stage-line); background: transparent;
  color: var(--color-stage-ink-2); font: inherit; font-size: var(--text-xs);
  padding: 2px 10px; cursor: pointer; border-radius: 2px;
}
.lang-btn:hover { color: var(--color-stage-ink); border-color: var(--color-stage-ink-2); }
.lang-btn[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); cursor: default; }


@media (max-width: 1100px) {
  .bench-row > .boss-set {
    align-self: center;
    width: var(--u-boss, 84px);
    height: calc(var(--u-boss, 84px) * 1.3);
    aspect-ratio: auto;
  }
}


@media (max-width: 760px) {
  .bench-pool { display: none; }

  
  .bench-slots { grid-template-columns: repeat(auto-fit, var(--u-card, 90px)); }

  
  .bench-slots {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%; max-width: calc(5 * var(--u-card, 90px) + 4 * var(--space-xs));
    margin-inline: auto;
  }
  .u-cell, .u-slot { width: auto; min-width: 0; }
  
  .u-slot { aspect-ratio: 1 / 1.95; }
}


#union-fbc-out { grid-column: 1 / -1; }



#mode-museum { --glow: var(--color-museum); }
:root[data-mode="museum"] #mode-museum { --glow: var(--color-accent); }


.mbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
  padding: var(--space-xs) 0 var(--space-sm);
  border-bottom: var(--rule) solid var(--color-stage-line);
}
.mbar-pick { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; min-width: 0; }
.mbar-cond { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-left: auto; }
.mbar-arrow { color: var(--color-stage-ink-2); font-size: 22px; line-height: 1; padding: 0 2px; }

.mbar-pick .boss-gear-all { align-self: center; }


.squad-row { display: flex; align-items: stretch; gap: var(--space-sm); }
.squad-row > .squad { flex: 1 1 auto; min-width: 0; }
.museum-pool-wrap {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-2xs);
  justify-items: center; align-content: start;
  padding: var(--space-xs); background: var(--color-stage-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.museum-pool { display: grid; gap: 6px; --u-boss: 96px; align-content: start; }
.museum-pool .boss, .museum-target .boss { aspect-ratio: 1 / 1.12; height: auto; }

.squad > .museum-target { --u-boss: 104px; align-self: stretch; }
.squad > .museum-target .boss { width: 104px; height: 100%; min-height: 200px; aspect-ratio: auto; }
.museum-target .boss.empty { cursor: default; }
@media (min-width: 1100px) {
  
  :root[data-mode="museum"] .squad {
    grid-template-columns: minmax(8rem, auto) 104px minmax(0, max-content);
  }
  :root[data-mode="museum"] .squad > .museum-target { grid-column: 2; width: 104px; min-width: 0; }
  :root[data-mode="museum"] .squad > .squad-main { grid-column: 3; }
  
  :root[data-mode="museum"] .squad > .squad-foot { grid-column: 2 / -1; }
}
@media (max-width: 1099px) {
  .squad-row { flex-direction: column; }
  .museum-pool { grid-auto-flow: column; justify-content: start; }
  .squad > .museum-target { margin: var(--space-xs) 0; }
  .squad > .museum-target .boss { width: 96px; height: auto; min-height: 0; aspect-ratio: 1 / 1.12; }
}

.museum-pool .boss-gear { background: none; clip-path: none; width: 22px; height: 22px; }

@media (hover: none) {
  .museum-pool .boss-gear { width: 36px; height: 36px; top: 12px; right: -6px; }
  .museum-pool .boss-gear::before { content: none; }
}

.squad-left #museum-raid { justify-content: center; }
@media (min-width: 1100px) { .squad-left #museum-raid { width: 100%; } }

.squad-notes { text-align: left; }
.squad-notes:empty { display: none; }
.museum-target.over .boss::after {
  box-shadow: inset 0 0 0 var(--rule-bold, 2px) var(--color-accent), inset 3px 0 0 var(--code-c);
}

.boss-unv {
  position: absolute; top: 5px; left: 26px; z-index: 4;
  font: 700 10px/1 var(--font-display); color: var(--color-stage-ink);
  padding: 2px 4px; background: color-mix(in oklch, var(--color-alert) 70%, transparent);
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}


.museum-buffs { display: inline-flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-left: var(--space-2xs); }
.museum-buff {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 6px; font-size: var(--text-sm); color: var(--color-stage-ink);
  background: var(--color-stage-2);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.museum-buff-key {
  font: 700 9px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-stage-ink-2); padding: 2px 4px; background: var(--color-stage-3);
}
.museum-buff.weekly.on { box-shadow: inset 0 -2px 0 var(--color-accent); }
.museum-buff.weekly.on .museum-buff-key { color: var(--color-accent); }
.museum-buff.unsupported { opacity: .6; }
.museum-buff select { max-width: 18rem; }
.museum-weekly-in { display: inline-flex; align-items: center; gap: 4px; }
.museum-weekly-in input { width: 5.5em; }
.museum-weekly-in em { font-style: normal; color: var(--color-stage-ink-2); font-size: var(--text-sm); }
#museum-bar #museum-step { width: 5em; }
.museum-info {
  align-self: center; color: var(--color-stage-ink-2); font-size: var(--text-sm);
  white-space: nowrap;
}


.score-step {
  margin-left: var(--space-sm); padding: 2px 8px;
  color: var(--color-accent); font-weight: 700; letter-spacing: .04em;
  background: var(--color-accent-soft);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}


.museum-out {
  margin: var(--space-md) 0; padding: var(--space-md);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%);
  box-shadow: inset 3px 0 0 var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.museum-hero .hero { color: var(--color-accent); }
.museum-track { margin: var(--space-sm) 0 var(--space-md); }
.museum-bar-track {
  position: relative; height: 10px; margin: 14px 0 18px;
  background: var(--color-stage-3);
}
.museum-bar-base, .museum-bar-gain { position: absolute; top: 0; bottom: 0; }
.museum-bar-base { left: 0; background: color-mix(in oklab, var(--color-accent) 35%, transparent); }
.museum-bar-gain { background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent-soft); }
.museum-bar-tick {
  position: absolute; top: 100%; transform: translateX(-50%);
  margin-top: 3px; font: 600 10px/1 var(--font-display, inherit);
  color: var(--color-stage-ink-2); letter-spacing: .04em;
}
.museum-bar-tick::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; margin-bottom: 3px;
  width: 1px; height: 10px; background: var(--color-stage-line);
}
.museum-bar-tick.on { color: var(--color-accent); }
.museum-bar-tick:last-child { transform: translateX(-100%); }
.museum-bar-tick:last-child::before { left: auto; right: 0; }
.museum-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.museum-row {
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  padding: 4px 0; border-bottom: var(--rule) solid var(--color-stage-line);
}
.museum-row.off { color: var(--color-stage-ink-2); }
.museum-row-dmg { min-width: 6em; font-variant-numeric: tabular-nums; }
.museum-row-step { font-weight: 700; color: var(--color-accent); }
.museum-row-frac, .museum-row-lv { color: var(--color-stage-ink-2); font-size: var(--text-sm); }
.museum-note { margin: var(--space-sm) 0 0; color: var(--color-stage-ink-2); font-size: var(--text-sm); }



.side-gap { display: block; height: var(--space-sm); }

.reco-choose { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.reco-choice {
  display: grid; justify-items: center; gap: 4px; padding: var(--space-xs) 4px;
  background: var(--color-stage-2); border: var(--rule) solid var(--color-stage-line); cursor: pointer;
  color: var(--color-stage-ink); font-size: var(--text-xs);
}
.reco-choice:hover { border-color: var(--color-accent); }
.reco-choice .reco-face { width: 48px; height: 48px; }
.reco-choice b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reco-choice-plus { width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; color: var(--color-stage-line); }
.reco-back { justify-self: start; }
.reco-else { font: 600 10px/1 var(--font-display); font-style: normal; color: var(--color-amber); flex: none; }
.reco-sheet { width: min(36rem, calc(100vw - 1.5rem)); }
.reco-body { display: grid; gap: var(--space-xs); align-content: start; }
.reco-now { margin: 0; font-size: var(--text-sm); color: var(--color-stage-ink-2); }
.reco-now b { color: var(--color-stage-ink); }
.reco-list { display: grid; gap: 4px; }
.reco-row {
  display: grid; grid-template-columns: 1.6rem 40px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-xs);
  padding: 4px 6px; background: var(--color-stage-2);
  border-left: 3px solid transparent;
}
.reco-row.cur { border-left-color: var(--color-accent); }
.reco-rank { font: 700 var(--text-xs)/1 var(--font-num); color: var(--color-stage-ink-2); text-align: right; }
.reco-face { width: 40px; height: 40px; display: block; background: transparent; overflow: hidden; flex: none; }
.reco-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reco-name { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.reco-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.reco-burst { font: 600 10px/1 var(--font-display); font-style: normal; color: var(--color-stage-ink-2); flex: none; }
.reco-dmg { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reco-dmg > b { font: 600 var(--text-sm)/1 var(--font-num); color: var(--color-amber); }
@media (max-width: 30rem) {
  .reco-row { grid-template-columns: 1.3rem 32px minmax(0, 1fr) auto; }
  .reco-row .reco-face { width: 32px; height: 32px; }
  .reco-row .btn { grid-column: 1 / -1; justify-self: end; }
}

.lab-srv { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--space-xs) 0; }


.btn-split { display: flex; gap: 2px; min-width: 0; }
.btn-split > .btn { flex: 1 1 auto; min-width: 0; padding-left: var(--space-sm); padding-right: var(--space-sm); }
.squad-side .btn-split > .btn { width: auto; }
.btn-split > .btn:first-child { clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }
.btn-split > .btn:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%); }

.btn-split.one > .btn { clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }


.lab-excl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: var(--space-xs) 0; }
.lab-excl > .field-label { margin-right: 2px; }
.lab-excl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0 2px 2px;
  background: var(--color-stage-2); border: var(--rule) solid var(--color-stage-line); font-size: var(--text-xs); }
.lab-excl-chip .reco-face { width: 22px; height: 22px; }
.lab-excl-x { border: 0; background: none; color: var(--color-stage-ink-2); cursor: pointer;
  font-size: var(--text-sm); line-height: 1; padding: 0 5px; }
.lab-excl-x:hover { color: var(--color-alert); }
.lab-excl-none { font-size: var(--text-xs); color: var(--color-stage-ink-2); }



.slot-sw { display: inline-flex; align-items: stretch;
  border: var(--rule) solid var(--color-stage-line); background: var(--color-stage-2); }
.slot-sw > * + * { border-left: var(--rule) solid var(--color-stage-line); }
.slot-pill { border: 0; background: none; max-width: 15ch;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--color-stage-ink-2); font: 600 var(--text-xs)/1 var(--font-display);
  padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.slot-pill.on { background: var(--color-accent); border-color: var(--color-accent); color: #000; }
.slot-chip { display: inline-flex; align-items: stretch; }
.slot-chip .slot-pill { border: 0; background: none; }
.slot-chip.on .slot-pill { background: var(--color-accent); color: #000; }
.slot-drop { border: 0; background: none; color: var(--color-stage-ink-2); cursor: pointer;
  font-size: var(--text-sm); line-height: 1; padding: 0 4px; }
.slot-drop:hover { color: var(--color-alert); }


.lab-draft-row { grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; }
.lab-draft-names { flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.lab-draft-names .reco-face { width: 28px; height: 28px; }
.lab-draft-names > b { flex-basis: 100%; white-space: normal; overflow: visible; font-size: var(--text-xs); }
@media (max-width: 30rem) {
  .lab-draft-row { grid-template-columns: 1.3rem minmax(0, 1fr) auto; }
}


.growth-sheet { width: min(40rem, calc(100vw - 1.5rem)); }
.growth-body { display: grid; gap: var(--space-sm); }
.growth-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.growth-row .field-label { color: var(--color-stage-ink-2); font-size: var(--text-sm); }
.growth-amt { width: 5rem; background: var(--color-stage-3); color: var(--color-stage-ink);
  border: var(--rule) solid var(--color-stage-line); padding: 4px var(--space-xs); font-family: var(--font-num); }
.growth-group { margin-top: var(--space-xs); }

.growth-form .share-pick-note + .share-pick-note { margin-top: var(--space-2xs); }
.growth-group h4 { margin: 0 0 4px; font: 700 var(--text-sm)/1.3 var(--font-display); color: var(--color-accent); }
.growth-row-item .reco-dmg > b { color: var(--color-amber); }
.growth-row-item .reco-dmg > span { font-size: var(--text-xs); color: var(--color-stage-ink-2); }

.growth-skip h4 { color: var(--color-stage-ink-2); }
.growth-skip-line { margin: 2px 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); line-height: 1.45; }
.growth-skip-line > b { color: var(--color-stage-ink); margin-right: 4px; }
.growth-skip-line > i { margin-right: 6px; }


.row-grab-l { display: grid; place-items: center; }
@media (max-width: 760px) {
  .row-grab-l { display: none; }
}

.inline-ask-picks { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.inline-ask-rows { flex-wrap: wrap; }

.preset-pick { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); align-self: center; flex: none; }
.preset-line.off > :not(.preset-pick) { opacity: .35; }


.row-btn.row-calc:not(:disabled) {
  background: var(--color-accent); color: var(--color-accent-ink);
  border-color: var(--color-accent); font-weight: 700;
}
.row-btn.row-calc:not(:disabled):hover { filter: brightness(1.12); color: var(--color-accent-ink); }


.sheet-body, .reco-body, .growth-body { overscroll-behavior: contain; }
html:has(dialog.sheet[open]), html:has(dialog.sheet[open]) body { overflow: hidden; }


.nk.nk-preview .nk-soon {
  position: absolute; inset: 0 0 auto; text-align: center;
  padding: 3px 4px 4px;
  font: 800 10px/1 var(--font-display, inherit); letter-spacing: .1em;
  color: #171208;
  background: var(--color-amber, #e8b24a);
  border-bottom: var(--rule) solid color-mix(in oklab, var(--color-amber, #e8b24a) 55%, #000);
  box-shadow: 0 3px 10px rgb(0 0 0 / .6);
  pointer-events: none; z-index: 6;
}
.nk.nk-preview .nk-rail, .nk.nk-preview .nk-rail-r { margin-top: 17px; }
.nk.nk-preview.compact .nk-soon { font-size: 8px; padding: 2px 2px 3px; letter-spacing: .02em; }
.nk.nk-preview.compact .nk-rail, .nk.nk-preview.compact .nk-rail-r { margin-top: 0; }


.step.off { opacity: .45; cursor: default; }
.step.off.on { opacity: 1; }
.grp-note { margin: 2px 0 4px; font-size: var(--text-xs); color: var(--color-text-muted); }


.lab-sheet { width: min(40rem, calc(100vw - 1.5rem)); }
.lab-body { display: grid; gap: var(--space-sm); align-content: start; }

.lab-warn { margin-top: var(--space-xs); color: var(--color-text-muted); }



.calc-wip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(255, 193, 7, 0.10);
  border-bottom: 1px solid var(--color-amber-deep);
  color: var(--color-amber);
  font-size: var(--text-sm); text-align: center;
}
.calc-wip .btn { text-decoration: none; }

.guide-p { margin: 0 0 var(--space-sm); line-height: 1.7; }
.guide-p:last-child { margin-bottom: 0; }

.guide-p b { color: var(--color-amber); font-weight: 700; }

.guide-link { margin-top: var(--space-md); }

.notice-pin {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule) solid var(--color-stage-line);
}


.lab-rows { display: grid; gap: var(--space-sm); margin: var(--space-xs) 0 var(--space-sm); }
.lab-row-pick {
  display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--space-sm);
  padding: 0; overflow: hidden; text-align: left; cursor: pointer; border-radius: 8px;
  background: var(--color-stage-2); border: var(--rule) solid var(--color-stage-line);
  color: var(--color-stage-ink);
}
.lab-row-pick:hover:not(:disabled) { border-color: var(--color-accent); }
.lab-row-pick:disabled { opacity: 0.45; cursor: default; }

.lab-row-art { display: block; width: 96px; height: 56px; overflow: hidden; background: var(--color-stage-3); }
.lab-row-pick.empty .lab-row-art { background: none; }
.lab-row-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.lab-row-txt { display: grid; gap: 2px; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; min-width: 0; }
.lab-row-txt b { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-row-sub { font-size: var(--text-xs); color: var(--color-text-muted); }

.lab-card { border: var(--rule) solid var(--color-stage-line); border-radius: 8px; padding: var(--space-sm); display: grid; gap: var(--space-xs); }
.lab-card h3 { margin: 0; font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-xs); }
.lab-card h3 .lab-tag { font: 700 9px/1 var(--font-display); letter-spacing: .08em; padding: 2px 5px; border: var(--rule) solid var(--color-stage-line); color: var(--color-text-muted); }
.lab-card p { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.lab-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center; font-size: var(--text-xs); padding: 4px 0; border-top: var(--rule) solid var(--color-stage-line); }
.lab-row:first-of-type { border-top: 0; }
.lab-row .lab-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lab-row .lab-who .reco-face { width: 28px; height: 28px; }
.lab-row .lab-what { color: var(--color-text-muted); }
.lab-row .lab-what b { color: var(--color-text); }
.lab-sum { font-size: var(--text-sm); }
.lab-sum b { color: var(--color-accent); }
.lab-acts { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.lab-gain { color: var(--color-text-muted); font-size: var(--text-xs); margin-left: .35em; white-space: nowrap; }
.lab-note { font-size: var(--text-xs); color: var(--color-text-muted); }


#bosslink-recwrap { display: grid; gap: var(--space-2xs); }
#bosslink-recwrap .prose { margin-bottom: 0; }

.rec-code {
  display: inline-block;
  margin-left: 2px;
  padding: 2px var(--space-xs);
  background: var(--color-stage-3);
  border: var(--rule) solid var(--color-stage-line);
  color: var(--color-stage-ink);
  font-family: var(--font-num);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}


.rec-badge.rank { color: var(--color-ok); }


.rank-sheet { max-width: min(46rem, calc(100vw - 1.5rem)); width: min(46rem, calc(100vw - 1.5rem)); }
.rank-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 6px 0 4px; }
.rank-lab { font: 500 12px/1.4 var(--font-body); color: var(--color-fg-muted); display: inline-flex; gap: 6px; align-items: center; }

.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; padding: 8px 10px;
  border: var(--rule) solid var(--color-border); cursor: pointer; }

.rank-row input[type=checkbox] { grid-row: 1 / span 2; margin-top: 4px; }
.rank-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rank-no { font: 700 12px/1.5 var(--font-display); color: var(--color-accent); }
.rank-nm { font-weight: 700; }
.rank-union { font-size: 12px; color: var(--color-fg-muted); }
.rank-dmg { margin-left: auto; font: 700 13px/1.5 var(--font-display); }
.rank-have { font-size: 11px; color: var(--color-fg-muted); }

.rank-decks { display: flex; flex-direction: column; gap: 6px; }

.rank-sheet { max-height: calc(100vh - 2rem); overflow-y: auto; }
.rank-sheet .sheet-body { max-height: none; overflow: visible; }
.rank-sheet .sheet-head { position: sticky; top: 0; z-index: 2; }
.rank-sheet .sheet-foot { position: sticky; bottom: 0; z-index: 2; }
.rank-deck { display: flex; align-items: center; gap: 10px; }
.rank-faces { display: inline-flex; gap: 2px; }
.rank-faces .face { width: 46px; height: 46px; overflow: hidden; border: var(--rule) solid var(--color-border); }
.rank-faces .face img { width: 100%; height: 100%; object-fit: cover; }
.rank-faces .face-none { width: 100%; height: 100%; display: grid; place-items: center; font-size: 14px; color: var(--color-fg-muted); }
.rank-deck-dmg { font: 600 13px/1.4 var(--font-display); color: var(--color-fg-muted); }
@media (max-width: 520px) { .rank-faces .face { width: 38px; height: 38px; } }


.extra-sheet { width: min(46rem, calc(100vw - 1.5rem)); max-width: min(46rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem); overflow-y: auto; }
.extra-sheet .sheet-body { max-height: none; overflow: visible; }
.extra-sheet .sheet-head { position: sticky; top: 0; z-index: 2; }
.extra-sheet .sheet-foot { position: sticky; bottom: 0; z-index: 2; }
.extra-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 6px 0 8px; }
.extra-bar .search { flex: 1 1 12rem; }
.extra-list { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.extra-list .reco-choice { position: relative; }
.extra-list .reco-choice.on { border-color: var(--color-accent); background: var(--color-accent-soft); }
.extra-list .reco-choice.on::after { content: "✓"; position: absolute; top: 3px; right: 5px;
  font: 700 12px/1 var(--font-display); color: var(--color-accent); }


.aim-box { display: grid; gap: var(--space-2xs); }
.aim-preview {
  width: 100%; border-collapse: collapse; margin-top: var(--space-xs);
  font: 400 var(--text-xs)/1.6 var(--font-num); font-variant-numeric: tabular-nums;
}
.aim-preview th {
  font: 600 var(--text-xs)/1.6 var(--font-display); color: var(--color-stage-ink-2);
  text-align: right; padding: 2px var(--space-xs); border-bottom: var(--rule) solid var(--color-stage-line);
}
.aim-preview td { text-align: right; padding: 2px var(--space-xs); color: var(--color-stage-ink); white-space: nowrap; }
.aim-preview th:first-child, .aim-preview td:first-child { text-align: left; color: var(--color-stage-ink-2); }
.aim-preview td.aim-miss { color: var(--color-alert); }
.aim-preview-cap { margin-top: var(--space-xs) !important; }
.aim-dist-chips { flex-wrap: wrap; align-items: center; margin-top: var(--space-xs); }
.aim-coeff-cap { display: block; margin-top: var(--space-sm); }
.aim-coeff-cap em { font-style: normal; font-weight: 400; font-size: var(--text-xs); color: var(--color-stage-ink-2); margin-left: var(--space-xs); }
.aim-dist-cap { font: 600 var(--text-xs)/1.3 var(--font-display); color: var(--color-stage-ink-2); margin-right: var(--space-2xs); }
.aim-dist-row { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.aim-dist-val {
  flex: none; min-width: 7.5em;
  font: 600 var(--text-xs)/1.3 var(--font-num); font-variant-numeric: tabular-nums; color: var(--color-stage-ink);
}
.aim-dist-slider { flex: 1; min-width: 0; accent-color: var(--color-accent); }


:root[data-nd="on"] .fsec:has(> #f-acc) { display: none; }


.ub-toggle-wrap { margin-left: auto; }

.panel.ub-on .ub-toggle-wrap { margin-left: 0; }

.panel.ub-on .roster-hint { display: none; }
.panel.ub-on .pool .nk { --bw: var(--rule-bold); }

.pool-sec {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
  margin-top: var(--space-sm); padding-bottom: 3px;
  border-bottom: var(--rule) solid var(--color-roster-line);
  font: 700 var(--text-xs)/1 var(--font-display); color: var(--color-roster-ink-2);
}
.pool-sec:first-child, .pool-note + .pool-sec { margin-top: 0; }
.pool-sec-ico {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pool-sec-n { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.panel.ub-on .pool { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
@media (min-width: 48rem) {
  .panel.ub-on .pool { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

@media (min-width: 64rem) {
  .panel.ub-on { display: flex; align-items: flex-start; gap: 0; }
  .panel.ub-on .stage { flex: 0 0 auto; width: 38rem; align-self: stretch; }
  .panel.ub-on .ub-set { padding-inline: var(--space-xs); }
  
  .panel.ub-on .roster {
    flex: 1 1 20rem; min-width: 0;
    border-top: 0; border-left: var(--rule-bold) solid var(--color-amber-deep);
    position: sticky; top: 0; max-height: 100vh; display: flex; flex-direction: column;
  }
  .panel.ub-on .roster .filter-bar { flex: none; }
  
  
  .panel.ub-on .pool {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    align-content: start; scrollbar-width: thin; grid-auto-rows: max-content;
    padding-right: var(--space-xs);
  }
}

.ub-wrap { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 40.5rem; }
.ub-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.ub-key { font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; color: var(--color-stage-ink-2); }
.ub-top-acts { display: flex; gap: var(--space-xs); }

.ub-note { margin: 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); word-break: keep-all; }
.ub-sets { display: flex; flex-direction: column; gap: var(--space-sm); }

.ub-set {
  display: flex; flex-direction: column; gap: var(--space-xs);
  border: var(--rule) solid var(--color-stage-line); padding: var(--space-xs) var(--space-sm) var(--space-sm);
  background: var(--color-stage-2);
}
.ub-set-head { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: 1.75rem; }

.ub-set-name {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 2px 0; border: 0; background: none;
  cursor: pointer; font: 700 var(--text-sm)/1.2 var(--font-display); color: var(--color-stage-ink); text-align: left;
}
.ub-set-name-t { overflow-wrap: anywhere; }
.ub-set-name-ed { font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.ub-set-name:hover .ub-set-name-ed, .ub-set-name:focus-visible .ub-set-name-ed { color: var(--color-accent); }
.ub-name-in {
  width: 12rem; max-width: 100%; padding: 2px 6px; outline: none;     
  font: 700 var(--text-sm)/1.2 var(--font-display); color: var(--color-stage-ink);
  background: var(--color-stage-3); border: var(--rule) solid var(--color-accent);
}
.ub-set-total { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ub-k { font: 600 var(--text-xs)/1 var(--font-body); color: var(--color-stage-ink-2); }
.ub-set-total b { font: 700 var(--text-sm)/1 var(--font-display); color: var(--color-stage-ink); }
.ub-set-acts { display: flex; gap: 4px; }
.ub-set-acts .btn, .ub-mini { padding: 2px var(--space-xs); font-size: var(--text-xs); line-height: 1.4; }

.ub-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) 5.5rem;
  align-items: center; gap: var(--space-xs);
}
.ub-cells { display: contents; }
.ub-cells .fg-slot { cursor: pointer; }

.ub-slot .nk { --bw: var(--rule-bold); }

.ub-slot .slot-no { color: var(--color-stage-ink-2); font-size: var(--text-lg); font-weight: 400; opacity: .75; }
.ub-row.ub-clip-src {
  outline: var(--rule) dashed var(--color-accent); outline-offset: 3px;
  background: color-mix(in oklch, var(--color-accent) 7%, transparent);
}

.ub-boss {
  --c: var(--chamfer-sm);
  position: relative; width: 100%; aspect-ratio: 1 / 1; padding: var(--rule-bold); border: 0; cursor: pointer;
  background: var(--code-c, var(--color-stage-line)); color: var(--color-stage-ink-2);
  font: 600 var(--text-xs)/1.1 var(--font-body);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.ub-boss img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-stage-3); }
.ub-boss.empty {
  padding: 0; background: none; border: var(--rule) dashed var(--color-stage-line);
  display: grid; place-items: center;
}
.ub-boss:hover { filter: brightness(1.12); }

.ub-boss-el {
  position: absolute; left: var(--rule-bold); right: var(--rule-bold); bottom: var(--rule-bold);
  background: color-mix(in oklch, var(--color-stage) 82%, transparent);
  color: var(--want-c, var(--color-stage-ink)); font: 700 9px/1.6 var(--font-display); text-align: center;
}

.ub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.ub-total {
  white-space: nowrap; font: 700 var(--text-sm)/1.1 var(--font-display); color: var(--color-stage-ink);
  font-variant-numeric: tabular-nums;
}
.ub-total.err { color: var(--color-alert); }
.ub-row-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ub-unclip { color: var(--color-accent); }
.ub-foot { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

.ub-foot-acts { margin-left: auto; display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }

.ub-io-body { gap: var(--space-md); }
.ub-io-body .acct-msg { margin: 0; }
.ub-io-body .acct-msg:empty, .ub-io-body .prose[hidden] { display: none; }
.ub-imp { display: grid; gap: var(--space-sm); }
.ub-imp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ub-imp-head .prose { margin: 0; }
.ub-imp-all { flex: none; }
.ub-imp-how { margin: 0; }
.ub-imp-notes:empty { display: none; }     

.ub-imp-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.ub-imp-name {
  flex-basis: 100%;
  font: 700 var(--text-sm)/1.3 var(--font-display); color: var(--color-stage-ink); overflow-wrap: anywhere;
}

.ub-imp-deck { display: flex; align-items: center; gap: 3px; }
.ub-imp-tile {
  --c: 5px;
  flex: none; width: 26px; height: 26px; padding: 2px; background: var(--code-c, var(--color-stage-line));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.ub-imp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-stage-3); }
.ub-imp-tile.empty { padding: 0; background: none; clip-path: none; border: var(--rule) dashed var(--color-stage-line); }
.ub-imp-boss { margin-right: 5px; }



.ub-shot-sheet .sheet-body { gap: 0; }
.ub-shot-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); flex-wrap: wrap;
  padding: var(--space-md) 0;
}
.ub-shot-opt:first-child { padding-top: 0; }
.ub-shot-opt:last-of-type { padding-bottom: 0; }
.ub-shot-opt + .ub-shot-opt { border-top: var(--rule) solid var(--color-stage-line); }
.ub-shot-k { font: 700 var(--text-sm)/1.3 var(--font-display); }
.ub-shot-acts { display: flex; align-items: center; gap: var(--space-xs); }

.ub-shot-cols { display: inline-flex; margin-right: var(--space-2xs); }
.ub-shot-col {
  padding: 4px var(--space-xs); cursor: pointer;
  font: 600 var(--text-xs)/1.3 var(--font-display); white-space: nowrap;
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
  border: var(--rule) solid var(--color-stage-line);
}
.ub-shot-col + .ub-shot-col { border-left: 0; }
.ub-shot-col:hover { color: var(--color-stage-ink); }
.ub-shot-col.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.ub-shot-acts .btn[disabled] { filter: grayscale(1); }     
.ub-shot-note { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--color-stage-ink-2); word-break: keep-all; }
.ub-shot-sheet .acct-msg:empty { display: none; }

@media (pointer: coarse) {
  .ub-set-acts .btn, .ub-mini { min-height: 2rem; }
}
@media (hover: none) {
  .ub-slot .slot-x { width: 22px; height: 22px; top: 0; right: 0; font-size: 10px; }
}

@media (max-width: 30rem) {
  .ub-set { gap: var(--space-sm); padding: var(--space-xs); }
  .ub-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xs); }
  .ub-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .ub-total { order: 2; }
}


.bt-rec {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  margin: var(--space-sm) 0 var(--space-md); padding: var(--space-md);
  border: 2px solid var(--color-amber);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-amber) 20%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-amber) 30%, transparent), 0 0 24px color-mix(in srgb, var(--color-amber) 30%, transparent);
}
.bt-rec[hidden] { display: none; }
.bt-rec-txt { flex: 1 1 16em; display: grid; gap: 3px; min-width: 0; }
.bt-rec-title { font: 800 var(--text-lg)/1.3 var(--font-display); color: var(--color-amber); word-break: keep-all; }
.bt-rec-sub { font-weight: 700; color: var(--color-stage-ink); word-break: keep-all; }
.bt-rec-note { font-size: var(--text-xs); line-height: 1.5; color: var(--color-stage-ink-2); word-break: keep-all; }
.bt-rec-go { font-size: var(--text-base); padding: var(--space-sm) var(--space-lg); }
.bt-rec.is-using {
  padding: var(--space-sm) var(--space-md); border-color: var(--color-ok);
  background: color-mix(in srgb, var(--color-ok) 10%, transparent); box-shadow: none; animation: none;
}
.bt-rec.is-using .bt-rec-title { color: var(--color-ok); font-size: var(--text-base); }
@media (prefers-reduced-motion: no-preference) {
  .bt-rec:not(.is-using) { animation: bt-rec-glow 2.4s ease-in-out 4; }   
}
@keyframes bt-rec-glow {
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-amber) 45%, transparent), 0 0 38px color-mix(in srgb, var(--color-amber) 50%, transparent); }
}