/* ─── carnet d'habitats — Pokopia planner ───────────────────────────────── */

:root {
  /* paper */
  --paper:        #f1e5c8;
  --paper-deep:   #e3d2a6;
  --paper-edge:   #c9b482;
  --vignette:     rgba(70, 45, 15, 0.18);

  /* inks */
  --ink:          #1c2a1d;
  --ink-soft:     #3d4836;
  --ink-fade:     rgba(28, 42, 29, 0.55);
  --rust:         #a7421a;
  --rust-soft:    #c0653c;
  --gold:         #c79224;
  --teal:         #3f7d7b;
  --moss:         #5b7a3a;

  /* environment seals */
  --env-bright:   #c79224;
  --env-humid:    #3f7d7b;
  --env-dry:      #a7421a;
  --env-default:  #6c5a35;

  /* flavor inks */
  --flav-spicy:   #b8351c;
  --flav-sour:    #c79224;
  --flav-sweet:   #c1568b;
  --flav-bitter:  #4f5d2f;
  --flav-dry:     #8a6b3b;

  --line:         rgba(28, 42, 29, 0.18);
  --line-strong:  rgba(28, 42, 29, 0.55);

  --r-paper:      14px;
  --shadow-paper: 0 1px 0 var(--paper-edge),
                  0 14px 26px -16px rgba(60, 38, 10, 0.45),
                  0 3px 0 -1px rgba(0,0,0,0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Newsreader', 'EB Garamond', Georgia, serif;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-feature-settings: 'liga', 'kern';
}

/* warm gradient + faint hand-ruled lines */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 232, 178, 0.55), transparent 60%),
    radial-gradient(120% 80% at 85% 100%, rgba(150, 100, 40, 0.20), transparent 55%),
    var(--paper);
}
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 35px,
      rgba(28, 42, 29, 0.045) 35px, rgba(28, 42, 29, 0.045) 36px);
}

.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.18 0 0 0 0.12 0'/></filter><rect width='480' height='480' filter='url(%23n)'/></svg>");
}

/* top bar with view + language toggles */
.topbar {
  position: fixed;
  top: 18px; right: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* View toggle (Compact / Détaillée) is hidden site-wide for now — compact
   is the canonical view. Markup + 'detailed' rendering kept for re-enable. */
.view-toggle { display: none !important; }
.lang-toggle {
  display: inline-flex;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 14px -8px rgba(60, 35, 10, 0.45);
}
.view-toggle button,
.lang-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 12px 7px;
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  cursor: pointer;
  min-width: 44px;
}
.view-toggle button.is-active,
.lang-toggle button.is-active {
  background: var(--ink);
  color: var(--paper);
}
.view-toggle button + button,
.lang-toggle button + button { border-left: 1.5px solid var(--ink); }

/* untranslated marker on tag pills (FR mode, no official FR) */
.tag.is-en, .item__tag.is-en, .want--tag.is-en, .item__name.is-en {
  font-style: italic;
  opacity: 0.78;
}
.tag.is-en::before, .item__tag.is-en::before, .want--tag.is-en::before, .item__name.is-en::before {
  content: '[en] ';
  font-family: 'Special Elite', monospace;
  font-size: 9px;
  margin-right: 2px;
  opacity: 0.65;
}

/* ─── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  max-width: 1100px;
  margin: 56px auto 24px;
  padding: 0 36px;
  position: relative;
  animation: rise 600ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise {
  from { transform: translateY(14px); opacity: 0; letter-spacing: -0.02em; }
  to   { transform: translateY(0);     opacity: 1; letter-spacing: normal; }
}

.masthead__corner {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.stamp-tiny {
  display: inline-block;
  border: 1.5px solid var(--rust);
  color: var(--rust);
  padding: 2px 8px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
  font-weight: 700;
}

.masthead__title {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif;
  font-weight: 800;
  font-size: clamp(48px, 7.4vw, 96px);
  line-height: 0.95;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1;
}
.masthead__title em {
  font-style: italic;
  color: var(--rust);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  margin-left: 4px;
}
.underline {
  display: block;
  width: clamp(280px, 32vw, 480px);
  height: 22px;
  margin-top: -6px;
  color: var(--gold);
  opacity: 0.85;
}

.masthead__sub {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 18px;
  font-style: italic;
  font-variation-settings: 'opsz' 18;
}
.masthead__note {
  /* Same metrics as masthead__sub — reads as a second sentence of the same
     paragraph, just with its own line break for breathing room. */
  margin: 6px 0 0;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 18px;
  font-style: italic;
  font-variation-settings: 'opsz' 18;
}

/* ─── card / paper ─────────────────────────────────────────────────────── */

.card {
  max-width: 1100px;
  margin: 24px auto;
  padding: 38px 44px 32px;
  background: var(--paper);
  border-radius: var(--r-paper);
  position: relative;
  box-shadow: var(--shadow-paper);
}
.card.paper::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(120, 90, 40, 0.35);
  mask-image: linear-gradient(180deg, black 0%, black 70%, rgba(0,0,0,0.7) 100%);
}

.tape {
  position: absolute;
  width: 96px; height: 22px;
  top: -10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.45)),
    repeating-linear-gradient(135deg, rgba(255,200,100,0.55) 0, rgba(255,200,100,0.55) 6px,
                                       rgba(220,160,60,0.55) 6px, rgba(220,160,60,0.55) 12px);
  border: 1px solid rgba(140, 100, 40, 0.4);
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.3);
  border-radius: 2px;
}
.tape--left  { left: 56px;  transform: rotate(-7deg); }
.tape--right { right: 56px; transform: rotate(5deg); }

.card__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 10px;
}
.section-num {
  font-family: 'Special Elite', monospace;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--rust);
  border-bottom: 2px solid var(--rust);
  padding-bottom: 2px;
}
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  margin: 0;
  font-style: italic;
  font-variation-settings: 'opsz' 60, 'SOFT' 60;
  letter-spacing: -0.005em;
}

.hint {
  color: var(--ink-soft);
  margin: 4px 0 22px;
  font-size: 16px;
  max-width: 60ch;
}

/* ─── search + autocomplete ────────────────────────────────────────────── */

.search {
  position: relative;
  max-width: 520px;
}
.search__pen {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  color: var(--rust);
  font-size: 20px;
  pointer-events: none;
}
#search {
  width: 100%;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  padding: 14px 18px 12px 16px;
  border: none;
  background: transparent;
  border-bottom: 1.5px dashed var(--ink-soft);
  color: var(--ink);
  outline: none;
  transition: border-color 200ms;
}
#search::placeholder { color: var(--ink-fade); font-style: italic; }
#search:focus { border-bottom-color: var(--rust); }

.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: 6px;
  padding: 6px 0;
  max-height: 320px;
  overflow: auto;
  box-shadow: 0 14px 24px -10px rgba(60, 40, 10, 0.4);
  z-index: 20;
}
.autocomplete li {
  padding: 8px 14px;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 17px;
}
.autocomplete li[aria-selected="true"],
.autocomplete li:hover {
  background: var(--paper-deep);
}
.autocomplete .ac-thumb {
  width: 30px; height: 30px; object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.autocomplete .ac-slug {
  margin-left: auto;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  color: var(--ink-fade);
}

/* ─── chips ────────────────────────────────────────────────────────────── */

.chips {
  margin-top: 26px;
  padding: 18px;
  background: rgba(255, 246, 220, 0.5);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  min-height: 92px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
.chips__empty {
  margin: 0 auto;
  align-self: center;
  color: var(--ink-fade);
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 16px;
  position: relative;
  cursor: default;
  /* Default visible state — entry/exit animations toggle via classes */
  opacity: 1;
}
.chip.is-entering {
  animation: chipPin 360ms cubic-bezier(.2, .8, .2, 1.25) both;
}
.chip.is-leaving {
  animation: chipPluck 220ms cubic-bezier(.4, 0, 1, 1) both;
  pointer-events: none;
}
@keyframes chipPin {
  0%   { transform: rotate(-7deg) scale(0.55); opacity: 0; }
  55%  { transform: rotate(1deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes chipPluck {
  to { transform: rotate(5deg) scale(0.55); opacity: 0; }
}
.chip:hover {
  /* Static lift (no rotation transition during FLIP) */
  box-shadow: 0 6px 12px -8px rgba(0,0,0,0.4);
}
.chip img {
  width: 34px; height: 34px; object-fit: contain;
  background: radial-gradient(circle at center, rgba(255,232,178,0.7), transparent 65%);
  border-radius: 999px;
}
.chip__name { font-weight: 500; }
.chip__x {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  border: none;
  margin-left: 2px;
  font-family: 'Special Elite', monospace;
  line-height: 1;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1.35),
              background 180ms,
              color 180ms;
}
.chip__x:hover {
  background: var(--rust);
  color: var(--paper);
  transform: scale(1.25) rotate(90deg);
}
.chip__x:active { transform: scale(1.1) rotate(90deg); }

/* ─── actions ──────────────────────────────────────────────────────────── */

.actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 24px;
}
.stamp {
  font-family: 'Special Elite', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: var(--rust);
  background: transparent;
  border: 2.5px solid var(--rust);
  padding: 14px 22px;
  border-radius: 4px;
  cursor: pointer;
  transform: rotate(-1.5deg);
  position: relative;
  transition: transform 160ms, box-shadow 160ms;
}
.stamp::before {
  content: '';
  position: absolute; inset: -2.5px;
  border: 2.5px solid var(--rust);
  border-radius: 4px;
  transform: translate(3px, 3px);
  opacity: 0.4;
  pointer-events: none;
}
.stamp:hover:not(:disabled) {
  transform: rotate(-1.5deg) translateY(-1px);
  background: rgba(167, 66, 26, 0.06);
}
.stamp:active { transform: rotate(-2deg) translate(1px, 1px); }
.stamp:disabled { opacity: 0.4; cursor: not-allowed; }

.ghost {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--ink-soft);
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 0;
}
.ghost:hover { color: var(--ink); border-bottom-style: solid; }
.ghost--save { color: var(--rust); border-bottom-color: var(--rust); }
.ghost--save::before {
  content: '⌑ ';
  font-style: normal;
  font-family: 'Special Elite', monospace;
  margin-right: 2px;
}

.actions__meta {
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  color: var(--ink-fade);
  letter-spacing: 0.08em;
}
.actions__meta.is-err { color: var(--rust); }

/* ─── saved sebiles (tabs) ─────────────────────────────────────────────── */

.saved {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.saved__empty {
  margin: 0;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.saved__title {
  margin: 0 0 10px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.saved__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tab {
  display: inline-flex;
  align-items: stretch;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  font-family: 'Fraunces', Georgia, serif;
  position: relative;
  transform: rotate(-1deg);
  box-shadow: 0 4px 8px -6px rgba(0, 0, 0, 0.4);
  transition: transform 200ms ease, box-shadow 200ms;
}
.tab:nth-child(2n)  { transform: rotate(1deg); }
.tab:nth-child(3n)  { transform: rotate(-1.5deg); }
.tab:hover { transform: rotate(0) translateY(-1px); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.4); }
.tab__load {
  background: none;
  border: none;
  padding: 6px 10px 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: 'opsz' 24, 'SOFT' 30;
}
.tab__load::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--rust);
  display: inline-block;
  flex-shrink: 0;
}
.tab__count {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-fade);
  font-style: normal;
  padding: 1px 6px;
  border: 1px solid var(--ink-fade);
  border-radius: 999px;
}
.tab__del {
  width: 26px; height: 26px;
  margin: 0 4px 0 -4px;
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  align-self: center;
  padding: 0;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1.35),
              background 180ms,
              color 180ms,
              border-color 180ms;
}
.tab__del::before,
.tab__del::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: width 200ms;
}
.tab__del::before { transform: translate(-50%, -50%) rotate(45deg); }
.tab__del::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.tab__del:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--paper);
  transform: rotate(90deg) scale(1.1);
}
.tab__del:hover::before,
.tab__del:hover::after { width: 13px; }
.tab__del:active { transform: rotate(90deg) scale(0.96); }

