/* ==========================================================================
   XalTeq — Ausrüstungsblatt
   Pergament wie die Papiervorlage, plus eine dunkle Variante für den Abend.
   ========================================================================== */

:root {
  /* Pergament */
  --paper:        #efe6d2;
  --paper-2:      #e6dbc3;
  --card:         #f6efdd;
  --card-2:       #efe6d0;
  --ink:          #2a2018;
  --ink-soft:     #5c4c3a;
  --ink-faint:    #8a7660;
  --rule:         #bda98a;
  --rule-strong:  #7d6a4e;
  --frame:        #6b5940;
  --slot-empty:   #e2d6bb;
  --icon-bg:      #3a332b;
  --icon-fg:      #cfc4b0;
  --accent:       #7a2e2e;
  --accent-soft:  #a85c3c;
  --shadow:       rgba(60, 45, 25, .18);
  --shadow-deep:  rgba(60, 45, 25, .32);
  --ok:           #3f7a45;
  --warn:         #9a6a1f;

  /* Seltenheiten */
  --r-weiss: #9a9a96;
  --r-gruen: #3f8b4a;
  --r-blau:  #2f6cb5;
  --r-lila:  #7c46b0;
  --r-rot:   #b5352f;

  --font-display: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;

  --slot-radius: 9px;
}

[data-theme="dark"] {
  --paper:        #17140f;
  --paper-2:      #1d1913;
  --card:         #241f18;
  --card-2:       #2b251c;
  --ink:          #ece0c8;
  --ink-soft:     #bcac91;
  --ink-faint:    #8e7f68;
  --rule:         #4d4232;
  --rule-strong:  #6d5f47;
  --frame:        #6d5f47;
  --slot-empty:   #1f1b15;
  --icon-bg:      #0f0d0a;
  --icon-fg:      #b8ab94;
  --accent:       #c46a5a;
  --accent-soft:  #d08a6a;
  --shadow:       rgba(0, 0, 0, .45);
  --shadow-deep:  rgba(0, 0, 0, .6);
  --ok:           #6aab6f;
  --warn:         #d0a24a;

  --r-weiss: #b9b6ae;
  --r-gruen: #5cb26a;
  --r-blau:  #5c95dd;
  --r-lila:  #a874d8;
  --r-rot:   #e0645a;
}

* { box-sizing: border-box; }

/* Ein Autoren-`display` schlägt sonst das hidden-Attribut aus. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  /* Papierfaser: zwei überlagerte Rauschmuster, damit die Fläche nicht flach wirkt */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(140,110,70,.14), transparent 52%),
    repeating-linear-gradient(122deg, rgba(150,120,80,.045) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(31deg,  rgba(150,120,80,.035) 0 2px, transparent 2px 6px);
  background-attachment: fixed;
  min-height: 100vh;
  font-size: clamp(15.5px, 15px + .18vw, 17.5px);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(120,95,60,.18), transparent 48%),
    radial-gradient(circle at 80% 82%, rgba(0,0,0,.4), transparent 55%),
    repeating-linear-gradient(122deg, rgba(200,170,120,.028) 0 2px, transparent 2px 5px);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: .04em; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Zierrahmen ---------------------------------------------------- */

.sheet-frame {
  position: relative;
  background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border: 2px solid var(--frame);
  border-radius: 4px;
  box-shadow: 0 2px 0 var(--rule) inset, 0 10px 30px -12px var(--shadow-deep);
  padding: clamp(14px, 2.4vw, 30px);
}
.sheet-frame::before {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  pointer-events: none;
}
/* Eckmarken wie auf dem Blatt */
.corner { position: absolute; width: 22px; height: 22px; pointer-events: none; color: var(--frame); }
.corner.tl { top: 8px;  left: 8px; }
.corner.tr { top: 8px;  right: 8px;  transform: scaleX(-1); }
.corner.bl { bottom: 8px; left: 8px;  transform: scaleY(-1); }
.corner.br { bottom: 8px; right: 8px; transform: scale(-1); }

