/* バトサポ — damage calculator
   Layout follows the PC mock: two columns (attacker red / defender blue) and a
   result bar pinned to the bottom of the viewport. */

:root {
  --bg: #eef1f5;
  --card: #ffffff;
  --ink: #1b2430;
  --ink-mid: #56616f;
  --ink-soft: #8a95a3;
  --line: #e3e8ef;
  --line-strong: #cfd7e2;
  --atk: #e0384e;
  --atk-soft: #fdeef0;
  --def: #2f6df6;
  --def-soft: #eef3ff;
  --dark: #131a24;
  --ok: #2bb673;
  --warn: #d98324;
  /* One damage palette, shared by the meter bands and the verdict badge, so a
     colour means the same thing wherever it appears.
       safe   0-100%   |  over 100-200%  |  lethal 200%+
       chance 乱数1発   |  many 3発以上/乱数2発以上  |  none 倒せない */
  --band-safe: #22b573;
  --band-over: #ffc400;
  --band-lethal: #e0384e;
  --band-chance: #ee6c12;
  --band-many: #3b82d6;
  --band-none: #5c6674;
  --band-over-ink: #3a2c00;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 8px 24px rgba(20, 30, 45, .06);
  --resultbar-h: 104px;
}

* { box-sizing: border-box; }