/* ─── results ──────────────────────────────────────────────────────────── */

.results {
  max-width: 1100px;
  margin: 36px auto;
  padding: 0 36px;
}
.results .card__head { margin-bottom: 22px; }

.results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 980px) {
  .results__grid { grid-template-columns: repeat(2, 1fr); }
}

/* group card — looks like a notebook page */
.group {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,246,220,0.4), rgba(255,246,220,0)) ,
    var(--paper);
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 18px 30px -22px rgba(60, 35, 10, 0.55),
    inset 0 0 0 1px rgba(120, 90, 40, 0.25);
  animation: deal 520ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes deal {
  from { transform: translateY(20px) rotate(var(--rot, 0deg)); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}

.group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--line-strong);
  padding-bottom: 14px;
}
.group__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 1;
}
.group__title small {
  display: block;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-fade);
  text-transform: uppercase;
  margin-top: 4px;
  font-style: normal;
}

.seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 78px; height: 78px;
  border-radius: 999px;
  color: white;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--c) 75%, white 25%),
    color-mix(in srgb, var(--c) 95%, black 5%) 60%,
    color-mix(in srgb, var(--c) 80%, black 20%));
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.3),
    inset 0 3px 4px rgba(255,255,255,0.25),
    0 4px 10px -4px rgba(0,0,0,0.35);
  transform: rotate(-6deg);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.seal small {
  font-family: 'Special Elite', monospace;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  opacity: 0.88;
  margin-top: 3px;
}

/* per environment */
.env-bright  { --c: var(--env-bright); }
.env-humid   { --c: var(--env-humid); }
.env-dry     { --c: var(--env-dry); }
.env-dark    { --c: #34324a; }
.env-warm    { --c: #d6643a; }
.env-cold    { --c: #5e8da7; }
.env-mixed   { --c: var(--env-default); }
.env-other   { --c: var(--env-default); }

/* profile — "Ce que ce groupe veut" */
.profile {
  margin: -4px 0 18px;
  padding: 14px 16px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 246, 220, 0.7) 0, rgba(255, 246, 220, 0.7) 8px,
      rgba(255, 232, 178, 0.45) 8px, rgba(255, 232, 178, 0.45) 16px);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  position: relative;
}
.profile__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.profile__title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-variation-settings: 'opsz' 24, 'SOFT' 60;
  color: var(--ink);
}
.profile__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.profile__count {
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  border-bottom: 1.5px solid var(--rust);
  padding-bottom: 1px;
}
.profile__count--zero {
  color: var(--ink-fade);
  border-bottom-style: dotted;
  border-bottom-color: var(--ink-fade);
}
.profile__breakdown {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  font-feature-settings: 'lnum';
}
.profile__breakdown strong {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Special Elite', monospace;
}
.profile__line.is-zero {
  color: var(--ink-fade);
  text-decoration: line-through;
  text-decoration-color: var(--ink-fade);
}
.profile__line.is-zero strong { color: var(--ink-fade); }

.envtips {
  margin-top: 14px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.envtip {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  border: 1px dashed var(--line-strong);
  padding: 6px 10px;
  font-size: 13px;
}
.envtip > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.envtip > summary::-webkit-details-marker { display: none; }
.envtip > summary::after {
  content: '+';
  margin-left: auto;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.2px solid var(--ink-soft);
  color: var(--ink-soft);
  border-radius: 4px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  line-height: 1;
}
.envtip[open] > summary::after { content: '−'; }
.envtip__chip {
  display: inline-block;
  padding: 2px 10px 3px;
  border-radius: 999px;
  background: var(--c, var(--ink));
  color: white;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.envtip__lead {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.envtip__how, .envtip__dont {
  margin: 6px 0 0;
  padding-left: 4px;
  line-height: 1.4;
}
.envtip__dont { color: var(--rust); font-size: 12.5px; }

/* Animation when the envtip is expanded */
.envtip[open]:not(.is-closing) > summary + * {
  animation: envtipReveal 260ms cubic-bezier(.2, .7, .2, 1) both;
}
.envtip[open]:not(.is-closing) > summary ~ .envtip__dont {
  animation: envtipReveal 260ms cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: 70ms;
}
@keyframes envtipReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animation when the envtip is being closed (JS adds .is-closing first
   so the content gets a chance to animate out before [open] flips). */
.envtip.is-closing > summary + * {
  animation: envtipHide 220ms cubic-bezier(.4, 0, 1, 1) both;
}
.envtip.is-closing > summary ~ .envtip__dont {
  animation: envtipHide 220ms cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes envtipHide {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

.envtip > summary::after {
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.envtip[open]:not(.is-closing) > summary::after { transform: rotate(180deg); }
.profile__note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--rust);
  font-size: 13.5px;
  color: var(--ink);
  font-style: italic;
  line-height: 1.4;
}
.profile__note strong { font-style: normal; color: var(--rust); }
.profile__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
}
.profile__label {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  flex-shrink: 0;
  padding-top: 4px;
  width: 38px;
}
.profile__pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1;
}
.profile__none { color: var(--ink-fade); font-size: 13px; }

.want {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 4px;
  border-radius: 999px;
  font-size: 13.5px;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  line-height: 1.2;
}
.want em {
  font-style: normal;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-fade);
}
.want--tag[data-share="all"] {
  background: color-mix(in srgb, var(--gold) 78%, white);
  border-color: var(--gold);
}
.want--tag[data-share="most"] {
  background: color-mix(in srgb, var(--gold) 38%, white);
  border-color: color-mix(in srgb, var(--gold) 75%, var(--ink));
}
.want--tag[data-share="some"] {
  background: var(--paper);
  border-color: var(--line-strong);
  border-style: dashed;
}
.want--env {
  background: var(--c, var(--ink));
  color: white;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px 5px;
}

/* pinned specimens */
.specimens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (min-width: 580px) and (max-width: 979px) {
  .specimens { grid-template-columns: repeat(4, 1fr); }
}

.specimen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px 10px;
  background: rgba(255, 246, 220, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.specimen::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--rust);
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.specimen__img {
  width: 72px; height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}
.specimen__name {
  margin: 6px 0 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  font-variation-settings: 'opsz' 24, 'SOFT' 40;
}
.specimen__dex {
  font-family: 'Special Elite', monospace;
  font-size: 10.5px;
  color: var(--ink-fade);
  letter-spacing: 0.1em;
}
.specimen__flavor {
  margin-top: 6px;
  font-size: 12px;
  font-family: 'Special Elite', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c, var(--ink-soft));
  border-top: 1px dashed currentColor;
  padding-top: 5px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.specimen__flavor strong { font-weight: 700; }
.specimen__flavor small {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  opacity: 0.85;
}
/* Bed-size pastille — modal only, text-only chip. */
.specimen__bed { display: none; }
.modal__body .specimen__bed {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 3px;
  border-radius: 999px;
  border: 1.5px solid var(--rust);
  color: var(--rust);
  background: var(--paper);
  font-family: 'Special Elite', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.modal__body .specimen { position: relative; }
.flav-spicy  { --c: var(--flav-spicy); }
.flav-sour   { --c: var(--flav-sour); }
.flav-sweet  { --c: var(--flav-sweet); }
.flav-bitter { --c: var(--flav-bitter); }
.flav-dry    { --c: var(--flav-dry); }

/* per pokemon coverage */
.coverage {
  position: relative;
  margin: 4px 0 18px;
  padding: 12px 16px 8px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 27px,
      rgba(28, 42, 29, 0.045) 27px, rgba(28, 42, 29, 0.045) 28px),
    rgba(241, 229, 200, 0.55);
  border-radius: 10px;
  border: 1px dashed var(--line-strong);
}
.coverage__title {
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 8px;
}
.coverage__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--line);
  align-items: center;
}
.coverage__row:last-child { border-bottom: none; }
.coverage__who {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
}
.coverage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.tag {
  font-size: 12px;
  font-family: 'Newsreader', Georgia, serif;
  padding: 2px 8px 3px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.4);
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}
.tag.is-covered {
  background: var(--gold);
  background: color-mix(in srgb, var(--gold) 70%, white);
  color: var(--ink);
  border-color: var(--gold);
  font-weight: 500;
}
.tag.is-flavor {
  background: transparent;
  border-style: dashed;
  color: var(--ink-soft);
  font-style: italic;
}

/* Global rappel banner (universal pre-requisites) */
.rappel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 22px;
  padding: 10px 14px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 232, 178, 0.45) 0, rgba(255, 232, 178, 0.45) 14px,
      rgba(241, 229, 200, 0.5) 14px, rgba(241, 229, 200, 0.5) 28px);
  border: 1px dashed var(--ink-soft);
  border-radius: 10px;
}
.rappel__label {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rappel__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.rappel__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13.5px;
  font-variation-settings: 'opsz' 18, 'SOFT' 40;
}