/* ---------- Kopfleiste --------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 8px clamp(10px, 2vw, 22px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.topbar .brand {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.topbar .spacer { flex: 1 1 auto; }

.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--ink-soft);
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase;
}
.tab:hover { border-color: var(--rule); color: var(--ink); }
.tab[aria-selected="true"] {
  background: var(--frame); border-color: var(--frame); color: var(--card);
}

.icon-btn {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; flex: none;
}
.icon-btn:hover { border-color: var(--frame); color: var(--ink); }

.btn {
  background: var(--card); border: 1px solid var(--rule-strong); color: var(--ink);
  padding: 7px 15px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.btn:hover { border-color: var(--frame); background: var(--card-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--frame); border-color: var(--frame); color: var(--card); }
.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-danger { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn-danger:hover { background: var(--accent); color: var(--card); }
.btn-sm { padding: 4px 10px; font-size: .72rem; }

.link-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  text-decoration: underline; padding: 0; font-size: .85rem;
}

/* ---------- Anmeldung ---------------------------------------------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.login-frame { width: min(680px, 100%); text-align: center; }
.display-title {
  font-size: clamp(2.4rem, 7vw, 3.6rem); letter-spacing: .12em; margin-bottom: 2px;
}
.login-sub {
  font-style: italic; color: var(--ink-soft); margin: 0 0 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.who {
  text-align: left; background: var(--card-2); border: 1px solid var(--rule);
  border-radius: var(--slot-radius); padding: 11px 13px; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
}
.who:hover { border-color: var(--frame); transform: translateY(-1px); }
.who .who-name { font-family: var(--font-display); font-size: .95rem; display: block; }
.who .who-meta { font-size: .82rem; color: var(--ink-faint); }
.who.is-dm { border-color: var(--accent); }
.who.is-dm .who-name { color: var(--accent); }
.pin-form { margin-top: 20px; display: grid; gap: 10px; justify-items: center; }
.pin-head { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-display); }
.pin-form input {
  width: 180px; text-align: center; letter-spacing: .5em; font-size: 1.4rem;
  padding: 9px; background: var(--card-2); border: 1px solid var(--rule-strong);
  border-radius: 7px;
}
.hint-pins {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--ink-faint); font-style: italic;
}

/* ---------- Blatt: Kopf ------------------------------------------------- */

.page { padding: clamp(10px, 2vw, 24px); max-width: 1500px; margin: 0 auto; }

