/* Dota Draft Analyzer — reference-desk dark theme */
:root {
  --n0: #0b0d0f;
  --n1: #101316;
  --n2: #161a1e;
  --n3: #1e2328;
  --n4: #2a3137;
  --n5: #3b444b;
  --n6: #8b969e;
  --n7: #bcc4c9;
  --n8: #ebe8e1;
  --rad: #63c46f;
  --rad-bg: #14251a;
  --dire: #e8644e;
  --dire-bg: #2b1714;
  --link: #79adff;
  --sel: #d6aa4c;
  --warn: #f0b44c;
  --ok: #63c46f;
  --q-common: #4cc24a;
  --q-rare: #4a9cff;
  --q-epic: #a477ff;
  --q-artifact: #f0a51e;
  --q-consumable: #6aa8e8;
  --q-secret: #39cfc2;
  --q-component: #c9cfd3;
  --t1: #bebebe;
  --t2: #92e47e;
  --t3: #8d9ffc;
  --t4: #d88bff;
  --t5: #ffb45c;
  --r-s: 4px;
  --r-m: 6px;
  --gap: 8px;
  --pad: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--n0);
  color: var(--n8);
  font: 400 15px/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
::selection { background: var(--sel); color: var(--n0); }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
* { scrollbar-width: thin; scrollbar-color: var(--n5) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--n5); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg use { pointer-events: none; }

/* top bar */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--pad);
  background: var(--n1);
  border-bottom: 1px solid var(--n4);
}
.top__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top__mark { width: 22px; height: 22px; color: var(--n6); flex: none; }
.top h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.top__status { font-size: 12.5px; color: var(--n7); text-align: right; line-height: 1.3; }
.top__status[data-state="busy"]::before,
.top__status[data-state="error"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; background: var(--sel);
}
.top__status[data-state="error"] { color: var(--dire); }
.top__status[data-state="error"]::before { background: var(--dire); }

/* layout */
.app { display: grid; gap: 0; }
.board, .lib, .ana { min-width: 0; }
.lib, .ana { min-height: 100vh; }

/* board */
.board { padding: 10px var(--pad) 12px; background: var(--n1); border-bottom: 1px solid var(--n4); }
.board__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.seg { display: inline-flex; align-items: center; }
.seg__label { font-size: 13px; color: var(--n7); padding-right: 8px; }
.seg__btn {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--n4); border-radius: 0;
  background: var(--n2); color: var(--n7); font-size: 14px; font-weight: 600;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.seg__btn[data-my="radiant"] { border-radius: var(--r-m) 0 0 var(--r-m); }