/* per-enclos bed-size note (varies group to group) */
.bed-line {
  margin: 8px 0 14px;
  padding: 10px 12px;
  background: rgba(255, 246, 220, 0.55);
  border-left: 3px solid var(--rust);
  border-radius: 4px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bed-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 8px;
}
.bed-row__qty {
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
}
.bed-row__arrow {
  color: var(--ink-fade);
  align-self: center;
}
.bed-row__targets {
  align-self: center;
  line-height: 1.5;
}
.bed-row__targets .baseline__pkm { display: inline; }
.bed-row__targets .baseline__pkm:not(:last-child)::after {
  content: ' · ';
  color: var(--ink-fade);
  font-weight: 400;
  font-style: normal;
}
.baseline__pkm {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
/* legacy separator (kept for non-bed contexts if any) */
.baseline__pkm + .baseline__pkm::before { content: ''; }

/* items + combos */
.items {
  margin-top: 14px;
}

.combo {
  position: relative;
  padding: 14px 14px 12px;
  margin-top: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 246, 220, 0.35);
  cursor: pointer;
  transition: background 200ms, box-shadow 200ms, border-color 200ms;
}
.combo:first-of-type { margin-top: 0; }
.combo:hover {
  background: rgba(255, 246, 220, 0.65);
  border-color: var(--ink);
  box-shadow: 0 10px 16px -14px rgba(60, 35, 10, 0.5);
}
.combo.is-chosen {
  background: rgba(255, 232, 178, 0.65);
  border: 2px solid var(--rust);
  box-shadow: 0 10px 18px -10px rgba(167, 66, 26, 0.45);
}
.combo.is-chosen::after {
  content: '✓ choisi';
  position: absolute;
  top: -10px; right: 14px;
  background: var(--rust);
  color: var(--paper);
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 9px 3px;
  border-radius: 999px;
}

.combo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.combo__letter {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.combo.is-chosen .combo__letter { background: var(--rust); }
.combo__count {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 15.5px;
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
}
.combo__cover {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-fade);
  text-transform: uppercase;
}
.combo__tag {
  margin-left: auto;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  border: 1.5px solid var(--rust);
  padding: 2px 8px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
}

/* Tutorial-heuristic tip: a polished enclos usually also has 1 deco + 1 toy.
 * Not a hard rule, so this is informational — muted dotted outline, ink-fade
 * palette, no alarm color. */
.combo__tip {
  margin-left: auto;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-fade);
  background: transparent;
  border: 1px dotted var(--line-strong);
  padding: 2px 8px;
  border-radius: 3px;
}
/* Rest-furniture warning: distinct from the soft tip because rest matters
 * more — Pokémon use beds/seats daily and comfort plateaus without one.
 * Rust palette, solid border, slight emphasis. */
.combo__warn {
  margin-left: auto;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  background: rgba(168, 60, 40, 0.06);
  border: 1.5px solid var(--rust);
  padding: 2px 8px;
  border-radius: 3px;
}
/* When .combo__warn and .combo__tip both appear, only the warn keeps the
 * margin-left:auto so the chips sit together at the right edge. */
.combo__warn + .combo__tip { margin-left: 6px; }

/* Ma compo gains a rust accent when rest is missing — the bed pictogram on
 * each specimen already shows the size requirement, so this keeps the
 * structural warning visible without flooding the card. */
.usercomp--warn::before { background: var(--rust); }

.items__title {
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 12px;
  border-top: 1.5px solid var(--line-strong);
  padding-top: 14px;
  display: flex; align-items: center; gap: 10px;
}
.items__title::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--line);
}
.items__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.alts__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.combo__grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px 6px;
  background: rgba(255, 246, 220, 0.65);
  border-radius: 8px;
  border: 1px solid var(--line);
  position: relative;
  transition: transform 200ms ease;
  min-width: 0;
}
.item[hidden] { display: none !important; }
.item:hover { transform: rotate(-1.5deg) translateY(-2px); box-shadow: 0 8px 14px -10px rgba(0,0,0,0.35); }
.item img:not(.item__func) {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.12));
}
.item__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.15;
  margin: 4px 0 3px;
  font-variation-settings: 'opsz' 18, 'SOFT' 30;
}
.item__tags {
  display: flex; flex-wrap: wrap; gap: 2px;
  justify-content: center;
}
.item__tag {
  font-family: 'Special Elite', monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  background: var(--gold);
  background: color-mix(in srgb, var(--gold) 80%, white);
  color: var(--ink);
  padding: 1px 5px 2px;
  border-radius: 999px;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.15;
  max-width: 100%;
  min-width: 0;
  text-align: center;
  box-sizing: border-box;
}
.item__tags {
  max-width: 100%;
  align-self: stretch;
  justify-content: center;
}

/* alternative items section */
.alts {
  margin-top: 16px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 14px;
}
.alts > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 0;
  user-select: none;
}
.alts > summary::-webkit-details-marker { display: none; }
.alts > summary::before {
  /* Empty pseudo + two stroked spans (via background) so the + / −
     glyph is centered independently of the font's vertical metrics. */
  content: '';
  position: relative;
  display: inline-block;
  width: 16px; height: 16px;
  border: 1.5px solid var(--rust);
  border-radius: 4px;
  flex-shrink: 0;
  /* Two centered strokes drawn as background gradients — perfectly
     centered, no glyph-metric drift. The horizontal stays for both
     + and −; only the vertical disappears via the [open] override. */
  background:
    linear-gradient(var(--rust), var(--rust)) center / 8px 1.5px no-repeat,
    linear-gradient(var(--rust), var(--rust)) center / 1.5px 8px no-repeat;
  transition: transform 200ms;
}
.alts[open] > summary::before {
  /* Remove the vertical stroke → just the horizontal remains = "−". */
  background:
    linear-gradient(var(--rust), var(--rust)) center / 8px 1.5px no-repeat;
}
.alts__label { color: var(--rust); font-weight: 700; }
.alts__count {
  background: var(--rust);
  color: var(--paper);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.alts__hint { font-style: italic; color: var(--ink-fade); letter-spacing: 0; text-transform: none; font-family: 'Newsreader', Georgia, serif; font-size: 13px; }

.alts__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 246, 220, 0.55);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}
.alts__filter {
  background: var(--paper);
  border: 1.5px solid var(--ink-soft);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  padding: 3px 10px 4px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 160ms, color 160ms, border-color 160ms;
  letter-spacing: 0;
  text-transform: none;
}
.alts__filter em {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  font-style: normal;
  color: var(--ink-fade);
  letter-spacing: 0.04em;
}
.alts__filter:hover { background: var(--paper-deep); }
.alts__filter.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.alts__filter.is-active em { color: var(--paper); opacity: 0.7; }

.alts__grid { margin-top: 14px; }
.item--alt {
  background: rgba(255, 246, 220, 0.35);
  border-style: dashed;
}
.item__badge {
  position: absolute;
  top: 3px; right: 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Special Elite', monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  padding: 1px 5px 2px;
  border-radius: 999px;
  z-index: 1;
}

/* Functional slot icon (rest / deco / toy) — a tiny scrapbook stamp pinned
 * to the bottom-right corner of each item card. Small enough to never hide
 * the artwork, name, or tag pills. */
.item__func {
  position: absolute;
  top: 3px; right: 3px;
  width: 24px; height: 24px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  padding: 2px;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
  z-index: 2;
  image-rendering: pixelated;
  background: var(--paper);
  transition: transform 180ms ease, filter 180ms ease;
}
.item__func--rest { background: #fbe8c6; transform: rotate(-3deg); }
.item__func--deco { background: #e1ecc9; transform: rotate(2deg); }
.item__func--toy  { background: #f8d7c0; transform: rotate(-2deg); }
.item:hover .item__func {
  transform: rotate(0);
  filter: drop-shadow(0.5px 0.5px 0 rgba(46, 35, 27, 0.25));
}

/* + / × button on every item */
.item__add {
  position: absolute;
  top: 3px; left: 3px;
  z-index: 2;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1.4px solid var(--rust);
  background: var(--paper);
  color: var(--rust);
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms, background 160ms, color 160ms;
}
.item__add { transition: transform 200ms cubic-bezier(.2,.8,.2,1.4), background 180ms, color 180ms, border-color 180ms; }
.item__add:hover { transform: scale(1.1); background: var(--rust); color: var(--paper); }
/* Added state: button stays a "+" in top-left, fills green; on hover it
   rotates 45° into a "×" with rust color → clear "click to remove" intent. */
.item__add.is-added {
  background: var(--moss);
  color: var(--paper);
  border-color: var(--moss);
}
.item__add.is-added:hover {
  background: var(--rust);
  border-color: var(--rust);
  transform: scale(1.1) rotate(45deg);
}

.item__add.is-remove { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.item.is-added { box-shadow: inset 0 0 0 2px var(--moss); }

/* User composition section */
.usercomp {
  margin: 12px 0 4px;
  padding: 14px 16px 12px;
  border: 1.5px solid var(--moss);
  border-radius: 12px;
  background:
    repeating-linear-gradient(-45deg,
      rgba(91, 122, 58, 0.05) 0, rgba(91, 122, 58, 0.05) 14px,
      rgba(241, 229, 200, 0.6) 14px, rgba(241, 229, 200, 0.6) 28px);
  position: relative;
}
.usercomp::before {
  /* Lang.set() flips <html lang="…">, so we swap the pinned label in CSS
   * via the :root[lang="en"] override below. */
  content: 'ma compo';
  position: absolute;
  top: -10px; left: 18px;
  background: var(--moss);
  color: var(--paper);
  font-family: 'Special Elite', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 2px 9px 3px;
  border-radius: 3px;
  transform: rotate(-1deg);
}
:root[lang="en"] .usercomp::before { content: 'my comp'; }
.usercomp__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.usercomp__title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  font-variation-settings: 'opsz' 24, 'SOFT' 60;
}
.usercomp__count {
  font-family: 'Special Elite', monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-fade);
  text-transform: uppercase;
  margin-left: 2px;
}
.usercomp__hint {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
}
.usercomp__grid { margin-top: 6px; }
.usercomp__clear {
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--ink-soft);
  color: var(--ink-soft);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
}
.usercomp__clear:hover { color: var(--rust); border-bottom-color: var(--rust); }

.combo__addall {
  margin-left: auto;
  background: transparent;
  border: 1px dashed var(--moss);
  color: var(--moss);
  font-family: 'Special Elite', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 10px 4px 7px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.combo__addall:hover { background: var(--moss); color: var(--paper); }
.combo__addall.is-remove {
  border-color: var(--rust);
  color: var(--rust);
  border-style: solid;
}
.combo__addall.is-remove:hover { background: var(--rust); color: var(--paper); }
.combo__addall-icon { width: 14px; height: 14px; flex-shrink: 0; }
.combo__addall.is-remove .combo__addall-icon { transform: rotate(45deg); }

.item--mine { border: 1.5px solid var(--moss); background: rgba(91, 122, 58, 0.06); }

/* Animations when adding / removing items to "ma compo" */
.usercomp__grid .item {
  animation: compPopIn 360ms cubic-bezier(.2, .8, .2, 1.35) both;
  transform-origin: center bottom;
}
@keyframes compPopIn {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.usercomp__grid .item.is-removing,
.item.is-removing {
  animation: compPopOut 220ms cubic-bezier(.4, 0, 1, 1) forwards !important;
  pointer-events: none;
}
@keyframes compPopOut {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.55) rotate(4deg); opacity: 0; }
}

/* Subtle pulse when a source item gets marked as added in combos / alts */
.item.is-added {
  animation: addedPulse 320ms cubic-bezier(.25, .8, .2, 1.25);
}
@keyframes addedPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* leftover (orphan pokemon) */
.leftover {
  margin-top: 28px;
  padding: 18px 22px;
  background: rgba(167, 66, 26, 0.06);
  border: 1px dashed var(--rust);
  border-radius: 10px;
}
.leftover h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--rust);
}
.leftover ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.leftover li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px;
  padding: 4px 12px 4px 4px;
  background: var(--paper);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.leftover li img { width: 28px; height: 28px; object-fit: contain; }