.char-head {
  display: grid; grid-template-columns: 2.4fr 1.4fr .7fr; gap: clamp(10px, 2vw, 26px);
  padding-bottom: 12px; margin-bottom: 6px;
}
.field { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.field > label {
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.field > input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: none;
  border-bottom: 1px solid var(--rule-strong); padding: 2px 4px;
  font-size: 1.02rem; font-family: var(--font-body);
}
.field > input:focus { outline: none; border-bottom-color: var(--accent); background: var(--card-2); }
.field.narrow > input { text-align: center; }

.sheet-title {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 2px 0 20px;
}
.sheet-title h2 {
  font-size: clamp(1.7rem, 4.6vw, 2.9rem); letter-spacing: .16em; white-space: nowrap;
}
.flourish { flex: 0 1 130px; height: 12px; color: var(--frame); }
.flourish svg { width: 100%; height: 100%; }

/* ---------- Blatt: Ausrüstungsgitter ------------------------------------ */

.equip-grid {
  display: grid;
  grid-template-columns: 1fr minmax(190px, .78fr) 1fr;
  gap: clamp(8px, 1.3vw, 16px);
  align-items: start;
}
.equip-col { display: grid; gap: clamp(8px, 1.1vw, 13px); align-content: start; }

/* ---------- Slot-Karte -------------------------------------------------- */

.slot {
  display: grid; grid-template-columns: auto 1fr; gap: 11px;
  background: linear-gradient(150deg, var(--card) 0%, var(--card-2) 100%);
  border: 1.5px solid var(--rule-strong);
  border-left-width: 4px;
  border-radius: var(--slot-radius);
  padding: 9px 11px 9px 9px;
  box-shadow: 0 2px 6px -3px var(--shadow);
  position: relative;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.slot[data-rarity="weiss"] { border-left-color: var(--r-weiss); }
.slot[data-rarity="gruen"] { border-left-color: var(--r-gruen); }
.slot[data-rarity="blau"]  { border-left-color: var(--r-blau); }
.slot[data-rarity="lila"]  { border-left-color: var(--r-lila); }
.slot[data-rarity="rot"]   { border-left-color: var(--r-rot); }
.slot.slot-artefakt { border-left-color: var(--r-lila); }

.slot-icon {
  width: 52px; height: 66px; border-radius: 5px;
  background: linear-gradient(155deg, var(--icon-bg), color-mix(in srgb, var(--icon-bg) 70%, #000));
  border: 1px solid var(--rule-strong);
  display: grid; place-items: center; color: var(--icon-fg);
  overflow: hidden; flex: none; align-self: start;
}
.slot-icon svg { width: 32px; height: 32px; }
.slot-icon img { width: 100%; height: 100%; object-fit: cover; }
.slot-icon.filled { box-shadow: 0 0 0 1px var(--rule) inset; }

/* Der Kartenkörper ist eine Spalte, in der ausschließlich der Effekttext
   nachgibt. Bezeichnung, Name, Seltenheit und Wert stehen fest — sie dürfen
   auch bei knapper Höhe nicht wegfallen. */
.slot-body {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.slot-body > * { flex: none; }
.slot-effect { flex: 1 1 auto; min-height: 0; }
.slot-label {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); line-height: 1.2;
}
.slot-label .sub { color: var(--ink-faint); font-size: .88em; letter-spacing: .05em; }
.slot-line { display: flex; align-items: baseline; gap: 6px; font-size: .88rem; min-width: 0; }
.slot-line .k {
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.slot-line .v {
  flex: 1 1 auto; min-width: 0; border-bottom: 1px dotted var(--rule-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-name { font-weight: 600; font-size: .98rem; }
.slot-effect {
  font-size: .82rem; color: var(--ink-soft); font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.slot.is-empty .slot-name { color: var(--ink-faint); font-style: italic; font-weight: 400; }

/* Einzelner Punkt in der Farbe der Seltenheit — trägt in der kompakten
   Ansicht allein, was dort die fünfteilige Reihe leisten würde. */
.rarity-one {
  display: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; background: currentColor;
  flex: none; margin-right: 7px; vertical-align: baseline;
}
.rarity-one[data-r="weiss"] { color: var(--r-weiss); }
.rarity-one[data-r="gruen"] { color: var(--r-gruen); }
.rarity-one[data-r="blau"]  { color: var(--r-blau); }
.rarity-one[data-r="lila"]  { color: var(--r-lila); }
.rarity-one[data-r="rot"]   { color: var(--r-rot); }

/* Seltenheits-Punktreihe wie im Original */
.rarity-row { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 1px; }
.rarity-dot { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; color: var(--ink-faint); }
.rarity-dot i {
  width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor;
  display: block; flex: none;
}
.rarity-dot[data-r="weiss"] { color: var(--r-weiss); }
.rarity-dot[data-r="gruen"] { color: var(--r-gruen); }
.rarity-dot[data-r="blau"]  { color: var(--r-blau); }
.rarity-dot[data-r="lila"]  { color: var(--r-lila); }
.rarity-dot[data-r="rot"]   { color: var(--r-rot); }
.rarity-dot.on i { background: currentColor; box-shadow: 0 0 5px currentColor; }
.rarity-dot.on { font-weight: 600; }

/* ---------- Ziehen ------------------------------------------------------ */

.grabbable { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.grabbable:active { cursor: grabbing; }
.is-dragging { opacity: .3; }

.drop-ok {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 45%, transparent), 0 4px 12px -4px var(--shadow);
}
.drop-hot {
  border-color: var(--ok) !important;
  background: color-mix(in srgb, var(--ok) 16%, var(--card)) !important;
  transform: translateY(-2px);
}
.drop-no { opacity: .32; }

.drag-ghost {
  position: fixed; z-index: 999; pointer-events: none;
  background: var(--card); border: 1.5px solid var(--frame); border-radius: 8px;
  padding: 7px 11px; box-shadow: 0 10px 26px -6px var(--shadow-deep);
  display: flex; align-items: center; gap: 9px; max-width: 260px;
  font-size: .9rem; transform: translate(-50%, -50%) rotate(-1.6deg);
}
.drag-ghost .g-icon {
  width: 26px; height: 32px; border-radius: 4px; background: var(--icon-bg);
  display: grid; place-items: center; color: var(--icon-fg); flex: none; overflow: hidden;
}
.drag-ghost .g-icon svg { width: 17px; height: 17px; }
.drag-ghost .g-icon img { width: 100%; height: 100%; object-fit: cover; }
.drag-ghost .g-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Rucksack ---------------------------------------------------- */

.lower-grid {
  display: grid; grid-template-columns: 1.55fr .95fr; gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(12px, 2vw, 22px);
  align-items: start;   /* sonst wird der Rucksack auf die Höhe der Nachbarspalte gezogen */
}
.panel {
  background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border: 1.5px solid var(--rule-strong); border-radius: var(--slot-radius);
  padding: clamp(11px, 1.6vw, 18px);
  box-shadow: 0 2px 8px -4px var(--shadow);
}
.panel-title {
  font-family: var(--font-display); font-size: .96rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; color: var(--ink);
  padding-bottom: 9px; margin-bottom: 13px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.panel-title .count {
  font-family: var(--font-body); font-size: .82rem; letter-spacing: 0;
  text-transform: none; color: var(--ink-faint);
}
.panel-title .count.full { color: var(--accent); font-weight: 600; }

.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
@media (max-width: 700px) { .bp-grid { grid-template-columns: 1fr; } }

.bp-slot {
  display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 9px;
  padding: 5px 7px; border-radius: 6px; border: 1px solid transparent;
  border-bottom: 1px solid var(--rule); min-height: 46px;
  transition: background .12s, border-color .12s;
}
.bp-slot .bp-num {
  font-family: var(--font-display); font-size: .84rem; color: var(--ink-faint);
  text-align: right;
}
.bp-slot .bp-icon {
  width: 32px; height: 32px; border-radius: 4px; background: var(--icon-bg);
  display: grid; place-items: center; color: var(--icon-fg); overflow: hidden;
}
.bp-slot .bp-icon svg { width: 19px; height: 19px; }
.bp-slot .bp-icon img { width: 100%; height: 100%; object-fit: cover; }
.bp-slot .bp-main { min-width: 0; }
.bp-slot .bp-name {
  font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block;
}
.bp-slot .bp-sub { font-size: .74rem; color: var(--ink-faint); }
.bp-slot .bp-qty {
  font-family: var(--font-display); font-size: .84rem; padding: 1px 8px;
  border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-soft);
  white-space: nowrap;
}
.bp-slot.is-empty { background: var(--slot-empty); }
.bp-slot.is-empty .bp-icon { opacity: .3; }
.bp-slot.is-empty .bp-name { color: var(--ink-faint); font-style: italic; font-weight: 400; }
.bp-slot[data-rarity="gruen"] .bp-name { color: var(--r-gruen); }
.bp-slot[data-rarity="blau"]  .bp-name { color: var(--r-blau); }
.bp-slot[data-rarity="lila"]  .bp-name { color: var(--r-lila); }
.bp-slot[data-rarity="rot"]   .bp-name { color: var(--r-rot); }

/* Übergabe-Ablage */
.handover.panel { border-color: var(--accent); border-style: dashed; }
.handover .panel-title { color: var(--accent); border-bottom-color: var(--accent); }
.ho-list { display: grid; gap: 7px; }
.ho-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center;
  padding: 6px 8px; background: var(--card-2); border: 1px solid var(--rule-strong);
  border-radius: 6px;
}
.ho-item .bp-icon {
  width: 32px; height: 32px; border-radius: 4px; background: var(--icon-bg);
  display: grid; place-items: center; color: var(--icon-fg); overflow: hidden;
}
.ho-item .bp-icon svg { width: 19px; height: 19px; }
.ho-item .bp-icon img { width: 100%; height: 100%; object-fit: cover; }
.ho-empty { color: var(--ink-faint); font-style: italic; font-size: .88rem; text-align: center; padding: 10px 0; }
.ho-from { font-size: .72rem; color: var(--ink-faint); }

/* Regeltafel */
.rules-list { display: grid; gap: 11px; }
.rule-line { font-size: .87rem; display: flex; gap: 7px; }
.rule-line::before { content: '•'; color: var(--accent); flex: none; }
.size-rule { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.size-rule .size-icon {
  width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-soft);
}
.size-rule .size-icon svg { width: 26px; height: 26px; }
.size-rule h4 {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1px;
}
.size-rule[data-size="klein"]  h4 { color: var(--r-gruen); }
.size-rule[data-size="mittel"] h4 { color: var(--r-blau); }
.size-rule[data-size="gross"]  h4 { color: var(--r-lila); }
.size-rule p { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.size-rule .ex { color: var(--ink-faint); font-style: italic; }
.rules-foot {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rule);
  font-size: .8rem; text-align: center; font-weight: 600; color: var(--ink-soft);
}

/* ---------- Meldungen --------------------------------------------------- */

.toasts {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 500; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px));
}
.toast {
  background: var(--card); border: 1.5px solid var(--rule-strong); border-left-width: 4px;
  border-radius: 8px; padding: 10px 14px; box-shadow: 0 10px 28px -8px var(--shadow-deep);
  font-size: .9rem; animation: rise .22s ease-out;
}
.toast.err  { border-left-color: var(--accent); }
.toast.good { border-left-color: var(--ok); }
.toast.info { border-left-color: var(--r-blau); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- DM ---------------------------------------------------------- */

.dm-layout { display: grid; gap: clamp(12px, 2vw, 20px); }
.dm-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(12px, 2vw, 20px); align-items: start; }
@media (max-width: 1080px) { .dm-cols { grid-template-columns: 1fr; } }

.override-bar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: 8px; font-size: .88rem;
  background: color-mix(in srgb, var(--warn) 14%, var(--card));
  border: 1px solid var(--warn);
}
.override-bar.on { background: color-mix(in srgb, var(--accent) 18%, var(--card)); border-color: var(--accent); }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { appearance: none; width: 42px; height: 23px; border-radius: 999px;
  background: var(--rule); border: 1px solid var(--rule-strong); position: relative; cursor: pointer; flex: none; }
.switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--card); transition: left .14s;
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { left: 21px; }

.cat-toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 13px; }
.cat-toolbar input[type="search"], .cat-toolbar select, .form-grid input, .form-grid select, .form-grid textarea {
  background: var(--card-2); border: 1px solid var(--rule-strong); border-radius: 6px;
  padding: 6px 9px; font-size: .92rem;
}
.cat-toolbar input[type="search"] { flex: 1 1 150px; min-width: 0; }

.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px;
  /* Der Katalog wächst mit der Kampagne — er scrollt in sich, statt die Seite zu strecken. */
  max-height: 68vh; overflow-y: auto; padding-right: 4px;
}
.cat-card {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px;
  border: 1.5px solid var(--rule-strong); border-left-width: 4px; border-radius: 8px;
  padding: 9px; background: var(--card-2); position: relative;
}
.cat-card[data-rarity="weiss"] { border-left-color: var(--r-weiss); }
.cat-card[data-rarity="gruen"] { border-left-color: var(--r-gruen); }
.cat-card[data-rarity="blau"]  { border-left-color: var(--r-blau); }
.cat-card[data-rarity="lila"]  { border-left-color: var(--r-lila); }
.cat-card[data-rarity="rot"]   { border-left-color: var(--r-rot); }
.cat-card.archived { opacity: .5; }
.cat-card.selected { box-shadow: 0 0 0 2px var(--accent); }
.cat-card .c-icon {
  width: 40px; height: 48px; border-radius: 4px; background: var(--icon-bg);
  display: grid; place-items: center; color: var(--icon-fg); overflow: hidden; align-self: start;
}
.cat-card .c-icon svg { width: 24px; height: 24px; }
.cat-card .c-icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .c-name { font-weight: 600; font-size: .93rem; line-height: 1.25; }
.cat-card .c-meta { font-size: .74rem; color: var(--ink-faint); }
.cat-card .c-eff {
  font-size: .78rem; color: var(--ink-soft); font-style: italic; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-card .c-acts { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.form-grid label { display: grid; gap: 4px; font-size: .78rem; color: var(--ink-soft);
  font-family: var(--font-display); letter-spacing: .07em; text-transform: uppercase; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid textarea { resize: vertical; min-height: 62px; font-family: var(--font-body); }
.form-actions { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }

.icon-pick { display: flex; align-items: center; gap: 10px; }
.icon-pick .prev {
  width: 46px; height: 46px; border-radius: 5px; background: var(--icon-bg);
  border: 1px solid var(--rule-strong); display: grid; place-items: center;
  color: var(--icon-fg); overflow: hidden; flex: none;
}
.icon-pick .prev img { width: 100%; height: 100%; object-fit: cover; }
.icon-pick .prev svg { width: 24px; height: 24px; }

.grant-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
.gp {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--card-2); font-size: .89rem;
}
.gp:hover { border-color: var(--frame); }
.gp.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card-2)); }
.gp input { accent-color: var(--ok); }
.gp .gp-meta { font-size: .74rem; color: var(--ink-faint); margin-left: auto; }

