:root {
  --bg: #EEF1F5;
  --line: #BFBFBF;
  --grey: #F3F3F3;
  --valid: #1F4E9E;
  --select: #2F6FD6;
  --c-char: #B6D7A8;
  --c-weapon: #9FC5E8;
  --c-artifact: #FFE599;
  --c-manual: #D9D9D9;
  --c-final: #EA9999;
  --input: #FFF8DC;
  --input-bad: #F4CCCC;
  --input-changed: #FCE4D6;
  --font: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: #222;
  font: 13px/1.35 var(--font);
  min-width: 1100px;
}
button, input, select { font: inherit; }
.btn {
  border: 1px solid #ADADAD; background: #FDFDFD; border-radius: 3px; padding: 3px 10px; cursor: pointer;
}
.btn:hover:not(:disabled) { background: #E5F1FB; border-color: #0078D7; }
.btn:disabled { color: #999; cursor: default; }
select { border: 1px solid #ADADAD; border-radius: 3px; background: #fff; padding: 2px 2px; }
select:disabled { background: #F0F0F0; color: #999; }
.chk { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.chk input { margin: 0; }
.chk.disabled { color: #999; cursor: default; }
.small { font-size: 12px; }
.muted { color: #666; }
.gap { margin-left: 10px; }
.note { color: #888; font-size: 11px; white-space: pre-line; }
.note.orange { color: #B45F06; }
.right-text { text-align: right; }
hr { border: 0; border-top: 1px solid #DDD; margin: 8px 0; }

/* Top bar */
.top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.uid-label { font-weight: bold; font-size: 15px; }
.uid-box { position: relative; display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.uid { width: 130px; padding: 3px 6px; font-size: 15px; border: 1px solid #ADADAD; border-radius: 3px 0 0 3px; border-right: 0; }
.uid-drop { width: 22px; padding: 0; border: 1px solid #ADADAD; border-radius: 0 3px 3px 0; background: #F4F4F4; cursor: pointer; font-size: 11px; color: #444; }
.uid-drop:hover, .uid-box.open .uid-drop { background: #E3E8F6; }
.uid-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 700; min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 24px));
  max-height: 260px; overflow-y: auto; margin: 0; padding: 3px 0; list-style: none; background: #fff; border: 1px solid #ADADAD; border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.uid-item { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; cursor: pointer; font-size: 14px; }
.uid-item:hover, .uid-item.active { background: #E3E8F6; }
.uid-num { font-variant-numeric: tabular-nums; }
.uid-nick { flex: 1; color: #777; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uid-del { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: none; color: #999; cursor: pointer; font-size: 12px; }
.uid-del:hover { background: #F6D5D5; color: #B00; }
.uid-empty { padding: 6px 10px; color: #888; font-size: 12px; }
.fetch-btn { min-width: 108px; }
.status { flex: 1; color: #444; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.private { margin-left: 6px; }

/* Body */
.body {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px; grid-template-rows: auto 1fr; gap: 10px;
  padding: 0 12px 12px; min-height: calc(100vh - 54px);
}
.sec { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.sec-title { margin: 0; font-size: 13px; text-align: center; padding: 3px 8px; font-weight: bold; }
.c-char { background: var(--c-char); } .c-weapon { background: var(--c-weapon); }
.c-artifact { background: var(--c-artifact); } .c-manual { background: var(--c-manual); }
.c-final { background: var(--c-final); }
.sec-body { padding: 6px 8px; flex: 1; min-height: 0; }
.grow { flex: 1; min-height: 0; }

.left .sec-body, .char-list { padding: 4px 0; }
/* Character list (desktop): full width below the UID bar. 12 per row; saved characters also wrap every 12.
   Everything is visible without vertical scrolling; horizontal scroll when the window is too narrow */
.left { grid-column: 1 / -1; }
.char-list { display: grid; grid-template-columns: repeat(12, max-content); justify-content: center; align-content: start; gap: 4px;
  overflow-x: auto; overflow-y: hidden; padding: 4px 6px; scrollbar-width: thin; }
/* Desktop list icons: 1.5x the default (53px) */
.char-list .pic.small { width: 80px; height: 80px; }
.char-list .pic .badge { font-size: 15px; padding: 2px 5px; }
.char-list .char-btn { border-radius: 14px; }
.char-btn { cursor: pointer; border: 3px solid transparent; border-radius: 11px; line-height: 0; }
.char-btn.selected { border-color: var(--select); }
.char-more { grid-column: 1 / -1; justify-self: center; font-size: 12px; padding: 3px 10px; white-space: nowrap; }
.char-list.saved-collapsed .char-btn.saved { display: none; }

.mid { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.media { display: flex; gap: 10px; align-items: flex-start; }
.media-text { min-width: 0; flex: 1; }
.v-name { font-size: 20px; font-weight: bold; }
.v-level { font-weight: bold; margin: 2px 0; }
.v-base { color: #666; font-size: 12px; white-space: pre-line; }
.v-weapon { font-size: 16px; font-weight: bold; }
.opts { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; margin: 2px 0 0; }
.kv dt { font-weight: bold; }
.kv dd { margin: 0; }
#weapon-sec { cursor: help; }

/* Images (rarity background + rounded corners) */
.pic { position: relative; overflow: hidden; border-radius: 14%; flex: none; }
.pic.big { width: 112px; height: 112px; }
.pic.small { width: 53px; height: 53px; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pic.r5 { background: linear-gradient(#B87B3A, #E8B86A); }
.pic.r4 { background: linear-gradient(#6E5A9E, #A98BD6); }
.pic.r3 { background: linear-gradient(#4A7AA8, #7FB0D8); }
/* Weapon swap: the name is a dropdown button; the list shows icon + name (name background in the rarity color) */
#weapon-sec { position: relative; }
.weapon-pick { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid #CDE6F7; border-radius: 4px; background: #EEF8FE;
  font-family: inherit; color: inherit; padding: 2px 8px; margin: 0 0 2px; cursor: pointer; text-align: left; }
.weapon-pick #v-weapon { min-width: 0; overflow-wrap: anywhere; }
.weapon-pick:hover, #weapon-sec.menu-open .weapon-pick { background: #DCF0FC; border-color: #9FCDEE; }
.weapon-pick .caret { flex: 0 0 auto; font-size: 15px; line-height: 1; color: #555; font-weight: normal; }
#weapon-sec.swapped .weapon-pick::after { content: "●"; color: #C0392B; font-size: 10px; flex: 0 0 auto; }
.weapon-menu { position: absolute; top: 60px; left: 0; right: 0; z-index: 650; max-height: 360px; overflow-y: auto; background: #fff;
  border: 1px solid #ADADAD; box-shadow: 0 6px 16px rgba(0,0,0,.2); padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.weapon-menu[hidden] { display: none; }
.weapon-item { display: flex; align-items: center; gap: 6px; border: 2px solid transparent; border-radius: 6px; background: none; padding: 0; cursor: pointer;
  text-align: left; font: inherit; }
.weapon-item .pic.tiny { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 5px; }
.weapon-name { flex: 1; min-width: 0; padding: 7px 8px; border-radius: 4px; font-size: 13px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weapon-item.r5 .weapon-name { background: linear-gradient(90deg, #B87B3A, #E8B86A); }
.weapon-item.r4 .weapon-name { background: linear-gradient(90deg, #6E5A9E, #A98BD6); }
.weapon-item.r3 .weapon-name { background: linear-gradient(90deg, #4A7AA8, #7FB0D8); }
.weapon-item:hover .weapon-name { filter: brightness(1.1); }
.weapon-item.current { border-color: var(--select); }
.weapon-own { flex: 0 0 auto; font-size: 11px; color: #555; padding-right: 6px; }
.pic.r2 { background: linear-gradient(#4F8A6B, #82BE9C); }
.pic.r1 { background: linear-gradient(#7A7A7A, #A8A8A8); }
.pic.r0 { background: transparent; }
.pic .badge {
  position: absolute; right: 7%; bottom: 7%; background: rgba(20, 20, 30, .75); color: #fff;
  font: bold 12px 'Segoe UI', Arial, sans-serif; line-height: 1; padding: 2px 4px; border-radius: 4px;
}

/* Artifact table */
.art-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.art-table th { font-weight: bold; padding: 0 0 4px; }
.art-table th.row-title { text-align: left; width: 64px; padding: 4px; }
.en .art-table th.row-title { width: 84px; white-space: nowrap; }
.art-table td { text-align: center; padding: 4px 6px; vertical-align: middle; }
.art-table tr.alt th.row-title, .art-table tr.alt td { background: var(--grey); }
.art-table .set-cell { font-weight: bold; font-size: 12px; color: #333; }
.art-table .main-cell { font-weight: bold; }
.art-table .sub { color: #555; }
.art-table .sub.valid { color: var(--valid); font-weight: bold; }
.art-table .cnt { color: #B45F06; font-size: 10px; margin-left: 2px; }
.art-table .none { color: #999; }
/* Artifact reroll */
.art-table .sub.rebuilt { background: #FFF1A8; border-radius: 3px; padding: 0 3px; }
.art-table td.sub-td { cursor: pointer; }
/* Substats chosen for the reroll: cell size unchanged, inner border only */
.art-table td.picked { box-shadow: inset 0 0 0 2px #E08A00; border-radius: 4px; }
.art-table .rebuild-row td { padding: 3px 2px 0; }
.rebuild-cell { white-space: nowrap; }
.rebuild-cell .btn { font-size: 11px; padding: 1px 6px; }
.rebuild-cell .rebuild-undo { margin-left: 3px; }
.rebuild-cell .btn[hidden] { display: none; }
.valid-note { color: var(--valid); text-align: right; margin-top: 2px; font-size: 11px; }
.art-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.art-foot .valid-note { margin-left: auto; }
.sim-note { color: #8A5A00; font-size: 11px; margin-top: 2px; white-space: normal; }
.art-table .cv-tr td { padding-top: 2px; padding-bottom: 2px; }
.art-table .cv { color: #7A2E5C; font-size: 12px; font-weight: bold; }
.art-table .cv.rebuilt { background: #FFF1A8; border-radius: 3px; padding: 0 3px; }
.cv-row { margin-top: 4px; font-size: 12px; color: #555; }
.v-cv { font-weight: bold; color: #7A2E5C; font-size: 14px; }
.set-text { margin-top: 4px; font-size: 12px; color: #444; max-height: 140px; overflow-y: auto; }
.set-text .set-name { font-weight: bold; color: #7F6000; }
.set-text .set-line { display: grid; grid-template-columns: 44px 1fr; white-space: pre-line; }
.set-text .set-need { font-weight: bold; color: #7F6000; }
/* Desktop: set effects up to 3 lines (… when longer, full text on hover) */
.set-text .set-body { min-width: 0; white-space: pre-line; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }

/* Final stats */
.final-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.final-card { background: var(--grey); display: flex; align-items: center; gap: 8px; padding: 2px 8px; cursor: default; }
.final-card .name { color: #555; }
.final-card .value { font-size: 19px; font-weight: bold; }
.final-card > div { min-width: 0; }
.final-card .name { overflow-wrap: anywhere; }
.stat-icon { width: 44px; height: 44px; flex: none; }

/* Right column */
.right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Desktop: Extra stats and Substat score are always 384px wide (long texts wrap inside) */
.right { width: 384px; }
.right .sec { overflow: hidden; }
.right label, .right .group-head, .right .note, .right td, .right th { overflow-wrap: anywhere; }
.tabs-body { display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid #ccc; }
.tab { flex: 1; border: 1px solid #ccc; border-bottom: none; background: #F0F0F0; padding: 2px 2px; cursor: pointer;
  font-size: 12.5px; margin-right: -1px; white-space: nowrap; }
.tab.active { background: #fff; position: relative; top: 1px; }
.tab-page { display: none; flex-direction: column; gap: 4px; flex: 1; min-height: 0; padding-top: 6px; }
.tab-page.active { display: flex; }
.list { flex: 1; min-height: 120px; overflow-y: auto; border: 1px solid #DDD; padding: 2px 0; }
.list.plain { border: 0; }
.row-end { display: flex; justify-content: flex-end; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.group-head { color: #7F6000; font-weight: bold; padding: 6px 4px 0; font-size: 12px; cursor: help; }
.item-row { display: flex; align-items: center; gap: 4px; padding: 1px 4px 1px 14px; flex-wrap: wrap; }
.item-row.sub-item { padding-left: 28px; }
.item-row input.num, input.num { width: 52px; text-align: center; border: 1px solid #888; background: var(--input); padding: 0 2px; }
input.num.bad { background: var(--input-bad); }
.item-row .x { color: #777; }
.item-row .total { color: #555; font-size: 12px; margin-left: 4px; }
.res-row { padding: 3px 0; }
.empty { color: #999; font-size: 12px; padding: 6px; white-space: pre-line; }
.add-row { display: flex; gap: 6px; align-items: center; }
.add-row #new-value { width: 72px; text-align: right; }
.manual-row { display: flex; align-items: center; gap: 4px; padding: 1px 4px; }
.manual-row:nth-child(even) { background: var(--grey); }
.manual-row .stat { font-weight: bold; width: 120px; }
.manual-row input.num { width: 70px; text-align: right; }
.manual-row .del { margin-left: auto; color: #C0392B; font-weight: bold; cursor: pointer; padding: 0 8px; }

.score-table { width: 100%; border-collapse: collapse; }
.score-table th { color: #777; font-weight: normal; font-size: 12px; text-align: left; }
.score-table th:last-child, .score-table td:last-child { text-align: right; }
.score-table td { padding: 1px 0; }
.score-table .base { color: #555; font-size: 12px; }
.score-table input.num { width: 56px; }
.score-table input.num.changed { background: var(--input-changed); }
.score-table .sum { font-weight: bold; }
.score-foot { margin-top: 4px; align-items: flex-end; }
.total-row b { font-size: 15px; }
.v-total { font-size: 26px; font-weight: bold; color: #7A2E5C; }
.links { text-align: right; font-size: 12px; color: #666; line-height: 1.6; }
.links a { color: #1A5FB4; }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 1000; background: #2B2B33; color: #fff; font-size: 12px; padding: 6px 8px;
  white-space: pre-wrap; max-width: 460px; pointer-events: none; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Team card */
.tc-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(5, 7, 14, .6); display: flex; align-items: stretch;
  justify-content: stretch; padding: 10px; overflow: hidden; }
.tc-win { background: #14182a; color: #fff; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.tc-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.tc-slot { width: 68px; height: 68px; border: 2px solid #3a4266; border-radius: 10px; background: #252b44; display: flex;
  align-items: center; justify-content: center; font-size: 22px; color: #fff; cursor: pointer; user-select: none; overflow: hidden; }
.tc-slot.drag-from { border-color: #7f8bc0; } .tc-slot.drag-over { border-color: #ffcc55; }
.tc-hint { color: #8890aa; font-size: 12px; }
.tc-status { color: #aab; font-size: 12px; min-width: 60px; }
.tc-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tc-right label { display: inline-flex; align-items: center; gap: 3px; }
.tc-zoom { color: #c8cce0; font-size: 12px; min-width: 40px; text-align: right; }
.tc-view { background: #0b0e18; overflow: auto; flex: 1; min-height: 0; border-radius: 0 0 6px 6px; position: relative; cursor: grab; }
.tc-view.dragging { cursor: grabbing; }
.tc-view canvas { display: block; }
.tc-close { background: none; border: 0; color: #aab; font-size: 20px; cursor: pointer; padding: 0 4px; }
.thumb { width: 64px; height: 64px; border-radius: 9px; position: relative; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.thumb.dim { opacity: .35; }
.tc-picker { position: fixed; z-index: 600; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.tc-picker-box { background: #1b2036; padding: 10px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tc-picker-title { color: #fff; font-weight: bold; }
.tc-grid { display: grid; grid-template-columns: repeat(4, 68px); gap: 8px; }
@media (min-width: 1101px) { .tc-grid { grid-template-columns: repeat(12, 68px); } } /* Desktop: 12 per row */
.tc-picker-box { max-height: calc(100vh - 40px); }
.tc-saved-wrap { display: flex; flex-direction: column; align-items: center; overflow-y: auto; min-height: 0; padding-right: 2px; }
.tc-saved-wrap .tc-grid { border-top: 2px dashed #8a93b8; padding-top: 8px; }
.tc-expand { font-size: 12px; }
.tc-pick { border: 2px solid #1b2036; border-radius: 11px; cursor: pointer; line-height: 0; }
.tc-pick.current { border-color: #ffcc55; }
.tc-pick.picked { cursor: default; }
.tc-pick .name { color: #fff; font-size: 11px; line-height: 1.2; }

/* Desktop layout: Extra stats spans from the top of the character/weapon info to the bottom of the artifact info,
   Substat score starts on the same row as the final stats (final stats size unchanged) */
@media (min-width: 1101px) {
  .body { grid-template-areas: "chars chars" "info manual" "art manual" "final score" "links score" ". score";
    grid-template-rows: auto auto auto auto auto 1fr; }
  .mid, .right { display: contents; }
  .left { grid-area: chars; }
  .info-row { grid-area: info; }
  .art-sec { grid-area: art; }
  .final-sec { grid-area: final; align-self: start; }
  .manual-sec { grid-area: manual; contain: size; } /* Do not grow the left column for long content (scroll inside the list) */
  .score-sec { grid-area: score; align-self: start; }
  .right > .links { grid-area: links; text-align: left; } /* Links: right below the final stats, left-aligned */
}

@media (max-width: 1100px) {
  .rebuild-cell { white-space: normal; }
  .rebuild-cell .btn { display: block; width: 100%; padding: 1px 0; font-size: 10.5px; }
  .rebuild-cell .rebuild-undo { margin: 2px 0 0; }
  body { min-width: 0; }
  .body { grid-template-columns: 1fr; grid-template-rows: none; }
  .char-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 4px 0;
    overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
  .char-list .pic.small { width: 53px; height: 53px; }
  .char-list .pic .badge { font-size: 12px; padding: 2px 4px; }
  .char-list .char-btn { border-radius: 11px; }
  .char-more { flex-basis: 100%; padding: 6px 10px; margin: 0; }
  /* Final stats: column count follows the width (3 when wide, 2 on phones, 1 when very narrow) */
  .final-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .final-card { gap: 6px; padding: 2px 6px; }
  .final-card .stat-icon { width: 36px; height: 36px; }
  .final-card .value { font-size: 17px; }
  /* Extra stat tabs: wrap to two rows when narrow */
  .tabs { flex-wrap: wrap; }
  .tab { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .left { max-height: 50vh; }
  .info-row { grid-template-columns: 1fr; }
  .right { width: auto; }
  .set-text .set-body { display: block; overflow: visible; -webkit-line-clamp: none; line-clamp: none; }
  .top { flex-wrap: wrap; }
  /* Fetch info: full width on the row below the privacy toggle / language select (wraps instead of being cut) */
  .top .status { order: 10; flex: 1 1 100%; margin-left: 0; white-space: normal; overflow: visible; }
}

/* Reroll row title cell: minimum upgrades select */
.art-table th.rebuild-head { padding: 3px 2px 0 4px; white-space: nowrap; font-weight: normal; font-size: 11px; }
.rebuild-head .rebuild-min-label { margin-right: 2px; }
.rebuild-head .rebuild-min { font-size: 11px; padding: 0; max-width: 46px; }
@media (max-width: 1100px) {
  .art-table th.rebuild-head { white-space: normal; }
  .rebuild-head .rebuild-min-label { display: block; margin: 0 0 1px; }
  .rebuild-head .rebuild-min { max-width: 100%; }
}
.art-table .cv-tr th.row-title { white-space: nowrap; font-size: 12px; letter-spacing: -0.3px; }
/* Extra stats: label for effects that only apply to a specific attack/reaction/element */
.buff-note { font-size: 10px; color: #8A5A00; background: #FFF4D6; border: 1px solid #F0D9A0; border-radius: 3px; padding: 0 4px; line-height: 1.5; white-space: nowrap; }
.weapon-name { display: flex; align-items: baseline; gap: 8px; }
.weapon-name .wn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weapon-name .weapon-stats { flex: 0 0 auto; margin-left: auto; text-align: right; font-size: 12px; opacity: .92; font-weight: normal; }

/* Party recommendation: transparent button next to the links */
/* hidden on purpose: same color as the page background (still clickable) */
/* Party recommendation window */
.pr-overlay { position: fixed; inset: 0; z-index: 520; background: rgba(5, 7, 14, .55); display: flex; align-items: center; justify-content: center; }
.pr-win { background: #fff; width: min(1000px, 96vw); max-height: 92vh; min-height: min(660px, 92vh); display: flex; flex-direction: column; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; }
.pr-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--c-char); }
.pr-title { font-size: 15px; margin-right: 8px; }
/* tab strip under the title bar; the active tab joins the body below */
.pr-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); background: #F6F7FA; }
.pr-tab { border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; background: #E9ECF2; color: #555;
  padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; margin-bottom: -1px; }
.pr-tab:hover { background: #F1F4FA; }
.pr-tab.on { background: #fff; color: #222; font-weight: bold; border-color: var(--line); border-top: 2px solid var(--select); }
.pr-foot { padding: 6px 12px 8px; font-size: 11px; color: #888; border-top: 1px solid #EEE; }
.pr-close { margin-left: auto; }
.pr-body { padding: 10px 12px 14px; overflow-y: auto; min-height: 200px; flex: 1; } /* fills the window so the note stays at the bottom */
.pr-hint { color: #666; font-size: 12px; margin-bottom: 6px; }
.pr-empty { color: #666; padding: 30px 10px; text-align: center; }
.pr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.pr-filter.on { background: #E3E8F6; border-color: #6C8BD5; font-weight: bold; }
.pr-gap { flex: 1; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.pr-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border: 2px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; font: inherit; opacity: .35; filter: grayscale(.8); }
.pr-cell.owned { opacity: 1; filter: none; }
.pr-cell:hover { border-color: #C5CEE3; }
.pr-cell.picked { border-color: var(--select); background: #F1F5FD; }
.pr-name { font-size: 11px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.pr-carries { margin-bottom: 12px; }
.pr-results { display: flex; flex-direction: column; gap: 8px; }
.pr-team { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.pr-team-head { margin-bottom: 6px; font-size: 13px; }
.so-set-title { text-align: left; margin: 12px 0 6px; } /* "조합 1 · 캐릭터 중복 없음" / "조합 2 · 캐릭터 중복 허용" */
.pr-team-hint { font-size: 12px; color: #777; } /* 3 teams: "(권장 원소: 번개 · 원소 반응: 별)" after the boss name */
.pr-missing-badge { margin-left: 8px; font-size: 11px; color: #B00; background: #FBE3E3; border-radius: 3px; padding: 0 5px; }
.pr-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pr-member { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pr-member.missing .pic { opacity: .35; filter: grayscale(1); }
.pr-role { font-size: 10px; color: #8A5A00; }
.pr-member.missing .pr-role { color: #B00; }
.pr-alts { font-size: 11px; color: #555; }
/* on-field constellation requirement (party recommendation) */
.pr-req { font-size: 10px; color: #8A5A00; background: #FFF4D6; border: 1px solid #F0D9A0; border-radius: 3px; padding: 0 4px; white-space: nowrap; }
.pr-req.short { color: #B00; background: #FBE3E3; border-color: #F0B5B5; }
.pr-req-note { font-size: 12px; color: #8A5A00; background: #FFF8E6; border: 1px solid #F0D9A0; border-radius: 4px; padding: 4px 8px; margin: -4px 0 10px; }
.pr-req-note.short { color: #B00; background: #FDF0F0; border-color: #F0B5B5; }
.pr-cell.pr-traveler .pr-name { color: #2F6FD6; font-weight: bold; } /* Traveler: gender toggle, always owned */
.pr-alts .pr-alt-missing { color: #C0392B; } /* alternate not owned */

/* Stygian Onslaught tab: latest 3 bosses large, past bosses 8 per row, details below */
.so-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.so-rest { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.so-boss { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 2px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; font: inherit; }
.so-boss:hover { border-color: #C5CEE3; }
.so-boss.picked { border-color: var(--select); background: #F1F5FD; }
.so-pic { width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #241528; }
.so-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-name { font-size: 11px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.so-boss.big .so-name { font-size: 13px; font-weight: bold; }
.so-boss.big .so-pic { max-width: 180px; }
.so-detail { margin-top: 12px; border-top: 2px solid var(--line); padding-top: 10px; }
.so-detail-head { font-size: 15px; margin-bottom: 2px; }
.so-ext { font-size: 12px; color: #7A2E5C; }
.so-meta { font-size: 12px; color: #666; margin-bottom: 6px; }
.so-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.so-chip-label { color: #555; margin-right: 2px; }
.so-chip { background: #EEF2FA; border: 1px solid #C5CEE3; border-radius: 10px; padding: 0 7px; }
.so-chip.missing { color: #C0392B; background: #FDF0F0; border-color: #F0B5B5; }
@media (max-width: 1100px) {
  .so-rest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.so-more { display: block; margin: 0 auto 8px; font-size: 12px; padding: 3px 12px; } /* show/hide past bosses */
/* "이번 버전 추천 3 파티": one team per current boss without shared characters */
.so-trio-btn { display: block; margin: 0 auto 10px; font-size: 13px; font-weight: bold; padding: 5px 16px; background: #EAF5FF; border-color: #9CC7EA; color: #1F5F8B; }
.so-trio-note { text-align: center; }
/* notes at the top of the "3 파티" window: one sentence per line, left-aligned */
.so-trio-notes { text-align: left; font-size: 12px; color: #666; line-height: 1.6; margin: 0 0 10px; padding: 6px 10px; background: #F6F7FA; border-radius: 6px; }
.so-missing-note { text-align: right; font-size: 12px; color: #C0392B; margin-top: 6px; } /* "빨간 글씨는 미보유 캐릭터입니다." */
.so-boss-hint { color: #1F5F8B; font-weight: bold; margin-top: 4px; } /* 권장 원소 / 원소 반응 / 비권장 원소 */
/* "추천 3 파티" window over the party window */
.so-trio-overlay { z-index: 530; }
.so-trio-win { width: min(820px, 94vw); min-height: 0; }
.so-title { text-align: center; font-size: 16px; font-weight: bold; color: #4A2E6B; margin: 4px 0 8px; } /* "7.2 지맥 제압전" */
.so-sub { text-align: center; font-size: 15px; font-weight: bold; color: #333; margin: 10px 0 6px; } /* "추천 파티" heading in boss details */

/* ------------------------------------------------------------------ Dark mode
   html[data-theme="dark"]: set before the page renders (inline script in index.html: saved choice, else the system setting).
   The team card window and the tooltip are already dark and stay as they are. */
.theme-btn { padding: 3px 8px; line-height: 1; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16181D;
  --line: #3A3F48;
  --grey: #262A31;
  --valid: #8DB3FF;
  --select: #5B8DEF;
  --c-char: #3B5634;
  --c-weapon: #2B4A66;
  --c-artifact: #5C5022;
  --c-manual: #3A3D42;
  --c-final: #6B3535;
  --input: #3A3420;
  --input-bad: #5C2A2A;
  --input-changed: #4E3A28;
  --panel: #1F2228;
  --text: #DDE1E7;
}
:root[data-theme="dark"] body { color: var(--text); }
:root[data-theme="dark"] .btn { background: #2A2E36; border-color: #4A505B; color: var(--text); }
:root[data-theme="dark"] .btn:hover:not(:disabled) { background: #2E3D52; border-color: #5B8DEF; }
:root[data-theme="dark"] .btn:disabled { color: #6C727C; }
:root[data-theme="dark"] select, :root[data-theme="dark"] .uid, :root[data-theme="dark"] input:not([type="checkbox"]):not(.num) {
  background: #23262D; color: var(--text); border-color: #4A505B; }
:root[data-theme="dark"] select:disabled { background: #1C1F24; color: #6C727C; }
:root[data-theme="dark"] .chk.disabled, :root[data-theme="dark"] .art-table .none, :root[data-theme="dark"] .empty { color: #6C727C; }
:root[data-theme="dark"] .muted, :root[data-theme="dark"] .v-base, :root[data-theme="dark"] .links,
:root[data-theme="dark"] .pr-hint, :root[data-theme="dark"] .pr-empty, :root[data-theme="dark"] .so-meta,
:root[data-theme="dark"] .so-trio-notes { color: #A3A9B3; }
:root[data-theme="dark"] .note, :root[data-theme="dark"] .uid-empty, :root[data-theme="dark"] .pr-foot { color: #8C929C; }
:root[data-theme="dark"] .note.orange, :root[data-theme="dark"] .art-table .cnt { color: #E8A35C; }
:root[data-theme="dark"] hr { border-top-color: var(--line); }
:root[data-theme="dark"] .links a { color: #7FB0FF; }
/* top bar */
:root[data-theme="dark"] .uid-drop { background: #2A2E36; border-color: #4A505B; color: #C3C8D0; }
:root[data-theme="dark"] .uid-drop:hover, :root[data-theme="dark"] .uid-box.open .uid-drop,
:root[data-theme="dark"] .uid-item:hover, :root[data-theme="dark"] .uid-item.active { background: #2E3D52; }
:root[data-theme="dark"] .uid-menu { background: #23262D; border-color: #4A505B; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
:root[data-theme="dark"] .uid-nick { color: #9097A1; }
:root[data-theme="dark"] .uid-del { color: #8C929C; }
:root[data-theme="dark"] .uid-del:hover { background: #4A2A2A; color: #FF8A80; }
:root[data-theme="dark"] .status { color: #C3C8D0; }
/* sections */
:root[data-theme="dark"] .sec { background: var(--panel); }
:root[data-theme="dark"] .weapon-pick { background: #22303D; border-color: #35506A; }
:root[data-theme="dark"] .weapon-pick:hover, :root[data-theme="dark"] #weapon-sec.menu-open .weapon-pick { background: #2A3D4F; border-color: #4A7AA8; }
:root[data-theme="dark"] .weapon-pick .caret, :root[data-theme="dark"] .weapon-own { color: #A3A9B3; }
:root[data-theme="dark"] .weapon-menu { background: #23262D; border-color: #4A505B; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
/* artifacts */
:root[data-theme="dark"] .art-table .set-cell, :root[data-theme="dark"] .set-text { color: #C3C8D0; }
:root[data-theme="dark"] .art-table .sub, :root[data-theme="dark"] .cv-row, :root[data-theme="dark"] .final-card .name,
:root[data-theme="dark"] .item-row .total, :root[data-theme="dark"] .score-table .base, :root[data-theme="dark"] .pr-alts,
:root[data-theme="dark"] .so-chip-label { color: #A3A9B3; }
:root[data-theme="dark"] .art-table .sub.rebuilt, :root[data-theme="dark"] .art-table .cv.rebuilt { background: #5A4E1A; }
:root[data-theme="dark"] .art-table .cv, :root[data-theme="dark"] .v-cv, :root[data-theme="dark"] .v-total,
:root[data-theme="dark"] .so-ext { color: #E28BBE; }
:root[data-theme="dark"] .sim-note, :root[data-theme="dark"] .pr-role { color: #E0B865; }
:root[data-theme="dark"] .set-text .set-name, :root[data-theme="dark"] .set-text .set-need,
:root[data-theme="dark"] .group-head { color: #E0C060; }
/* extra stats / substat score */
:root[data-theme="dark"] .tabs, :root[data-theme="dark"] .tab { border-color: var(--line); }
:root[data-theme="dark"] .tab { background: #262A31; color: #A3A9B3; }
:root[data-theme="dark"] .tab.active { background: var(--panel); color: var(--text); }
:root[data-theme="dark"] .list { border-color: var(--line); }
:root[data-theme="dark"] .item-row input.num, :root[data-theme="dark"] input.num { border-color: #6A6F78; color: var(--text); }
:root[data-theme="dark"] .item-row .x, :root[data-theme="dark"] .score-table th { color: #8C929C; }
:root[data-theme="dark"] .manual-row .del { color: #FF8A80; }
:root[data-theme="dark"] .buff-note, :root[data-theme="dark"] .pr-req, :root[data-theme="dark"] .pr-req-note {
  color: #E0B865; background: #3A3020; border-color: #6A5630; }
/* party recommendation */
:root[data-theme="dark"] .pr-win { background: var(--panel); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
:root[data-theme="dark"] .pr-tabs, :root[data-theme="dark"] .so-trio-notes { background: #1A1D22; }
:root[data-theme="dark"] .pr-tab { background: #262A31; color: #A3A9B3; }
:root[data-theme="dark"] .pr-tab:hover { background: #2C3038; }
:root[data-theme="dark"] .pr-tab.on { background: var(--panel); color: var(--text); }
:root[data-theme="dark"] .pr-foot { border-top-color: var(--line); }
:root[data-theme="dark"] .pr-filter.on { background: #2E3D52; border-color: #5B8DEF; }
:root[data-theme="dark"] .pr-cell:hover, :root[data-theme="dark"] .so-boss:hover { border-color: #4A5874; }
:root[data-theme="dark"] .pr-cell.picked, :root[data-theme="dark"] .so-boss.picked { background: #22304A; }
:root[data-theme="dark"] .pr-team-hint { color: #9097A1; }
:root[data-theme="dark"] .pr-missing-badge, :root[data-theme="dark"] .pr-req.short, :root[data-theme="dark"] .pr-req-note.short {
  color: #FF8A80; background: #4A2626; border-color: #7A3A3A; }
:root[data-theme="dark"] .pr-member.missing .pr-role, :root[data-theme="dark"] .pr-alts .pr-alt-missing,
:root[data-theme="dark"] .so-missing-note { color: #FF8A80; }
:root[data-theme="dark"] .pr-cell.pr-traveler .pr-name { color: #7FB0FF; }
:root[data-theme="dark"] .so-chip { background: #262E3D; border-color: #3E4A62; }
:root[data-theme="dark"] .so-chip.missing { color: #FF8A80; background: #3A2424; border-color: #7A3A3A; }
:root[data-theme="dark"] .so-trio-btn { background: #1F3346; border-color: #35506A; color: #9CCBF0; }
:root[data-theme="dark"] .so-boss-hint { color: #7FC0EE; }
:root[data-theme="dark"] .so-title { color: #C3A6EA; }
:root[data-theme="dark"] .so-sub { color: var(--text); }