/* loading */
.loading {
  text-align: center;
  font-family: 'Special Elite', monospace;
  font-size: 14px;
  color: var(--ink-fade);
  letter-spacing: 0.12em;
}
.loading__dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--rust);
  border-radius: 999px;
  margin-right: 6px;
  animation: blink 1s infinite ease-in-out;
}
.loading__dot:nth-child(2) { animation-delay: 150ms; }
.loading__dot:nth-child(3) { animation-delay: 300ms; }
@keyframes blink {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* footer */
.footer {
  max-width: 1100px;
  margin: 56px auto 40px;
  padding: 0 36px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  color: var(--ink-fade);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__line {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.footer__sep { opacity: 0.5; }
/* Override the .footer a signature-link styling for the BMC chip — it has
   its own pill look and shouldn't get the squiggle/italic treatment. */
.footer a.footer__coffee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: 'Special Elite', monospace;
  font-style: normal;
  font-weight: normal;
  color: var(--ink-soft);
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 246, 220, 0.5);
  letter-spacing: 0.1em;
  font-size: 10.5px;
  transform: none;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.footer a.footer__coffee:hover,
.footer a.footer__coffee:focus-visible {
  color: var(--paper);
  background: var(--rust);
  border-color: var(--rust);
  transform: none;
}
.footer a.footer__coffee::before,
.footer a.footer__coffee::after {
  content: none;     /* kill the inherited squiggle + ↗ from .footer a */
}
.footer a.footer__coffee svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__legal {
  margin: 0;
  max-width: 70ch;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-fade);
  font-style: italic;
  line-height: 1.5;
  opacity: 0.8;
}

/* tiny utility */
.sr-only {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ─── compact view CTA + modal ───────────────────────────────────────── */
.compact-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  justify-content: center;
}
.compact-summary__btn {
  font-family: 'Special Elite', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--rust);
  background: transparent;
  border: 2px solid var(--rust);
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
  transform: rotate(-1deg);
  position: relative;
  min-height: 44px;
  transition: background 160ms, transform 160ms;
}
.compact-summary__btn::before {
  content: '';
  position: absolute; inset: -2px;
  border: 2px solid var(--rust);
  border-radius: 4px;
  transform: translate(3px, 3px);
  opacity: 0.4;
  pointer-events: none;
}
.compact-summary__btn:hover {
  background: rgba(167, 66, 26, 0.08);
  transform: rotate(-1deg) translateY(-1px);
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 25, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: backdropIn 280ms ease-out both;
}
.modal.is-closing .modal__backdrop {
  animation: backdropOut 240ms ease-in both;
}
@keyframes backdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100vw - 80px));
  /* Must be a fixed/min height (not auto) so flex children get real space
     and modal__body becomes the scroll container that .workshop__cart and
     .workshop__pane--left can stick against. */
  height: min(900px, calc(100vh - 80px));
  background: var(--paper);
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 320ms cubic-bezier(.2, .7, .2, 1.05) both;
  transform-origin: center;
}
.modal.is-closing .modal__panel {
  animation: modalOut 260ms cubic-bezier(.4, 0, 1, 1) both;
}
/* Auth login/register is a small form — explicit class on the modal element
   (JS adds .modal--auth) shrinks the panel without relying on :has(). */
.modal.modal--auth .modal__panel {
  width: min(420px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 48px);
}
@keyframes modalIn {
  from { transform: translateY(20px) scale(0.94) rotate(-1.5deg); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.01) rotate(0); opacity: 1; }
  to   { transform: translateY(0)    scale(1)    rotate(0); opacity: 1; }
}
@keyframes modalOut {
  from { transform: translateY(0)   scale(1)    rotate(0);    opacity: 1; }
  to   { transform: translateY(12px) scale(0.96) rotate(1deg); opacity: 0; }
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1.5px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 246, 220, 0.7), var(--paper));
}
.modal__title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  font-variation-settings: 'opsz' 36, 'SOFT' 60;
  color: var(--ink);
}
.modal__close {
  width: 40px; height: 40px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 0;            /* hide the literal × glyph for perfect centering */
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1.25),
              background 200ms,
              color 200ms,
              border-color 200ms;
}
/* CSS-drawn ×: two crossed bars, always pixel-perfect centered */
.modal__close::before,
.modal__close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: width 220ms cubic-bezier(.2, .7, .2, 1.3),
              height 220ms,
              background 200ms;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__close:hover {
  background: var(--rust);
  color: var(--paper);
  border-color: var(--rust);
  transform: rotate(90deg) scale(1.08);
}
.modal__close:hover::before,
.modal__close::hover::after { width: 19px; }
.modal__close:active { transform: rotate(90deg) scale(0.94); }
.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(167, 66, 26, 0.4);
}
.modal__body {
  flex: 1;
  min-height: 0;          /* essential so sticky inner elements have a scroll container with a fixed height */
  overflow-y: auto;
  overflow-x: hidden;     /* prevent any inner negative-margin overshoot from creating a horizontal scrollbar */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* keep scroll inside the modal on iOS */
  padding: 18px 22px 28px;
  scrollbar-gutter: stable;
}
.modal__body > .group {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
  animation: none;
}

/* — Profile tab: slightly tighter profile box, big Pokémon cards kept. — */
.modal__body .profile { padding: 14px 16px 12px; margin-bottom: 14px; }
.modal__body .profile__head { margin-bottom: 8px; }
.modal__body .envtips { margin-top: 12px; padding-top: 10px; }

.modal__body .specimens {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.modal__body .specimen { padding: 16px 12px 14px; }
.modal__body .specimen__img { width: 84px; height: 84px; }
.modal__body .specimen__name { font-size: 18px; margin: 8px 0 2px; }
.modal__body .specimen__dex { font-size: 11px; }
.modal__body .specimen__flavor {
  margin-top: 8px;
  padding-top: 8px;
  font-size: 13px;
  gap: 6px;
}
.modal__body .specimen__flavor strong { font-size: 13px; }
.modal__body .specimen__flavor small { font-size: 12.5px; }
.modal-open { overflow: hidden; }

/* tab nav at top of the modal body (single panel visible at a time) */
.tabs {
  position: sticky;
  top: -18px;
  z-index: 4;
  display: flex;
  gap: 6px;
  margin: -2px -22px 14px;
  padding: 8px 18px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 75%, rgba(241, 229, 200, 0));
  border-bottom: 1px dashed var(--line-strong);
}
.tab {
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0 18px;
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 200ms, color 200ms, border-color 200ms, transform 240ms cubic-bezier(.2,.8,.2,1.4);
  transform: rotate(-1deg);
}
.tab:nth-of-type(2n) { transform: rotate(1.2deg); }
.tab:nth-of-type(3n) { transform: rotate(-1.5deg); }
.tab:hover {
  background: rgba(255, 246, 220, 0.7);
  color: var(--ink);
  transform: rotate(0) translateY(-1px);
}
.tab.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(-2deg) scale(1.02);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.35);
}
.tab.is-active:nth-of-type(2n) { transform: rotate(1.8deg) scale(1.02); }
.tab.is-active:nth-of-type(3n) { transform: rotate(-2.2deg) scale(1.02); }
.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }
/* Animation runs only on an explicit tab switch (transient class), not on
   every modal re-render (which would flash white on each + click). */