.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ov-card { border: 1.5px solid var(--rule-strong); border-radius: 8px; padding: 11px; background: var(--card-2); }
.ov-head { display: flex; justify-content: space-between; align-items: baseline; gap: 9px;
  padding-bottom: 7px; border-bottom: 1px solid var(--rule); margin-bottom: 9px; }
.ov-head .ov-name { font-family: var(--font-display); font-size: .95rem; }
.ov-head .ov-meta { font-size: .76rem; color: var(--ink-faint); }
.ov-eq { display: grid; gap: 3px; font-size: .8rem; }
.ov-row { display: flex; gap: 7px; }
.ov-row .k { color: var(--ink-faint); min-width: 84px; font-size: .74rem;
  font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.ov-row .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row.empty .v { color: var(--ink-faint); font-style: italic; }
.ov-bars { display: flex; gap: 12px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--rule); font-size: .78rem; color: var(--ink-soft); }
.pill { padding: 1px 8px; border: 1px solid var(--rule-strong); border-radius: 999px; }
.pill.warn { border-color: var(--accent); color: var(--accent); }

.log-list { display: grid; gap: 5px; max-height: 420px; overflow-y: auto; font-size: .82rem; }
.log-row { display: grid; grid-template-columns: 62px 1fr; gap: 9px; padding: 5px 6px;
  border-bottom: 1px solid var(--rule); }
