:root {
  --tide: #0E69B3;
  --aqua: #2E8BD0;
  --calm: #EAF1F7;
  --panel: #FBFDFE;
  --foam: #CFDEEA;
  --ink: #17293A;
  --mute: #61788C;
  --ok: #2F8F5B;
  --warn: #C07A12;
  --bad: #C0392B;
  --radius: 10px;
  --font: Verdana, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tide: #4AA3E8;
    --aqua: #5DB0EC;
    --calm: #0F1B24;
    --panel: #15242F;
    --foam: #24394A;
    --ink: #DCE7EF;
    --mute: #8FA5B6;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--calm);
  color: var(--ink);
  font: 14px/1.55 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--tide); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.3; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

.Top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--tide);
  color: #fff;
  flex-wrap: wrap;
}
.Top a { color: #fff; }
.Brand { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 16px; }
.Brand img { height: 32px; width: auto; }
.Nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.Nav a {
  padding: 6px 12px;
  border-radius: 8px;
  opacity: .85;
  position: relative;
}
.Nav a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,.12); }
.Nav a.on { opacity: 1; background: rgba(255,255,255,.2); }
.Dot {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #F2B33D;
  color: #1c1c1c;
  font-style: normal;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.Me { display: flex; align-items: center; gap: 12px; }
.Me .Who b { color: #fff; }
.Play {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  white-space: nowrap;
}

.Main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px 16px 40px; flex: 1; }
.Foot { text-align: center; color: var(--mute); padding: 16px; font-size: 12px; }

.Crumbs { color: var(--mute); font-size: 13px; margin-bottom: 12px; }
.Crumbs span { margin: 0 4px; }
.Crumbs .Here { color: var(--ink); margin: 0; }

.Hero { padding: 6px 2px 14px; }
.Hero p { color: var(--mute); margin: 0; }

.Grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.Col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.Card {
  background: var(--panel);
  border: 1px solid var(--foam);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.Col .Card { margin-bottom: 0; }
.Card.Center { text-align: center; max-width: 520px; margin: 40px auto; }
.CardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.CardHead h1, .CardHead h2 { margin: 0; }

.Dim { color: var(--mute); }
.Small { font-size: 12px; }
.Hint { color: var(--mute); font-size: 12px; margin: -4px 0 4px; }

.Flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.Flash.ok { background: rgba(47,143,91,.1); border-color: var(--ok); }
.Flash.err { background: rgba(192,57,43,.1); border-color: var(--bad); }

.Btn {
  display: inline-block;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--tide);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.Btn:hover { background: var(--aqua); text-decoration: none; }
.Btn.Ghost { background: transparent; color: var(--tide); border: 1px solid var(--foam); }
.Btn.Danger, .Mini.Danger { background: var(--bad); color: #fff; }
.Mini {
  padding: 4px 10px;
  border: 1px solid var(--foam);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.Link { background: none; border: 0; padding: 0; color: var(--tide); font: inherit; cursor: pointer; }
.Link.Danger { color: var(--bad); }

.Tag {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 4px;
  border-radius: 6px;
  background: rgba(14,105,179,.12);
  color: var(--tide);
  font-size: 11px;
  vertical-align: 1px;
}
.Tag.Gray { background: rgba(97,120,140,.15); color: var(--mute); }
.Tag.Red { background: rgba(192,57,43,.12); color: var(--bad); }

.Who { display: inline-flex; align-items: center; gap: 8px; }
.Ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--foam); }
.Role { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(192,122,18,.15); color: var(--warn); }
.Role.g1 { background: rgba(192,57,43,.14); color: var(--bad); }

.Sections, .Topics { list-style: none; margin: 0; padding: 0; }
.Sections li, .Topics li { padding: 8px 0; border-bottom: 1px solid var(--foam); display: flex; flex-direction: column; }
.Sections li:last-child, .Topics li:last-child { border-bottom: 0; }

.SectionRow, .TopicRow {
  display: grid;
  grid-template-columns: 1fr 110px 200px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--foam);
}
.TopicRow { grid-template-columns: 1fr 90px 150px; }
.SectionRow:last-child, .TopicRow:last-child { border-bottom: 0; }
.TopicRow.pinned { background: rgba(14,105,179,.04); }
.SectionTitle, .TopicTitle { font-weight: bold; font-size: 15px; }
.SectionStat, .TopicStat { color: var(--mute); font-size: 12px; text-align: center; }
.SectionLast, .TopicLast { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.TopicH { font-size: 20px; margin: 0; }
.Tags { display: flex; gap: 4px; }
.Mod { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0 12px; border-bottom: 1px dashed var(--foam); margin-bottom: 8px; }
.Mod form, .PostFoot form { display: inline; margin: 0; }
.Mod select { font: inherit; font-size: 12px; padding: 3px; border-radius: 6px; border: 1px solid var(--foam); background: var(--panel); color: var(--ink); }

.Posts { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.Post { border: 1px solid var(--foam); border-radius: var(--radius); padding: 12px 14px; background: var(--calm); }
.Post.staff { border-color: var(--tide); background: rgba(14,105,179,.06); }
.PostHead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.PostDate { margin-left: auto; color: var(--mute); font-size: 12px; }
.PostFoot { display: flex; gap: 14px; font-size: 12px; margin-top: 8px; }
.Text p { margin: 0 0 .7em; word-wrap: break-word; overflow-wrap: anywhere; }
.Text p:last-child { margin-bottom: 0; }
.Text blockquote { margin: 0 0 .7em; padding: 6px 10px; border-left: 3px solid var(--foam); color: var(--mute); }
.Clip { max-height: 160px; overflow: hidden; position: relative; margin: 8px 0; }

.Form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.Form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); }
.Form label.Check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.Form input:not([type=checkbox]), .Form textarea, .Form select {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--foam);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
.Form textarea { resize: vertical; min-height: 100px; }
.Form input:focus, .Form textarea:focus, .Form select:focus { outline: 2px solid rgba(46,139,208,.35); border-color: var(--aqua); }
.Form.Inline { display: inline; }
.Row { display: flex; align-items: center; gap: 12px; }

.Pages { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0; }
.Pages a, .Pages b, .Pages .Gap { min-width: 30px; padding: 4px 8px; text-align: center; border-radius: 6px; }
.Pages a { border: 1px solid var(--foam); }
.Pages b { background: var(--tide); color: #fff; }

.Tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.Tabs a { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--foam); color: var(--ink); }
.Tabs a.on { background: var(--tide); border-color: var(--tide); color: #fff; }

.TicketList { display: flex; flex-direction: column; }
.TicketRow {
  display: grid;
  grid-template-columns: 60px 1fr 120px 130px;
  gap: 10px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--foam);
  color: var(--ink);
}
.TicketRow:hover { background: rgba(14,105,179,.05); text-decoration: none; }
.TicketRow.fresh b::after { content: " ●"; color: #F2B33D; }
.TicketMain { display: flex; flex-direction: column; min-width: 0; }
.TicketNo { color: var(--mute); }
.TicketDate { font-size: 12px; text-align: right; }
.Status { font-size: 12px; padding: 2px 8px; border-radius: 6px; text-align: center; background: rgba(97,120,140,.15); }
.st-open .Status, .Status.st-open { background: rgba(192,122,18,.15); color: var(--warn); }
.st-answered .Status, .Status.st-answered { background: rgba(47,143,91,.15); color: var(--ok); }

.Patch { padding: 14px 0; border-bottom: 1px solid var(--foam); }
.Patch:last-of-type { border-bottom: 0; }
.Patch.draft { opacity: .7; }
.PatchTitle { margin-bottom: 2px; }
.Ver { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--tide); color: #fff; font-size: 12px; vertical-align: 2px; }

@media (max-width: 860px) {
  .Grid { grid-template-columns: 1fr; }
  .SectionRow { grid-template-columns: 1fr auto; }
  .SectionStat, .SectionLast { display: none; }
  .TopicRow { grid-template-columns: 1fr 90px; }
  .TopicLast { display: none; }
  .TicketRow { grid-template-columns: 1fr auto; }
  .TicketNo, .TicketDate { display: none; }
}

@media (max-width: 560px) {
  .Top { padding: 10px 16px; gap: 10px; }
  .Brand span { display: none; }
  .Nav { order: 3; flex: 0 0 100%; gap: 2px; }
  .Nav a { padding: 6px 9px; font-size: 13px; }
  .Me { margin-left: auto; }
  .Me .Who b, .Me .Role { display: none; }
  .Main { padding: 12px 16px 30px; }
  .Card { padding: 14px; }
  .Post.Forum .PostHead { margin-bottom: 8px; }
}

/* Тема форума: сообщение слева, карточка игрока справа. */
.Post.Forum { display: grid; grid-template-columns: 1fr 190px; gap: 0; padding: 0; overflow: hidden; background: var(--panel); }
.Post.Forum:nth-child(even) { background: var(--calm); }
.PostBody { padding: 12px 16px; min-width: 0; display: flex; flex-direction: column; }
.PostBody .Text { flex: 1; }
.PostWho { display: none; font-weight: bold; }
.PostNo { color: var(--mute); font-size: 12px; }
.Post.Forum .PostHead { border-bottom: 1px solid var(--foam); padding-bottom: 6px; margin-bottom: 10px; }
.Profile {
  border-left: 1px solid var(--foam);
  padding: 14px 12px;
  text-align: center;
  font-size: 12px;
  background: rgba(14,105,179,.03);
}
.Face { width: 110px; height: 110px; border-radius: 12px; object-fit: cover; background: var(--foam); display: block; margin: 0 auto 8px; }
.Nick { font-weight: bold; font-size: 14px; color: var(--tide); overflow-wrap: anywhere; }
.Nick.g1 { color: var(--bad); }
.Nick.g2, .Nick.g3 { color: var(--warn); }
.Profile .Role { display: inline-block; margin: 4px 0 2px; }
.Rank { color: var(--mute); font-style: italic; margin: 4px 0; }
.Clan { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0; text-align: left; }
.Clan img { width: 20px; height: 20px; object-fit: contain; }
.Clan i { color: var(--mute); }
.Stats { display: grid; grid-template-columns: auto auto; gap: 2px 8px; margin: 10px 0 6px; text-align: left; justify-content: center; }
.Stats dt { color: var(--mute); }
.Stats dd { margin: 0; font-weight: bold; }
.Online { color: var(--mute); font-size: 11px; margin-top: 4px; }
.Online.on { color: var(--ok); }
.Online.on::before { content: "● "; }

@media (max-width: 700px) {
  .Post.Forum { grid-template-columns: 1fr; }
  .Profile {
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--foam);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .Face { width: 36px; height: 36px; border-radius: 50%; margin: 0; }
  .Profile .Rank, .Profile .Clan, .Profile .Stats { display: none; }
  .Profile .Online { margin: 0 0 0 auto; }
}

.Text .Head { margin: .9em 0 .2em; font-size: 14px; }
.Text .Head:first-child { margin-top: 0; }

.Text details.Fold { margin: .9em 0 .7em; }
.Text details.Fold summary { cursor: pointer; font-weight: bold; color: var(--tide); }
.Text details.Fold summary::marker { color: var(--mute); }
.Text details.Fold p { margin-top: .5em; color: var(--mute); }

/* Поле ввода с кнопками разметки. */
.Editor { display: flex; flex-direction: column; gap: 0; }
.Tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--foam);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--calm);
}
.Tools button {
  min-width: 30px;
  padding: 4px 9px;
  border: 1px solid var(--foam);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.Tools button:hover { border-color: var(--aqua); color: var(--tide); }
.Tools .Help { margin-left: auto; border: 0; background: none; color: var(--tide); }
.HelpBox {
  padding: 8px 10px;
  border: 1px solid var(--foam);
  border-bottom: 0;
  background: var(--panel);
  font-size: 12px;
  color: var(--mute);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.HelpBox code { background: var(--calm); padding: 1px 5px; border-radius: 4px; margin-right: 4px; color: var(--ink); }
.Editor textarea { border-radius: 0 0 8px 8px !important; }
.Form > label + .Editor { margin-top: -6px; }
/* У форм и подсказки свой display: без этого атрибут hidden их не прячет. */
[hidden] { display: none !important; }
.Retitle { margin: 8px 0 4px; }
.TopicH .Link.Small { font-size: 13px; font-weight: normal; margin-left: 6px; vertical-align: 2px; }
.Me .Role, .Me .Role.g1 { background: rgba(255,255,255,.18); color: #fff; }
.Retitle input { flex: 1; font: inherit; padding: 7px 10px; border: 1px solid var(--foam); border-radius: 8px; background: var(--panel); color: var(--ink); }

/* Что умеет разметка в тексте. */
.Text b { font-weight: bold; }
.Text details.Spoiler { margin: .5em 0 .8em; border: 1px solid var(--foam); border-radius: 8px; background: var(--calm); }
.Text details.Spoiler summary { cursor: pointer; padding: 6px 10px; font-weight: bold; color: var(--tide); }
.Text details.Spoiler > div { padding: 2px 12px 10px; }
.Text blockquote cite { display: block; font-style: normal; font-weight: bold; font-size: 12px; margin-bottom: 2px; color: var(--mute); }
.Text .List { margin: .3em 0 .8em; padding-left: 22px; }
.Text .List li { margin: 2px 0; }
.Text .Pic { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }
.Text .Code { background: var(--calm); border: 1px solid var(--foam); border-radius: 8px; padding: 8px 10px; overflow-x: auto; font: 12px/1.5 monospace; white-space: pre-wrap; }
.Text .Head { margin: .9em 0 .3em; font-size: 14px; }
.Text .Head:first-child { margin-top: 0; }

/* Вики: слева меню, справа статья или справочник. */
.Main.Wide { max-width: 1280px; }
.Inline { display: inline; }
.Wiki { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.WMain { min-width: 0; }
.WSide {
  position: sticky;
  top: 12px;
  background: var(--panel);
  border: 1px solid var(--foam);
  border-radius: var(--radius);
  padding: 6px 10px 10px;
  font-size: 13px;
}
.WSideBtn { display: none; }
.WGroup { margin-top: 6px; }
.WGroup b { display: block; margin: 10px 6px 3px; color: var(--mute); font-size: 11px; font-weight: normal; text-transform: uppercase; letter-spacing: .05em; }
.WGroup a { display: block; padding: 3px 6px; border-radius: 6px; color: var(--ink); }
.WGroup a:hover { background: var(--calm); text-decoration: none; }
.WGroup a.on { background: var(--calm); color: var(--tide); font-weight: bold; }
.WSearch { display: flex; gap: 8px; margin-bottom: 14px; }
.WSearch input { flex: 1; min-width: 0; font: inherit; padding: 7px 12px; border: 1px solid var(--foam); border-radius: 8px; background: var(--panel); color: var(--ink); }

.WHero h1 { margin-bottom: 6px; }
.WHero p { margin: 0 0 10px; color: var(--mute); max-width: 760px; }
.WCount { font-size: 13px; color: var(--mute); }
.WCount b { color: var(--ink); }
.WTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.WTile {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--foam);
  border-radius: var(--radius);
  color: var(--ink);
}
.WTile:hover { border-color: var(--aqua); text-decoration: none; }
.WTile img { grid-row: span 2; width: 56px; height: 56px; object-fit: contain; }
.WTile b { color: var(--tide); }
.WTile span { font-size: 12px; color: var(--mute); line-height: 1.35; }
.WCols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.WCols .Card { margin-bottom: 0; }
.WCat h2 { margin-bottom: 4px; }
.WList { margin: 6px 0 0; padding-left: 18px; }
.WList li { margin: 2px 0; }
.WList.Cols { columns: 3 220px; }
.WFresh { list-style: none; margin: 0; padding: 0; }
.WFresh li { padding: 4px 0; border-top: 1px dashed var(--foam); }
.WFresh li:first-child { border-top: 0; }
.WAll { columns: 3 220px; }
.WAll > div { break-inside: avoid; margin-bottom: 10px; }
.WAll h3 { margin: 0 0 2px; color: var(--mute); }

.WArticle .WHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--foam); padding-bottom: 6px; margin-bottom: 10px; }
.WArticle .WHead h1, .WArticle .WHead h2 { margin: 0; }
.WTools { display: flex; gap: 14px; font-size: 13px; }
.WText { line-height: 1.65; }
.WText h4.Head { font-size: 16px; border-bottom: 1px solid var(--foam); padding-bottom: 3px; margin: 1.2em 0 .5em; scroll-margin-top: 12px; }
.WFoot { margin-top: 14px; padding-top: 8px; border-top: 1px dashed var(--foam); }
.WPreview { border-style: dashed; }
.Toc { display: inline-block; min-width: 220px; max-width: 100%; background: var(--calm); border: 1px solid var(--foam); border-radius: 8px; padding: 8px 16px 8px 12px; margin: 4px 0 12px; }
.Toc b { font-size: 13px; }
.Toc ol { margin: 4px 0 0; padding-left: 22px; font-size: 13px; }
.Text a.New { color: var(--bad); }
.WTableBox { overflow-x: auto; margin: .6em 0 .9em; }
.WTable { border-collapse: collapse; font-size: 13px; }
.WTable th, .WTable td { border: 1px solid var(--foam); padding: 5px 10px; text-align: left; vertical-align: top; }
.WTable th { background: var(--calm); }
.WDrop { margin-top: 10px; text-align: right; }

.WHist { width: 100%; border-collapse: collapse; font-size: 13px; }
.WHist th { text-align: left; color: var(--mute); font-weight: normal; padding: 4px 8px; border-bottom: 1px solid var(--foam); }
.WHist td { padding: 5px 8px; border-bottom: 1px dashed var(--foam); vertical-align: top; }
.WHist .Plus { color: var(--ok); }
.WHist .Minus { color: var(--bad); }
.WHistAct { white-space: nowrap; }
.WHistAct > * + * { margin-left: 10px; }
.Diff { font: 12px/1.5 Consolas, "DejaVu Sans Mono", monospace; border: 1px solid var(--foam); border-radius: 8px; overflow: hidden; margin-top: 10px; }
.Diff > div { padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.Diff i { display: inline-block; width: 16px; color: var(--mute); font-style: normal; user-select: none; }
.Diff .Add { background: rgba(47,143,91,.15); }
.Diff .Del { background: rgba(192,57,43,.13); }
.Diff .DiffGap { color: var(--mute); text-align: center; background: var(--calm); }
.WFound { list-style: none; padding: 0; margin: 0 0 10px; }
.WFound li { padding: 6px 0; border-top: 1px dashed var(--foam); }
.WChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.WChips a { padding: 3px 10px; border: 1px solid var(--foam); border-radius: 14px; background: var(--calm); font-size: 13px; }
.WCatRow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.WCatRow input[name=title] { flex: 1 1 180px; }
.WCatRow input[name=about] { flex: 2 1 240px; }
.WCatRow input[name=sort] { width: 70px; }

@media (max-width: 860px) {
  .Wiki { grid-template-columns: 1fr; }
  .WSide { position: static; padding: 0; }
  .WSideBtn { display: block; width: 100%; padding: 9px 12px; border: 0; background: none; color: var(--tide); font: inherit; font-weight: bold; text-align: left; cursor: pointer; }
  .WSideBody { display: none; padding: 0 10px 10px; }
  .WSide.open .WSideBody { display: block; }
  .WHist th:nth-child(3), .WHist td:nth-child(3) { display: none; }
  .WTiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .WTile { grid-template-columns: 36px 1fr; padding: 8px 10px; }
  .WTile img { width: 36px; height: 36px; }
  .WTile span { display: none; }
}

/* Вики: справочники. */
.Ty { display: inline-flex; align-items: center; gap: 4px; margin: 1px 6px 1px 0; color: var(--ink); font-size: 12px; white-space: nowrap; }
.Ty img { width: 18px; height: 18px; border-radius: 4px; }
.Ty:hover { text-decoration: none; color: var(--tide); }
.Cat { font-size: 12px; font-weight: bold; white-space: nowrap; }
.Cat.c-physical { color: #C0492E; }
.Cat.c-special { color: #1B6FB5; }
.Cat.c-status { color: #8A46B0; }
.Cat.c-specific { color: #4A5F6E; }
@media (prefers-color-scheme: dark) {
  .Cat.c-physical { color: #F07B5E; }
  .Cat.c-special { color: #5DB0EC; }
  .Cat.c-status { color: #C28BE0; }
  .Cat.c-specific { color: #9FB2C0; }
}

.WFilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.WFilter input, .WFilter select { font: inherit; padding: 6px 10px; border: 1px solid var(--foam); border-radius: 8px; background: var(--panel); color: var(--ink); }
.WFilter input { flex: 1 1 200px; min-width: 0; }

.WGrid { display: grid; gap: 6px; }
.WGrid.Mons { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.WGrid.Items { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 14px; }
.WGrid > div { min-width: 0; }
.WGrid .WMon, .WGrid .WItem { display: flex; }
.WGrid.Two .WMon { display: grid; grid-template-columns: 32px auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.WGrid.Two .WMon img { grid-row: span 2; }
.WGrid.Two .WMon i { grid-column: 2 / 4; margin: 0; justify-content: flex-start; text-align: left; }
.WMon, .WItem {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--foam);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  min-width: 0;
  height: 100%;
}
.WMon:hover, .WItem:hover { border-color: var(--aqua); text-decoration: none; }
.WMon img { width: 32px; height: 32px; flex: 0 0 32px; image-rendering: pixelated; object-fit: contain; }
.WMon .No { color: var(--mute); font-size: 11px; }
.WMon b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.WMon i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--mute); text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.WMon i .Ty { margin: 0; font-size: 0; gap: 0; }
.WMon i .Ty img { width: 16px; height: 16px; }
.WMon.Self { border-color: var(--tide); background: var(--calm); font-weight: bold; }
.WMon.Fm { --form: #7A8A97; border-left: 3px solid var(--form); }
.WMon.Fm b { color: var(--form); }
.f-alola { --form: #E08A2E; }
.f-galar { --form: #7A5AD1; }
.f-hisui { --form: #2F8F5B; }
.f-zen { --form: #C0392B; }
.f-galar-zen { --form: #9B2D6F; }
.f-blade { --form: #2C7BB6; }
.f-school { --form: #1F9E9E; }
.f-hangry { --form: #B5326A; }
.f-ash { --form: #C79A1E; }
.FormTag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--form, #7A8A97); color: #fff; font-size: 12px; font-weight: normal; vertical-align: middle; }
.WItem img { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.WItem span { overflow: hidden; text-overflow: ellipsis; }
.WItem i { font-style: normal; color: var(--mute); }

.WData { border-collapse: collapse; width: 100%; font-size: 13px; }
.WData th { text-align: left; color: var(--mute); font-weight: normal; padding: 5px 8px; border-bottom: 1px solid var(--foam); white-space: nowrap; }
.WData td { padding: 4px 8px; border-bottom: 1px dashed var(--foam); vertical-align: middle; }
.WData tr:hover td { background: var(--calm); }
.WData td.Num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.WData .WMon, .WData .WItem { display: inline-flex; border: 0; padding: 0; background: none; height: auto; }

.WPager { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.WDex { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.WDex .WInfo { grid-column: 2; grid-row: 1; border-left: 1px solid var(--foam); padding-left: 18px; }
.WDex .WDexMain { grid-column: 1; grid-row: 1; min-width: 0; }
.WDexMain h1 .No { color: var(--mute); font-weight: normal; }
.WDexMain h2 { margin: 18px 0 8px; font-size: 16px; }
.WInfo .Art { display: block; width: 100%; max-width: 240px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; }
.WInfo .Sprites { display: flex; justify-content: center; gap: 12px; margin: 4px 0 8px; }
.WInfo .Sprites img { width: 48px; height: 48px; image-rendering: pixelated; }
.WInfo .Types { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.WInfo dl { margin: 0; font-size: 13px; }
.WInfo dt { color: var(--mute); font-size: 12px; margin-top: 8px; }
.WInfo dd { margin: 2px 0 0; }
.Stars { color: #E0A21A; letter-spacing: -1px; }
.About { font-size: 14px; line-height: 1.6; background: var(--calm); border-radius: 8px; padding: 10px 14px; margin: 8px 0 4px; }
.WStats { display: grid; gap: 4px; max-width: 520px; }
.Stat { display: grid; grid-template-columns: 110px 40px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.Stat span { color: var(--mute); }
.Stat b { text-align: right; font-variant-numeric: tabular-nums; }
.Stat i { height: 8px; border-radius: 4px; background: var(--calm); overflow: hidden; }
.Stat em { display: block; height: 100%; border-radius: 4px; }
.Stat em.s-lo { background: #E6A23C; }
.Stat em.s-mid { background: #5BB85D; }
.Stat em.s-hi { background: #2E8BD0; }
.Stat.Total { border-top: 1px dashed var(--foam); padding-top: 4px; }
.Stat.Total i { background: none; }

.Evo { overflow-x: auto; padding-bottom: 4px; }
.EvoNode { display: flex; align-items: center; gap: 8px; }
.EvoNode > .WMon { flex: 0 0 auto; height: auto; }
.EvoKids { display: flex; flex-direction: column; gap: 6px; }
.EvoKid { display: flex; align-items: center; gap: 8px; }
.EvoWhy { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; max-width: 150px; font-size: 11px; line-height: 1.3; color: var(--mute); text-align: center; }
.EvoWhy > i { font-style: normal; color: var(--tide); font-size: 16px; line-height: 1; }
.EvoItem { display: inline-flex; align-items: center; gap: 3px; }
.EvoItem img { width: 22px; height: 22px; object-fit: contain; }
.WWeak { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.WWeak .Types { display: flex; flex-wrap: wrap; margin-top: 2px; }

.WTabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--foam); }
.WTabs button { border: 0; background: none; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.WTabs button.on { color: var(--tide); border-bottom-color: var(--tide); font-weight: bold; }

.WFacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.WFacts > div { background: var(--calm); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.WFacts span { font-size: 11px; color: var(--mute); }
.WItemCard { display: flex; gap: 18px; align-items: flex-start; }
.WItemCard .Big { width: 96px; height: 96px; object-fit: contain; flex: 0 0 96px; }
.WItemCard h1 { margin-bottom: 2px; }
.WEvoList { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.WEvoList > div { display: flex; align-items: center; gap: 6px; }
.WEvoList i { font-style: normal; color: var(--tide); }

.WChart { border-collapse: collapse; font-size: 12px; }
.WChart th, .WChart td { border: 1px solid var(--foam); text-align: center; }
.WChart th img { width: 22px; height: 22px; display: block; margin: 3px; }
.WChart th.Corner { font-weight: normal; color: var(--mute); font-size: 11px; padding: 2px 6px; white-space: nowrap; }
.WChart th.Row { text-align: left; padding: 2px 6px; background: var(--panel); position: sticky; left: 0; }
.WChart td { width: 28px; height: 28px; font-weight: bold; }
.WChart td.m2 { background: rgba(47,143,91,.28); }
.WChart td.mh { background: rgba(192,57,43,.2); }
.WChart td.m0 { background: #2B3440; color: #fff; }
.WType h2 .Ty { font-size: 15px; }
.WType h2 .Ty img { width: 24px; height: 24px; }
.WType > div { margin-top: 6px; }
.WType .Types { display: flex; flex-wrap: wrap; }

.WRecipe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px dashed var(--foam); scroll-margin-top: 12px; }
.WRecipe:target { background: var(--calm); border-radius: 8px; }
.WRecipe .Needs, .WRecipe .Gives { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.WRecipe .Part { display: inline-flex; align-items: center; gap: 4px; }
.WRecipe .Part .WItem { height: auto; }
.WRecipe .Tool .WItem { border-style: dashed; }
.WRecipe .Part em { font-style: normal; font-size: 11px; color: var(--mute); }
.WRecipe .Arrow { font-style: normal; color: var(--tide); font-size: 18px; }
.WRecipe .Notes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.Card h3[id] { scroll-margin-top: 12px; }

@media (max-width: 860px) {
  .WDex { grid-template-columns: 1fr; }
  .WDex .WInfo { grid-column: 1; grid-row: 1; border-left: 0; padding-left: 0; border-bottom: 1px solid var(--foam); padding-bottom: 10px; }
  .WDex .WDexMain { grid-row: 2; }
  .WInfo .Art { max-width: 180px; }
  .WGrid.Mons, .WGrid.Items { grid-template-columns: 1fr 1fr; }
  .WMon i { display: none; }
  .WGrid.Two .WMon i { display: flex; }
  .Stat { grid-template-columns: 96px 34px 1fr; }
  .WItemCard .Big { width: 64px; height: 64px; flex-basis: 64px; }
}
.WMain .Card h3 { margin: 16px 0 6px; }
.WMain .Card h2 + h3, .WMain .Card h1 + h3 { margin-top: 4px; }