/* The UA's `[hidden] { display: none }` loses to any author rule that sets
   display on a class (same specificity, author sheet wins). `.more` and `.hits`
   both do, so hidden panels stayed on screen until this. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

body { padding-bottom: calc(var(--resultbar-h) + 56px); }

button, input, select { font: inherit; color: inherit; }
b { font-weight: 700; }
code {
  background: #f1f4f8; border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92em;
}

.app { max-width: 1240px; margin: 0 auto; padding: 20px 20px 0; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 14px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.brand__mark {
  width: 26px; height: 26px; border-radius: 8px;
  /* 対角の境目に白を1本。16pxまで小さくしても2色だと分かるようにするため。 */
  background: linear-gradient(135deg, #2fbfa3 0 calc(50% - 1.2px), #ffffff calc(50% - 1.2px) calc(50% + 1.2px), #2f7d6f calc(50% + 1.2px));
}
.tabs { display: flex; gap: 6px; flex: 1; }
.tab {
  border: 0; background: transparent; color: var(--ink-mid);
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600;
}
.tab:hover { background: #f3f6fa; }
.tab.is-active { background: var(--def-soft); color: var(--def); }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #dde3ec; }

/* ---------- buttons / chips ---------- */
.btn {
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card);
  padding: 8px 14px; cursor: pointer; font-weight: 600; color: var(--ink-mid);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #f5f8fc; }
.btn--dark { background: #2c3644; border-color: #2c3644; color: #fff; }
.btn--dark:hover { background: #3a4658; }
.btn--primary { background: var(--def); border-color: var(--def); color: #fff; }
.btn--primary:hover { background: #235ad6; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-mid);
  border-radius: 999px; padding: 7px 15px; cursor: pointer; font-weight: 600; white-space: nowrap;
}
.chip:hover { background: #f5f8fc; }
.chip--toggle[aria-pressed="true"], .chip--toggle.is-on {
  background: var(--def); border-color: var(--def); color: #fff;
}
/* Pressed chips take the panel's accent, same as the ×1.1 nature button.
   These beat `.moveinfo .chip { background: #fff }` on specificity, which is what
   used to make the pressed 急所 chip look unpressed. */
.panel--atk .chip--toggle[aria-pressed="true"], .panel--atk .chip--toggle.is-on {
  background: var(--atk); border-color: var(--atk); color: #fff;
}
.panel--def .chip--toggle[aria-pressed="true"], .panel--def .chip--toggle.is-on {
  background: var(--def); border-color: var(--def); color: #fff;
}
.chip--toggle[disabled] { opacity: .45; cursor: not-allowed; }
.chip--more { border-style: dashed; color: var(--ink-soft); }
.chip--select { padding: 0; position: relative; overflow: hidden; }
.chip--select select {
  appearance: none; border: 0; background: transparent; padding: 7px 30px 7px 15px;
  cursor: pointer; font-weight: 600; color: inherit;
}
.chip--select::after {
  content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 11px; opacity: .6;
}
/* An active select is tinted, NOT inverted: a white `color` here cascades into
   the native dropdown, which paints its options white-on-white. */
.chip--select.is-on { background: #dceaff; border-color: #8fb6f4; color: #14509e; }
.chip--select.is-on select { color: #14509e; }
.chip--select.is-on::after { opacity: .8; }
/* Native popups inherit the select's colour, so pin the options explicitly. */
select option { color: var(--ink); background: #fff; }

/* ---------- env bar ---------- */
.envbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-top: 0;
  padding: 12px 20px;
}
.envbar__label { color: var(--ink-soft); font-weight: 600; margin-right: 4px; }
.envbar__note { color: var(--ink-soft); font-size: 12px; }
/* パーティーの6匹は候補の先頭で分かるように */
.combo__opt small { color: var(--ink-soft); }
.combo__opt small:first-letter { font-weight: 700; }
.envbar__spacer { flex: 1; }

/* ---------- panels ---------- */
.panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: var(--card); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 18px 20px 22px;
}
.panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 14px;
  background: var(--card);
}
.panel--atk { border-top: 3px solid var(--atk); }
.panel--def { border-top: 3px solid var(--def); }
.panel__head { display: flex; align-items: center; justify-content: space-between; }
.panel__title { font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--atk); }
.panel--def .panel__title { color: var(--def); }
.panel__title-ja { letter-spacing: 0; font-size: 13px; }

.seg { display: inline-flex; background: #f2f5f9; border-radius: 999px; padding: 3px; gap: 2px; }
.seg__btn {
  border: 0; background: transparent; border-radius: 999px; padding: 5px 14px;
  cursor: pointer; font-weight: 600; color: var(--ink-mid);
}
.panel--atk .seg__btn.is-active { background: var(--atk); color: #fff; }
.panel--def .seg__btn.is-active { background: var(--def); color: #fff; }

/* ---------- pokemon row ---------- */
.mon {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.mon__sprite {
  width: 54px; height: 54px; border-radius: 12px; flex: none;
  background: repeating-linear-gradient(135deg, #f6d3d8 0 6px, #fdeef0 6px 12px);
}
.panel--def .mon__sprite { background: repeating-linear-gradient(135deg, #cfe0ff 0 6px, #eef3ff 6px 12px); }
.mon__main { flex: 1; min-width: 0; }
/* ---------- mega evolution mark ---------- */
.mon__mega { display: flex; gap: 8px; flex: none; align-items: center; }
.mega-mark {
  display: inline-flex; align-items: center; gap: 3px; line-height: 1;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.mega-mark__disc { width: 32px; height: 32px; display: block; transition: filter .15s; }
.mega-mark__letter { font-size: 11px; font-weight: 800; color: var(--ink-soft); }

/* Off: the same drawing with the colour taken out. */
.mega-mark__glyph { fill: url(#megaOff); transition: fill .15s; }
.mega-mark:hover .mega-mark__glyph { fill: url(#megaOn); opacity: .65; }
.mega-mark:hover { border-radius: 8px; background: #f3f6fa; }

.mega-mark.is-on .mega-mark__glyph { fill: url(#megaOn); opacity: 1; }
.mega-mark.is-on .mega-mark__disc {
  filter: drop-shadow(0 0 3px rgba(120, 220, 255, .9)) drop-shadow(0 0 7px rgba(255, 60, 180, .45));
}
.mega-mark.is-on .mega-mark__letter { color: #b4308c; }

/* User-supplied art (public/img). `is-dim` is only set when the off state is
   reusing the on image, so a real mega-off file is shown untouched. */
.mega-mark__img {
  width: 32px; height: 32px; display: block; object-fit: contain;
  transition: filter .15s, transform .15s;
}
.mega-mark__img.is-dim { filter: grayscale(1) opacity(.45); }
.mega-mark:hover .mega-mark__img.is-dim { filter: grayscale(.35) opacity(.85); }
.mega-mark.is-on .mega-mark__img { filter: drop-shadow(0 0 5px rgba(31, 141, 234, .55)); }
.mon__name { font-size: 17px; font-weight: 700; }
.mon__types { display: flex; gap: 6px; margin-top: 6px; min-height: 22px; }
.mon__stats {
  text-align: right; color: var(--ink-mid); font-size: 12px; white-space: pre-line;
  font-family: ui-monospace, Consolas, monospace; line-height: 1.6;
}

.type-chip {
  display: inline-block; border-radius: 6px; padding: 2px 9px;
  font-size: 12px; font-weight: 700; background: #eef1f5; color: var(--ink-mid);
}

/* ---------- combobox ---------- */
.combo { position: relative; }
.combo__input {
  width: 100%; border: 0; background: transparent; padding: 2px 0; outline: none;
}
.combo__input::placeholder { color: var(--ink-soft); }
.field .combo {
  border: 1.5px solid var(--atk); border-radius: var(--radius-sm);
  padding: 11px 14px; display: flex; align-items: center; gap: 10px;
}
.panel--def .field .combo { border-color: var(--def); }
.field .combo__input { font-size: 16px; font-weight: 600; }
.combo__hint { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.combo__list {
  /* min-width keeps the候補 readable when the input itself is narrow
     (team slots, move boxes); right:auto lets it grow past the input. */
  position: absolute; z-index: 40; left: 0; right: auto; top: calc(100% + 6px);
  width: max-content; min-width: 100%; max-width: min(360px, 88vw);
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 4px; list-style: none;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.combo__opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer;
}
.combo__opt.is-active, .combo__opt:hover { background: #eef3ff; }
.combo__opt small { color: var(--ink-soft); margin-left: auto; font-size: 11px; }
.combo__empty { padding: 10px; color: var(--ink-soft); }

.field__label { display: block; color: var(--ink-mid); font-weight: 600; margin-bottom: 6px; }

/* ---------- move info ---------- */
.moveinfo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--atk-soft); border-radius: var(--radius-sm); padding: 11px 14px;
}
.moveinfo__power b { font-size: 15px; }
.moveinfo__cat { color: var(--atk); font-weight: 700; }
.moveinfo__flags { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.moveinfo .chip { background: #fff; }
.hits {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line-strong); background: #fff; border-radius: 999px;
  padding: 3px 12px 3px 14px; font-weight: 600; color: var(--ink-mid);
}
.numbox--hits { width: 52px; padding: 4px; }
.hits__unit { color: var(--ink-soft); font-size: 12px; }

/* ---------- stat card ---------- */
.statcard { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; }
.statcard__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.statcard__name { font-weight: 700; font-size: 15px; }
.statcard__value b { font-size: 24px; }
.statcard__value small { color: var(--ink-soft); margin-left: 6px; }

.statrow { display: flex; align-items: center; gap: 12px; }
.statrow + .statrow { margin-top: 10px; }
.statrow__label { color: var(--ink-mid); width: 62px; flex: none; font-weight: 600; }
.statrow__label--right { width: auto; margin-left: auto; }
.statrow--nature { margin-top: 12px; }
.statrow--gap { margin-top: 16px; }
.hpreadout--zero { color: var(--atk); }
.seg--nature { background: transparent; padding: 0; gap: 6px; }
.seg--nature .seg__btn { border: 1px solid var(--line-strong); background: var(--card); }
.panel--atk .seg--nature .seg__btn.is-active { background: var(--atk); border-color: var(--atk); color: #fff; }
.panel--def .seg--nature .seg__btn.is-active { background: var(--def); border-color: var(--def); color: #fff; }

/* margin:0 kills the UA's 2px so the bar lines up exactly with the tick row */
.slider { flex: 1; accent-color: var(--atk); height: 4px; margin: 0; min-width: 0; }
.panel--def .slider { accent-color: var(--def); }
.numbox {
  width: 66px; text-align: center; padding: 7px 6px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card);
}
.numbox--rank { width: 62px; }
/* Same 66px footprint as .numbox so both HP sliders line up with the ticks. */
.numbox--pct {
  width: 66px; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  padding: 0; border-color: var(--def);
}
.numbox--pct input {
  width: 36px; border: 0; background: transparent; text-align: right;
  padding: 7px 0; outline: none; font-weight: 700;
}
.numbox--pct i { font-style: normal; color: var(--ink-soft); font-size: 12px; }
.hpreadout {
  margin: 8px 0 14px; text-align: right; color: var(--ink-mid);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.ticks {
  display: flex; justify-content: space-between; color: var(--ink-soft);
  font-size: 11px; padding: 4px 78px 0 74px;
}
.hint { color: var(--ink-soft); font-size: 12px; margin: 8px 0 0; }

.defblock { display: flex; flex-direction: column; gap: 12px; }

/* ---------- presets ---------- */
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.preset {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-mid);
  border-radius: 10px; padding: 8px 16px; cursor: pointer; font-weight: 700;
}
.preset.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ---------- pickers / chips ---------- */
.pickrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.pick__label { display: block; color: var(--ink-soft); font-size: 12px; margin-bottom: 2px; }
.pick__select { width: 100%; border: 0; background: transparent; font-weight: 700; outline: none; }

.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }

.more {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.more__row { display: flex; align-items: center; gap: 12px; }
.more__row > span:first-child { width: 130px; flex: none; color: var(--ink-mid); font-weight: 600; }
.more__row select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; background: var(--card); }
.more__row--check { gap: 8px; cursor: pointer; }
.more__row--check > span { color: var(--ink-mid); }
.more__row output { width: 48px; text-align: right; font-weight: 700; }

/* ---------- multi-attack list ---------- */
.attacks {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; background: #fcfdff;
}
.attacks__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.attacks__title { font-weight: 700; }
.attacks__note { color: var(--ink-soft); font-size: 12px; }
.attacks__list { display: flex; flex-wrap: wrap; gap: 8px; }
.attacks__add { align-self: flex-start; border-style: dashed; }
.attackchip {
  display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; background: var(--card);
}
.attackchip.is-active { border-color: var(--atk); box-shadow: 0 0 0 2px rgba(224, 56, 78, .14); }
.attackchip.is-off { opacity: .5; }
.attackchip__main {
  border: 0; background: transparent; padding: 6px 4px 6px 12px; cursor: pointer;
  font-weight: 700; color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.attackchip.is-off .attackchip__main { text-decoration: line-through; }
.attackchip__num {
  background: #eef1f5; color: var(--ink-mid); border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 800;
}
.attackchip.is-active .attackchip__num { background: var(--atk); color: #fff; }
.attackchip__main small { font-weight: 500; color: var(--ink-soft); }
.attackchip.is-active .attackchip__main { color: var(--atk); }
.attackchip__btn {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-soft);
  padding: 0 8px; font-size: 13px; line-height: 1;
}
.attackchip__btn:hover { background: #f1f4f8; color: var(--ink); }
.attackchip__btn--del:hover { background: var(--atk-soft); color: var(--atk); }
.attackchip__btn:disabled { opacity: .3; cursor: not-allowed; }

.resultbar__count {
  background: #2c3644; color: #cfd7e2; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap;
}

.panel__warning {
  margin-top: 12px; background: #fff6e8; border: 1px solid #f2d4a8; color: #8a5a12;
  border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 600;
}

/* ---------- team support ---------- */
.support {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 18px;
}
.support__intro h2 { margin: 0 0 4px; font-size: 18px; }
.support__intro .hint { margin: 0; }

/* Inputs on the left, verdict on the right - editing and reading in one glance. */
.support__layout {
  display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.support__inputs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#build-results, #selection-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Stack only when the two columns would genuinely stop working - the same
   breakpoint the 選出サポート grid uses, so the two tabs never disagree. */
@media (max-width: 900px) { .support__layout { grid-template-columns: 1fr; } }

.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .teams { grid-template-columns: 1fr; } }
.teams + #selection-results { margin-top: 18px; }
.teamcard { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; min-width: 0; }
.teamcard--mine { border-top: 3px solid var(--atk); }
.teamcard--theirs { border-top: 3px solid var(--def); }
.teamcard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.teamcard__title { font-weight: 700; }
.teamcard__slots { display: flex; flex-direction: column; gap: 8px; }
.teamcard__actions { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
/* The picker rides in the card header, right of the title - not on its own row.
   Both 自分の構築 cards (構築サポート / 選出サポート) use the identical header. */
.teamload { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.teamload .hint { margin: 0; white-space: nowrap; font-size: 11px; }
.teamload select {
  flex: 1; min-width: 84px; max-width: 150px; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 4px 6px; background: var(--card);
  font-weight: 600; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis;
}
/* Compact buttons so title + picker + 保存 + クリア stay on one line. */
.teamcard__head .btn { padding: 5px 10px; font-size: 12px; }

/* ---------- saved teams ---------- */
.savedteams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.savedteam { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.savedteam__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.savedteam__name { font-size: 15px; }
.savedteam__head .hint { margin: 0; }
.savedteam__members { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.savedteam__mon {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fcfdff;
}
.savedteam__mon small { color: var(--ink-soft); font-size: 11px; }
.savedteam__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.teamslot {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
.teamslot__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.teamslot__moves {
  display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 6px; align-items: center;
  padding-left: 34px;
}
/* 「技入力済み」は技欄の下に一段。4つの入力欄の幅を削らないように。 */
.teamslot__fixed {
  grid-column: 2 / -1; justify-self: start;
  padding: 3px 10px; font-size: 11px; border-radius: 999px;
}
.teamslot__fixed[disabled] { display: none; }
.teamslot__moves .combo {
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; min-width: 0;
}
.teamslot__moves .combo__input { font-size: 12px; font-weight: 600; }
.teamslot__moveslabel { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
/* four across is unreadable on a phone - two rows of two instead */
@media (max-width: 860px) {
  .teamslot__moves { grid-template-columns: repeat(2, 1fr); padding-left: 0; }
  .teamslot__moveslabel { grid-column: 1 / -1; }
  .teamslot__fixed { grid-column: 1 / -1; }
}


.metabar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f7f9fc; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
}
.metabar__label { font-weight: 700; }
.metabar__select {
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; background: var(--card);
  font-weight: 700;
}
.metabar .hint { margin: 0; }

.coverage { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.coverage__label { width: 200px; flex: none; font-weight: 700; font-size: 12px; color: var(--ink-mid); }
@media (max-width: 620px) {
  .coverage { flex-wrap: wrap; }
  .coverage__label { width: 100%; }
}
.coverage__bar {
  flex: 1; min-width: 120px; height: 10px; border-radius: 999px; background: #e7ecf3; overflow: hidden;
}
.coverage__fill { display: block; height: 100%; border-radius: 999px; background: var(--band-many); }
.coverage__fill[data-level="good"] { background: var(--band-safe); }
.coverage__fill[data-level="mid"] { background: var(--band-over); }
.coverage__fill[data-level="low"] { background: var(--band-chance); }
.coverage__num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.support__section h4 { margin: 16px 0 8px; font-size: 13px; color: var(--ink-mid); }
.support__section h4:first-of-type { margin-top: 0; }
.findings--cols { columns: 2; column-gap: 24px; }
@media (max-width: 700px) { .findings--cols { columns: 1; } }
.teamslot .combo__list { max-height: 188px; }
.teamslot__no {
  background: #eef1f5; color: var(--ink-mid); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 800; flex: none;
}
/* 縦に並ぶ枠なので、候補リストは短めにして下の枠を覆いすぎないようにする */
.teamslot .combo__list { max-height: 188px; }
/* 自分の枠は赤、相手の枠は青。空の枠も薄く色を付けて、どちら側かひと目で分かるように。 */
.teamcard--mine .teamslot__no { background: var(--atk-soft); color: var(--atk); }
.teamcard--mine .teamslot.is-filled .teamslot__no { background: var(--atk); color: #fff; }
.teamcard--theirs .teamslot__no { background: var(--def-soft); color: var(--def); }
.teamcard--theirs .teamslot.is-filled .teamslot__no { background: var(--def); color: #fff; }
.teamslot .combo { flex: 1; min-width: 0; }
.teamslot .combo__input { font-weight: 700; }
.teamslot__types { display: flex; gap: 4px; flex: none; }
.teamslot__mega { display: flex; gap: 4px; flex: none; }
.megatag {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  border-radius: 6px; padding: 3px 7px; font-size: 11px; font-weight: 800; cursor: pointer;
  line-height: 1.2; white-space: nowrap;
}
.megatag:hover { background: #f3f6fa; }
.megatag.is-on { background: #1f8dea; border-color: #0f5fc0; color: #fff; }

.teamslot__ability {
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; flex: none;
  max-width: 118px; font-size: 12px; font-weight: 600; background: var(--card);
  color: var(--ink-mid);
}
.teamslot__clear {
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  font-size: 13px; padding: 0 4px; flex: none;
}
.teamslot__clear:hover { color: var(--atk); }

.support__section {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px;
}
.support__section h3 { margin: 0 0 4px; font-size: 15px; }
.support__section > .hint { margin: 0 0 12px; }
.support__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.support__empty { color: var(--ink-soft); }

.typerow { display: flex; flex-wrap: wrap; gap: 6px; }
.typetile {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 8px;
  padding: 4px 9px; font-size: 12px; font-weight: 700; border: 1px solid transparent;
}
.typetile b { font-variant-numeric: tabular-nums; }
.typetile--bad { background: #fdeaec; color: #a3283a; border-color: #f3c3ca; }
.typetile--warn { background: #fff5e0; color: #8a5a12; border-color: #f0dcae; }
.typetile--good { background: #e8f7ef; color: #17794b; border-color: #bfe6d2; }

.findings { margin: 0; padding-left: 18px; color: var(--ink-mid); }
.findings li { margin: 4px 0; }
.findings b { color: var(--ink); }

.matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td {
  border: 1px solid var(--line); padding: 6px 8px; text-align: center; font-weight: 600;
}
.matrix thead th { background: #f7f9fc; color: var(--ink-mid); font-size: 12px; }
.matrix tbody th { text-align: left; background: #fcfdff; white-space: nowrap; }
.matrix td[data-lean="win"] { background: #e8f7ef; color: #17794b; }
.matrix td[data-lean="lose"] { background: #fdeaec; color: #a3283a; }
.matrix td[data-lean="even"] { color: var(--ink-soft); }
.matrix__wrap { overflow-x: auto; }

.picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.picks li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
}
.picks li:nth-child(-n+3) { border-color: #bfe6d2; background: #f4fbf7; }
.picks__rank {
  background: var(--band-safe); color: #fff; border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 800; flex: none;
}
.picks li:nth-child(n+4) .picks__rank { background: var(--ink-soft); }
.picks__name { font-weight: 700; flex: 1; min-width: 0; }
.picks__stat { color: var(--ink-mid); font-size: 12px; white-space: nowrap; }

/* ---------- placeholder views ---------- */
.view--soon {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; margin-top: 0;
}
.view--soon h2 { margin-top: 0; }

/* ---------- result bar ---------- */
.resultbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 26px;
  background: var(--dark); color: #fff;
  padding: 16px max(20px, calc((100vw - 1240px) / 2 + 20px));
  min-height: var(--resultbar-h);
}
/* One tone per verdict, read by the badge, the bar and the big number, so the
   whole readout says the same thing in the same colour. */
.resultbar { --tone: var(--band-none); --tone-ink: #fff; --tone-text: #93a0b1; }
.resultbar[data-tone="strong"] { --tone: var(--band-safe); --tone-text: var(--band-safe); }
.resultbar[data-tone="chance"] { --tone: var(--band-chance); --tone-text: var(--band-chance); }
.resultbar[data-tone="normal"] { --tone: var(--band-many); --tone-text: var(--band-many); }
.resultbar[data-tone="over"] {
  --tone: var(--band-over); --tone-ink: var(--band-over-ink); --tone-text: var(--band-over);
}
.resultbar[data-tone="over2"] { --tone: var(--band-lethal); --tone-text: var(--band-lethal); }

.resultbar__left { display: flex; align-items: center; gap: 10px; flex: none; }
/* The verdict stacks: "乱数1発" on top, the percentage under it, so a long
   reading never stretches the row. */
.badge {
  background: var(--tone); color: var(--tone-ink); border-radius: 14px; padding: 5px 14px;
  font-weight: 700; font-size: 13px; line-height: 1.25;
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 92px; text-align: center;
}
.badge small { font-size: 12px; opacity: .92; font-weight: 700; }
/* Percentage is the headline; the raw damage sits under it in small type. */
.resultbar__numbers { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.resultbar__pct {
  font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--tone-text);
}
.resultbar__raw {
  color: #b8c3d1; font-size: 12px; font-variant-numeric: tabular-nums;
  display: flex; gap: 10px; flex-wrap: wrap;
}
/* Length tracks the window, never the numbers beside it: clamp() reads the
   viewport only, so typing in the panels can't make the bar jump. */
.resultbar__bar { flex: none; width: clamp(240px, 38vw, 560px); max-width: 100%; }
.meter { position: relative; height: 8px; border-radius: 999px; background: #2c3644; overflow: hidden; }
.meter__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--tone); border-radius: 999px;
  /* No width transition here. renderResult rewrites the width on every keystroke,
     and the repeatedly-restarted transition ended up pinning the bar at 0. */
}
/* Damage past 100% wraps onto the same bar: the second lap is yellow, the
   third and beyond red, drawn over the green so the overkill is visible.
   Flat fills, not gradients, so the bar matches the badge colour exactly. */
.meter__fill--over { background: var(--band-over); }
.meter__fill--over2 { background: var(--band-lethal); }
.meter__min { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #ffffff88; left: 0; }
.meter__scale { display: flex; justify-content: space-between; color: #7d8a9b; font-size: 11px; margin-top: 6px; }
.resultbar__actions { display: flex; gap: 10px; flex: none; }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 22, 32, .38); }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--card); box-shadow: -8px 0 32px rgba(15, 22, 32, .18);
  display: flex; flex-direction: column;
}
.drawer__panel--wide { width: min(720px, 100vw); }
/* メニューは左から。サイトの下ではなく、縦に並べたバーとして出します。 */
.drawer__panel--left {
  right: auto; left: 0; width: min(280px, 86vw);
  box-shadow: 8px 0 32px rgba(15, 22, 32, .18);
}
.drawer__panel--left .drawer__head h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }

/* ---------- speed chart ---------- */
.speedctl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.speedctl__card {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  min-width: 0; /* grid items default to min-content, which overflowed the drawer */
}
.speedctl__card--atk { border-top: 3px solid var(--atk); }
.speedctl__card--def { border-top: 3px solid var(--def); }
.speedctl__card .statrow__label { width: 52px; }
.speedctl__card .numbox { width: 54px; }
.speedctl__card .ticks { padding: 4px 66px 0 64px; }
/* 性格 + ランク on one line: the pieces are trimmed until the row fits a
   half-width card. Below 720px the drawer is full width and the two cards
   stack instead, so the row never has to break mid-way. */
.speedctl__card .statrow--nature { gap: 8px; flex-wrap: nowrap; }
.speedctl__card .statrow--nature .statrow__label { width: 40px; }
.speedctl__card .seg--nature { gap: 5px; }
.speedctl__card .seg--nature .seg__btn { padding: 5px 9px; font-size: 12px; }
.speedctl__card .statrow__label--right { margin-left: auto; width: auto; font-size: 12px; }
.speedctl__card .numbox--rank { width: 46px; padding: 6px 2px; flex: none; }
.speedctl__card .chiprow { margin-top: 12px; }
.speedctl__card .chip { padding: 5px 11px; font-size: 12px; }
.speedctl__card--atk .slider { accent-color: var(--atk); }
.speedctl__card--def .slider { accent-color: var(--def); }
.speedctl__card--atk .seg__btn.is-active { background: var(--atk); border-color: var(--atk); color: #fff; }
.speedctl__card--def .seg__btn.is-active { background: var(--def); border-color: var(--def); color: #fff; }
.speedctl__field {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px;
}
/* The drawer is min(720px, 100vw); under that the cards get the full width
   rather than squeezing two into a phone screen. */
@media (max-width: 720px) {
  .speedctl { grid-template-columns: 1fr; }
}
.speedctl__field .hint { margin: 0; }
.speedhead__side { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--ink-soft); }
.speedhead__name { font-weight: 700; font-size: 15px; margin-top: 2px; }
.speedhead__note { color: var(--ink-soft); font-size: 12px; margin-top: 4px; }
.speedverdict {
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 6px 0 0;
  font-weight: 700; background: #f2f5f9;
}
.speedverdict[data-side="attacker"] { background: var(--atk-soft); color: #a3283a; }
.speedverdict[data-side="defender"] { background: var(--def-soft); color: #1b4fb8; }
.speedverdict small { display: block; font-weight: 500; color: var(--ink-mid); margin-top: 4px; }
.speedchart { width: 100%; height: auto; display: block; }
.speedchart text { font-family: inherit; font-variant-numeric: tabular-nums; }

.speedtable { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.speedtable th, .speedtable td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.speedtable th:first-child, .speedtable td:first-child { text-align: left; color: var(--ink-mid); font-weight: 600; }
.speedtable thead th { color: var(--ink-soft); font-size: 12px; }
.speedtable td.is-current { font-weight: 800; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.drawer__head h2 { margin: 0; font-size: 17px; }
/* scrollbar-gutter keeps the scrollbar from eating into the content width the
   moment it appears, which was clipping the right edge of the speed panel. */
.drawer__body { padding: 18px 20px 40px; overflow-y: auto; scrollbar-gutter: stable; }
.drawer__body h3 { margin: 22px 0 8px; font-size: 14px; }
.drawer__body h3:first-child { margin-top: 0; }

.kv { width: 100%; border-collapse: collapse; }
.kv th, .kv td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); font-weight: 500; }
.kv th { color: var(--ink-mid); width: 46%; font-weight: 600; }
.kv td { text-align: right; font-variant-numeric: tabular-nums; }
.rolls {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.rolls span {
  background: #f2f5f9; border-radius: 6px; padding: 5px 0; text-align: center;
}
.rolls span.is-ko { background: #dff5e9; color: #17794b; font-weight: 700; }
.notelist { margin: 0; padding-left: 18px; color: var(--ink-mid); }
.notelist li { margin: 3px 0; }
.saved { list-style: none; margin: 0; padding: 0; }
.saved li {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.saved__text { flex: 1; min-width: 0; }
.saved__text b { display: block; }
.saved__text small { color: var(--ink-soft); }
.howto { padding-left: 20px; color: var(--ink-mid); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--resultbar-h) + 20px); z-index: 80;
  background: var(--dark); color: #fff; padding: 10px 20px; border-radius: 999px;
  box-shadow: var(--shadow); font-weight: 600;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .panels { grid-template-columns: 1fr; }
  .resultbar { flex-wrap: wrap; gap: 12px 18px; }
  .resultbar__bar { order: 5; flex-basis: 100%; }
  .tabs { overflow-x: auto; }
}
@media (max-width: 640px) {
  .app { padding: 12px 12px 0; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .panels { padding: 12px; gap: 12px; }
  .panel { padding: 12px; }
  .pickrow { grid-template-columns: 1fr; }
  .resultbar__numbers b { font-size: 30px; }

  /* narrow screens: let the stat rows wrap instead of forcing the page wider */
  .statrow { flex-wrap: wrap; }
  .statrow__label { width: 52px; }
  .statrow__label--right { margin-left: 0; }
  .numbox { width: 56px; }
  .numbox--pct { width: 56px; }
  .numbox--pct input { width: 28px; }
  .numbox--rank { width: 54px; }
  .ticks { padding: 4px 58px 0 54px; }
  .more__row { flex-wrap: wrap; }
  .more__row > span:first-child { width: 100%; }
  .mon__stats { font-size: 11px; }
  .seg__btn { padding: 5px 10px; }
  .combo__hint { display: none; }
}


/* ---------- 対戦サポート ---------- */
/* 入力欄はダメージ計算タブと同じパネル（.panels / .panel--atk / .panel--def）に載せます */
.envbar--battle {
  border-radius: var(--radius) var(--radius) 0 0;
  flex-direction: column; align-items: stretch; gap: 8px;
}
.envbar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panels--battle { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }

/* 素早さ判定は2体の真上。左＝自分・右＝相手・真ん中に詳細。 */
.speedstrip {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-top: 0;
  padding: 12px 20px;
}
.speedcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px;
}
.speedcell__who { font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .08em; }
.speedcell__verdict { font-size: 20px; font-weight: 700; }
.speedcell__sub { color: var(--ink-soft); font-size: 11px; }
.speedcell[data-lean="win"] { border-color: #9adcbd; background: #eefaf3; }
.speedcell[data-lean="win"] .speedcell__verdict { color: #14804a; }
.speedcell[data-lean="lose"] { border-color: #f5b5bf; background: #fdeef0; }
.speedcell[data-lean="lose"] .speedcell__verdict { color: var(--atk); }
.speedcell__mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 132px;
}
.speedcell__title { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.speeddetail { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (max-width: 700px) { .speedstrip { grid-template-columns: 1fr; } }

/* 場の状況は各パネルの中（自分の場 / 相手の場） */
.sidefield {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px;
}
.sidefield__label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.sidefield .chip { padding: 4px 10px; font-size: 12px; }
.panel--def .mon__sprite { background: repeating-linear-gradient(135deg, #cfe0ff 0 6px, #eef3ff 6px 12px); }
.battlemon__gear { display: flex; gap: 8px; margin: 12px 0 8px; }
.battlemon__gear .teamslot__ability { flex: 1; min-width: 0; }
.battlemon__item {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
}
.battlemon__item .combo__input { font-size: 12px; font-weight: 600; }

.battlemon__tune { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.tune__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-mid);
}
.tune__modes .seg__btn { padding: 3px 10px; font-size: 11px; }
.tune__assumption { margin: 0 0 8px; font-size: 11px; color: var(--ink-soft); }
/* ランクのみ: 性格と努力値は使用率データの想定なので触らせない */
.battlemon__tune[data-mode="rank"] .tune__nature,
.battlemon__tune[data-mode="rank"] .tune__num,
.battlemon__tune[data-mode="rank"] .tune__total { display: none; }
.battlemon__tune[data-mode="rank"] .tune__cell { justify-content: space-between; }
.tune__nature { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.tune__nature--none { width: 16px; }
.tune__arrow {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  border-radius: 4px; width: 16px; height: 13px; line-height: 1; font-size: 9px;
  cursor: pointer; padding: 0;
}
.tune__arrow:hover { background: #f5f8fc; }
.tune__arrow.is-on { background: var(--def); border-color: var(--def); color: #fff; }
.panel--atk .tune__arrow.is-on { background: var(--atk); border-color: var(--atk); }
.tune__rank {
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 6px;
  background: var(--card); font-size: 12px; font-weight: 600;
}
.tune__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tune__cell { display: flex; align-items: center; gap: 3px; }
.tune__cell {
  display: flex; align-items: center; gap: 4px; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 6px; min-width: 0;
}
.tune__stat { font-weight: 700; color: var(--ink-soft); font-size: 12px; width: 12px; flex: none; }
.tune__num {
  width: 3.2em; min-width: 0; border: 0; background: transparent; font-weight: 700;
  font-size: 12px; text-align: right; outline: none;
}
.tune__rank { padding: 2px 2px; font-size: 11px; }
.tune__total { margin: 8px 0 0; }
.tune__total.is-over { color: var(--atk); font-weight: 700; }

.battlefield {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f7f9fc; border-radius: 8px; padding: 10px 12px; margin: 18px 0 0;
}
.battlefield__label { font-weight: 700; font-size: 12px; color: var(--ink-soft); }
#battle-results { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

.btable { border-collapse: collapse; width: 100%; font-size: 13px; }
.btable th, .btable td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
}
.btable thead th { background: #f4f7fb; font-size: 12px; color: var(--ink-mid); white-space: nowrap; }
.btable tbody th { background: #fbfcfe; font-weight: 700; }
.btable tbody th small { display: block; font-weight: 600; color: var(--ink-soft); font-size: 11px; }
.btable td[data-lean="win"] { color: #14804a; font-weight: 700; background: #eefaf3; }
.btable td[data-lean="lose"] { color: var(--atk); font-weight: 700; background: #fdeef0; }
.btable td[data-lean="even"] { color: var(--ink-mid); font-weight: 700; }
.btable--dmg td { white-space: nowrap; }
.dmg__pct { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmg__verdict {
  display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--band-none);
}
.dmg__verdict[data-tone="strong"] { background: var(--band-lethal); }
.dmg__verdict[data-tone="warn"] { background: var(--band-chance); color: var(--band-over-ink); }
.dmg__verdict[data-tone="normal"] { background: var(--band-many); }
.dmg__verdict[data-tone="none"] { background: var(--band-none); }
.dmg__raw { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 600; }

.tierrow { display: flex; gap: 8px; flex-wrap: wrap; }
.tier {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 12px; min-width: 74px;
}
.tier b { font-size: 11px; color: var(--ink-mid); }
.tier small { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tier[data-lean="win"] { border-color: #9adcbd; background: #eefaf3; }
.tier[data-lean="win"] small { color: #14804a; }
.tier[data-lean="lose"] { border-color: #f5b5bf; background: #fdeef0; }
.tier[data-lean="lose"] small { color: var(--atk); }
@media (max-width: 700px) { .tune__grid { grid-template-columns: repeat(2, 1fr); } }

/* 判定を左右に並べるモード。幅が足りなければ自動で縦積みに戻します。 */
.dmgpair { display: flex; flex-direction: column; gap: 16px; }
.dmgpair[data-layout="side"] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
@media (max-width: 1040px) { .dmgpair[data-layout="side"] { grid-template-columns: 1fr; } }
.dmgpair .support__section { min-width: 0; }

/* 技の範囲・並び順。ラベルだけが行末に取り残されないよう、塊ごとに折り返します。 */
.scopebar {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  background: #f7f9fc; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}
.scopebar__group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.scopebar__label { font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.scopebar .chip { padding: 4px 12px; font-size: 12px; }

/* 使用率データにある技を強調（赤＝上位4技 / 黄＝そのほか） */
.btable--dmg tbody tr[data-usage="top"] th { background: #fdeef0; border-left: 3px solid var(--atk); }
.btable--dmg tbody tr[data-usage="used"] th { background: #fff8e6; border-left: 3px solid var(--band-over); }
.usagetag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #fff; background: var(--ink-soft);
}
.usagetag[data-level="top"] { background: var(--atk); }
.usagetag[data-level="used"] { background: var(--band-over); color: var(--band-over-ink); }

/* ---------- 構築の管理: その場で追加・編集 ---------- */
.teams__toolbar { display: flex; gap: 8px; margin: 16px 0; }
.teamname {
  flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 6px 10px; background: var(--card); font-weight: 600;
}
[data-role="team-editor"] { margin-top: 16px; border-top-width: 3px; }
[data-role="team-editor"] .teamload { margin: 0 0 10px; }

/* ---------- 公開向け: ヘッダー / フッター / アカウント ---------- */
.topbar__rule {
  width: 1px; align-self: stretch; margin: -4px 4px -4px 0;
  background: var(--line); flex: none;
}
.topbar__x { display: inline-flex; align-items: center; gap: 6px; }
.topbar__right .btn { display: inline-flex; align-items: center; gap: 8px; }
#account-button .avatar {
  width: 24px; height: 24px; background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink-mid);
}
/* ログイン中はアイコンだけ。名前はツールチップとダイアログに出します。 */
#account-button .avatar.is-signed { box-shadow: 0 0 0 2px var(--ok); background-color: #d8f2e5; color: #14804a; }
#account-button:has(#account-label[hidden]) { padding: 6px; }

/* ハンバーガー */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card);
}
.iconbtn:hover { background: #f5f8fc; }
.iconbtn__bars, .iconbtn__bars::before, .iconbtn__bars::after {
  display: block; width: 15px; height: 2px; border-radius: 2px; background: var(--ink);
  content: "";
}
.iconbtn__bars { position: relative; }
.iconbtn__bars::before { position: absolute; top: -5px; }
.iconbtn__bars::after { position: absolute; top: 5px; }
.iconbtn[aria-expanded="true"] { background: var(--def-soft); border-color: #8fb6f4; }

/* 縦に並ぶメニュー */
.sidenav { display: flex; flex-direction: column; padding: 10px 12px; gap: 2px; }
.sidenav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.sidenav__link:hover { background: #f3f6fa; color: var(--def); }
.sidenav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  background: #f2f5f9; color: var(--ink-mid); font-size: 12px;
}
.sidenav__rule { height: 1px; background: var(--line); margin: 8px 12px; }
.sidenav__note { margin: auto 24px 24px; color: var(--ink-soft); font-size: 12px; }

.drawer__panel--narrow { max-width: 420px; }
.auth__seg { display: flex; width: 100%; margin-bottom: 14px; }
.auth__seg .seg__btn { flex: 1; }
.auth__google { margin-bottom: 12px; }
.auth__googlebtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth__googlebtn[disabled] { opacity: .55; cursor: not-allowed; }
.auth__or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  color: var(--ink-soft); font-size: 12px;
}
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authfield { display: block; margin-bottom: 12px; }
.authfield span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-mid); margin-bottom: 4px; }
.authfield input {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 9px 11px; background: var(--card); font-size: 15px;
}
.authfield input:focus { outline: 2px solid var(--def-soft); border-color: var(--def); }
.pwrules { list-style: none; margin: -4px 0 12px; padding: 0; display: grid; gap: 2px; }
.pwrules li { font-size: 12px; color: var(--ink-soft); }
.pwrules li[data-ok="true"] { color: #14804a; font-weight: 700; }
.authcheck { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-mid); }
.autherror {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--atk-soft); color: var(--atk); font-size: 12px; font-weight: 600;
}
/* 確認メールの案内など、失敗ではない知らせ */
.autherror[data-tone="notice"] { background: var(--def-soft); color: var(--def); }
.auth__submit { width: 100%; margin-top: 14px; }
.authwho { margin: 0 0 12px; }
.auth__foot { margin-top: 18px; }
.auth__foot a { color: var(--ink-mid); }
@media (max-width: 760px) {
  .topbar__x span { display: none; }
  #account-label { display: none; }
}

/* 保存先がどこかを、構築管理タブの先頭に1行で出す */
.cloudbadge {
  margin: 0 0 14px; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  background: #f2f5f9; color: var(--ink-mid);
}
.cloudbadge[data-state="on"] { background: #eefaf3; color: #14804a; }
.cloudbadge[data-state="busy"] { background: var(--def-soft); color: var(--def); }
.cloudbadge[data-state="error"] { background: var(--atk-soft); color: var(--atk); }

/* ---------- スマホ: ヘッダーを2段に畳む ---------- */
/* 対戦中に片手で見るので、ヘッダーが画面の1/4を占めないようにします。 */
@media (max-width: 760px) {
  .app { padding: 12px 12px 0; }
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .topbar__rule { display: none; }
  .brand { flex: 1; font-size: 15px; gap: 8px; }
  .brand__mark { width: 22px; height: 22px; }
  .topbar__right { gap: 6px; }
  /* タブは折り返さず横スクロール。5つとも同じ高さに並びます。 */
  .tabs {
    order: 3; flex-basis: 100%; flex-wrap: nowrap; gap: 4px;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 8px 14px; }
}