.seg__btn[data-my="dire"] { border-radius: 0 var(--r-m) var(--r-m) 0; border-left: 0; }
.seg__btn[aria-checked="true"][data-my="radiant"] { background: var(--rad-bg); color: var(--rad); border-color: #2d5a37; }
.seg__btn[aria-checked="true"][data-my="dire"] { background: var(--dire-bg); color: var(--dire); border-color: #5e2c24; border-left: 0; }
.btn {
  min-height: 40px; padding: 0 14px; border-radius: var(--r-m);
  border: 1px solid var(--n5); background: var(--n3); color: var(--n8);
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { background: var(--n4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--ghost { background: transparent; border-color: var(--n4); color: var(--n7); }
.btn--rad { background: var(--rad-bg); border-color: #2d5a37; color: var(--rad); }
.btn--dire { background: var(--dire-bg); border-color: #5e2c24; color: var(--dire); }
.btn svg { width: 16px; height: 16px; }

.team { margin-top: 8px; }
.team__name { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.team--radiant .team__name { color: var(--rad); }
.team--dire .team__name { color: var(--dire); }
.team__me { font-size: 11.5px; font-weight: 600; color: var(--n7); background: var(--n3); border-radius: 3px; padding: 1px 6px; }
.team__me[hidden] { display: none; }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.slot {
  position: relative; display: flex; flex-direction: column; min-height: 56px; padding: 0;
  background: var(--n2); border: 1px dashed var(--n5); border-radius: var(--r-s); overflow: hidden;
  color: var(--n6); font-size: 12px; text-align: center;
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.slot__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--n3); }
.slot__name { padding: 2px 3px 3px; font-size: 11.5px; font-weight: 600; color: var(--n8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot__ph { display: grid; place-items: center; font-size: 13px; font-weight: 600; background: transparent; }
.slot:not(.is-filled) .slot__name { color: var(--n6); font-weight: 500; }
.slot.is-filled { border-style: solid; border-color: var(--n4); }
.team--radiant .slot.is-filled { border-color: #2d5a37; }
.team--dire .slot.is-filled { border-color: #5e2c24; }
.slot.is-sel { box-shadow: 0 0 0 2px var(--sel); }
.slot__plan { position: absolute; top: 2px; right: 2px; font-size: 10.5px; font-weight: 700; background: rgba(11,13,15,.82); color: var(--n8); border-radius: 3px; padding: 0 4px; }
.is-over { border-color: var(--sel) !important; border-style: solid !important; background-color: #2a2414 !important; }

.bans {
  margin-top: 10px; display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 4px 6px; border: 1px dashed var(--n5); border-radius: var(--r-s); background: var(--n2);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.bans__label { font-size: 12.5px; font-weight: 700; color: var(--n7); flex: none; padding-left: 2px; }
.bans__list { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; flex: 1; align-items: center; }
.bans__empty { font-size: 12.5px; color: var(--n6); }
.ban {
  width: 40px; height: 40px; padding: 4px; border: 0; background: transparent; border-radius: var(--r-s);
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none; position: relative;
}
.ban img { width: 32px; height: 32px; border-radius: 3px; filter: grayscale(1) brightness(.75); }
.ban::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--dire); transform: rotate(-35deg); }
.ban.is-sel { box-shadow: 0 0 0 2px var(--sel); }

/* mobile nav */
.mnav {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--n1); border-bottom: 1px solid var(--n4);
}
.mnav__btn {
  min-height: 44px; border: 0; background: transparent; color: var(--n7); font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.mnav__btn[aria-current="page"] { color: var(--n8); border-bottom-color: var(--sel); }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--n4); padding: 4px var(--pad) 0; }
.tab {
  min-height: 42px; padding: 0 12px; border: 0; background: transparent; color: var(--n7);
  font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--n8); border-bottom-color: var(--sel); }
.tab:hover { color: var(--n8); }
.pane { padding: 12px var(--pad) 16px; }
.pane[hidden] { display: none; }
.lib .tabs { display: none; }

/* filters */
.filters { display: grid; gap: 8px; margin-bottom: 8px; }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--n6); }
.search input {
  width: 100%; min-height: 44px; padding: 0 12px 0 38px; font-size: 16px;
  background: var(--n2); border: 1px solid var(--n4); border-radius: var(--r-m); color: var(--n8);
  caret-color: var(--sel);
}
.search input::placeholder { color: var(--n6); }
.search input:focus { border-color: var(--n5); outline: 2px solid var(--sel); outline-offset: -1px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip {
  min-height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--n4); background: var(--n2);
  color: var(--n7); font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover { border-color: var(--n5); color: var(--n8); }
.chip[aria-pressed="true"] { background: var(--n8); border-color: var(--n8); color: var(--n0); }
.select {
  min-height: 40px; padding: 0 30px 0 12px; border-radius: 20px; border: 1px solid var(--n4);
  background: var(--n2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b969e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; font-size: 13.5px; font-weight: 600; color: var(--n7);
}
.hint { font-size: 13px; color: var(--n6); margin: 2px 0 10px; }
.empty { padding: 16px 0; color: var(--n7); font-size: 14px; }

/* roster */
.roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hero {
  position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--n4); border-radius: var(--r-s);
  background: var(--n2); overflow: hidden; text-align: left;
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
  transition: border-color .15s var(--ease), opacity .15s var(--ease);
}
.hero[hidden] { display: none; }
.hero img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--n3); }
.hero__name { padding: 3px 5px 4px; font-size: 12px; font-weight: 600; color: var(--n8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero:hover { border-color: var(--n5); }
.hero.is-sel { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); }
.hero[data-on] img { filter: grayscale(.85) brightness(.55); }
.hero[data-on] .hero__name { color: var(--n6); text-decoration: line-through; text-decoration-thickness: 1px; }
.hero__mark {
  position: absolute; top: 3px; left: 3px; font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 3px; line-height: 16px;
}
.hero__mark[data-k="radiant"] { background: var(--rad-bg); color: var(--rad); }
.hero__mark[data-k="dire"] { background: var(--dire-bg); color: var(--dire); }
.hero__mark[data-k="ban"] { background: var(--n3); color: var(--n8); }

/* items */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.item {
  display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 1px solid var(--n4); border-radius: var(--r-s);
  background: var(--n2); overflow: hidden; text-align: left; touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
  transition: border-color .15s var(--ease);
}
.item[hidden] { display: none; }
.item:hover { border-color: var(--n5); }
.item img { aspect-ratio: 88 / 64; width: 100%; object-fit: cover; background: var(--n3); }
.item__name { padding: 3px 5px 0; font-size: 11.5px; font-weight: 600; line-height: 1.25; height: 2.6em; overflow: hidden; color: var(--n8); }
.item__meta { padding: 0 5px 4px; font-size: 11px; color: var(--n6); display: flex; justify-content: space-between; gap: 4px; }
.tier { font-weight: 700; }
.tier[data-t="1"] { color: var(--t1); } .tier[data-t="2"] { color: var(--t2); } .tier[data-t="3"] { color: var(--t3); }
.tier[data-t="4"] { color: var(--t4); } .tier[data-t="5"] { color: var(--t5); }
.q { font-weight: 600; }
.q[data-q="common"] { color: var(--q-common); } .q[data-q="rare"] { color: var(--q-rare); } .q[data-q="epic"] { color: var(--q-epic); }
.q[data-q="artifact"] { color: var(--q-artifact); } .q[data-q="consumable"] { color: var(--q-consumable); }
.q[data-q="secret_shop"] { color: var(--q-secret); } .q[data-q="component"] { color: var(--q-component); }

/* plan */
.plan { border: 1px solid var(--n4); border-radius: var(--r-m); background: var(--n2); margin-bottom: 12px; }
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 8px 10px; background: var(--n3); border-bottom: 1px solid var(--n4); border-radius: var(--r-m) var(--r-m) 0 0; }
.plan__title { font-size: 13.5px; font-weight: 700; }
.plan__heroes { display: flex; gap: 2px; flex-wrap: wrap; }
.plan__hero { width: 40px; height: 40px; padding: 3px; border: 1px solid transparent; border-radius: var(--r-s); background: transparent; }
.plan__hero img { width: 32px; height: 32px; border-radius: 3px; }
.plan__hero[aria-pressed="true"] { border-color: var(--sel); }
.plan__slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) 1.15fr; gap: 6px; padding: 10px; max-width: 600px; }
.pslot {
  position: relative; height: 44px; min-width: 0; border: 1px dashed var(--n5); border-radius: var(--r-s); background: var(--n1);
  padding: 0; overflow: hidden; touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
  color: var(--n6); font-size: 11px;
}
.pslot img { width: 100%; height: 100%; object-fit: cover; }
.pslot.is-filled { border-style: solid; border-color: var(--n4); }
.pslot--neutral { border-radius: 22px; }
@media (min-width: 560px) { .pslot { height: auto; aspect-ratio: 88 / 64; } }
.pslot__lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; padding: 2px; }
.plan__note { padding: 0 10px 10px; font-size: 12.5px; color: var(--n6); }

/* analysis */
.ana { background: var(--n0); }
.panel { border: 1px solid var(--n4); border-radius: var(--r-m); background: var(--n1); margin-bottom: 12px; }
.panel__head { padding: 9px 12px; background: var(--n3); border-bottom: 1px solid var(--n4); border-radius: var(--r-m) var(--r-m) 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel__title { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
.panel__body { padding: 10px 12px; }
.panel__lede { font-size: 13px; color: var(--n7); margin-bottom: 10px; max-width: 70ch; }
.refs { margin: 0; padding: 8px 12px 10px 30px; border-top: 1px solid var(--n4); font-size: 12px; color: var(--n7); }
.refs li { margin: 2px 0; }
.refs li::marker { color: var(--sel); font-weight: 700; }
.refs code { font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--n8); overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 3px; line-height: 17px; vertical-align: 1px; }
.badge--cached { background: #2e2612; color: var(--sel); }
.badge--fresh { background: var(--rad-bg); color: var(--rad); }
.badge--stale { background: var(--dire-bg); color: var(--dire); }
sup.ref { font-size: 10.5px; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--sel); font-weight: 700; }
.srclink { font-size: 12px; color: var(--n7); text-decoration-color: var(--sel); }
@media (min-width: 421px) { .t th.encol { min-width: 48px; } }
@media (max-width: 420px) { .t th.encol sup.ref { display: block; margin: 2px 0 0; line-height: 1; } .t .heroc span { max-width: 34vw; } }

.ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ctl label { font-size: 12.5px; color: var(--n7); display: inline-flex; align-items: center; gap: 6px; }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th, .t td { padding: 5px 4px; border-bottom: 1px solid var(--n4); text-align: right; vertical-align: middle; }
.t th { font-size: 11.5px; font-weight: 700; color: var(--n7); white-space: nowrap; }
.t th:first-child, .t td:first-child { text-align: left; }
.t tbody tr:hover { background: var(--n2); }
.t .heroc { display: flex; align-items: center; gap: 7px; min-width: 0; }
.t .heroc img { width: 28px; height: 28px; border-radius: 3px; flex: none; }
.t .heroc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.t .heroc button { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0; border: 0; background: transparent; text-align: left; min-width: 0; max-width: 100%; }
.t th img { width: 24px; height: 24px; border-radius: 3px; display: inline-block; vertical-align: middle; }
.wr { font-weight: 700; }
.wr--up { color: var(--rad); }
.wr--down { color: var(--dire); }
.muted { color: var(--n6); }
.sub { font-size: 13px; font-weight: 700; color: var(--n7); margin: 14px 0 6px; }

.skel { display: grid; gap: 6px; }
.skel i { display: block; height: 34px; border-radius: var(--r-s); background: linear-gradient(90deg, var(--n2), var(--n3), var(--n2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

.note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 8px 10px; border-radius: var(--r-s); background: var(--n2); border: 1px solid var(--n4); margin-bottom: 8px; }
.note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.note--warn svg { color: var(--warn); }
.note--ok svg { color: var(--ok); }
.note--err { border-color: #5e2c24; }
.note__act { display: flex; margin-top: 8px; }
.note--err svg { color: var(--dire); }

.compgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lanes { list-style: none; margin: 0; padding: 0; }
.lanes li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--n4); font-size: 13px; }
.lanes li b { width: 150px; flex: none; color: var(--n7); font-weight: 600; }
.lanes img { width: 28px; height: 28px; border-radius: 3px; }

.ipop { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.ipop .item__name { height: auto; max-height: 2.6em; }
.ipop .item__meta { justify-content: flex-start; }

.pick-hero { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pick-hero button { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 3px 10px 3px 3px; border: 1px solid var(--n4); border-radius: var(--r-s); background: var(--n2); font-size: 13px; font-weight: 600; }
.pick-hero button img { width: 32px; height: 32px; border-radius: 3px; }
.pick-hero button[aria-pressed="true"] { border-color: var(--sel); color: var(--n8); }
.stat { font-size: 13px; color: var(--n7); margin-bottom: 8px; }
.stat b { color: var(--n8); }

/* action bar */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  background: var(--n3); border-top: 1px solid var(--n5);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 -6px 18px rgba(0,0,0,.45);
  animation: up .2s var(--ease);
}
.actionbar[hidden] { display: none; }
@keyframes up { from { transform: translateY(14px); opacity: .4; } }
.actionbar__who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.actionbar__who img { width: 36px; height: 36px; border-radius: 3px; flex: none; }
.actionbar__who span { font-size: 13.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.actionbar__btns { display: flex; gap: 6px; flex: none; }
.actionbar .btn { padding: 0 11px; }
.iconbtn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--n5); border-radius: var(--r-m); background: transparent; color: var(--n7); }
.iconbtn svg { width: 18px; height: 18px; }

/* drag ghost */
.ghost {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 76px;
  border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--sel);
  box-shadow: 0 10px 24px rgba(0,0,0,.55); opacity: .95; will-change: transform;
}
.ghost img { width: 100%; }
body.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.is-dragging .slot, body.is-dragging .pslot, body.is-dragging .bans { border-color: var(--n6); }
.is-lifted { opacity: .45; }

/* item sheet */
.sheet {
  border: 1px solid var(--n5); background: var(--n1); color: var(--n8); padding: 0;
  width: 100%; max-width: 100%; max-height: 86vh; margin: auto 0 0; border-radius: 12px 12px 0 0;
  overscroll-behavior: contain;
}
.sheet[open] { animation: up .22s var(--ease); }
.sheet::backdrop { background: rgba(0,0,0,.6); }
.sheet__head { position: sticky; top: 0; display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--n3); border-bottom: 1px solid var(--n4); }
.sheet__head img { width: 66px; height: 48px; border-radius: var(--r-s); flex: none; }
.sheet__title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.sheet__meta { font-size: 13px; color: var(--n7); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sheet__head .iconbtn { margin-left: auto; flex: none; }
.sheet__body { padding: 12px; font-size: 14px; }
.sheet__body p { max-width: 68ch; }
.abil { border: 1px solid var(--n4); border-radius: var(--r-s); margin-bottom: 8px; background: var(--n2); }
.abil__h { padding: 6px 10px; border-bottom: 1px solid var(--n4); font-size: 13.5px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.abil__type { font-size: 11.5px; font-weight: 700; color: var(--n7); background: var(--n3); border-radius: 3px; padding: 0 6px; }
.abil__d { padding: 8px 10px; white-space: pre-line; color: var(--n8); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; margin: 6px 0 10px; }
.kv dt { color: var(--n7); }
.kv dd { margin: 0; }
.lore { color: var(--n7); font-size: 13px; margin-top: 10px; }
.comp-list { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.comp-list button { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 3px 8px 3px 3px; border: 1px solid var(--n4); border-radius: var(--r-s); background: var(--n2); font-size: 12.5px; }
.comp-list img { width: 44px; height: 32px; border-radius: 3px; }
.sheet__foot { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--n3); border-top: 1px solid var(--n4); }
.sheet__foot .btn { flex: 1; }
.sheet__foot .btn:first-child { flex: 2; }
.sheet__foot .btn img { width: 24px; height: 24px; border-radius: 3px; }
.src { font-size: 12px; color: var(--n6); margin-top: 10px; }

.foot { padding: 16px var(--pad) 8px; font-size: 12px; color: var(--n6); border-top: 1px solid var(--n4); }
.foot p { max-width: 90ch; }

/* mobile view switching */
@media (max-width: 1023px) {
  body[data-view="hero"] .ana, body[data-view="item"] .ana, body[data-view="analysis"] .lib { display: none; }
}

@media (min-width: 560px) {
  .roster { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .slot { min-height: 64px; }
}

@media (min-width: 1024px) {
  body { padding-bottom: 76px; }
  .app {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 34vw);
    grid-template-rows: auto 1fr;
    max-width: 1680px; margin: 0 auto;
  }
  .board { grid-column: 1; grid-row: 1; padding: 12px 16px 14px; }
  .lib { grid-column: 1; grid-row: 2; }
  .ana {
    grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--n4);
    position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
  }
  .mnav { display: none; }
  .lib .tabs { display: flex; }
  .board .team { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }
  .team__name { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
  .slot { min-height: 0; }
  .slot__name { font-size: 12.5px; padding: 3px 4px 4px; }
  .bans { margin-left: 102px; }
  .sheet { width: 440px; max-width: 92vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 0; }
  .sheet[open] { animation: inr .22s var(--ease); }
  .roster { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
@keyframes inr { from { transform: translateX(24px); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}