/* Catppuccin Mocha */
:root {
  --base: #1e1e2e; --mantle: #181825; --crust: #11111b; --surface0: #313244; --surface1: #45475a;
  --text: #cdd6f4; --subtext: #a6adc8; --overlay: #7f849c; --accent: #cba6f7; --red: #f38ba8;
  --fury: #e5484d; --calm: #46a758; --mind: #3e8ed0; --body: #f08c00; --chaos: #8e4ec6; --order: #e6c229;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--base); color: var(--text); font: 14px/1.4 system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--surface0); padding: 0 .3em; border-radius: 3px; }

header { position: sticky; top: 0; z-index: 5; display: flex; gap: .5rem; align-items: center; padding: .6rem 1rem; background: var(--mantle); border-bottom: 1px solid var(--surface0); }
#q { flex: 1; font: inherit; font-size: 15px; padding: .5rem .7rem; background: var(--crust); color: var(--text); border: 1px solid var(--surface1); border-radius: 6px; font-family: ui-monospace, monospace; }
#q:focus { outline: none; border-color: var(--accent); }
#count { color: var(--subtext); white-space: nowrap; min-width: 6em; text-align: right; }
header button, #help summary { font: inherit; background: var(--surface0); color: var(--text); border: 0; border-radius: 6px; padding: .45rem .7rem; cursor: pointer; list-style: none; }
#help { position: relative; }
#help .cheat { position: absolute; right: 0; top: 2.6rem; width: min(720px, 90vw); background: var(--mantle); border: 1px solid var(--surface1); border-radius: 8px; padding: .5rem 1rem; box-shadow: 0 8px 30px #0008; }
.cheat td { padding: .2rem .5rem .2rem 0; vertical-align: top; }
.cheat td:first-child { white-space: nowrap; }

#chips .op { color: var(--accent); font-size: 12px; font-weight: 600; }
#chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; color: var(--overlay); padding: .4rem 1rem; min-height: 1.9rem; }
.chip { font-size: 12px; padding: .1rem .5rem; border-radius: 99px; background: var(--surface0); color: var(--subtext); }
.chip.dir { background: color-mix(in srgb, var(--accent) 25%, var(--surface0)); color: var(--text); }
.chip.err { background: color-mix(in srgb, var(--red) 35%, var(--surface0)); color: var(--text); }

main { padding: 0 1rem 2rem; }
section > h2 { margin: 1.2rem 0 .4rem; font-size: 18px; border-bottom: 1px solid var(--surface0); padding-bottom: .2rem; }
section > h2 small { color: var(--overlay); font-weight: normal; font-size: 13px; }
.role-row h3 { margin: .5rem 0 .3rem; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--overlay); font-weight: 600; }
.empty { color: var(--subtext); padding: 2rem; text-align: center; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w), 1fr)); gap: .6rem; align-items: start; }
.card { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4.5% / 3.3%; overflow: hidden; }
.card img { display: block; width: 100%; aspect-ratio: 744 / 1039; object-fit: contain; }
.card.land img { aspect-ratio: 1039 / 744; }
.card:hover { outline: 2px solid var(--accent); }
.noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 744 / 1039; background: var(--surface0); color: var(--text); padding: 1rem; }
.nprint { position: absolute; right: 6px; bottom: 6px; font-size: 11px; background: #000b; color: #fff; padding: 0 .4em; border-radius: 99px; }

.list { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* fixed widths so the tables of one page line up */
.list th:nth-child(1) { width: 17rem; } .list th:nth-child(2) { width: 8rem; } .list th:nth-child(3) { width: 9rem; }
.list th:nth-child(4) { width: 5rem; } .list th:nth-child(n+5):nth-child(-n+7) { width: 2.6rem; text-align: right; }
.list th:nth-child(8) { width: 6rem; } .list th:nth-child(9) { width: 5.5rem; }
.list th { text-align: left; font-weight: 600; color: var(--subtext); padding: .3rem .5rem; border-bottom: 1px solid var(--surface1); cursor: pointer; user-select: none; white-space: nowrap; }
.list th:not([data-sort]) { cursor: default; }
.list th[data-sort]:hover { color: var(--accent); }
.list td { padding: .3rem .5rem; border-bottom: 1px solid var(--surface0); vertical-align: top; }
.list tr:hover td { background: var(--mantle); cursor: pointer; }
.list .nm { font-weight: 600; }
.list .n { text-align: right; font-variant-numeric: tabular-nums; }
.list .tx { color: var(--subtext); font-size: 13px; }
.list small { color: var(--overlay); }
.role { font-size: 10px; background: var(--surface0); border-radius: 3px; padding: 0 .3em; }

.dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--c); margin-right: 2px; vertical-align: -1px; }
.kw { color: var(--text); font-weight: 600; }
.ic { display: inline-block; font-size: .85em; vertical-align: baseline; }
.ic.energy { min-width: 1.3em; text-align: center; border-radius: 50%; background: var(--text); color: var(--base); font-weight: 700; }
.ic.rune { width: .8em; height: .8em; border-radius: 2px; transform: rotate(45deg); background: var(--c); }
.ic.rune.any { background: conic-gradient(var(--fury), var(--body), var(--order), var(--calm), var(--mind), var(--chaos), var(--fury)); }

dialog { border: 1px solid var(--surface1); border-radius: 10px; background: var(--mantle); color: var(--text); padding: 1rem; width: min(980px, 95vw); max-height: 92vh; }
dialog[open] { display: flex; gap: 1.2rem; }
dialog::backdrop { background: #000a; }
dialog .big { flex: 0 0 min(380px, 45%); }
dialog .big img { width: 100%; border-radius: 12px; }
dialog .info { flex: 1; overflow: auto; }
dialog h2 { margin: 0 0 .3rem; }
dialog .line { color: var(--subtext); margin: 0 0 .8rem; }
dialog .tx { font-size: 15px; line-height: 1.55; }
dialog .banned { color: var(--red); font-weight: 600; margin: -.4rem 0 .8rem; }
dialog .flav { font-style: italic; color: var(--overlay); }
dialog .prints { display: flex; flex-direction: column; gap: .3rem; }
.pr { text-align: left; font: inherit; background: var(--surface0); color: var(--text); border: 1px solid transparent; border-radius: 6px; padding: .3rem .6rem; cursor: pointer; }
.pr small { display: block; color: var(--overlay); }
.pr.on { border-color: var(--accent); }

footer { color: var(--overlay); font-size: 12px; padding: 1rem; text-align: center; }
footer p { margin: .3rem auto; max-width: 60rem; }
footer .legal { font-size: 11px; }