@font-face {
  font-family: 'Sour Gummy';
  src: url('/static/fonts/SourGummy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sour Gummy';
  src: url('/static/fonts/SourGummy-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sour Gummy';
  src: url('/static/fonts/SourGummy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sour Gummy';
  src: url('/static/fonts/SourGummy-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Paper tokens ────────────────────────────────────────────── */
:root {
  /* allow max-height to animate to the content-sized max-content keyword */
  interpolate-size: allow-keywords;
  --paper:       #d5d0c2;
  --card:        #d8d8d8;
  --card-alt:    #c8c8c8;
  --ink:         #1e1a12;
  --ink-mid:     #5c5244;
  --ink-light:   #a09080;
  --stat-green:  #3a7a48;
  --stat-ring:   #285c34;
  --sc-base-bg:  #fafafa; --sc-base-tx: #2a2620;
  --sc-6-bg:     #d9e6d9; --sc-6-tx:    #2a2620;
  --sc-7-bg:     #b3ccb3; --sc-7-tx:    #2a2620;
  --sc-8-bg:     #99cc99; --sc-8-tx:    #2a2620;
  --sc-9-bg:     #66a666; --sc-9-tx:    #2a2620;
  --sc-10-bg:    #66b34d; --sc-10-tx:   #2a2620;
  --sc-4-bg:     #e6d9d9; --sc-4-tx:    #2a2620;
  --sc-3-bg:     #ccb3b3; --sc-3-tx:    #2a2620;
  --sc-2-bg:     #cc9999; --sc-2-tx:    #2a2620;
  --sc-1-bg:     #a66666; --sc-1-tx:    #2a2620;

  /* default class colours (collarless) */
  --cp: #646464;
  --cs: #bdbdbd;
  --cl: #f0f0f0;
  --cb: #888888;
  --ct: #1e1a12;
}

/* ── Class colour overrides ─────────────────────────────────── */
[data-class="Fighter"]     { --cp:#B17373; --cs:#E88C8C; --cl:#f8edee; --cb:#8D5959; --ct:#3a1010; --cth:#ffffff; }
[data-class="Hunter"]      { --cp:#425D3D; --cs:#9CCB8D; --cl:#e4f0e0; --cb:#2F432B; --ct:#0e2808; --cth:#ffffff; }
[data-class="Mage"]        { --cp:#787899; --cs:#AFAFE6; --cl:#eaeaf5; --cb:#505070; --ct:#1e1e40; --cth:#ffffff; }
[data-class="Tank"]        { --cp:#857348; --cs:#C4A870; --cl:#f0e8d4; --cb:#53472B; --ct:#3a2810; --cth:#ffffff; }
[data-class="Cleric"]      { --cp:#FDFDFD; --cs:#C8C4C4; --cl:#FAFAFA; --cb:#A8A4A4; --ct:#2a2620; --cth:#2a2620; }
[data-class="Thief"]       { --cp:#FFFBB5; --cs:#D8D5A0; --cl:#FFFEE8; --cb:#9A9660; --ct:#38340a; --cth:#38340a; }
[data-class="Necromancer"] { --cp:#131313; --cs:#723B3C; --cl:#d0d0d0; --cb:#1B1B1B; --ct:#1a1a1a; --cth:#ffffff; }
[data-class="Tinkerer"]    { --cp:#B5EADC; --cs:#7CD6B5; --cl:#e4f8f4; --cb:#389070; --ct:#0e3828; --cth:#0e3828; }
[data-class="Butcher"]     { --cp:#AC4457; --cs:#B6576B; --cl:#f8e0e4; --cb:#7C2F3C; --ct:#380010; --cth:#ffffff; }
[data-class="Druid"]       { --cp:#5B4237; --cs:#A0C197; --cl:#f0e4dc; --cb:#3A2922; --ct:#1a0800; --cth:#ffffff; }
[data-class="Psychic"]     { --cp:#645379; --cs:#997DBB; --cl:#ede8f4; --cb:#40354E; --ct:#1e1030; --cth:#ffffff; }
[data-class="Monk"]        { --cp:#787878; --cs:#DCDCDC; --cl:#f0f0f0; --cb:#3B3B3B; --ct:#0e0e0e; --cth:#ffffff; }
[data-class="Jester"]      { --cp:#803060; --cs:#c890b6; --cl:#f4e0ee; --cb:#601048; --ct:#380028; --cth:#ffffff; }
[data-class="none"]        { --cp:#909090; --cs:#cccccc; --cl:#eeeeee; --cb:#888888; --ct:#303030; --cth:#ffffff; }
[data-class="disorder"]    { --cp:#111111; --cs:#555555; --cl:#e4e4e4; --cb:#333333; --ct:#111111; --cth:#ffffff; }

/* ── Body / background ────────────────────────────────────────── */
body {
  font-family: 'Sour Gummy', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  /* subtle paper grain via SVG noise */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

a { color: var(--cp); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--cp); filter: brightness(1.2); }

/* ── Sketch helper ────────────────────────────────────────────── */
/* Apply .sketch to any box that should look hand-drawn.
   Uses asymmetric border widths + irregular radii + ghost outline. */
.sketch,
.section,
.cat-card,
.ability-entry,
.equip-entry,
.stat-row-game,
.mutation-entry,
.file-label {
  position: relative;
}
.sketch::before,
.section::before {
  content: '';
  position: absolute;
  inset: -4px -3px -5px -4px;
  border: 1.5px solid var(--cb);
  border-width: 1px 2px 1px 2px;
  border-radius: 7px 11px 6px 9px;
  opacity: 0.18;
  transform: rotate(0.9deg);
  pointer-events: none;
  z-index: 0;
}

/* ── Site layout ──────────────────────────────────────────────── */
.site-header {
  background: var(--card);
  border-bottom: 3px solid var(--ink);
  border-width: 0 0 3px 0;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-logo {
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.site-logo:hover { text-decoration: none; filter: none; color: var(--ink-mid); }

.site-content {
  flex: 1;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.site-footer {
  background: var(--card);
  border-top: 3px solid var(--ink);
  padding: 1rem 1.5rem;
  color: var(--ink-mid);
  font-size: 0.8rem;
  text-align: center;
}
.site-footer p {
  max-width: 1000px;
  margin: 0 auto;
}


/* ── Typography ───────────────────────────────────────────────── */
h1 { font-size: 1.8rem; font-weight: 900; margin-bottom: .5rem; }
h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
.subtext { color: var(--ink-mid); font-size: 0.9rem; margin-bottom: 1.5rem; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: .45rem 1.1rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  border: 3px solid var(--ink);
  border-width: 3px 2px 4px 3px;
  border-radius: 4px 7px 3px 5px;
  text-decoration: none;
  transition: filter .1s;
}
.btn-primary  { background: var(--cp); color: #fff; border-color: var(--cb); }
.btn-primary:hover  { filter: brightness(1.15); text-decoration: none; color: #fff; }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--ink-mid); }
.btn-secondary:hover { background: var(--card-alt); text-decoration: none; }

/* ── Alerts ───────────────────────────────────────────────────── */
.alert {
  padding: .7rem 1rem;
  margin: 1rem 0;
  font-size: .9rem;
  border: 3px solid;
  border-width: 3px 2px 4px 3px;
  border-radius: 4px 7px 3px 5px;
}
.alert-error   { background: #fde8e5; border-color: #923a30; color: #5a1a14; }
.alert-warning { background: #f8f4d0; border-color: #8a7a20; color: #3a3000; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  gap: 1rem;
  font-size: .9rem;
  margin-bottom: 1.5rem;
  color: var(--ink-mid);
}
.breadcrumb a { color: var(--ink-mid); }
.breadcrumb a:hover { color: var(--cp); filter: none; }

/* ── Upload page ──────────────────────────────────────────────── */
.upload-page { max-width: 560px; }

.upload-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
}

.file-label {
  display: block;
  border: 3px dashed var(--ink-mid);
  border-width: 3px 2px 4px 3px;
  border-radius: 4px 7px 3px 5px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  background: var(--card);
  transition: border-color .15s, background .15s;
}
.file-label:hover { border-color: var(--ink); background: var(--card-alt); }
.file-label input { margin-top: .5rem; }
.file-label-text { display: block; color: var(--ink-mid); font-size: .95rem; }

.upload-help { margin-top: 1.5rem; }
.upload-help h2 { font-size: 1rem; margin-bottom: .5rem; }
.upload-help ul { padding-left: 1.25rem; color: var(--ink-mid); font-size: .9rem; }
.upload-help li { margin-bottom: .25rem; }
.upload-help code {
  font-size: .82rem;
  background: var(--card);
  padding: .1em .35em;
  border-radius: 3px;
  border: 1px solid var(--ink-mid);
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.page-actions { display: flex; gap: .5rem; }

/* ── Cat list sections ────────────────────────────────────────── */
.cat-section { margin-bottom: 2.5rem; }

.section-heading {
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  border: 3px solid;
  border-width: 3px 2px 4px 3px;
  border-radius: 4px 7px 3px 5px;
  transform: rotate(-0.5deg);
}
.section-adventure { background: #dff0db; border-color: #375a30; color: #183a14; }
.section-house      { background: #e8e8f8; border-color: #3a3a70; color: #202050; }
.section-gone       { background: #e0e0e0; border-color: #484848; color: #282828; opacity: .75; }

/* ── Cat grid ─────────────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 1rem;
}

/* ── Cat card ─────────────────────────────────────────────────── */
.cat-card {
  background: var(--cl);
  border: 3px solid var(--cb);
  border-width: 3px 2px 4px 3px;
  border-radius: 9px;
  padding: .75rem .75rem .6rem;
  display: block;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 32px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.2), 0 0 0 2px var(--cb);
  text-decoration: none;
  color: var(--ink);
  z-index: 1;
}
/* suppress the list-page hover scale when the card is embedded in the detail or team page */
.cat-detail-page .cat-card:hover,
.team-page .cat-card:hover { transform: none; box-shadow: none; }
.cat-card-dead { opacity: .45; filter: grayscale(.4); }

.cat-card-header {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.class-icon-card {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: 75px;
  height: 75px;
  margin-top: -30px;
  margin-left: -35px;
  margin-bottom: 10px;
}
.cat-card-name-block { flex: 1; min-width: 0; }
.cat-name { font-weight: 900; font-size: 1.5rem; display: block; line-height: 1.2; }
.cat-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin-top: .2rem;
}
.gender-sym {
  font-size: 1rem;
  font-weight: 900;
  color: var(--cp);
  line-height: 1;
}
.gender-icon {
  height: 0.8em;
  width: auto;
  vertical-align: middle;
  margin-left: .15em;
}

/* Personality icon strip */
.cat-card-personality {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: .4rem;
}
.personality-icon { flex-shrink: 0; height: 22px; width: auto; }
.rel-love, .rel-hate { position: relative; display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; text-decoration: none; }
.rel-love { color: #b03060; }
.rel-hate { color: #7a3030; }
.rel-love:hover, .rel-hate:hover { text-decoration: underline; }
.rel-love:hover .tip, .rel-hate:hover .tip { display: block; }
.rel-portrait-wrap { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }
.rel-portrait { height: 44px; width: auto; display: block; }
.rel-overlay { position: absolute; pointer-events: none; }
.rel-love-overlay { top: -3px; left: -3px; width: 22px; height: auto; }
.rel-hate-overlay { top: 28%; left: 50%; transform: translateX(-50%); height: 15px; width: auto; }

/* Compact 2-column stat grid on card */
.cat-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem .4rem;
  margin-top: .35rem;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .35rem;
  background: var(--card);
  border: 1px solid var(--cb);
  border-radius: 3px 4px 3px 3px;
  font-size: .78rem;
}
.cs-icon-cell {
  display: flex;
  align-items: center;
  position: relative;
}
/* Passive/disorder icon cells: border + overflow:hidden on the cell so the
   image is clipped to the rounded rect, eliminating SVG corner artefacts.
   pc-* class on the cell overrides the border colour. */
.cs-icon-cell:has(.ability-icon) {
  background: #ffffff;
  border: 3px solid #d8d8d8;
  border-radius: 9px;
  overflow: hidden;
}
.cs-icon-cell .ability-icon { width: 100%; height: auto; display: block; }
/* Cat list grid: standardise cell aspect ratio so paired cells in the same
   row always have equal height, then cover-fill to eliminate any whitespace
   between the icon and the bordered cell edge. */
.cat-stats-grid .cs-icon-cell:has(.ability-icon) { aspect-ratio: 16 / 9; }
.cat-stats-grid .cs-icon-cell .ability-icon { height: 100%; object-fit: cover; }
/* detail-card ability icons: same approach */
.dc-ability-icon-cell .ability-icon { width: 100%; height: auto; display: block; }
/* per-class border colours — applied to the cell span */
.cs-icon-cell.pc-disorder,
.dc-ability-icon-cell.pc-disorder    { border-color: #000000; }
.cs-icon-cell.pc-Fighter,
.dc-ability-icon-cell.pc-Fighter     { border-color: #B17373; }
.cs-icon-cell.pc-Hunter,
.dc-ability-icon-cell.pc-Hunter      { border-color: #425D3D; }
.cs-icon-cell.pc-Mage,
.dc-ability-icon-cell.pc-Mage        { border-color: #787899; }
.cs-icon-cell.pc-Tank,
.dc-ability-icon-cell.pc-Tank        { border-color: #857348; }
.cs-icon-cell.pc-Cleric,
.dc-ability-icon-cell.pc-Cleric      { border-color: #A8A4A4; }
.cs-icon-cell.pc-Thief,
.dc-ability-icon-cell.pc-Thief       { border-color: #9A9660; }
.cs-icon-cell.pc-Necromancer,
.dc-ability-icon-cell.pc-Necromancer { border-color: #131313; }
.cs-icon-cell.pc-Tinkerer,
.dc-ability-icon-cell.pc-Tinkerer    { border-color: #7CD6B5; }
.cs-icon-cell.pc-Butcher,
.dc-ability-icon-cell.pc-Butcher     { border-color: #AC4457; }
.cs-icon-cell.pc-Druid,
.dc-ability-icon-cell.pc-Druid       { border-color: #5B4237; }
.cs-icon-cell.pc-Psychic,
.dc-ability-icon-cell.pc-Psychic     { border-color: #645379; }
.cs-icon-cell.pc-Monk,
.dc-ability-icon-cell.pc-Monk        { border-color: #787878; }
.cs-icon-cell.pc-Jester,
.dc-ability-icon-cell.pc-Jester      { border-color: #803060; }
.cs-lbl {
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink-mid);
  letter-spacing: .03em;
  width: 1.8rem;
  flex-shrink: 0;
}
.cs-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.cs-sep {
  flex-shrink: 0;
  width: 1px;
  height: 1.25rem;
  background: #aaaaaa;
  border: none;
  margin: 0 .2rem;
  align-self: center;
}
.cs-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: auto;
  font-weight: 700;
  font-size: 1.5rem;
  border: 2px solid #999999;
  border-radius: 2px;
  flex-shrink: 0;
  padding: 0 .15rem;
}
.cs-mod-wrap {
  position: relative;
  margin-left: auto;
}
.cs-mod-wrap:has(.cs-mod-popup) { cursor: help; }
.cs-mod {
  font-size: 1rem;
  font-weight: 700;
  color: #999999;
}
.cs-mod-wrap:has(.cs-mod-popup) .cs-mod { text-decoration: underline dotted #aaa; }
.cs-mod-popup {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  background: var(--paper);
  border: 2px solid var(--cb);
  border-radius: 7px;
  padding: .35rem .55rem;
  min-width: 10rem;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  z-index: 200;
}
.cs-mod-wrap:hover .cs-mod-popup { display: block; }
.cs-mod-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  padding: .1rem 0;
}
.cs-mod-entry + .cs-mod-entry { border-top: 1px solid rgba(0,0,0,.08); }
.cs-mod-source { color: var(--ink); }
.cs-mod-val { font-weight: 700; }
.cs-total {
  grid-column: 1 / -1;
  background: var(--cl);
  border-color: var(--cb);
}
.cs-total .cs-lbl { color: var(--cp); }
.cs-total .cs-val { background: transparent; color: var(--cp); font-size: .9rem; }

/* ── Badges ───────────────────────────────────────────────────── */
.class-badge, .gender-badge, .age-badge, .collar-badge,
.dead-badge, .adventure-badge, .cursed-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .1em .5em;
  border: 2px solid;
  border-width: 2px 1px 2px 2px;
  border-radius: 3px 5px 3px 4px;
  line-height: 1.5;
}

/* class badge uses the current class CSS vars */
.class-badge { background: var(--cl); border-color: var(--cb); color: var(--ct); }

.gender-badge   { background: var(--card-alt); border-color: var(--ink-mid); color: var(--ink); }
.age-badge      { background: var(--card-alt); border-color: var(--ink-light); color: var(--ink-mid); max-height: 1.6rem; }
.collar-badge   { background: #f8f4d0; border-color: #8a7a20; color: #3a3000; }
.dead-badge     { background: #fde8e5; border-color: #923a30; color: #5a1a14; }
.adventure-badge{ background: #dff0db; border-color: #375a30; color: #183a14; }
.cursed-badge   { background: #fde8e5; border-color: #923a30; color: #5a1a14; }

/* ── Icons ────────────────────────────────────────────────────── */
.class-icon, .ability-icon { flex-shrink: 0; }
.cat-detail-page .class-icon-card { width: 100px; height: 100px; margin-top: -35px; margin-left: -35px; pointer-events: none; }
/* mix-blend-mode: multiply makes residual white/light fringe pixels
   blend naturally over any background colour. */
.ability-icon { mix-blend-mode: multiply; height: 44px; width: auto; }
.upgraded-mark { color: var(--cl); font-weight: 900; margin-left: .1em; }

.cat-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }



.stat-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 3px;
}
.stat-icon-wrap.injured {
  padding: 1px;
}
.stat-icon-wrap.injured::after {
  content: '⮟';
  position: absolute;
  bottom: 0;
  left: 1px;
  font-size: 16px;
  line-height: 1;
  color: #a66666;
  bottom: -5px;
  z-index: 2;
}
.stat-icon {
  width: 40px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.stat-label {
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  width: 2rem;
  flex-shrink: 0;
  color: var(--ink-mid);
}
/* stat colour tiers — no border, disc sits behind the number */
.sc-base { background: var(--sc-base-bg); color: var(--sc-base-tx); }
.sc-6    { background: var(--sc-6-bg);    color: var(--sc-6-tx); }
.sc-7    { background: var(--sc-7-bg);    color: var(--sc-7-tx); }
.sc-8    { background: var(--sc-8-bg);    color: var(--sc-8-tx); }
.sc-9    { background: var(--sc-9-bg);    color: var(--sc-9-tx); }
.sc-10   { background: var(--sc-10-bg);   color: var(--sc-10-tx); }
.sc-4    { background: var(--sc-4-bg);    color: var(--sc-4-tx); }
.sc-3    { background: var(--sc-3-bg);    color: var(--sc-3-tx); }
.sc-2    { background: var(--sc-2-bg);    color: var(--sc-2-tx); }
.sc-1    { background: var(--sc-1-bg);    color: var(--sc-1-tx); }


.ability-name { font-weight: 900; }

.mana-cost {
  font-size: .72rem;
  background: var(--cl);
  color: var(--ct);
  padding: .1em .5em;
  border: 2px solid var(--cb);
  border-width: 2px 1px 2px 2px;
  border-radius: 3px 5px 3px 4px;
  font-weight: 700;
}
.ability-desc { font-size: .875rem; }
.ability-stat-mana { display: flex; align-items: center; gap: .15rem; color: #5577cc; }
.ability-stat-dmg  { display: flex; align-items: center; gap: .15rem; color: #cc4444; }
.ability-stat-heal { color: #44aa66; }

.equip-name   { font-weight: 900; }
.equip-mods   { font-size: .85rem; color: var(--ink); margin-bottom: .2rem; font-weight: 700; }

/* ── Mutations / Body Parts ───────────────────────────────────── */
/* Compact card-grid mutation list (main card) */
.dc-mutation-list { display: flex; flex-direction: column; gap: .25rem; padding: .25rem 0; }
.dc-mutation-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: .4rem;
  font-size: .78rem;
  padding: .2rem .4rem;
  background: var(--card-alt);
  border: 1px solid var(--cb);
  border-radius: 3px 5px 3px 4px;
}
.dc-mutation-row.dc-mutation-has-mutation { border-color: var(--cs); }
.dc-mutation-row.dc-mutation-birth-defect { border-color: #9a4a28; }
.dc-mutation-icon-wrap {
  position: relative;
  height: 44px;
  min-width: 44px;
}
.dc-mutation-icon-wrap.loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--cb) 30%, transparent);
  border-top-color: var(--cb);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.dc-mutation-icon-wrap.failed { display: none; }
.dc-mutation-icon {
  width: auto;
  height: 44px;
  max-width: 66px;
  object-fit: contain;
  display: block;
}
.dc-mutation-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .35rem;
  min-width: 0;
}
.dc-mutation-slot    { font-size: .65rem; text-transform: uppercase; color: var(--ink-mid); font-weight: 700; flex-shrink: 0; }
.dc-mutation-name    { font-weight: 700; }
.dc-mutation-tag     { font-size: .6rem; font-weight: 600; color: var(--ink-mid); opacity: .75; text-transform: uppercase; letter-spacing: .03em; }
.dc-mutation-effects { font-size: .7rem; color: #2a7a38; font-weight: 700; width: 100%; }
.dc-mutation-row.dc-mutation-birth-defect .dc-mutation-tag { color: #7a3a20; opacity: 1; }
.dc-mutation-desc {
  grid-column: 1 / -1;
  align-self: start;
  font-size: .75rem;
  color: var(--ink-mid);
  margin: .1rem 0 0;
  line-height: 1.4;
}

.dc-passive-mods { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.equip-overlay-desc { margin-bottom: .3rem; display: block; }
.equip-stat-mods { margin-top: .2rem; display: flex; }
.equip-overlay-passives { display: block; margin-top: .2rem; font-size: .8rem; opacity: .85; }
.equip-status-top  { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .3rem; }
.equip-status-bottom { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.status-icon { height: 1.3rem; width: auto; }
.pm-entry { display: flex; align-items: center; gap: .15rem; }
.pm-icon  { height: 1.25rem; width: auto; }
.pm-label { font-size: .85rem; font-weight: 700; }
.pm-val   { font-size: .9rem; font-weight: 900; }
.pm-pos   { color: #2a7a38; }
.pm-neg   { color: #8a2a20; }

/* ── Cat sprite on detail page ────────────────────────────────── */
/* ── Detail-page cat card layout ─────────────────────────────── */
/* ── Unified 4-column detail card grid ───────────────────────── */
.dc-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-areas:
    "sprite     icons      icons      icons"
    "stats      abilities  abilities  abilities"
    "mutations  abilities  abilities  abilities"
    "equipment  equipment  equipment  equipment";
  gap: .4rem;
  margin-top: .35rem;
  align-items: stretch;
}
.dc-sprite-area  { grid-area: sprite; }
.dc-icons        { grid-area: icons; }
.dc-icon-card {
  display: flex;
  flex-direction: column;
  background: var(--cp);
  border: 3px solid var(--cb);
  border-width: 3px 2px 4px 3px;
  border-radius: 9px;
  position: relative;
  /* No overflow:hidden — cs-icon-cell clips image corners itself.
     Keeping hidden here would cause the overlay transition to snap. */
  transition: transform .18s ease, box-shadow .18s ease;
}

.dc-icon-card-header {
  background: var(--cp);
  padding: .2rem .35rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.dc-element-icons {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: .15rem;
}
.dc-element-icon {
  height: 1.1rem;
  width: auto;
}
.dc-icon-name {
  grid-column: 2;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--cth, #ffffff);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.dc-icon-card:hover .dc-icon-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
/* Empty slots: invisible but still occupy grid space */
.dc-icon-card.dc-icon-empty { visibility: hidden; }
/* Equipment empty slots: visible faded placeholder, no header */
.dc-equipment .dc-icon-card.dc-icon-empty {
  visibility: visible;
  opacity: .3;
  border-style: dashed;
  min-height: 80px;
}
.dc-equipment .dc-icon-card.dc-icon-empty .dc-icon-card-header { display: none; }
/* Icon body fills remaining card height; cs-icon-cell fills body */
.dc-equipment .dc-icon-card.dc-icon-empty .dc-icon-body { flex: 1; }
.dc-equipment .dc-icon-card.dc-icon-empty .cs-icon-cell {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  border-radius: 0;
  justify-content: center;
}
/* Slot placeholder fills the cell with object-fit so it stays proportional */
.dc-equipment .dc-icon-card.dc-icon-empty .slot-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slot-placeholder { opacity: .5; mix-blend-mode: multiply; }

/* Trinket/consumable diagonal split.
   Absolute-positioned so it escapes dc-icon-body/cs-icon-cell and fills
   the whole card (dc-icon-card already has position:relative).            */
.slot-combo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 9px;
}
/* Diagonal line: gradient runs to bottom-right so the perpendicular stripe
   goes from top-right to bottom-left — matching the in-game design.       */
.slot-combo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.75px),
    rgba(0,0,0,.35) calc(50% - 1.5px),
    rgba(0,0,0,.35) calc(50% + 1.5px),
    transparent calc(50% + 0.75px)
  );
  pointer-events: none;
  z-index: 1;
}
.slot-combo-top, .slot-combo-btm {
  position: absolute;
  inset: 0;
  display: flex;
}
/* Upper-left triangle: trinket */
.slot-combo-top {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12% 0 0 12%;
}
/* Lower-right triangle: consumable */
.slot-combo-btm {
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 12% 12% 0;
}
.slot-combo-top img, .slot-combo-btm img {
  width: 50%;
  height: auto;
  opacity: .5;
  mix-blend-mode: multiply;
}
.equip-icon-cell { position: relative; }
/* Icon cell inside a card: --cp background so transparent SVG corner pixels
   (stroke-linejoin:round) blend with the card colour rather than showing white.
   mix-blend-mode must be normal here — multiply on a coloured bg darkens the icon. */
.dc-icon-card .cs-icon-cell:has(.ability-icon) {
  background: var(--cp);
  border-color: var(--cb);
  border-radius: 4px 4px 0 0;
  border-width: 0;
  border-top-width: 2px;
}
.dc-icon-card .cs-icon-cell .ability-icon { mix-blend-mode: normal; }
.dc-icon-body {
  position: relative;
}
.dc-icon-desc-area {
  color: var(--cth, #fff);
}
.dc-icon-desc-area .dc-icon-overlay-inner {
  padding-bottom: .4rem;
}
.dc-icon-overlay {
  color: var(--cth, #fff);
}
.dc-equipment .dc-icon-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dc-equipment .dc-icon-overlay {
  margin-top: auto;
}
.dc-equipment .cs-icon-cell {
  flex: 1;
}
.dc-icon-overlay-inner {
  padding: .4rem .85rem 0;
  font-size: 1rem;
  line-height: 1.4;
}
.dc-icon-card:hover {
  transform: scale(1.1);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0  4px 16px rgba(0, 0, 0, 0.30),
    0  0   0  2px var(--cb);
  z-index: 10;
}

/* Ability stat bar ─────────────────────────────────────────────────────────
   Three equal columns: damage | type icon (1.5× larger) | mana.
   Always rendered when at least one value is present; zero mana is shown.   */
.dc-ability-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: .3rem .4rem .4rem;
  font-weight: 900;
  font-size: 1.95rem;
  color: var(--cth, #fff);
  margin-top: auto;
}
.dc-ability-bar-cell   { display: flex; align-items: center; }
.dc-ability-bar-left   { justify-content: flex-start; gap: .25rem; }
.dc-ability-bar-right  { justify-content: flex-end;   gap: .25rem; }
.dc-ability-bar-centre { justify-content: center; }
.dc-ability-bar-type-icon { height: 3.15rem; width: auto; }
.dc-ability-bar-stat-icon { height: 2.1rem;  width: auto; }
/* Override per-element colour classes so bar text always uses header colour */
.dc-ability-bar .ability-stat-dmg,
.dc-ability-bar .ability-stat-heal,
.dc-ability-bar .ability-stat-mana { color: inherit; }
/* Coloured pill backgrounds on the number only (not the icon) */
.dc-ability-bar .ability-num {
  padding: .06em .22em;
  border-radius: 3px;
  line-height: 1.1;
}
.dc-ability-bar .ability-stat-dmg .ability-num {
  background: color-mix(in srgb, var(--cp) 50%, white);
  color: #1a1a1a;
}
.dc-ability-bar .ability-stat-mana .ability-num {
  background: color-mix(in srgb, var(--cp) 60%, black);
  color: #fff;
}.dc-stats        { grid-area: stats; }
.dc-abilities    { grid-area: abilities; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .2rem; align-content: start; }
.ability-wrap {
  position: relative;
}
.dc-transform-wrap {
  position: absolute;
  /* left: 110% + 2px — this accounts for the primary card's scale(1.1) expanding
     its right edge 5% outward, plus the secondary card's scale(1.1) expanding its
     left edge 5% inward; together they need a 10% gap or they overlap */
  left: calc(110% + 2px);
  top: 0;
  width: 100%;
  opacity: 0;
  /* translateX(-110% - 2px) exactly cancels the left offset, placing the card
     at the primary card's position to slide rightward into view */
  transform: translateX(calc(-110% - 2px)) translateZ(0);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 50;
}
.ability-wrap.has-transform:hover .dc-transform-wrap {
  opacity: 1;
  transform: translateX(0) translateZ(0);
  pointer-events: auto;
}
/* Secondary card is only ever visible while hovered, so apply hover-equivalent
   scale + shadow unconditionally. Using a hover-ancestor selector would stop
   matching as soon as the cursor moves onto the secondary card itself (which is
   outside .ability-wrap's layout box), causing the card to shrink back. */
.dc-transform-wrap .dc-icon-card {
  transform: scale(1.1);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0  4px 16px rgba(0, 0, 0, 0.30),
    0  0   0  2px var(--cb);
}
.ability-wrap.has-transform > .dc-icon-card::after {
  content: '→';
  position: absolute;
  right: .25rem;
  bottom: .25rem;
  font-size: .7rem;
  opacity: .5;
}
/* Left-side transform card — shows the basic attack replacement (TransformBasicAttack) */
.dc-basic-attack-wrap {
  position: absolute;
  right: calc(110% + 2px);
  top: 0;
  width: 100%;
  opacity: 0;
  /* translateX(110%+2px) cancels right offset, placing card at primary position */
  transform: translateX(calc(110% + 2px)) translateZ(0);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 50;
}
.ability-wrap.has-basic-transform:hover .dc-basic-attack-wrap {
  opacity: 1;
  transform: translateX(0) translateZ(0);
  pointer-events: auto;
}
.dc-basic-attack-wrap .dc-icon-card {
  transform: scale(1.1);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0  4px 16px rgba(0, 0, 0, 0.30),
    0  0   0  2px var(--cb);
}
.ability-wrap.has-basic-transform > .dc-icon-card::before {
  content: '←';
  position: absolute;
  left: .25rem;
  bottom: .25rem;
  font-size: .7rem;
  opacity: .5;
}
.dc-mutations    { grid-area: mutations; }
.dc-equipment    { grid-area: equipment; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; }
.dc-stats .cat-stats-grid,
.dc-icons .cat-stats-grid { margin-top: 0; }
.dc-sprite-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cl);
  border: 3px solid var(--cb);
  border-width: 3px 2px 4px 3px;
  border-radius: 4px 7px 3px 5px;
  overflow: hidden;
  padding: 4px;
  width: 100%;
  height: 100%;
}
.dc-sprite { width: 100%; height: 100%; object-fit: contain; display: block; }
.dc-icon-grid { margin-top: 0; grid-template-columns: 1fr 1fr; }
.dc-ability-icon-cell {
  display: flex;
  border: 4px solid #d8d8d8;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}
.dc-ability-icon-cell.pc-none        { border-color: #999999; }
.dc-ability-icon-cell.pc-disorder    { border-color: #000000; }
.dc-ability-icon-cell.pc-Fighter     { border-color: #B17373; }
.dc-ability-icon-cell.pc-Hunter      { border-color: #425D3D; }
.dc-ability-icon-cell.pc-Mage        { border-color: #787899; }
.dc-ability-icon-cell.pc-Tank        { border-color: #857348; }
.dc-ability-icon-cell.pc-Cleric      { border-color: #A8A4A4; }
.dc-ability-icon-cell.pc-Thief       { border-color: #9A9660; }
.dc-ability-icon-cell.pc-Necromancer { border-color: #131313; }
.dc-ability-icon-cell.pc-Tinkerer    { border-color: #7CD6B5; }
.dc-ability-icon-cell.pc-Butcher     { border-color: #AC4457; }
.dc-ability-icon-cell.pc-Druid       { border-color: #5B4237; }
.dc-ability-icon-cell.pc-Psychic     { border-color: #645379; }
.dc-ability-icon-cell.pc-Monk        { border-color: #787878; }
.dc-ability-icon-cell.pc-Jester      { border-color: #803060; }

}
.cat-sprite {
  width: 100%;
  height: auto;
  display: block;
}
.sprite-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid color-mix(in srgb, var(--cb) 30%, transparent);
  border-top-color: var(--cb);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Team page carousel ───────────────────────────────────────── */
.tc-slide { display: none; }
.tc-slide.tc-active { display: block; }
/* Directional slide between cards. overflow/position are applied only while
   sliding (via .tc-sliding) so hover popups (.tip, stat-mod popups) are never
   clipped at rest; both the outgoing and incoming slides get .tc-anim so they
   stack absolutely and travel together. Height is transitioned so cards of
   differing height don't jump. JS falls back to an instant swap under
   prefers-reduced-motion, so no motion-suppression media query is needed here. */
.tc-carousel.tc-sliding { position: relative; overflow: hidden; transition: height .28s ease; }
.tc-carousel.tc-sliding .tc-anim { position: absolute; top: 0; left: 0; width: 100%; transition: transform .28s ease; }

.tc-dots {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
}

.tc-dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  border: 2px solid var(--cb);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.tc-dot.tc-dot-active { background: var(--cb); }

/* Prev/next arrows are fixed to the viewport edges on the team page */
.tc-btn {
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 50;
  background: var(--card);
  border: 2px solid var(--cb);
  border-width: 2px 1px 3px 2px;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
  padding: 0;
}
/* Sit the arrows just outside the content border with a fixed gap of half the
   button's width (1.2rem), independent of viewport width so they always hug the
   card. The content border is at (100vw - 1000px)/2 + 1.5rem (site-content
   padding); subtract the gap and the 2.4rem button width. Clamp to .4rem so they
   stay on-screen on narrow viewports. */
.tc-prev { left: max(.4rem, calc((100vw - 1000px) / 2 - 2.1rem)); }
.tc-next { right: max(.4rem, calc((100vw - 1000px) / 2 - 2.1rem)); }
.tc-btn:hover { background: var(--card-alt); }

.cat-name-link { color: inherit; text-decoration: none; }
.cat-name-link:hover { text-decoration: underline; }
/* On the individual detail page the name links to itself — suppress the hover effect */
.cat-detail-page .cat-name-link { pointer-events: none; cursor: default; }

.equip-slot-sm { font-size: .68rem; text-transform: uppercase; color: var(--ink-mid); font-weight: 700; }

/* ── Error page ───────────────────────────────────────────────── */
.error-page { text-align: center; padding: 4rem 0; }
.error-page h1 { font-size: 4rem; color: var(--ink-mid); margin-bottom: .5rem; }
.error-page p  { color: var(--ink-mid); margin-bottom: 1.5rem; }
.empty-state   { color: var(--ink-mid); text-align: center; padding: 2rem; }

/* ── Mobile layout ────────────────────────────────────────────── */
@media (max-width: 599px) {
  /* Cat detail card: single-column stack; abilities/equipment keep their own sub-grids */
  .dc-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "sprite"
      "stats"
      "mutations"
      "icons"
      "abilities"
      "equipment";
  }
  /* Give the sprite row an explicit height so dc-sprite-wrap's height:100% resolves */
  .dc-sprite-area { height: 220px; }
  /* Passives/disorders: keep 2-column layout */
  .dc-icon-grid { grid-template-columns: 1fr 1fr; }
  /* Abilities: 2 columns on mobile */
  .dc-abilities { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Ability bar: the damage/type/mana row keeps desktop-sized text and icons
     in a now half-width card, and its grid cells default to min-width:auto, so
     the grid overflows and the mana number spills off the right edge. Shrink
     the sizes and let the cells shrink to fit. */
  .dc-ability-bar { font-size: 1.35rem; padding: .25rem .3rem .35rem; }
  .dc-ability-bar-cell { min-width: 0; }
  .dc-ability-bar-left, .dc-ability-bar-right { gap: .12rem; }
  .dc-ability-bar-type-icon { height: 2.2rem; }
  .dc-ability-bar-stat-icon { height: 1.45rem; }
  /* Equipment: 2 per row (2+2+1) — 3-up was too narrow on phones */
  .dc-equipment { grid-template-columns: repeat(2, 1fr); }
  /* Cats list page: single column */
  .cats-grid { grid-template-columns: 1fr; }
  /* Cat card: tighten up the header */
  .cat-card-header { flex-wrap: wrap; }
  .class-icon-card { width: 80px; height: 80px; margin-top: -30px; margin-left: -30px; }
  .cat-detail-page .class-icon-card { width: 80px; height: 80px; margin-top: -30px; margin-left: -30px; }
}

/* ── Generic CSS tooltips (.tip-wrap + .tip) ─────────────────── */
/* Same visual style as .cs-mod-popup; appears centred above element. */
.tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  border: 2px solid var(--cb);
  border-radius: 7px;
  padding: .3rem .5rem;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  z-index: 200;
  color: var(--ink);
  pointer-events: none;
}
.tip-wrap:hover .tip { display: block; }
/* .cs-icon-cell has overflow:hidden to clip image corners — restore that
   clipping via clip-path on the image so .tip can escape the container. */
.cs-icon-cell.tip-wrap:has(.ability-icon) { overflow: visible; }
.cs-icon-cell.tip-wrap .ability-icon { clip-path: inset(0 round 9px); }