.log-row .lt { color: var(--ink-faint); font-size: .74rem; }
.log-row .la { font-weight: 600; }
.log-row.ovr { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.log-row .badge { font-size: .68rem; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0 6px; margin-left: 5px; white-space: nowrap; }

/* ---------- Karten-Vorschau (Klick auf ein Item) ------------------------ */

.modal-back {
  position: fixed; inset: 0; background: rgba(20,14,8,.62); z-index: 600;
  display: grid; place-items: center; padding: 18px; backdrop-filter: blur(3px);
}
.modal {
  background: linear-gradient(160deg, var(--card), var(--card-2));
  border: 2px solid var(--frame); border-radius: 8px; padding: 20px;
  width: min(480px, 100%); box-shadow: 0 20px 60px -12px #000; position: relative;
}
.modal .m-head {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid var(--rule);
}
/* Lange zusammengesetzte Namen wie „Drachenschuppenharnisch" müssen brechen
   dürfen, sonst sprengt das eine Wort den Rahmen. */
.modal h3 {
  font-size: 1.24rem; margin-bottom: 5px; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: auto;
}
.modal .m-title { min-width: 0; }
.modal .m-meta {
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  font-size: .81rem; color: var(--ink-faint);
}
.modal .m-rar { display: inline-flex; align-items: center; }
.modal .m-rar .rarity-one { display: inline-block; margin-right: 5px; }
.modal .m-icon {
  width: 74px; height: 92px; border-radius: 6px; background: var(--icon-bg);
  border: 1px solid var(--rule-strong); display: grid; place-items: center;
  color: var(--icon-fg); overflow: hidden; flex: none;
}
.modal .m-icon svg { width: 40px; height: 40px; }
.modal .m-icon img { width: 100%; height: 100%; object-fit: cover; }
.modal .m-eff { font-style: italic; color: var(--ink-soft); font-size: .93rem; margin: 0; }
.modal .m-where {
  font-size: .78rem; color: var(--ink-faint); margin: 11px 0 0;
  font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase;
}
.modal .m-acts { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--rule); }
.modal .qty-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: .88rem; }
.modal .qty-row input { width: 68px; text-align: center; background: var(--card-2);
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: 5px; }