.tab-panel.is-entering {
  animation: tabIn 320ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tabIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-section__head { margin-bottom: 16px; }

/* Workshop tab: sticky cart on top + 2-col split */
.workshop { display: flex; flex-direction: column; gap: 14px; }
.workshop__cart {
  /* Ma compo: sticky right under the tabs. Stays visible while the user
   * scrolls through suggested combos on the right. Z-index above the
   * coverage pane so the two stack cleanly even when the cart grows. */
  position: sticky;
  top: 44px;
  z-index: 4;
  background: var(--paper);
  padding: 6px 0 8px;
  margin: 0;
  box-shadow: 0 12px 14px -14px rgba(60, 35, 10, 0.5);
}
.workshop__cart .usercomp { margin: 0; }
.workshop__split {
  display: grid;
  grid-template-columns: minmax(240px, 36%) 1fr;
  gap: 20px;
}
.workshop__pane { min-width: 0; }
.workshop__pane--left {
  /* Preferences-coverage column glues right below the sticky cart. `--cart-h`
   * is updated by a ResizeObserver in renderGroups so the offset tracks the
   * cart's actual rendered height (it shrinks when empty, grows when items
   * are added). 44px = tabs nav, 8px = visual gap. */
  position: sticky;
  top: calc(44px + var(--cart-h, 0px) + 8px);
  align-self: start;
  z-index: 3;
}
.workshop__pane--left .coverage {
  margin: 0;
  /* No max-height / overflow: the whole pane is sticky against the modal
     scroll, so the preferences (title + per-Pokémon traits) stay in view
     as a single static block while the user picks items on the right. */
}
.modal-section__title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(20px, 3.4vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
}
.modal-section__sub {
  margin: 4px 0 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
}

/* divider between profile & build sections — two tape pins on either side */
.modal-divider {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  margin: 24px 0;
}
.modal-divider::before {
  content: '';
  position: absolute;
  left: 40px; right: 40px;
  top: 50%;
  height: 1px;
  border-top: 1px dashed var(--line-strong);
}
.modal-divider__pin {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--rust);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* per-Pokémon detail cards (tab "Pokémon") */
.pp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pp-card {
  background: rgba(255, 246, 220, 0.45);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px;
}
.pp-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.pp-card__img {
  width: 60px; height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
  flex-shrink: 0;
}
.pp-card__name {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 19px;
  font-variation-settings: 'opsz' 30, 'SOFT' 60;
  line-height: 1.05;
}
.pp-card__name small {
  font-family: 'Special Elite', monospace;
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-fade);
  letter-spacing: 0.08em;
  font-weight: 400;
  margin-left: 4px;
}
.pp-card__sub {
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-soft);
}
.env-pill {
  display: inline-flex;
  align-items: center;
  background: var(--c, var(--ink));
  color: white;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px 3px;
  border-radius: 999px;
  font-weight: 700;
}
.pp-card__h,
.pp-card__w {
  font-family: 'Special Elite', monospace;
  font-size: 10.5px;
  color: var(--ink-fade);
  letter-spacing: 0.06em;
}
.pp-card__flav {
  margin: 8px 0 0;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.4);
  border-left: 3px solid var(--c, var(--ink));
  border-radius: 4px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
}
.pp-card__flav strong {
  color: var(--c, var(--ink));
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.pp-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ─── responsive · tablet ────────────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .card { padding: 26px 20px 22px; }
  .tape--left  { left: 22px; width: 76px; }
  .tape--right { right: 22px; width: 76px; }
  .masthead { margin-top: 40px; padding: 0 20px; }
  .results, .footer { padding: 0 20px; }
  .card { margin: 18px 16px; }
  .masthead { margin-left: 16px; margin-right: 16px; max-width: none; }
  .results, .footer { max-width: none; margin-left: 16px; margin-right: 16px; }

  /* topbar: smaller chips on the top-right */
  .topbar {
    top: 12px; right: 12px;
    gap: 6px;
    transform: scale(0.92);
    transform-origin: top right;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 24px);
  }
  /* All three topbar toggles share the same metrics so FR/EN doesn't look
     bigger than the auth pill next to it. Fixed height + line-height kills
     any Special-Elite glyph-metric drift between the two button types. */
  .view-toggle button,
  .lang-toggle button,
  .auth-toggle button {
    height: 30px;
    padding: 0 12px;
    font-size: 11px;
    line-height: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .view-toggle button,
  .lang-toggle button { min-width: 40px; }
  .auth-toggle button { max-width: 130px; }

  /* The masthead's corner stamp sits in the upper-left; on small viewports
     it would slide under the fixed topbar — drop it below the topbar row. */
  .masthead__corner { margin-top: 44px; }

  /* "Configurer l'enclos" takes the full screen on mobile. We use dvh
     (dynamic viewport height) so the panel resizes with iOS Safari's
     URL bar instead of leaving content cropped behind the bottom chrome. */
  .modal__panel {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  /* Workshop on mobile: kill sticky everywhere so the inner scroll is a
     single, predictable column. Sticky on grid items + sticky cart on
     a phone viewport competes for layout and breaks momentum scrolling. */
  .workshop__cart,
  .workshop__pane--left,
  .workshop__pane--left .coverage {
    position: static;
  }
  .workshop__cart {
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .workshop__split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* The auth modal stays a compact card even on mobile — login/register is
     a tiny form, no need for the full sheet. */
  .modal.modal--auth .modal__panel {
    width: min(420px, calc(100vw - 24px));
    height: auto;
    max-height: 90vh;
    border-radius: 14px;
    border: 1.5px solid var(--ink);
  }
  .modal__head { padding: 10px 14px; gap: 8px; }
  .modal__title { font-size: 16px; line-height: 1.2; }
  .modal__close { width: 36px; height: 36px; }
  .modal__close::before,
  .modal__close::after { width: 14px; }

  /* Tabs nav cancels modal__body padding-top (12px on mobile) — and uses
     -14px horizontal margin to match modal__body's padding so the extended
     background runs flush against the edges without creating overflow. */
  .tabs {
    padding: 8px 14px;
    margin: -2px -14px 12px;
  }

  /* The profile sticker label needs room — pad the box so it doesn't
     get clipped by the sticky tabs strip above. */
  .modal__body .profile { margin-top: 18px; }
  .modal__body { padding: 12px 14px 28px; }
  .modal__body .specimens { gap: 8px; }
  .modal__body .specimen { padding: 12px 8px 10px; }
  .modal__body .specimen__img { width: 60px; height: 60px; }
  .modal__body .specimen__name { font-size: 15px; }

  /* tabs nav stays full width on mobile, horizontal scroll if many */
  .tabs {
    margin: 0 -14px 12px;
    padding: 6px 14px;
    overflow-x: auto;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; }
  .pp-list { grid-template-columns: 1fr; }

  /* Workshop chrome on mobile: tighter padding, but the split itself only
     collapses to single column at a narrower breakpoint (see below) so
     borderline laptops keep the side-by-side preferences/items layout. */
  .workshop { gap: 12px; padding-top: 14px; }
  .usercomp { margin-top: 12px; }
  .usercomp::before { top: -9px; }
  /* Mobile: tab nav scrolls with the rest. Sticky on a phone takes up
     touch space and floats over content awkwardly when the modal panel
     is already full-screen. */
  .tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border-right: 0;
    border-bottom: 1px dashed var(--line-strong);
    /* Match modal__body's horizontal padding (14px on mobile) so the
       extended background runs edge-to-edge without creating overflow. */
    margin: 0 -14px 16px;
    padding: 6px 14px;
    flex-shrink: 0;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; padding: 10px 14px; }
  .tab.is-active::after { display: none; }

  /* tighter sections */
  .results__grid { gap: 22px; }
  .group { padding: 22px 18px 18px; border-radius: 14px; }
  .group__head { gap: 12px; padding-bottom: 12px; margin-bottom: 14px; }
  .group__title { font-size: 20px; }
  .seal { width: 64px; height: 64px; font-size: 13px; }
  .seal small { font-size: 7.5px; }

  /* profile pills wrap nicely */
  .profile { padding: 12px 12px 10px; }
  .profile__row { grid-template-columns: 32px 1fr; gap: 8px; padding: 3px 0; }
  .profile__label { font-size: 10px; width: auto; }
  .profile__pills { gap: 4px; }
  .want { font-size: 12.5px; padding: 3px 9px 4px; }
  .want em { font-size: 9px; }
  .want--env { font-size: 10.5px; padding: 3px 9px 4px; }
  .profile__count { font-size: 11.5px; }
  .profile__breakdown { font-size: 11.5px; }

  /* specimens: snug 2-col on mobile */
  .specimens { gap: 10px; grid-template-columns: repeat(2, 1fr); }
  .specimen { padding: 10px 6px 8px; }
  .specimen__img { width: 56px; height: 56px; }
  .specimen__name { font-size: 14px; }
  .specimen__dex { font-size: 9.5px; }
  .specimen__flavor { font-size: 11px; padding-top: 4px; }
  .specimen__flavor small { font-size: 10px; }

  /* coverage rows: stack who/tags */
  .coverage__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 0;
  }
  .coverage__who { font-size: 14px; }
  .tag { font-size: 11px; padding: 2px 7px 3px; }

  /* bed line wraps */
  .bed-line { font-size: 13px; padding: 7px 10px; gap: 4px 8px; }
  .bed-size strong { font-size: 10.5px; }
  /* Mobile: center the qty chip vertically against its targets column,
     even when targets wrap onto multiple lines. */
  .bed-row { align-items: center; }
  .bed-row__qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
    line-height: 1.2;
  }
  .baseline__pkm { font-size: 13px; }

  /* combos: head wraps; bigger touch on add-all */
  .combo { padding: 12px 12px 10px; }
  .combo__head { gap: 8px; }
  .combo__letter { width: 26px; height: 26px; font-size: 14px; }
  .combo__count { font-size: 14px; }
  .combo__cover { font-size: 10px; }
  .combo__tag { font-size: 9px; padding: 2px 7px; }
  .combo__addall {
    margin-left: 0; width: 100%; padding: 10px 12px;
    font-size: 11px;
  }

  /* item grids: tighter min */
  .items__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .item { padding: 9px 5px 7px; }
  .item img:not(.item__func) { width: 44px; height: 44px; }
  .item__name { font-size: 12.5px; }
  .item__tag { font-size: 8.5px; padding: 1px 5px; }

  /* bigger touch targets for primary actions */
  .item__add {
    width: 28px; height: 28px;
    font-size: 16px;
    line-height: 22px;
    top: 3px; left: 3px;
  }
  .item__badge { font-size: 9px; padding: 1px 5px; top: 3px; right: 3px; }

  /* chip / search / actions */
  .chip { padding: 5px 11px 5px 5px; font-size: 14px; }
  .chip img { width: 30px; height: 30px; }
  .chip__x { width: 24px; height: 24px; font-size: 12px; }
  #search { font-size: 17px; padding: 16px 18px 14px 42px; }
  .stamp {
    padding: 16px 22px;
    min-height: 48px;
    font-size: 14px;
  }
  .ghost { padding: 12px 4px; font-size: 16px; min-height: 44px; }
  .actions { gap: 12px; }

  /* saved tabs full width */
  .saved__row { gap: 6px; }
  .tab__load { padding: 8px 12px 8px 14px; font-size: 14px; }
  .tab__del  { padding: 0 11px; font-size: 12px; }

  /* alts */
  .alts > summary { gap: 8px; padding: 8px 0; }
  .alts__label { font-size: 12px; }
  .alts__count { font-size: 10px; padding: 2px 7px; }
  .alts__hint  { font-size: 12px; }
  .alts__filters { gap: 5px; padding: 8px 10px; }
  .alts__filter { font-size: 12px; padding: 4px 9px 5px; min-height: 32px; }

  /* usercomp */
  .usercomp { padding: 12px 12px 10px; }
  .usercomp__title { font-size: 14px; }
  .usercomp__hint { font-size: 12.5px; }
  .usercomp__clear { font-size: 12px; padding: 6px 4px; min-height: 36px; }
}

/* Workshop split collapse — only at ~phone widths, so borderline laptops keep
   the side-by-side "preferences | items" layout. */
