:root {
  --bg: #151d28;
  --bg2: #1b2431;
  --panel: #212d3c;
  --panel2: #2a3949;
  --line: #37485e;
  --text: #e9eef4;
  --muted: #a2b3c8;
  --accent: #ffcb05;     /* Pokémon yellow */
  --accent2: #3b6fd6;    /* Pokémon blue */
  --good: #3fbf6b;
  --bad: #e0556b;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    linear-gradient(rgba(15, 21, 30, .68), rgba(15, 21, 30, .84)),
    url('../assets/champs-bg.png') center / cover fixed no-repeat,
    var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
button { font: inherit; cursor: pointer; }
h1, h2 { margin: 0; }

/* ---------------- HOME ---------------- */
.home { position: relative; }
.hero-actions { position: absolute; top: 2px; right: 0; display: flex; gap: 8px; z-index: 5; }
.ha-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: .15s; }
.ha-btn:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.hero { text-align: center; padding: 14px 0 8px; }
.hero .logo { display: block; width: min(380px, 82%); height: auto; margin: 0 auto 8px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(255, 255, 255, .55)); }
.hero h1 { font-size: 20px; letter-spacing: .3px; font-weight: 800; margin: 0; color: var(--text); }
.format-banner {
  margin: 14px auto 4px; display: inline-flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: center; justify-content: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow);
}
.fmt-name { font-weight: 700; }
.fmt-pills { display: inline-flex; gap: 6px; }
.pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.pill-on { background: rgba(63, 191, 107, .18); color: #7ce0a0; }
.pill-off { background: rgba(224, 85, 107, .18); color: #f59aa9; }
.sub { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.tagline { color: var(--muted); font-size: 14.5px; margin: 6px auto 0; max-width: 560px; line-height: 1.5; }

.panel { margin-top: 28px; }
.panel h2 { font-size: 18px; margin-bottom: 12px; }
.panel-sub { color: var(--muted); font-size: 13px; margin: -6px 0 14px; line-height: 1.5; }
.panel .bias-row { margin-top: 18px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-card {
  text-align: left; background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 14px; color: var(--text); transition: .15s;
  display: flex; flex-direction: column; gap: 4px; min-height: 96px;
}
.cat-card:hover { border-color: #3d5573; transform: translateY(-2px); }
.cat-card.on { border-color: var(--accent); background: linear-gradient(180deg, #283a4d, var(--panel)); box-shadow: 0 0 0 1px var(--accent) inset; }
.cat-card.soon { opacity: .55; cursor: not-allowed; }
.cat-card.soon:hover { transform: none; border-color: var(--line); }
.cat-top { display: flex; justify-content: space-between; align-items: center; }
.cat-icon { font-size: 22px; }
.cat-check { color: var(--accent); font-weight: 800; }
.cat-soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: var(--panel2); padding: 2px 7px; border-radius: 999px; }
.cat-label { font-weight: 700; font-size: 15px; }
.cat-desc { color: var(--muted); font-size: 12.5px; }
.cat-acc { margin-top: auto; font-size: 11.5px; color: var(--accent2); font-weight: 600; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.panel .stats-row { margin-top: 0; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; }
.stat-val { font-size: 22px; font-weight: 800; }
.stat-label { color: var(--muted); font-size: 12px; margin-top: 2px; }

.start-row { display: flex; gap: 12px; justify-content: center; margin-top: 26px; align-items: center; }
.btn-primary {
  background: linear-gradient(180deg, #ffd64a, #f5b50a); color: #1a1300; font-weight: 800;
  border: none; border-radius: 12px; padding: 13px 26px; font-size: 16px; box-shadow: var(--shadow);
  transition: .15s;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; filter: grayscale(.4); cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 13px 18px; }
.btn-ghost:hover { color: var(--text); border-color: #3d5573; }
.foot { margin-top: 38px; color: #8496ab; font-size: 11.5px; text-align: center; line-height: 1.6; }
.foot-support { margin-bottom: 10px; }
.foot-support-note { display: block; max-width: 560px; margin: 0 auto; font-size: 11px; color: var(--muted); }
.foot-privacy { margin-top: 10px; }
.foot-privacy summary { cursor: pointer; }
.foot-privacy p { max-width: 560px; margin: 8px auto 0; }

/* community feedback sheet */
.fb-pop { display: flex; flex-direction: column; gap: 10px; }
.fb-text, .fb-contact { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px; font: inherit; font-size: 14px; }
.fb-text { resize: vertical; min-height: 110px; }
.fb-text:focus, .fb-contact:focus { outline: none; border-color: var(--accent2); }
.fb-attached { font-size: 12px; color: var(--accent2); font-weight: 600; }
.fb-status { font-size: 12.5px; color: var(--muted); min-height: 16px; margin: -4px 0; }
.mp-random { width: 100%; margin-top: -2px; }
.q-report { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 12px; padding: 2px 4px; align-self: center; }
.q-report:hover { color: var(--text); }

/* net-score explainer */
.net-info { background: none; border: none; color: var(--accent2); font-size: 11.5px; font-weight: 600; padding: 2px 4px; cursor: pointer; white-space: nowrap; }
.net-info:hover { text-decoration: underline; }
.ms-morewrap { text-align: center; margin: 2px 0 10px; }
.info-desc p { margin: 0 0 10px; }
.info-desc p:last-child { margin-bottom: 0; }

/* ---------------- QUIZ ---------------- */
.quiz-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.icon-btn { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 10px; width: 40px; height: 40px; font-size: 18px; }
.icon-btn:hover { border-color: #3d5573; }
.score { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 20px; margin-left: 2px; }
.score-acc { font-size: 13px; color: var(--muted); font-weight: 600; }
.streak { margin-left: auto; font-weight: 800; color: var(--accent); font-size: 17px; min-height: 1em; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.chip.on { background: var(--panel2); color: var(--text); border-color: #3d5573; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.card-tags { display: flex; gap: 8px; margin-bottom: 8px; }
.tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.tag-review { --c: #b388ff; }

.subject { text-align: center; margin: 6px 0 4px; }
.subject-img { width: 150px; height: 150px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.subject-img.img-missing { visibility: hidden; }
.subject-name { font-weight: 700; margin-top: 2px; }
.prompt { font-size: 20px; font-weight: 700; text-align: center; margin: 10px 0; line-height: 1.35; }
.prompt-sub { text-align: center; font-size: 16px; font-weight: 600; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 2px auto 8px; max-width: 560px; line-height: 1.45; }
.prompt-badges { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
/* two-mon subject (hidden-coverage threat, synergy cores) */
.subject-pair { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.subj-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 1 auto; }
.subj-mon .subject-img { width: 120px; height: 120px; }
.subj-mon .subject-types { margin-bottom: 0; }
.subj-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.subj-vs { font-size: 18px; font-weight: 800; color: var(--muted); padding: 0 2px; }

.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.option {
  display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1.5px solid var(--line);
  color: var(--text); border-radius: 12px; padding: 13px 14px; min-height: 54px; text-align: left; transition: .12s;
}
.option:hover:not(:disabled) { border-color: #4d6a8f; background: #263447; }
.option:disabled { cursor: default; }
.option.correct { border-color: var(--good); background: rgba(63,191,107,.16); }
.option.wrong { border-color: var(--bad); background: rgba(224,85,107,.16); }
.opt-key { flex: 0 0 22px; height: 22px; border-radius: 6px; background: #0d141c; color: var(--muted); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.opt-body { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.opt-text { font-weight: 700; font-size: 15px; }
.options-mon .option { min-height: 64px; }
/* stacked single-column options for long text (phys/special, ability-impact) */
.options-stack { grid-template-columns: 1fr; }
/* coverage-spread: each option is a row of type icons */
.options-types { grid-template-columns: 1fr 1fr; }
.opt-types { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opt-tech { font-size: 15px; }
@media (max-width: 560px) { .options-types { grid-template-columns: 1fr; } }

/* Master Mode chrome */
.master-bar { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.master-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.master-tag { background: #a855f7; color: #fff; border-radius: 999px; padding: 3px 10px; font-weight: 800; }
.master-dots { display: flex; gap: 6px; }
.mstep { flex: 1 1 0; height: 7px; border-radius: 99px; background: var(--line); transition: .15s; }
.mstep.cur { background: #a855f7; box-shadow: 0 0 0 2px rgba(168,85,247,.3); }
.mstep.done.good { background: var(--good); }
.mstep.done.bad { background: var(--bad); }
.master-recap { text-align: center; max-width: 360px; }
.mr-score { font-size: 42px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.mr-score.good { color: var(--good); } .mr-score.ok { color: #e3b13e; } .mr-score.bad { color: var(--bad); }
.mr-img { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.mr-name { font-size: 20px; font-weight: 800; margin: 2px 0; }
.mr-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.master-recap .btn-primary, .master-recap .btn-ghost { width: 100%; }
.master-recap .btn-ghost { margin-top: 8px; }
.master-open .ro-icon { background: rgba(168,85,247,.18); }

/* item sprites (item-by-description drill, set chips, info popups) */
.item-spr, .opt-item-spr, .rc-chip-spr, .info-item-spr { object-fit: contain; vertical-align: middle; flex: 0 0 auto; }
.opt-item-spr { width: 30px; height: 30px; }
.rc-chip-spr { width: 20px; height: 20px; margin: -2px 1px -2px -2px; }
.info-item-spr { width: 34px; height: 34px; }
.item-sheet { background-image: url(../assets/items/_sheet/itemicons-sheet.png); background-repeat: no-repeat; display: inline-block; width: 24px; height: 24px; }
.info-head { display: flex; align-items: center; gap: 8px; }
.info-head .info-title { margin: 0; }
.opt-mon-img { width: 46px; height: 46px; object-fit: contain; }
.opt-mon-img.img-missing { visibility: hidden; }
.opt-mon-name { font-weight: 700; font-size: 14px; }

.badge { display: inline-block; padding: 4px 11px; border-radius: 7px; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .3px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
/* ---- type icons (replace text type-tags) ---- */
.tico { display: inline-flex; align-items: center; gap: 5px; position: relative; vertical-align: middle; }
.tico-img { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.tico-name { font-weight: 700; font-size: 12.5px; color: var(--text); }
.tico-lg .tico-img { width: 26px; height: 26px; }
.tico-lg .tico-name { font-size: 14px; }
.tico-mult { position: absolute; top: -4px; right: -4px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font-size: 8px; font-weight: 800; line-height: 1;
  padding: 1px 3px; box-shadow: 0 1px 2px rgba(0,0,0,.45); pointer-events: none; }
/* ---- unified Weak / Resist zones (compare cards + match-log action cards) ---- */
.wrz-wrap { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.wrz { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 5px 8px 6px; border: 1px solid transparent; }
.wrz-weak { background: rgba(224,85,107,.10); border-color: rgba(224,85,107,.28); }
.wrz-res  { background: rgba(63,191,107,.10); border-color: rgba(63,191,107,.28); }
.wrz-lbl { flex: 0 0 auto; width: 44px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding-top: 5px; }
.wrz-weak .wrz-lbl { color: #f08a9a; }
.wrz-res  .wrz-lbl { color: #7bd69b; }
.wrz-icos { display: flex; flex-wrap: wrap; gap: 6px 7px; min-width: 0; min-height: 20px; align-content: flex-start; padding-top: 1px; }
.wrz-none { color: var(--muted); font-size: 12px; padding-top: 3px; }
.wrz-card .wrz-icos .tico-img { width: 18px; height: 18px; }

.feedback { margin-top: 16px; }
.verdict { font-weight: 800; font-size: 17px; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.explain { color: var(--muted); margin: 6px 0 14px; line-height: 1.5; }
.next-btn { width: 100%; }
.kbd-hint { text-align: center; color: #61718a; font-size: 12px; margin-top: 16px; }

/* subject type pills (above the sprite) */
.subject-types { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }

/* grade (speed tier) badges + options */
.grade-badge { min-width: 24px; text-align: center; font-size: 14px; padding: 4px 10px; }
.options-grade { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.options-grade .option { flex-direction: column; gap: 5px; min-height: 70px; justify-content: center; text-align: center; padding: 10px 6px; }
.options-grade .opt-key { display: none; }
.opt-text.dim { color: var(--muted); font-weight: 600; font-size: 11px; }

/* 18-type multi-select */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 16px; }
.type-toggle { display: flex; justify-content: center; background: transparent; border: 2px solid transparent; border-radius: 10px; padding: 6px 4px; opacity: .5; transition: .12s; }
.type-toggle:hover:not(:disabled) { opacity: .85; }
.type-toggle.selected { opacity: 1; border-color: var(--accent); background: var(--panel2); }
.type-toggle:disabled { cursor: default; }
.type-toggle.correct { opacity: 1; border-color: var(--good); background: rgba(63, 191, 107, .16); }
.type-toggle.wrong { opacity: 1; border-color: var(--bad); background: rgba(224, 85, 107, .16); }
.submit-btn { width: 100%; margin-top: 16px; }

/* visual answer reveal */
.quiz.answered .options, .quiz.answered .type-grid { opacity: .55; }
.quiz.answered .prompt { opacity: .7; }
.reveal { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 4px 0 16px; }
.reveal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 7px 0; }
.reveal-label { color: var(--muted); font-weight: 600; }
.reveal-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.reveal-text { font-weight: 700; }
.reveal-line.big { font-size: 18px; margin: 4px 0 10px; }
.reveal-line.big .reveal-label { color: var(--text); font-weight: 800; }
.reveal-line.big .reveal-text { font-size: 18px; }
.reveal-line.big .tico-img { width: 24px; height: 24px; }
.reveal-line.big .tico-name { font-size: 15px; }
/* synergy/moveset reveals: partner mons + ability/item/move chips */
.reveal-mons { display: flex; flex-wrap: wrap; gap: 10px; }
.reveal-mon { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px 3px 4px; font-size: 13px; font-weight: 700; }
.reveal-mon-img { width: 30px; height: 30px; object-fit: contain; }
.reveal-mon-name { white-space: nowrap; }
.reveal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reveal-line.big .reveal-mon-name { font-size: 13px; }

/* meta-focus slider */
.bias-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bias-title { font-weight: 700; }
.bias-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.bias-btn { background: var(--panel); border: 1.5px solid var(--line); color: var(--muted); border-radius: 10px; padding: 8px 16px; font-weight: 700; font-size: 14px; transition: .12s; }
.bias-btn:hover { border-color: #3d5573; color: var(--text); }
.bias-btn.on { background: linear-gradient(180deg, #ffd64a, #f5b50a); color: #1a1300; border-color: var(--accent); }
.bias-hint { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }

/* ---------------- META REPORT CARDS ---------------- */
.report-open { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(180deg, #283a4d, var(--panel)); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; color: var(--text); transition: .15s; }
.report-open:hover { border-color: var(--accent); transform: translateY(-1px); }
.ro-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--panel2); font-size: 24px; flex: 0 0 auto; }
.ro-text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.ro-title { font-weight: 800; font-size: 16px; }
.ro-sub { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ro-arrow { font-size: 20px; color: var(--accent); }

/* Home: battle-prep tool grid */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool-card { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; background: linear-gradient(180deg, #283a4d, var(--panel)); border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; color: var(--text); transition: .15s; }
.tool-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tc-top { display: flex; align-items: center; gap: 10px; }
.tc-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--panel2); font-size: 20px; flex: 0 0 auto; }
.tc-icon.tb { background: rgba(255, 203, 5, .14); }
.tc-icon.cmp { background: rgba(224, 85, 107, .18); }
.tc-icon.rc { background: rgba(59, 111, 214, .22); }
.tc-icon.log { background: rgba(63, 191, 107, .16); }
.tc-title { font-weight: 800; font-size: 15.5px; flex: 1; }
.tc-arrow { font-size: 18px; color: var(--accent); }
.tc-desc { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.tc-stat { margin-top: auto; font-size: 11.5px; color: var(--accent2); font-weight: 600; }
.stats-reset { display: block; margin: 10px auto 0; background: none; border: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
.stats-reset:hover { color: var(--text); }

.report-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.report-head h2 { font-size: 20px; flex: 1; }
.report-count { color: var(--muted); font-weight: 700; font-size: 13px; }
.report-search { width: 100%; background: var(--panel); border: 1.5px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px 14px; font-size: 15px; margin-bottom: 12px; }
.report-search:focus { outline: none; border-color: #3d5573; }

.report-view { display: flex; gap: 8px; margin-bottom: 12px; }
.rv-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel); border: 1.5px solid var(--line); color: var(--muted); border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; }
.rv-btn:hover { color: var(--text); border-color: #3d5573; }
.rv-btn.on { background: var(--panel2); color: var(--text); border-color: var(--accent); }
.rv-heart { color: #ff5b7f; }
.report-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 24px 12px; }

.fav-btn { background: transparent; border: none; color: var(--muted); font-size: 21px; line-height: 1; padding: 2px 6px; cursor: pointer; transition: .12s; }
.fav-btn:hover { color: #ff7d99; transform: scale(1.12); }
.fav-btn.on { color: #ff4f78; }
.rr-fav { flex: 0 0 auto; }
.fav-lg { font-size: 25px; }

.report-list { display: flex; flex-direction: column; gap: 6px; }
.report-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--text); text-align: left; transition: .1s; }
.report-row:hover { border-color: #3d5573; background: var(--panel2); }
.rr-rank { color: var(--muted); font-weight: 800; font-size: 13px; min-width: 34px; }
.rr-img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.rr-img.img-missing { visibility: hidden; }
.rr-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rr-name { font-weight: 700; }
.rr-types { display: flex; gap: 5px; }
.rr-wr { color: var(--muted); font-size: 12px; font-weight: 600; }
.rr-types .tico-img, .tt-types .tico-img, .rd-types .tico-img { width: 16px; height: 16px; }

.rc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.rc-top { display: flex; gap: 14px; align-items: center; }
.matchmap-btn { flex: 0 0 auto; align-self: flex-start; margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(180deg, #26405a, #1c2c3d); border: 1.5px solid var(--accent2); color: var(--text); border-radius: 12px; padding: 11px 14px; font-weight: 800; font-size: 12px; line-height: 1.1; transition: .15s; }
.matchmap-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.mm-btn-icon { font-size: 22px; }
.mm-btn-text { white-space: nowrap; }

.mm-pop { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-width: 440px; width: 100%; box-shadow: var(--shadow); max-height: 86vh; overflow: auto; }
.mm-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.mm-img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.mm-img.img-missing { visibility: hidden; }
.mm-title { font-weight: 800; font-size: 17px; }
.mm-sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
.mm-types-head { display: flex; gap: 6px; }
.mm-rows { display: flex; flex-direction: column; gap: 8px; }
.mm-row { display: flex; align-items: center; gap: 12px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); }
.mm-row.mm-weak { background: rgba(224, 85, 107, .12); border-color: rgba(224, 85, 107, .35); }
.mm-row.mm-resist { background: rgba(63, 191, 107, .12); border-color: rgba(63, 191, 107, .35); }
.mm-row.mm-immune { background: rgba(120, 140, 170, .12); border-color: rgba(120, 140, 170, .35); }
.mm-mult { font-weight: 800; font-size: 16px; min-width: 40px; }
.mm-row.mm-weak .mm-mult { color: #f59aa9; }
.mm-row.mm-resist .mm-mult { color: #7ce0a0; }
.mm-row.mm-immune .mm-mult { color: #aab9cf; }
.mm-types { display: flex; flex-wrap: wrap; gap: 5px; }
.mm-legend { color: var(--muted); font-size: 11.5px; margin: 12px 0; }
.rc-img { width: 96px; height: 96px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.rc-img.img-missing { visibility: hidden; }
.rc-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-types { display: flex; gap: 6px; }
.rc-wr { color: var(--muted); font-size: 13px; font-weight: 600; }
.rc-build { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rc-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; font-weight: 700; }
.rc-chip-lbl { color: var(--muted); font-weight: 600; margin-right: 5px; }
.rc-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rc-move { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.rc-sets { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rc-set-row { display: flex; gap: 10px; align-items: flex-start; }
.rc-set-lbl { color: var(--muted); font-weight: 700; font-size: 12px; min-width: 52px; padding-top: 6px; }
.rc-set-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.rc-chip.clickable, .rc-move.clickable { cursor: pointer; transition: .1s; }
.rc-chip.clickable:hover, .rc-move.clickable:hover { border-color: var(--accent); }
.rc-chip-pct { color: var(--accent2); font-weight: 800; margin-left: 6px; font-size: 11px; }
.rc-h { font-size: 15px; margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; }
.rc-bst { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 13px; }

/* info popup */
.info-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); display: grid; place-items: center; z-index: 50; padding: 20px; overscroll-behavior: contain; }
.info-pop { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; max-width: 380px; width: 100%; box-shadow: var(--shadow); max-height: 86vh; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.info-title { font-weight: 800; font-size: 18px; }
.info-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 9px 0; }
.info-pct { background: var(--panel2); color: var(--accent2); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.info-meta { color: var(--muted); font-weight: 600; font-size: 12px; }
.info-desc { color: var(--text); line-height: 1.5; margin: 6px 0 14px; font-size: 14px; }
.info-close { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px; font-weight: 700; }
.info-close:hover { border-color: #3d5573; }

.stat-grid { display: flex; flex-direction: column; gap: 7px; }
.stat-line { display: grid; grid-template-columns: 38px 1fr 38px 28px; align-items: center; gap: 10px; }
.stat-lbl { color: var(--muted); font-weight: 700; font-size: 13px; }
.stat-bar { height: 9px; background: #0d141c; border-radius: 5px; overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; border-radius: 5px; }
.stat-line .stat-val { text-align: right; font-weight: 700; font-size: 13px; }

.tt-section { margin-top: 16px; }
.tt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tt-head h3 { font-size: 15px; margin: 0; }
.tt-sub { color: var(--muted); font-size: 12px; }
.tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-entry { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; color: var(--text); text-align: left; transition: .1s; cursor: pointer; }
.tt-entry:not(.nodrill):hover { border-color: #3d5573; }
.tt-entry.nodrill { cursor: default; }
.tt-img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.tt-img.img-missing { visibility: hidden; }
.tt-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tt-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-types { display: flex; gap: 4px; }
.tt-mult { font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 6px; color: #fff; flex: 0 0 auto; }
.tt-entry.threat .tt-mult { background: var(--bad); }
.tt-entry.target .tt-mult { background: var(--good); }
.tt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tt-more, .tt-full { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 7px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.tt-more:hover { color: var(--text); border-color: #3d5573; }
.tt-full { color: var(--accent2); border-color: #2d4a4a; font-weight: 700; }
.tt-full:hover { color: var(--text); border-color: var(--accent2); }
.tt-empty { color: var(--muted); font-size: 13px; }

/* net-score chip on threat/target rows */
.tt-score { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 1px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; background: var(--panel); cursor: pointer; transition: .1s; }
.tt-score:hover { border-color: var(--accent); }
.tt-score-lbl { font-size: 8px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.tt-score-val { font-size: 14px; font-weight: 800; }
.tt-score.neg .tt-score-val { color: var(--bad); }
.tt-score.pos .tt-score-val { color: var(--good); }

/* matchup breakdown popup */
.ms-pop { max-width: 420px; }
.ms-types { display: flex; gap: 5px; margin: 8px 0 12px; }
.ms-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.ms-lbl { color: var(--muted); font-size: 13px; }
.ms-mult { font-weight: 800; font-size: 13px; padding: 3px 9px; border-radius: 6px; color: #fff; white-space: nowrap; }
.ms-mult.neg { background: var(--bad); }
.ms-mult.pos { background: var(--good); }
.ms-spd { font-size: 12.5px; font-weight: 600; text-align: right; }
.ms-score { margin: 12px 0 4px; padding: 10px; border-radius: 10px; text-align: center; font-weight: 800; font-size: 18px; border: 1px solid var(--line); }
.ms-score.neg { color: var(--bad); background: rgba(224, 84, 79, .10); }
.ms-score.pos { color: var(--good); background: rgba(51, 196, 107, .10); }

/* full sortable threat/target detail list */
.rd-sub { color: var(--muted); font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
.rd-sortbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rd-sort-lbl { color: var(--muted); font-size: 12px; font-weight: 600; }
.rd-sort-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.rd-sort-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rd-list { display: flex; flex-direction: column; gap: 6px; }
.rd-row { display: flex; align-items: center; gap: 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: .1s; }
.rd-row:hover { border-color: #3d5573; }
.rd-rank { color: var(--muted); font-weight: 700; font-size: 11.5px; width: 34px; flex: 0 0 auto; }
.rd-img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.rd-img.img-missing { visibility: hidden; }
.rd-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rd-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-types { display: flex; gap: 4px; }
.rd-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; font-weight: 800; font-size: 12.5px; width: 40px; flex: 0 0 auto; }
.rd-cell-lbl { font-size: 8px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.rd-spd.pos { color: var(--good); }
.rd-spd.neg { color: var(--bad); }
.rd-score { font-weight: 800; font-size: 16px; width: 40px; text-align: center; flex: 0 0 auto; }
.rd-score.neg { color: var(--bad); }
.rd-score.pos { color: var(--good); }

/* ---------- Compare tool ---------- */
.cmp-modes { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cmp-mode-lbl { color: var(--muted); font-size: 12px; font-weight: 600; }
.cmp-mode-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: 13px; cursor: pointer; }
.cmp-mode-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cmp-clear-all { margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.cmp-clear-all:hover { color: var(--bad); border-color: var(--bad); }
.cmp-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.cmp-col { min-width: 0; } /* let the 1fr slot columns shrink instead of overflowing */
.cmp-col-head { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.cmp-col.left .cmp-col-head { color: var(--good); }
.cmp-col.right .cmp-col-head { color: var(--bad); }
.cmp-slots { display: flex; flex-direction: column; gap: 7px; }
.cmp-slot { display: flex; align-items: center; gap: 7px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 5px 7px; }
.cmp-slot.filled { border-color: #3d5573; }
.cmp-img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.cmp-img.img-missing { visibility: hidden; }
.cmp-img-empty { display: grid; place-items: center; color: var(--muted); font-weight: 800; background: #0d141c; border-radius: 6px; }
.cmp-input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text); font-size: 13px; font-weight: 600; outline: none; }
.cmp-clear { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 3px; flex: 0 0 auto; }
.cmp-clear:hover { color: var(--bad); }
.cmp-vs { align-self: center; color: var(--muted); font-weight: 800; font-size: 13px; padding-top: 22px; }

.cmp-results { margin-top: 18px; }
.cmp-empty { margin-top: 18px; color: var(--muted); font-size: 14px; text-align: center; padding: 24px; border: 1px dashed var(--line); border-radius: 12px; }
.cmp-verdict { text-align: center; font-weight: 800; font-size: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 14px; }
.cmp-verdict.pos { color: var(--good); background: rgba(51, 196, 107, .10); border-color: #2c5a3e; }
.cmp-verdict.neg { color: var(--bad); background: rgba(224, 84, 79, .10); border-color: #6a2f2d; }
.cmp-verdict.even { color: var(--muted); }

.cmp-h2h-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 12px; }
.cmp-vs-big { color: var(--muted); font-weight: 800; font-size: 18px; }
.cmp-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; transition: .1s; }
.cmp-mini:hover { border-color: var(--accent); }
.cmp-mini-img { width: 76px; height: 76px; object-fit: contain; }
.cmp-mini-img.img-missing { visibility: hidden; }
.cmp-mini-name { font-weight: 800; font-size: 13px; text-align: center; }
.cmp-mini-types { display: flex; gap: 4px; }
.cmp-h2h-detail { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; margin-bottom: 16px; }
.cmp-tap-hint { color: var(--muted); font-size: 11.5px; padding: 8px 0 4px; border-top: 1px solid var(--line); }

.cmp-block { margin-top: 16px; }
.cmp-block-h { font-size: 14px; margin: 0 0 10px; }
.cmp-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp-colcell { min-width: 0; }
.cmp-colcell-mon { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.cmp-colcell-img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.cmp-colcell-img.img-missing { visibility: hidden; }
.cmp-colcell-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmp-grid-wrap { overflow-x: auto; padding-bottom: 4px; }
.cmp-grid { display: grid; gap: 4px; min-width: max-content; }
.cmp-grid-corner { font-size: 10px; color: var(--muted); display: grid; place-items: center; font-weight: 700; }
.cmp-grid-colhead, .cmp-grid-rowhead { display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 2px; }
.cmp-grid-colhead:hover, .cmp-grid-rowhead:hover { border-color: var(--accent); }
.cmp-grid-img { width: 40px; height: 40px; object-fit: contain; }
.cmp-grid-img.img-missing { visibility: hidden; }
.cmp-cell { display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: 14px; cursor: pointer; min-height: 44px; border: 1px solid transparent; color: #fff; }
.cmp-cell:hover { border-color: #fff3; }
.cmp-cell.win2 { background: #2f9e57; }
.cmp-cell.win1 { background: #2f9e5766; }
.cmp-cell.lose2 { background: #d1453f; }
.cmp-cell.lose1 { background: #d1453f66; }
.cmp-cell.even { background: var(--panel2); color: var(--muted); }
.cmp-grid-legend { color: var(--muted); font-size: 11.5px; margin: 8px 0 4px; line-height: 1.4; }

.cmp-sum { display: flex; flex-direction: column; gap: 6px; }
.cmp-sum-line { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; cursor: pointer; flex-wrap: wrap; }
.cmp-sum-line:hover { border-color: #3d5573; }
.cmp-sum-line.danger { border-color: #6a2f2d; }
.cmp-sum-mon { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.cmp-sum-img { width: 30px; height: 30px; object-fit: contain; }
.cmp-sum-img.img-missing { visibility: hidden; }
.cmp-sum-name { white-space: nowrap; }
.cmp-sum-wl { font-weight: 800; font-size: 12.5px; color: var(--text); flex: 0 0 auto; }
.cmp-sum-extra { color: var(--muted); font-size: 11.5px; flex: 1; min-width: 0; }
.md-pop h4.md-h { font-size: 13px; margin: 14px 0 8px; color: var(--muted); }

/* ---------- Saved builds (Compare) ---------- */
.cmp-builds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cmp-build-lbl { color: var(--muted); font-size: 12px; font-weight: 700; }
.cmp-build-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.cmp-build-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel2); }
.cmp-build-load { background: transparent; border: none; color: var(--text); font-weight: 700; font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.cmp-build-load:hover { color: var(--accent2); }
.cmp-build-menu { background: transparent; border: none; border-left: 1px solid var(--line); color: var(--muted); padding: 0 8px; cursor: pointer; font-weight: 800; }
.cmp-build-menu:hover { color: var(--text); }
.cmp-build-save { background: transparent; border: 1px dashed var(--line); color: var(--accent2); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12px; cursor: pointer; }
.cmp-build-save:hover { border-color: var(--accent2); color: var(--text); }

/* ---------- Compare summary cards ---------- */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: stretch; }
.cmp-card { min-width: 0; display: flex; flex-direction: column; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: .1s; }
.cmp-card .cmp-card-mu { margin-top: auto; }
.cmp-card:hover { border-color: #3d5573; }
.cmp-card.danger { border-color: #6a2f2d; }
.cmp-card-head { display: flex; align-items: center; gap: 9px; }
.cmp-card-img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.cmp-card-img.img-missing { visibility: hidden; }
.cmp-card-id { flex: 1; min-width: 0; }
.cmp-card-top { display: flex; align-items: center; gap: 8px; }
.cmp-card-name { font-weight: 800; font-size: 14px; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-card-badges { display: flex; gap: 4px; margin-top: 4px; }
.cmp-card-wl { flex: 0 0 auto; font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel); }
.cmp-card-wl.pos { color: var(--good); } .cmp-card-wl.neg { color: var(--bad); } .cmp-card-wl.even { color: var(--muted); }
/* (Weak/Resist on cards now rendered by the shared .wrz zones defined above) */
.cmp-card-mu { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 13px; color: var(--text); line-height: 1.7; }
.cmp-card-mu-lbl { font-weight: 700; color: var(--muted); }
.cmp-card-mu-s { font-weight: 800; }
.cmp-card-mu-s.pos { color: var(--good); } .cmp-card-mu-s.neg { color: var(--bad); }

/* ---------- Log Match button ---------- */
.cmp-log-btn { width: 100%; margin-bottom: 14px; background: linear-gradient(180deg, #2a4a3a, #1d3329); border: 1.5px solid var(--good); color: var(--text); border-radius: 12px; padding: 12px; font-weight: 800; font-size: 14px; cursor: pointer; transition: .15s; }
.cmp-log-btn:hover { transform: translateY(-1px); border-color: #4fd98a; }

/* ---------- Match log screen ---------- */
.mlog-section { margin-bottom: 18px; }
.mlog-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mlog-card { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; cursor: pointer; transition: .1s; }
.mlog-card:hover { border-color: #3d5573; }
.mlog-card.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mlog-card.rec { border-left: 3px solid var(--good); }
.mlog-card-img { width: 52px; height: 52px; object-fit: contain; }
.mlog-card-img.img-missing { visibility: hidden; }
.mlog-card-name { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlog-card-types { display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
.mlog-rec-badge { position: absolute; top: 4px; right: 4px; background: var(--good); color: #07140c; font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 999px; }
.mlog-userec { background: transparent; border: 1px solid var(--good); color: var(--good); border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.mlog-userec:hover { background: rgba(51, 196, 107, .12); }
.mlog-reveal-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mlog-reveal-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 4px 11px 4px 5px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.mlog-reveal-chip.on { border-color: var(--bad); background: rgba(224, 84, 79, .12); }
.mlog-reveal-img { width: 26px; height: 26px; object-fit: contain; }
.mlog-reveal-img.img-missing { display: none; }
.mlog-side-lbl { font-weight: 800; font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
.mlog-active-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 6px; }
.mlog-active-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.mlog-active-head { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.mlog-active-img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.mlog-active-img.img-missing { visibility: hidden; }
.mlog-tally { margin-left: auto; background: var(--panel); color: var(--muted); font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.mlog-actions { display: flex; gap: 6px; margin-top: 8px; }
.mlog-knock-btn, .mlog-hit-btn { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px; font-weight: 700; font-size: 12px; cursor: pointer; background: var(--panel); color: var(--text); }
.mlog-knock-btn:hover { border-color: var(--bad); color: var(--bad); }
.mlog-hit-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.mlog-events { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.mlog-event-row { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; border-left: 3px solid var(--line); }
.mlog-event-row.me { border-left-color: var(--good); }
.mlog-event-row.opp { border-left-color: var(--bad); }
.mlog-event-txt { flex: 1; min-width: 0; }
.mlog-ev-del { background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
.mlog-ev-del:hover { color: var(--bad); }
.mlog-notes { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.mlog-results { display: flex; gap: 10px; }
.mlog-result { flex: 1; border-radius: 12px; padding: 14px; font-weight: 800; font-size: 16px; cursor: pointer; border: 1.5px solid var(--line); background: var(--panel2); color: var(--text); }
.mlog-result.win { border-color: var(--good); color: var(--good); }
.mlog-result.win:hover { background: rgba(51, 196, 107, .14); }
.mlog-result.loss { border-color: var(--bad); color: var(--bad); }
.mlog-result.loss:hover { background: rgba(224, 84, 79, .14); }
/* action sheets */
.mlog-picklist { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mlog-picklist-row { display: flex; align-items: center; gap: 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; min-height: 44px; cursor: pointer; }
.mlog-picklist-row:hover { border-color: #3d5573; }
.mlog-picklist-row.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mlog-pick-img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.mlog-pick-img.img-missing { visibility: hidden; }
.mlog-check-row { display: flex; align-items: center; gap: 9px; padding: 9px 2px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.mlog-check-row input { width: 20px; height: 20px; }
.mlog-slider-wrap { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.mlog-slider { width: 100%; height: 26px; }
.mlog-slider-read { font-weight: 800; font-size: 14px; color: var(--accent2); text-align: center; }
/* bring picker: actions + collapsed strip */
.mlog-pick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mlog-collapse { background: var(--accent); border: none; color: #fff; border-radius: 8px; padding: 7px 16px; font-weight: 800; font-size: 13px; cursor: pointer; }
.mlog-pick-head { display: flex; align-items: center; justify-content: space-between; }
.mlog-pick-head .cmp-block-h { margin: 0; }
.mlog-change { background: transparent; border: 1px solid var(--line); color: var(--accent2); border-radius: 8px; padding: 5px 12px; font-weight: 700; font-size: 12px; cursor: pointer; }
.mlog-pick-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mlog-strip-mon { display: flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 12px 4px 5px; font-weight: 700; font-size: 12.5px; }
.mlog-strip-img { width: 28px; height: 28px; object-fit: contain; }
.mlog-strip-img.img-missing { display: none; }
/* action card: typing + weak/resist strip */
.mlog-active-head { flex-wrap: wrap; align-items: center; }
.mlog-active-id { flex: 0 1 auto; min-width: 0; }
.mlog-active-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.mlog-active-types { display: flex; gap: 3px; margin-top: 3px; }
/* action card: equal height, buttons pinned to the bottom regardless of typing length */
.mlog-active-card { display: flex; flex-direction: column; }
.mlog-active-card .wrz-wrap { margin: 8px 0 12px; }
.mlog-active-card .mlog-actions { margin-top: auto; padding-top: 2px; }
/* logged matches list */
.report-count.win { color: var(--good); } .report-count.loss { color: var(--bad); }
.ml-list { display: flex; flex-direction: column; gap: 7px; }
.ml-list-row { display: flex; align-items: center; gap: 11px; background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: .1s; }
.ml-list-row:hover { border-color: #3d5573; }
.ml-list-row.win { border-left-color: var(--good); } .ml-list-row.loss { border-left-color: var(--bad); }
.ml-list-res { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; font-weight: 800; font-size: 13px; background: var(--panel); }
.ml-list-res.win { color: var(--good); } .ml-list-res.loss { color: var(--bad); }
.ml-list-main { flex: 1; min-width: 0; }
.ml-list-vs { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-list-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ml-del { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.ml-del:hover { color: var(--bad); }
/* logged match detail */
.ml-detail { display: flex; flex-direction: column; gap: 4px; }
.ml-d-team { margin-bottom: 8px; }
.ml-d-lbl { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ml-d-mons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.ml-d-mon { display: flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 5px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.ml-d-mon:hover { border-color: #3d5573; }
.ml-d-img { width: 26px; height: 26px; object-fit: contain; }
.ml-d-img.img-missing { display: none; }
.ml-d-mvp { background: rgba(227,177,62,.12); border: 1px solid #6a5a2d; color: var(--warn, #e3b13e); border-radius: 10px; padding: 9px 12px; font-weight: 800; font-size: 13px; margin: 8px 0; }
.ml-d-notes { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* type-chart popup + match-log head buttons */
.mlog-head-btns { display: flex; gap: 8px; }
.tc-pop { max-width: min(96vw, 900px); }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.tc-scroll { overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; -webkit-overflow-scrolling: touch; background: #0d141c; }
.tc-img { display: block; width: 100%; height: auto; }
.tc-img.tc-full { width: 818px; max-width: none; }

/* ---- match-log: speed chips, mega/status controls, turn-order panel ---- */
.mlog-active-head { flex-wrap: nowrap; }
.mlog-spe-chip { margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; line-height: 1.05; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; min-width: 54px; }
.mlog-spe-chip.first { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mlog-spe-rank { font-size: 11px; font-weight: 800; color: var(--accent); }
.mlog-spe-val { font-size: 13px; font-weight: 800; }
.mlog-spe-lbl { font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mlog-mega-tag { background: linear-gradient(180deg,#7b5cff,#5a3fd6); color: #fff; font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 5px; letter-spacing: .04em; margin-left: 5px; }
.mlog-spd-controls { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.mlog-mini-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; padding: 4px 8px; font-weight: 700; font-size: 11px; cursor: pointer; white-space: nowrap; }
.mlog-mini-btn:hover { color: var(--text); border-color: #3d5573; }
.mlog-mini-btn.on { color: #c9b6ff; border-color: #6a5acd; background: rgba(123,92,255,.16); }
.mlog-mini-btn.on.bad { color: #ffd36b; border-color: #b5912f; background: rgba(227,177,62,.16); }
.mlog-turn { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; margin-bottom: 12px; }
.mlog-turn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; cursor: pointer; }
.mlog-turn-head:hover .mlog-turn-lbl { color: var(--accent); }
.mlog-turn:not(.open) .mlog-turn-head { margin-bottom: 0; }
.mlog-weather-sel { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: 12px; cursor: pointer; }
.mlog-weather-sel.on { background: var(--accent); border-color: var(--accent); color: #1a1300; }
.mlog-turn-lbl { font-weight: 800; font-size: 13px; }
.mlog-turn-note { color: var(--muted); font-size: 11px; }
.mlog-cond-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.mlog-conds-lbl { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.mlog-cond-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 11px; font-weight: 700; font-size: 12px; cursor: pointer; }
.mlog-cond-btn:hover { color: var(--text); border-color: #3d5573; }
.mlog-cond-btn.on { background: var(--accent); border-color: var(--accent); color: #1a1300; }
.mlog-cond-btn.on.tw-me { background: var(--good); border-color: var(--good); color: #07140c; }
.mlog-cond-btn.on.tw-opp { background: var(--bad); border-color: var(--bad); color: #fff; }
.mlog-order-list { display: flex; flex-direction: column; gap: 4px; }
.mlog-order-row { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.mlog-order-row.me { border-left-color: var(--good); }
.mlog-order-row.opp { border-left-color: var(--bad); }
.mlog-order-rank { font-weight: 800; font-size: 12px; color: var(--accent); width: 26px; flex: 0 0 auto; }
.mlog-order-img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.mlog-order-img.img-missing { display: none; }
.mlog-order-name { flex: 1; min-width: 0; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlog-order-spe { font-weight: 800; font-size: 12.5px; color: var(--text); flex: 0 0 auto; }
.mlog-turn-foot { color: #61718a; font-size: 10px; margin: 8px 0 0; }
.mlog-order-scarf { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #e3b13e; }
.mlog-order-spe.set, .mlog-spe-chip.set .mlog-spe-val { color: #7ce0a0; }
.mlog-spe-chip.set { background: rgba(63, 191, 107, .14); border-color: rgba(63, 191, 107, .4); }
.mlog-spe-chip.set .mlog-spe-lbl { color: #7ce0a0; font-weight: 800; }

/* ===== Team Builder ===== */
.tb-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tb-team-list { display: flex; flex-direction: column; gap: 10px; }
.tb-team-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.tb-team-row:hover { border-color: #3d5573; }
.tb-team-sprites { display: flex; gap: 2px; flex: 0 0 auto; }
.tb-mini-img { width: 34px; height: 34px; object-fit: contain; }
.tb-mini-img.img-missing { visibility: hidden; }
.tb-mini-empty { width: 34px; height: 34px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); display: grid; place-items: center; font-size: 13px; }
.tb-team-main { flex: 1; min-width: 0; }
.tb-team-name { font-weight: 800; font-size: 15px; }
.tb-team-sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.tb-team-menu { flex: 0 0 auto; }
.tb-team-title { cursor: pointer; }

.tb-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tb-slot { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: left; }
.tb-slot.filled { cursor: pointer; }
.tb-slot.filled:hover { border-color: #3d5573; }
.tb-slot.empty { border-style: dashed; color: var(--muted); font-weight: 700; font-size: 14px; min-height: 92px; cursor: pointer; display: grid; place-items: center; }
.tb-slot.empty:hover { color: var(--text); border-color: #3d5573; }
.tb-slot-head { display: flex; align-items: center; gap: 10px; }
.tb-slot-img { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.tb-slot-img.img-missing { visibility: hidden; }
.tb-unknown-img { width: 52px; height: 52px; border: 1px dashed var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: 20px; flex: 0 0 auto; }
.tb-slot-id { flex: 1; min-width: 0; }
.tb-slot-name { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-slot-types { display: flex; gap: 4px; margin-top: 2px; }
.tb-slot-btns { display: flex; gap: 4px; flex: 0 0 auto; align-self: flex-start; }
.tb-move-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; font-size: 13px; cursor: pointer; }
.tb-move-btn:hover:not(:disabled) { color: var(--text); border-color: #3d5573; }
.tb-move-btn:disabled { opacity: .35; cursor: default; }
.tb-move-btn.tb-x:hover { color: var(--bad); border-color: var(--bad); }
.tb-slot-set { margin-top: 8px; font-size: 12px; }
.tb-setline { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.tb-setbit { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.tb-item-spr { width: 18px; height: 18px; object-fit: contain; }
.tb-statline { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.tb-stat.up { color: #7ce0a0; }
.tb-stat.down { color: #f59aa9; }
.tb-moves { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tb-move-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; }
.tb-move-chip .tico-img { width: 14px; height: 14px; }
.tb-dim { color: var(--muted); font-weight: 600; }
.tb-warn { display: inline-block; color: #e3b13e; font-size: 11px; font-weight: 700; }
.tb-verify-tag { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #e3b13e; background: rgba(227, 177, 62, .12); border: 1px solid rgba(227, 177, 62, .35); border-radius: 999px; padding: 1px 7px; }
.tb-team-foot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tb-caveat { background: none; border: none; color: #61718a; font-size: 11px; text-decoration: underline dotted; cursor: pointer; padding: 0; text-align: left; }
.tb-caveat:hover { color: var(--text); }
.tb-flagline { color: #61718a; font-size: 11px; margin: 6px 0; }
.tb-yourset-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent2); margin-bottom: 4px; }
.tb-note-sec h4 { margin: 10px 0 2px; }
.tb-linked-note { color: #7ce0a0; }
.tb-set-dot { color: #7ce0a0; font-size: 10px; font-weight: 800; margin-left: 3px; }

/* set editor */
.tb-setedit { display: flex; flex-direction: column; gap: 12px; }
.tb-set-id { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.tb-set-img { width: 72px; height: 72px; object-fit: contain; }
.tb-set-img.img-missing { visibility: hidden; }
.tb-set-name { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-set-types { display: flex; gap: 8px; margin-top: 3px; }
.tb-row { display: flex; align-items: center; gap: 10px; }
.tb-row-wrap { flex-wrap: wrap; }
.tb-row-lbl { flex: 0 0 52px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tb-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-locked-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; }
.tb-item-input { max-width: 240px; }
.tb-item-clear { position: static; }
.tb-item-warns { display: flex; flex-direction: column; gap: 2px; flex-basis: 100%; padding-left: 62px; }
.tb-nature-sel, .tb-tier-sel { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; }
.tb-sp { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tb-sp-left { position: sticky; top: 0; z-index: 2; background: var(--panel); font-weight: 800; font-size: 13.5px; padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.tb-sp-left-val { color: var(--accent2); }
.tb-sp-left-val.zero { color: var(--bad); }
.tb-sp-row { display: flex; align-items: center; gap: 7px; }
.tb-sp-lbl { flex: 0 0 30px; font-weight: 800; font-size: 12.5px; }
.tb-sp-base { flex: 0 0 28px; color: var(--muted); font-size: 11.5px; text-align: right; }
.tb-sp-btn { width: 44px; height: 40px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; font-size: 17px; font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.tb-sp-btn:hover { border-color: #3d5573; }
.tb-sp-val { width: 52px; height: 40px; background: #0d141c; border: 1px solid var(--line); color: var(--text); border-radius: 10px; text-align: center; font-weight: 800; font-size: 14px; }
.tb-sp-val::-webkit-outer-spin-button, .tb-sp-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-sp-max { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 4px 8px; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.tb-sp-max:hover { color: var(--text); border-color: #3d5573; }
.tb-sp-arrow { color: var(--muted); font-size: 12px; }
.tb-sp-final { font-weight: 800; font-size: 15px; min-width: 44px; text-align: right; margin-left: auto; }
.tb-sp-final.up { color: #7ce0a0; }
.tb-sp-final.down { color: #f59aa9; }
.tb-moves-edit { display: flex; flex-direction: column; gap: 8px; }
.tb-move-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-move-input { max-width: 220px; }
.tb-move-meta { display: inline-flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.tb-move-meta .tico-img { width: 15px; height: 15px; }
.tb-move-warn { flex-basis: 100%; padding-left: 38px; }
.tb-set-foot { display: flex; gap: 10px; margin-top: 6px; }
.stat-lv50 { font-weight: 800; font-size: 12px; color: #7ce0a0; margin-left: 6px; flex: 0 0 auto; }

/* search */
.tb-filters { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tb-frow { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tb-frow-lbl { flex: 0 0 84px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding-top: 8px; }
.tb-frow .cmp-input, .tb-frow .report-search { max-width: 230px; }
.tb-type-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.tb-type-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; }
.tb-type-chip:hover { border-color: #3d5573; }
.tb-type-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: #20303f; }
.tb-micro-hint { flex-basis: 100%; color: #61718a; font-size: 10.5px; padding-left: 94px; }
.tb-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tb-filter-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid #3d5573; border-radius: 999px; padding: 5px 6px 5px 11px; font-size: 12.5px; font-weight: 700; }
.tb-filter-chip .tico-img { width: 15px; height: 15px; }
.tb-chip-x { background: #0d141c; border: none; color: var(--muted); border-radius: 999px; width: 20px; height: 20px; font-size: 12px; cursor: pointer; line-height: 1; }
.tb-chip-x:hover { color: var(--bad); }
.tb-tier-rows { display: flex; flex-direction: column; gap: 6px; }
.tb-tier-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-grade-chip { background: var(--panel2); border: 1px solid var(--line); color: var(--gc); border-radius: 10px; width: 38px; height: 34px; font-weight: 800; font-size: 13px; cursor: pointer; }
.tb-grade-chip:hover { border-color: #3d5573; }
.tb-grade-chip.sel { background: var(--gc); color: #0d141c; border-color: var(--gc); }
.tb-add-tier { padding: 6px 12px; font-size: 12px; border-radius: 10px; }
.tb-result-list { display: flex; flex-direction: column; gap: 6px; }
.tb-result-row { cursor: pointer; }
.tb-onteam { opacity: .45; cursor: default; }
.tb-onteam-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); background: var(--panel2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.tb-rr-grades { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.tb-rr-grade { display: inline-flex; align-items: center; gap: 3px; }
.tb-rr-gl { color: var(--muted); font-size: 10px; font-weight: 800; }
.tb-info-btn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; width: 28px; height: 28px; font-size: 13px; cursor: pointer; flex: 0 0 auto; }
.tb-info-btn:hover { color: var(--text); border-color: #3d5573; }
.tb-all-note { margin-bottom: 8px; }

@media (max-width: 560px) {
  .hero h1 { font-size: 17px; }
  .hero-actions { position: static; justify-content: flex-end; margin-bottom: 2px; }
  .ha-btn { padding: 6px 11px; font-size: 12px; }
  .tools-grid { grid-template-columns: 1fr; }
  .prompt { font-size: 18px; }
  .tt-grid { grid-template-columns: 1fr; }
  .rc-img { width: 80px; height: 80px; }
  .options { grid-template-columns: 1fr; }
  .options-grade { grid-template-columns: repeat(5, 1fr); }
  .options-grade .option { min-height: 58px; padding: 8px 2px; }
  .options-grade .grade-badge { font-size: 13px; padding: 3px 7px; }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-row { gap: 8px; }
  .stat-val { font-size: 18px; }
  .subject-img { width: 120px; height: 120px; }

  /* ---- Report card: phone layout ---- */
  /* Match Map button drops to its own full-width line so it can't clip the types */
  .rc-top { flex-wrap: wrap; }
  .rc-types { flex-wrap: wrap; }
  .matchmap-btn { flex-basis: 100%; margin-left: 0; flex-direction: row; justify-content: center; gap: 8px; padding: 9px; }
  .mm-btn-icon { font-size: 18px; }

  /* Detail threat/target rows: reflow to two lines so nothing overlaps.
     Line 1 = rank · sprite · name+types · net score; Line 2 = they / you / spd strip. */
  .rd-row { flex-wrap: wrap; row-gap: 7px; }
  .rd-main { flex: 1 1 50%; }
  .rd-name { white-space: normal; }
  .rd-score { order: 1; }
  .rd-cell { order: 2; }

  /* ---- Compare: phone layout ---- */
  .cmp-cols { gap: 8px; }
  .cmp-vs { padding-top: 22px; font-size: 11px; }
  .cmp-slot { padding: 5px 6px; gap: 6px; }
  .cmp-img, .cmp-img-empty { width: 30px; height: 30px; }
  .cmp-input { font-size: 12.5px; }
  .cmp-mini-img { width: 60px; height: 60px; }
  .cmp-vs-big { font-size: 15px; }
  /* stats stay side-by-side (direct comparison), but drop the tiny bars */
  .cmp-twocol-stats { gap: 10px; }
  .cmp-twocol-stats .stat-bar { display: none; }
  .cmp-twocol-stats .stat-line { grid-template-columns: 30px 1fr auto; gap: 6px; }
  .cmp-twocol-stats .stat-val { font-size: 14px; }
  /* type maps & sets stack (badges/chips need the width) */
  .cmp-twocol-stack { grid-template-columns: 1fr; gap: 12px; }
  /* team grid */
  .cmp-grid-img { width: 30px; height: 30px; }
  .cmp-cell { min-height: 38px; font-size: 13px; }
  .cmp-grid { gap: 3px; }
  .cmp-sum-extra { flex-basis: 100%; }
  /* summary cards: 2-up (1-up on very narrow) */
  .cmp-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cmp-card { padding: 9px; }
  .cmp-card-img { width: 34px; height: 34px; }
  /* match log */
  .mlog-pick-grid { grid-template-columns: repeat(2, 1fr); }
  .mlog-active-grid { grid-template-columns: 1fr; }
  .mlog-results { flex-direction: column; }
  /* type zones: slightly smaller icons + label gutter on phones */
  .wrz-card .wrz-icos .tico-img { width: 16px; height: 16px; }
  .wrz-lbl { width: 40px; font-size: 8.5px; }
  /* team builder */
  .tb-slots { grid-template-columns: 1fr; }
  .tb-team-sprites .tb-mini-img, .tb-team-sprites .tb-mini-empty { width: 28px; height: 28px; }
  .tb-frow-lbl { flex-basis: 100%; padding-top: 0; }
  .tb-micro-hint { padding-left: 0; }
  .tb-type-chip { width: 36px; height: 36px; }
  .tb-item-warns { padding-left: 0; }
  .tb-move-warn { padding-left: 0; }
  .tb-sp-base { display: none; }
  .tb-frow .cmp-input, .tb-frow .report-search, .tb-move-input, .tb-item-input { max-width: none; flex: 1 1 160px; }
}

@media (max-width: 380px) {
  .cmp-cards { grid-template-columns: 1fr; }
  .tb-sp-btn { width: 40px; }
  .tb-sp-row { gap: 5px; }
}