/* ---------- Kleinteile -------------------------------------------------- */

.muted { color: var(--ink-faint); }
.center { text-align: center; }
.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Kompakte Ansicht

   Auf dem Blatt steht nur, welcher Gegenstand in welchem Slot liegt — Name und
   ein Punkt für die Seltenheit. Alles Weitere (Werte, Effekt, Stapelgröße)
   steht im Popup, das ein Klick auf den Gegenstand öffnet. Dadurch passen die
   dreizehn Slots samt Figur auf jedem Schirm in den Blick, ohne dass Text
   angeschnitten wird.
   ========================================================================== */

[data-density="compact"] .slot-name-line .k,
[data-density="compact"] .slot-value,
[data-density="compact"] .rarity-row,
[data-density="compact"] .slot-effect { display: none; }

[data-density="compact"] .rarity-one { display: inline-block; }

[data-density="compact"] .slot {
  align-items: center;
}
[data-density="compact"] .slot-body {
  justify-content: center; gap: 2px;
}
[data-density="compact"] .slot-name-line .v {
  border-bottom: none; font-size: clamp(.92rem, 1.5vh, 1.06rem);
  display: flex; align-items: center; min-width: 0;
}
[data-density="compact"] .slot-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-density="compact"] .slot.is-empty .slot-name-line .v { opacity: .6; }
[data-density="compact"] .slot-icon {
  width: clamp(34px, 4.4vh, 44px); height: clamp(34px, 4.4vh, 44px);
}
[data-density="compact"] .slot-icon svg { width: 55%; height: 55%; }