@media (max-width: 640px) {
  .workshop__split { grid-template-columns: 1fr; gap: 14px; }
  .workshop__pane--left { position: static; top: auto; }
  .workshop__pane--left .coverage {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .workshop__pane--left .coverage__title {
    position: static;
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    border-bottom: 1px dashed var(--line-strong);
    padding-bottom: 6px;
  }
  .workshop__cart {
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 6px;
  }
}

/* ─── responsive · phone ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size: 15.5px; line-height: 1.5; }
  .card { padding: 24px 16px 18px; margin: 14px 10px; border-radius: 10px; }
  .tape--left, .tape--right { display: none; }   /* drop the masking tape on tiny screens */

  .masthead { margin: 36px 10px 18px; padding: 0; }
  .masthead__title { font-size: clamp(40px, 12vw, 56px); letter-spacing: -0.025em; }
  .underline { width: 60vw; }
  .masthead__sub { font-size: 15px; line-height: 1.4; }
  .masthead__corner { font-size: 11px; gap: 8px; flex-wrap: wrap; }

  .results, .footer { margin: 18px 10px 24px; padding: 0; }
  .results__grid { gap: 16px; }
  .group { padding: 18px 14px 14px; border-radius: 12px; }

  .group__head { flex-wrap: wrap; }
  .group__title { font-size: 18px; }
  .seal { width: 56px; height: 56px; font-size: 11.5px; transform: rotate(-4deg); }
  .seal small { font-size: 7px; }

  .section-num { font-size: 12px; }
  .section-title { font-size: clamp(20px, 5.4vw, 24px); }
  .hint { font-size: 14.5px; }

  .specimens { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .specimen__name { font-size: 13px; }

  /* combo head: title row above, badges below */
  .combo__head {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .combo__head > .combo__letter { flex-shrink: 0; }
  .combo__head > .combo__addall { order: 99; }

  /* rappel banner: stack chips */
  .rappel { padding: 9px 12px; }
  .rappel__label { width: 100%; margin-bottom: 4px; font-size: 10.5px; }
  .rappel__chip { font-size: 12.5px; padding: 3px 9px 4px; }

  /* lang toggle visually quieter */
  .lang-toggle { top: 10px; right: 10px; }
  .lang-toggle button { padding: 8px 11px 9px; font-size: 11.5px; min-width: 42px; }

  /* envtip details: full-width summary */
  .envtip > summary { flex-wrap: wrap; }
  .envtip__lead { font-size: 12px; }
  .envtip__how, .envtip__dont { font-size: 12px; }

  /* baseline: pkm names break tighter */
  .baseline__pkm { font-size: 12.5px; }
  .baseline__pkm + .baseline__pkm::before { content: ' · '; }

  /* chip line spacing */
  .chips { padding: 12px; min-height: 76px; gap: 8px; }

  .footer { font-size: 11px; line-height: 1.6; }
}

/* ─── extreme phone ──────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .masthead__title { font-size: 38px; }
  .specimens { grid-template-columns: 1fr 1fr; }
  .items__grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .item img:not(.item__func) { width: 40px; height: 40px; }
}

/* ─── auth toggle (topbar) ──────────────────────────────────────────── */
.auth-toggle {
  display: inline-flex;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 14px -8px rgba(60, 35, 10, 0.45);
}
.auth-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 14px 7px;
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--ink);
  cursor: pointer;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-toggle button:hover { background: var(--ink); color: var(--paper); }

/* ─── auth form (inside modal) ──────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 360px;
  margin: 0 auto;
  padding: 4px 2px 6px;
}
.auth-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-form__field > span {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.auth-form__field input {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  padding: 8px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.auth-form__field input:focus {
  outline: none;
  border-color: var(--rust);
}
.auth-form__submit { align-self: center; }
.auth-form__google {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  text-decoration: none;
  background: var(--paper);
  transition: background 180ms ease, color 180ms ease;
}
.auth-form__google svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-form__google:hover { background: var(--ink); color: var(--paper); }
.auth-form__google:hover svg { filter: grayscale(1) brightness(2.5); }
.auth-form__toggle {
  align-self: center;
  font-size: 12px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
}
.auth-form__toggle:hover { color: var(--rust); }
.auth-form__err {
  margin: 0;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  color: var(--rust);
}

/* ─── regions switcher (4 tabs) ─────────────────────────────────────── */
.regions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.regions__title {
  margin: 0 0 10px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.regions__cta {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
}
.regions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.region-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 6px 10px 6px 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms;
}
.region-tab:nth-child(2n) { transform: rotate(0.6deg); }
.region-tab:nth-child(3n) { transform: rotate(-0.8deg); }
.region-tab.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5);
}
.region-tab:hover:not(.is-active) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.4);
}
.region-tab__count {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-style: normal;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.85;
}

/* ─── footer signature link ─────────────────────────────────────────── */
.footer a {
  display: inline-block;
  position: relative;
  margin: 0 2px;
  padding: 0 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.08em;
  color: var(--ink);
  text-decoration: none;
  transform: rotate(-1.5deg);
  transition: color 220ms ease, transform 240ms cubic-bezier(.2,.7,.2,1);
}
.footer a::before {
  content: '';
  position: absolute;
  inset: auto 2px -3px 2px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 6 Q14 1 28 5 T56 5 T84 4 T98 6' fill='none' stroke='%23B5471F' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: 0.55;
  transform: scaleX(0.85);
  transform-origin: left center;
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.2,.7,.2,1);
}
.footer a::after {
  content: '↗';
  display: inline-block;
  margin-left: 2px;
  font-family: 'Special Elite', monospace;
  font-size: 0.72em;
  font-style: normal;
  color: var(--rust);
  opacity: 0.65;
  transform: translateY(-3px);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 220ms;
}
.footer a:hover,
.footer a:focus-visible {
  color: var(--rust);
  outline: none;
  transform: rotate(-1.5deg) translateY(-1px);
}
.footer a:hover::before,
.footer a:focus-visible::before {
  opacity: 0.95;
  transform: scaleX(1);
}
.footer a:hover::after,
.footer a:focus-visible::after {
  opacity: 1;
  transform: translate(2px, -5px) rotate(20deg);
}

/* ─── auth toggle: red "ANNULÉ" stamp on hover / confirm ────────────── */
/* Two-stage sliding cover: black wipes in first, then a red layer with a
   leading-edge pokéball slides over it. On exit, both retreat to the left. */
.auth-toggle button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 200ms ease;
}
/* Real-DOM layers (al-black, al-red, al-ball) replace pseudo-elements that
   were animating unreliably on entry. The pokéball is its own span so it
   can rotate independently while the red sweep slides in. */
.auth-toggle button[data-action="logout"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.al-email {
  position: relative;
  z-index: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.al-black,
.al-red {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateX(-101%);
  will-change: transform;
}
.al-black {
  background: #111;
  z-index: 1;
}
.al-red {
  background: linear-gradient(135deg, #D62828 0%, #B11A1A 100%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 26px;
}
.al-label {
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: #fff;
}
.al-ball {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 A10.5 10.5 0 0 1 22.5 12 L1.5 12 A10.5 10.5 0 0 1 12 1.5 Z' fill='%23DC2626'/><path d='M12 22.5 A10.5 10.5 0 0 1 1.5 12 L22.5 12 A10.5 10.5 0 0 1 12 22.5 Z' fill='%23F8F4E3'/><circle cx='12' cy='12' r='10.5' fill='none' stroke='%23111' stroke-width='1.5'/><path d='M1.5 12 H22.5' stroke='%23111' stroke-width='2'/><circle cx='12' cy='12' r='3.4' fill='%23F8F4E3' stroke='%23111' stroke-width='1.3'/></svg>") no-repeat center / contain;
  will-change: transform;
}
.auth-toggle button[data-action="logout"]:hover,
.auth-toggle button[data-action="logout"].is-confirm {
  border-color: #111;
}
.auth-toggle button[data-action="logout"]:active .al-red {
  filter: brightness(0.92);
}

/* Mobile overrides — must come after the base rules so the cascade picks them. */
@media (max-width: 600px) {
  .auth-toggle button { max-width: 140px; }
  /* Narrow phones can't fit pokéball + text in the pill without overlap;
     drop the ball on mobile so the label has the full width. */
  .auth-toggle button[data-action="logout"] .al-red { padding-right: 0; }
  .auth-toggle button[data-action="logout"] .al-ball { display: none; }
}
@media (max-width: 380px) {
  /* Very narrow phones: collapse the pill into a pokéball avatar disc. */
  .auth-toggle button[data-action="logout"] {
    width: 30px;
    max-width: 30px;
    padding: 0;
  }
  .auth-toggle button[data-action="logout"] .al-email { font-size: 0; }
  .auth-toggle button[data-action="logout"] .al-label { font-size: 0; }
  .auth-toggle button[data-action="logout"] .al-red { padding: 0; }
  .auth-toggle button[data-action="logout"] .al-ball {
    display: block;
    right: 50%;
    margin-right: -9px;
    width: 18px; height: 18px;
    margin-top: -9px;
  }
}

/* ─── email verification banner + toast ─────────────────────────────── */
/* The [hidden] override is required because `display: flex` below otherwise
   wins over the HTML hidden attribute. */
.verify-banner[hidden],
.toast[hidden] { display: none !important; }
.verify-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 22px;
  background: linear-gradient(180deg, #F0D58A 0%, #E6C474 100%);
  border-bottom: 1.5px solid #8A6B16;
  box-shadow: 0 2px 10px -4px rgba(60, 35, 10, 0.35);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  color: #2A1E12;
}
.verify-banner__text { flex: 1; min-width: 0; }
.verify-banner__text strong {
  font-family: 'Special Elite', monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #5C3F18;
}
.verify-banner__btn {
  font-family: 'Special Elite', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: #2A1E12;
  color: #F8F4E3;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 200ms;
}
.verify-banner__btn:hover:not(:disabled) { opacity: 0.85; }
.verify-banner__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.verify-banner__close {
  background: transparent;
  border: 0;
  color: #5C3F18;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.verify-banner__close:hover { color: #2A1E12; }

/* JS measures the banner height into --verify-banner-h so the topbar always
   sits just below it, even when the email wraps to a second line on mobile.
   Body content gets pushed by exactly the banner height — the masthead's own
   56px margin-top already gives the topbar enough breathing room below. */
body.has-verify-banner {
  padding-top: var(--verify-banner-h, 52px);
}
body.has-verify-banner .topbar {
  top: calc(var(--verify-banner-h, 52px) + 8px);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 200;
  padding: 10px 18px;
  background: #2A1E12;
  color: #F8F4E3;
  font-family: 'Special Elite', monospace;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  border-radius: 4px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
  .verify-banner { font-size: 13px; padding: 8px 12px 8px 14px; gap: 8px; flex-wrap: wrap; }
  .verify-banner__text { font-size: 13px; flex: 1 1 100%; }
  /* topbar offset is now driven by --verify-banner-h (set by JS) — no hard
     value needed here. */
}

/* ─── profile tab: rappel block (mirrors the top-of-results aside) ──── */
.profile__rappel {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(241, 229, 200, 0.55);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.profile__rappel-label {
  font-family: 'Special Elite', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}
.profile__rappel-items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.profile__rappel-chip {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13.5px;
  color: var(--ink);
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}

/* ─── confirm dialog (reuses the auth modal chrome) ──────────────────── */
.confirm-dialog {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 2px 6px;
  max-width: 360px;
  margin: 0 auto;
}
.confirm-dialog__body {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.confirm-dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.confirm-dialog__actions .ghost {
  padding: 8px 18px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.confirm-dialog__danger {
  background: linear-gradient(135deg, #D62828 0%, #B11A1A 100%);
  color: #fff;
  border-color: #8B1F1A;
}
.confirm-dialog__danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #C32020 0%, #8B1F1A 100%);
}
@media (max-width: 600px) {
  .confirm-dialog__actions { justify-content: stretch; }
  .confirm-dialog__actions > * { flex: 1; }
}

/* ─── Great Roommates ─────────────────────────────────────────────────── */

/* Inline footnote-marker affordance attached to every Pokémon presence.
   Tiny, ink-tone, slightly faded so it reads as marginalia rather than a
   CTA. Hover bumps to rust. */
/* Hand-drawn three-starter-paws unity icon (static/icons/roommates.png).
   Charmander, Bulbasaur and Squirtle paws gripping at center — semantic
   match for "good roommates". Inked illustration so hover keeps the
   illustration upright (no rotation); we just scale + warm-tint the bg. */
.roommate-mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background .15s ease;
}
.roommate-mark__icon {
  width: 22px;
  height: auto;
  display: block;
  pointer-events: none;
  transition: filter .2s ease;
}
.roommate-mark:hover {
  background: rgba(167, 66, 26, 0.10);
  transform: scale(1.12);
}
.roommate-mark:active .roommate-mark__icon {
  animation: pawsTighten 420ms ease-out;
}
@keyframes pawsTighten {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.roommate-mark:focus-visible {
  outline: 2px dashed var(--rust);
  outline-offset: 2px;
}

/* On enclosure cards, the mark floats over the sprite top-right corner —
   doesn't claim layout, doesn't fight the name. */
.specimen { position: relative; }
/* Top-left across all views (compact + builder) for visual consistency.
   The top-right corner is also reserved for the bed-size pastille inside
   the builder modal, so left also avoids the collision there. */
.roommate-mark--on-sprite {
  position: absolute;
  top: 2px; left: 2px;
  z-index: 2;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.18);
  width: 30px; height: 30px;
}
.roommate-mark--on-sprite .roommate-mark__icon {
  width: 24px;
  height: auto;
}


/* Stacked overlay — appended fresh per open so the roommates modal can
   layer over the enclosure-builder modal without nuking its DOM. */
.modal.modal--stacked { z-index: 1100; }

/* Anchor card — surfaces the central Pokémon's preferences so every
   roommate card's "shared tags" line can be read as a subset of these.
   Without this, distinct shared-tag patterns between candidates feel
   disconnected (e.g. ghosts share "worrying/strange", Vulpix shares
   "cute/round"). */
.rm-anchor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 22px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 246, 220, 0.7) 0, rgba(255, 246, 220, 0.7) 8px,
      rgba(255, 232, 178, 0.45) 8px, rgba(255, 232, 178, 0.45) 16px);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
}
.rm-anchor__img {
  width: 56px; height: 56px;
  object-fit: contain;
  background: radial-gradient(circle at center, rgba(255,232,178,0.7), transparent 65%);
  border-radius: 999px;
  flex-shrink: 0;
}
.rm-anchor__body { min-width: 0; flex: 1; }
.rm-anchor__name {
  margin: 0 0 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'SOFT' 80;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rm-anchor__tags {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.rm-anchor__label {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-right: 4px;
}

.rm-band + .rm-band {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--line);
}
.rm-band__title {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 12px;
}
.rm-band--basket .rm-band__title { color: var(--moss); }
.rm-band--group  .rm-band__title { color: var(--teal); }
.rm-band--catch  .rm-band__title { color: var(--rust); }

.rm-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  .rm-list { grid-template-columns: repeat(2, 1fr); }
}

.rm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--paper-edge);
}
.rm-card--basket { border-style: solid; }
.rm-card--group  { border-style: solid; box-shadow: inset 0 0 0 1px rgba(63, 125, 123, 0.25), 0 1px 0 var(--paper-edge); }
.rm-card--catch  { border-style: dashed; border-color: var(--rust); }
.rm-card__img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: radial-gradient(circle at center, rgba(255,232,178,0.7), transparent 65%);
  border-radius: 999px;
  flex-shrink: 0;
}
.rm-card__body {
  min-width: 0;
  flex: 1;
}
.rm-card__name {
  margin: 0 0 2px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  font-variation-settings: 'opsz' 24;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.rm-card__meta {
  margin: 0;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-fade);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rm-card__badge {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 1px 7px;
  border: 1px solid var(--teal);
  border-radius: 999px;
}
.rm-empty {
  margin: 18px 0;
  font-style: italic;
  color: var(--ink-fade);
}
.rm-source {
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
}


/* ─── workshop wishlist (section 01 — Le panier) ─────────────────────── */

.wish {
  margin-top: 32px;
  padding: 26px 26px 22px;
  background: rgba(255, 246, 220, 0.55);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  position: relative;
}
.wish::before {
  content: '✦';
  position: absolute; top: -14px; left: 22px;
  background: var(--paper);
  color: var(--rust);
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 20px; line-height: 1;
  padding: 3px 10px 4px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
}
.wish__title {
  margin: 0 0 6px;
  font-family: 'Special Elite', monospace;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.wish__hint {
  margin: 0 0 22px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 15px;
  color: var(--ink-soft); line-height: 1.55;
}
.wish__hint em {
  color: var(--rust);
  font-style: normal;
  font-family: 'Special Elite', monospace;
  font-size: 12px; letter-spacing: 0.1em;
}

.wish__list {
  display: flex; flex-wrap: wrap; gap: 14px;
  list-style: none; margin: 0; padding: 0;
}

.wish-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px 10px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 16px; color: var(--ink);
  font-variation-settings: 'opsz' 24;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  line-height: 1.2;
}
.wish-item:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(60,35,10,.4); }
.wish-item__mark {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Special Elite', monospace; font-size: 13px; color: transparent;
  background: var(--paper);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.wish-item__body { display: flex; flex-direction: column; gap: 3px; }
.wish-item__mats {
  font-family: 'Special Elite', monospace;
  font-style: normal; font-weight: 400;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-fade);
}
.wish-item__auto {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 3px;
  background: var(--moss); color: #fdf6e0;
  font-family: 'Special Elite', monospace;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px;
  font-style: normal; font-weight: 400;
  margin-left: 6px;
  vertical-align: middle;
}
.wish-item__auto::before { content: '⚡'; font-size: 9px; }

.wish-item.is-on {
  background: var(--rust); color: #fdf6e0; border-color: var(--rust);
}
.wish-item.is-on .wish-item__mark {
  background: #fdf6e0; color: var(--rust); border-color: #fdf6e0;
}
.wish-item.is-on .wish-item__mark::before { content: '✓'; }
.wish-item.is-on .wish-item__mats { color: rgba(253,246,224,0.78); }

/* Locked vocations — not tickable, shown so the player sees what's possible. */
.wish-item.is-locked {
  cursor: help;
  opacity: 0.5;
  border-style: dashed;
  background: transparent;
}
.wish-item.is-locked:hover { transform: none; box-shadow: none; opacity: 0.72; }
.wish-item__mark--lock { border-style: dashed; }
.wish-item__mark--lock::before {
  content: '🔒'; font-size: 9px; filter: grayscale(1); opacity: 0.7;
}

.wish__foot {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-fade);
  line-height: 1.7;
}
.wish__foot .wish-foot__remainder {
  display: block; margin-top: 4px; color: var(--ink-fade); font-style: italic;
}
.wish__foot .storage-flag {
  display: block; margin-top: 4px; color: var(--moss);
}
.wish__foot .storage-flag::before { content: '⚡ '; color: var(--moss); }


/* ─── wish-tag intro + per-specimen role line (Phase 4) ───────────────── */

.group--has-wish .specimens { gap: 18px; }

.group__wish-intro {
  margin: 0 0 20px;
  padding-top: 14px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.wish-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 10px;
  padding: 3px 11px 4px;
  background: var(--rust); color: #fdf6e0;
  border-radius: 999px;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  vertical-align: middle;
}
.wish-tag::before {
  content: '✦';
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 12px;
}

.specimen__job {
  margin-top: 8px;
  width: 100%;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rust);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  flex-wrap: wrap;
}
.specimen__job small {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 11.5px;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-soft);
}
.specimen__job .auto-mark { color: var(--moss); font-size: 11px; }

.wish-tag--auto {
  background: var(--moss);
  color: #fdf6e0;
  margin-right: 10px;
}
.wish-tag--auto::before {
  content: '⚡';
  font-family: 'Special Elite', monospace;
  font-style: normal;
  font-size: 11px;
}


/* ─── Item-details popup (Phase 5) ─────────────────────────────────────── */

.item-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed; inset: 0;
  z-index: 1200;
  background: rgba(30, 20, 5, 0.42);
  padding: 40px 24px;
  overflow-y: auto;
  animation: itemModalFade .22s ease both;
}
.item-modal.is-closing {
  animation: itemModalFadeOut .22s ease both;
  pointer-events: none;
}
.item-modal.is-closing .item-pop {
  animation: itemPopFall .22s cubic-bezier(.4,.0,.6,1) both;
}
@keyframes itemModalFade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes itemModalFadeOut {
  from { opacity: 1; } to { opacity: 0; }
}
@keyframes itemPopFall {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(.985); }
}
.item-modal__backdrop {
  position: absolute; inset: 0;
}

.item-pop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin: auto;
  background:
    linear-gradient(180deg, rgba(255,246,220,.55), rgba(255,246,220,.0) 240px),
    var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 32px 64px -28px rgba(60, 38, 10, 0.55),
    0 12px 22px -16px rgba(60, 38, 10, 0.35),
    inset 0 0 0 1px rgba(120, 90, 40, 0.18);
  overflow: hidden;
  animation: itemPopRise .36s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes itemPopRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.item-pop::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 32px,
      rgba(28,42,29,0.035) 32px, rgba(28,42,29,0.035) 33px);
  z-index: 0;
}

.item-pop__top {
  position: relative;
  display: flex; align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 24px;
  border-bottom: 1.5px solid var(--ink);
  background:
    repeating-linear-gradient(135deg,
      rgba(167,66,26,0.05) 0, rgba(167,66,26,0.05) 6px,
      transparent 6px, transparent 12px);
}
.item-pop__top .item-pop__close {
  margin-left: auto; /* push to the right edge of the header strip */
}
.item-pop__crumbs {
  font-family: 'Special Elite', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.item-pop__crumbs em {
  color: var(--rust); font-style: normal;
  border-bottom: 1.5px solid var(--rust);
  padding-bottom: 1px;
}
.item-pop__num {
  font-family: 'Special Elite', monospace;
  font-size: 11px; letter-spacing: 0.14em; color: var(--ink-fade);
}
.item-pop__close {
  position: relative;
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 999px;
  /* The × glyph (U+00D7) has visually-higher metrics than most fonts
     compute it for, so we use a custom approach: empty button +
     ::before/::after pseudo strokes — exact visual centering. */
  font: 0/0 a;  /* hide any text content fallback */
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, color .15s, border-color .15s;
}
.item-pop__close::before,
.item-pop__close::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
}
.item-pop__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.item-pop__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.item-pop__close:hover {
  color: var(--rust); border-color: var(--rust);
  transform: rotate(90deg) scale(1.08);
}

.item-pop__body {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  padding: 32px 36px 28px;
}
@media (max-width: 720px) {
  .item-pop__body { grid-template-columns: 1fr; gap: 24px; padding: 24px 22px; }
}