/* Der Rucksack braucht die Größenzeile nicht — sie steht im Popup. */
[data-density="compact"] .bp-slot .bp-sub { display: none; }
[data-density="compact"] .bp-slot { min-height: 40px; }

/* Sichtbarer Hinweis, dass hier etwas zu holen ist. */
[data-density="compact"] .slot:not(.is-empty):hover {
  border-color: var(--frame);
  box-shadow: 0 3px 10px -4px var(--shadow-deep);
}

/* ---------- Höhen-Modus: alles auf einen Blick ------------------------- */

/* --------------------------------------------------------------------------
   Ausrüstung und Silhouette auf einen Blick.

   Ab der dreispaltigen Anordnung richtet sich die Höhe des Gitters nach dem
   Fenster statt nach dem Inhalt: die sechs Karten je Spalte teilen sich die
   verfügbare Höhe, und die Figur füllt, was in ihrer Spalte übrig bleibt.
   `--chrome` ist alles, was über dem Gitter steht (Kopfleiste, Rahmen,
   Charakterzeile, Überschrift) — hier an einer Stelle gepflegt.
   -------------------------------------------------------------------------- */
@media (min-width: 1001px) {
  .equip-grid {
    --chrome: 268px;
    height: clamp(520px, calc(100dvh - var(--chrome)), 1000px);
    align-items: stretch;
  }
  /* `min-height: 0` ist hier das Entscheidende: als Grid-Element gilt sonst
     `min-height: auto`, und dann kann die Spalte nicht unter die Eigenhöhe der
     Figur schrumpfen — ihr Seitenverhältnis würde `height: 100%` aushebeln. */
  .equip-col {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    align-content: stretch;
    height: 100%; min-height: 0;
  }
  .figure-col {
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    height: 100%; min-height: 0;
  }
  .silhouette svg { min-height: 0; }
  /* Karten dürfen schrumpfen; was nicht passt, wird abgeschnitten statt zu quellen. */
  .slot { min-height: 0; overflow: hidden; }

  /* Innenmaße wachsen mit der Fensterhöhe mit. */
  .slot { padding: clamp(5px, .9vh, 9px) 11px clamp(5px, .9vh, 9px) 9px; gap: clamp(7px, 1vw, 11px); }
  .slot-icon { width: clamp(38px, 4.6vh, 52px); height: clamp(48px, 5.9vh, 66px); }
  .slot-icon svg { width: clamp(22px, 2.8vh, 32px); height: clamp(22px, 2.8vh, 32px); }
  .slot-label { font-size: clamp(.66rem, 1.02vh, .78rem); }
  .slot-name { font-size: clamp(.86rem, 1.24vh, .98rem); }
  .slot-line { font-size: clamp(.78rem, 1.12vh, .88rem); }
  .slot-line .k { font-size: clamp(.58rem, .86vh, .66rem); }
  .rarity-dot { font-size: clamp(.6rem, .89vh, .68rem); }
  .slot-effect { font-size: clamp(.72rem, 1.04vh, .82rem); }
  .slot-body { gap: clamp(1px, .3vh, 3px); }
}