.vitrine {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px;
  align-self: start;
}
.vitrine__case {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 30px;
  background:
    radial-gradient(circle at 50% 35%,
      rgba(255, 232, 178, 0.85),
      rgba(255, 232, 178, 0.25) 60%,
      transparent 78%);
  border-radius: 999px;
}
.vitrine__case::before {
  content: '';
  position: absolute; inset: 12px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 999px;
}
.vitrine__case::after {
  content: '';
  position: absolute; inset: -8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  opacity: .6;
}
.vitrine__img {
  position: relative; z-index: 1;
  /* Default cap — adjusted at runtime per-image so a low-res icon
     never gets upscaled past its natural resolution (× device-pixel
     ratio) and a high-res icon downsamples to a sharp 120 px. */
  max-width: 120px; max-height: 120px;
  width: auto; height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 8px 12px rgba(60, 35, 10, 0.35));
}
.vitrine__img.is-missing {
  opacity: .25;
  filter: none;
}
.vitrine__tag {
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 5px 14px 6px;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  box-shadow: 0 3px 6px -3px rgba(0,0,0,0.3);
}
.vitrine__tag::before {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--rust);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.fiche { position: relative; min-width: 0; }
.fiche__category {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Special Elite', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 8px;
}
.fiche__category::before {
  content: '✦';
  color: var(--rust);
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 14px;
}
.fiche__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-style: italic;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.02; letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ink);
  text-wrap: balance;
  hyphens: auto;
}
.fiche__name-en {
  font-family: 'Special Elite', monospace;
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--ink-fade);
  margin: 0 0 18px;
}
.fiche__desc {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 26px;
  padding-left: 14px;
  border-left: 2.5px solid var(--rust);
}
.fiche__desc-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px 2px;
  background: rgba(63, 125, 123, 0.14);
  color: var(--teal);
  border-radius: 4px;
  font-family: 'Special Elite', monospace;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
  transform: translateY(-2px);
}

.prov { margin-bottom: 26px; }
.prov__title {
  font-family: 'Special Elite', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.prov__title::after {
  content: '';
  flex: 1;
  border-top: 1px dashed var(--line);
  transform: translateY(-3px);
}

.rule {
  position: relative;
  margin-bottom: 16px;
  padding: 18px 18px 16px;
  background: rgba(255,246,220, .5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  border-radius: 8px;
}
.rule + .rule { margin-top: 14px; }
.rule__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.specialty-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 12px 5px;
  background: transparent;
  border: 2px solid var(--rust);
  border-radius: 4px;
  transform: rotate(-2deg);
  font-family: 'Special Elite', monospace;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rust);
  box-shadow: inset 0 0 0 1.5px rgba(167,66,26,.18);
  flex-shrink: 0;
}
.rule__method {
  flex: 1;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: var(--ink-soft);
  min-width: 200px;
}

.producers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.producer-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 4px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 600;
  font-variation-settings: 'opsz' 18;
  font-size: 14px; color: var(--ink);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s, border-color .12s;
}
.producer-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -6px rgba(60,35,10,.4);
  border-color: var(--ink);
}
.producer-chip img {
  width: 28px; height: 28px; object-fit: contain;
  background: radial-gradient(circle at center, rgba(255,232,178,.7), transparent 65%);
  border-radius: 999px;
}
.producer-chip__dex {
  font-family: 'Special Elite', monospace;
  font-style: normal; font-weight: 400;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-fade);
}

.locations {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-fade);
  margin-top: 4px;
}
.locations__label {
  text-transform: uppercase; letter-spacing: 0.16em;
}
.location-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border: 1px dotted var(--line-strong);
  border-radius: 999px;
  background: rgba(95, 122, 58, 0.08);
  color: var(--moss);
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
.location-pill::before {
  content: '◐'; margin-right: 5px;
  color: var(--gold); font-size: 10px;
}

.transform-flow {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px; flex-wrap: wrap;
}
.flow-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 12px 6px;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  min-width: 96px;
}
.flow-card img { width: 48px; height: 48px; object-fit: contain; }
.flow-card__name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 13px; margin-top: 2px;
  text-align: center;
}
.flow-card__qty {
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--rust);
}
.flow-arrow {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--rust);
  transform: translateY(-2px);
}
.requires {
  margin-top: 12px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 13.5px;
  color: var(--ink-soft);
}
.requires strong {
  font-family: 'Special Elite', monospace;
  font-style: normal; font-weight: 400;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  padding-bottom: 1px;
  margin-right: 4px;
}

.ingredients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.ingredient {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ingredient img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ingredient__body { flex: 1; min-width: 0; }
.ingredient__name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ingredient__qty {
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--rust);
}
.craft-output {
  margin-top: 12px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: var(--ink-soft);
}
.craft-output strong {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 700; color: var(--ink);
  font-size: 16px;
}
.unlocked-by {
  margin-top: 8px;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--ink-fade);
}
.unlocked-by::before { content: '⚑ '; color: var(--gold); }

.rule--other .rule__method {
  font-size: 15px; color: var(--ink);
}

.crafts-into {
  position: relative;
  margin: 24px 36px 36px;
  padding: 18px 16px 16px;
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
.crafts-into__title {
  font-family: 'Special Elite', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.crafts-into__title b {
  font-weight: 400; color: var(--ink);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-size: 15px;
  letter-spacing: 0; text-transform: none;
}
.crafts-into__count {
  margin-left: auto;
  font-family: 'Special Elite', monospace;
  font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--ink-fade);
}

.crafts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}
.craft-thumb {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px 6px;
  background: rgba(255,246,220,.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s, background .12s;
}
.craft-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  background: var(--paper);
}
.craft-thumb img {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(60,35,10,.22));
}
.craft-thumb img.is-missing { opacity: .25; filter: none; }
.craft-thumb__name {
  margin-top: 4px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Indicate items are clickable in the workshop modal */
.item { cursor: pointer; }
.item:hover { box-shadow: 0 4px 12px -8px rgba(60, 35, 10, .35); }

body.has-item-modal { overflow: hidden; }

.prov__empty {
  margin: 0; padding: 14px 18px;
  background: rgba(255,246,220,.5);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}


/* ─── existing-enclosures board: roster (left) + crates (right) ───────── */

.pens-wrap{
  margin: 24px 0 2px;
}
.pens__summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}
.pens__summary::-webkit-details-marker{ display: none; }
.pens__title{
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .98rem;
  color: var(--ink);
}
/* Collapse toggle — the shared site square +/− mark, identical to the
   workshop "show more" (.alts) toggle: a rust-bordered rounded square with
   two centered strokes; the vertical stroke disappears on open → "−". */
.pens__toggle{
  flex: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--rust);
  border-radius: 4px;
  background:
    linear-gradient(var(--rust), var(--rust)) center / 8px 1.5px no-repeat,
    linear-gradient(var(--rust), var(--rust)) center / 1.5px 8px no-repeat;
  transition: transform .2s ease;
}
.pens-wrap.is-open .pens__toggle{
  background: linear-gradient(var(--rust), var(--rust)) center / 8px 1.5px no-repeat;
}
.pens__summary:hover .pens__toggle{ transform: scale(1.1); }

/* Open/close animation: <details> can't transition its own box, so the body
   lives in a wrapper that animates grid-rows 0fr → 1fr. The [open] attribute
   is toggled by JS after the closing transition so content stays in the DOM. */
.pens__body{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.pens__body > div{ min-height: 0; overflow: hidden; }
.pens-wrap.is-open .pens__body{
  grid-template-rows: 1fr;
  opacity: 1;
}
.pens__hint{
  color: var(--ink-fade);
  font-size: .85rem;
  margin: 8px 0 12px;
  max-width: 68ch;
}

.pens-board{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 14px;
  align-items: start;
}
.pens-col{
  background: rgba(255, 246, 220, .5);
  border: 1px solid var(--line);
  border-radius: var(--r-paper);
  padding: 12px;
  min-width: 0;
}
.pens-col__head{
  font-family: 'Special Elite', monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.pens-search{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  margin-bottom: 10px;
}
.pens-search::placeholder{ color: var(--ink-fade); }
.pens-search:focus-visible{ outline: 2px solid var(--moss); outline-offset: 1px; }

.roster{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  border-radius: 10px;
  transition: background .15s ease;
}
.roster.is-over{ background: rgba(91, 122, 58, .08); }
.roster__empty{
  color: var(--ink-fade);
  font-size: .85rem;
  font-style: italic;
  margin: 6px 2px;
}

.tok{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: .9rem;
  font-weight: 500;
  cursor: grab;
  transition: transform .14s cubic-bezier(.2,.8,.2,1),
              box-shadow .14s ease, border-color .14s ease;
}
.tok:hover{
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -6px rgba(60, 38, 10, .5);
}
.tok:active{ cursor: grabbing; }
.tok:focus-visible{ outline: 2px solid var(--moss); outline-offset: 2px; }
.tok.is-picked{
  border-color: var(--moss);
  box-shadow: 0 0 0 2px rgba(91, 122, 58, .35);
}
.tok.is-dragging{ opacity: .4; }
.tok img{ width: 24px; height: 24px; object-fit: contain; flex: none; }
.tok__name{ white-space: nowrap; }
.pens-board.is-picking .crate{ border-color: var(--moss); }

.crates{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.crate{
  border: 1px solid var(--line-strong);
  border-radius: var(--r-paper);
  background: rgba(255, 246, 220, .7);
  padding: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.crate.is-over{
  border-color: var(--moss);
  background: rgba(91, 122, 58, .07);
  box-shadow: inset 0 0 0 2px rgba(91, 122, 58, .3);
}
.crate--new{
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
}
.crate__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 22px;
}
.crate__title{
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1rem;
  font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 1;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crate__title--ghost{ color: var(--ink-fade); }
.crate__remove{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  color: var(--ink-fade);
  padding: 2px 6px;
  flex: none;
}
.crate__remove:hover{ color: var(--rust); }
.crate__slots{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.slot{
  min-height: 56px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: rgba(28, 42, 29, .025);
  display: grid;
  place-items: center;
  padding: 4px;
}
.slot--filled{
  border-style: solid;
  border-color: var(--line);
  background: var(--paper);
}
.slot--filled .tok{
  border: none;
  background: transparent;
  padding: 2px;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}
.slot--filled .tok:hover{ transform: none; box-shadow: none; }
.slot--filled .tok img{ width: 30px; height: 30px; }
.slot--filled .tok__name{
  font-size: .74rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crate__hint{
  color: var(--ink-fade);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 720px){
  .pens-board{ grid-template-columns: 1fr; }
}
.tok-ghost{
  position: fixed;
  top: -1000px; left: -1000px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: 0 8px 18px -8px rgba(60, 38, 10, .55);
  transform: rotate(-2deg);
  pointer-events: none;
}
.tok-ghost img{ width: 26px; height: 26px; object-fit: contain; }

@media (prefers-reduced-motion: reduce){
  .pens__toggle, .tok, .pens__body{ transition: none; }
  .tok:hover{ transform: none; }
}

/* Badge on result cards for user-declared enclosures (mirrors .wish-tag). */
.pens-tag{
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rust);
  color: var(--paper);
  font-size: .78rem;
  font-weight: 700;
}
.pens-tag__name{
  margin-left: 6px;
  font-weight: 600;
  opacity: .92;
}