/* Wie viele Zeilen Effekttext die Höhe hergibt. */
@media (min-width: 1001px) and (min-height: 1100px) { .slot-effect { -webkit-line-clamp: 3; } }
@media (min-width: 1001px) and (max-height: 1099px) { .slot-effect { -webkit-line-clamp: 2; } }
@media (min-width: 1001px) and (max-height: 930px) {
  .slot-effect { -webkit-line-clamp: 1; }
  /* Knappe Höhe: die Seltenheit trägt ihre Aussage in der Farbe, die Wörter
     sind daneben redundant. Ohne sie bleibt die Reihe einzeilig und verdrängt
     die Wertzeile nicht. */
  .rarity-dot .rl { display: none; }
  .rarity-row { flex-wrap: nowrap; gap: 0 7px; }
  .rarity-dot i { width: 9px; height: 9px; }
  .slot-icon { width: clamp(34px, 5.2vh, 46px); height: clamp(42px, 6.4vh, 58px); }
  /* Der Zeilenabstand ist bei knapper Höhe der größte Posten. */
  .slot-line { line-height: 1.15; }
  .slot-label { line-height: 1.08; }
  .slot-body { gap: 1px; }
}
@media (min-width: 1001px) and (max-height: 660px)  { .slot-effect { display: none; } }

/* Niedrige Fenster (etwa ein 1366×768-Laptop): noch eine Stufe gedrängter,
   damit die dreizehn Slots samt Figur trotzdem in den Blick passen. */
@media (min-width: 1001px) and (max-height: 860px) {
  .equip-grid { --chrome: 232px; gap: 7px; }
  .equip-col { gap: 7px; }
  .rarity-row { gap: 2px 7px; }
  .sheet-title { margin: 0 0 10px; }
  .sheet-title h2 { font-size: clamp(1.5rem, 3.4vh, 2.2rem); }
  .char-head { padding-bottom: 7px; }
}

@media (min-width: 1001px) and (max-height: 700px) {
  /* Darunter ist ehrlich kein Platz mehr für alles — dann darf es scrollen. */
  .equip-grid { height: auto; align-items: start; }
  .equip-col, .figure-col { height: auto; grid-template-rows: none; }
  .slot-effect { -webkit-line-clamp: 2; }
}
.figure-col {
  display: grid; gap: 12px; justify-items: center;
  position: relative; padding-top: 6px;
}
.silhouette {
  color: var(--ink); opacity: .8;
  width: 100%; min-height: 0; min-width: 0;
  display: flex; justify-content: center;
}
/* Im Dunkeln wäre die helle Tinte als Vollfläche zu dominant. */
[data-theme="dark"] .silhouette { color: var(--ink-faint); opacity: .55; }
/* preserveAspectRatio im SVG hält die Proportion, egal ob Höhe oder Breite begrenzt. */
.silhouette svg { width: 100%; height: 100%; display: block; }

/* ---------- Schmale Bildschirme ---------------------------------------- */

/* Unterhalb der dreispaltigen Anordnung fließt alles natürlich; die Figur wird
   über ihre Höhe begrenzt, damit man auf dem Handy nicht an ihr vorbeiscrollt. */
@media (max-width: 1000px) {
  .equip-grid { grid-template-columns: 1fr 1fr; }
  .figure-col { grid-column: 1 / -1; order: -1; }
  .silhouette { height: clamp(180px, 27vh, 300px); }
  .lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .equip-grid { grid-template-columns: 1fr; }
  .char-head { grid-template-columns: 1fr; gap: 9px; }
  .silhouette { height: clamp(170px, 26vh, 220px); }
  .cat-grid { grid-template-columns: 1fr; }
}

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

@media print {
  .topbar, .toasts, .handover, .override-bar { display: none !important; }
  body { background: #fff; }
}