/* Freunde & Clan (web/js/freunde.js): im Stil der übrigen Fenster – Pergament-Schilder mit Messingöse, Messingknöpfe, Wachssiegel
   als Marke. Tippflächen mindestens 44 px, keine Bewegung (auch nicht ohne „Bewegung reduzieren“). */

/* Menüeintrag: im Kopf nur das Symbol (schmale Fenster), im Menü mit Namen; Marke als Wachssiegel mit Zahl */
.fc-btn { position: relative; }
.fc-btn canvas.icon { width: 24px; height: 24px; }
.fc-label { display: none; }
.menu .fc-label { display: inline; }
@media (min-width: 900px) { .top .fc-label { display: inline; } }
.fc-marke { position: absolute; right: -10px; top: -12px; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px;
  background: var(--wine); color: var(--paper); font: 700 var(--schrift)/22px var(--font); text-align: center; text-shadow: none;
  box-shadow: 0 0 0 2px var(--ink), 2px 2px 0 2px var(--schatten-tiefer); pointer-events: none; }
.fc-marke[hidden] { display: none; }
.top .fc-btn { margin-right: 6px; }
.top .fc-marke { right: -14px; top: -14px; }
.menu .fc-marke { position: static; margin-left: 2px; box-shadow: 0 0 0 2px var(--ink); }
body.game .menu-btn.fc-hat::after { content: ""; position: absolute; right: -6px; top: -8px; width: 16px; height: 16px; border-radius: 8px;
  background: var(--wine); box-shadow: 0 0 0 2px var(--ink); }

/* Listen: Namen mit Abzeichen, darunter Ort und „zuletzt da“, Knöpfe darunter bzw. rechts */
.fc-list { display: grid; gap: 8px; margin: 6px 0 10px; }
.fc-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 4px 4px 4px 20px; position: relative; min-height: 48px;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; }
.fc-list > li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: url("/img/ui/hole.png") center / 12px 12px no-repeat; }
.fc-list > li.note { display: block; padding-left: 22px; }
.fc-person > strong { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px 0; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.fc-person > .note { flex: 1 0 100%; order: 2; }
.fc-person > .fc-act { order: 3; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 0 4px; }
.fc-person .fc-act .btn.small { padding: 0 6px; }
.fc-person .badge { margin-left: 6px; }
.fc-person.asleep, .fc-person.gesperrt { opacity: .65; }
@media (min-width: 640px) {
  .fc-person > .fc-act { flex: 0 0 auto; order: 1; margin-left: auto; justify-content: flex-end; }
  .fc-person > .note { order: 2; }
}
.fc-clanzeile { padding-left: 74px !important; min-height: 64px; }
.fc-clanzeile canvas.wappen { position: absolute; left: 20px; top: 50%; margin-top: -24px; }

/* Wappen: 24 × 24 Pixel, hart vergrößert */
canvas.wappen { width: 72px; height: 72px; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
canvas.wappen.klein { width: 48px; height: 48px; }
canvas.wappen.gross { width: 96px; height: 96px; }
.fc-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.fc-kopf .fc-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.fc-kopf .btn { margin-top: 6px; }
.fc-warte { color: var(--wine); font-weight: 700; }
.fc-neu { border-image-source: url("/img/ui/panel-butter.png"); }

/* Wappen wählen: Vorschau groß, darunter Symbole und Farben als Messingfelder (56 px) */
.fc-wappen { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; margin: 8px 0; }
.fc-wappen > div { flex: 1 1 240px; min-width: 0; }
.fc-wahl { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-wahl .fc-sym { width: 64px; min-width: 64px; height: 68px; padding: 0; margin: 0; }   /* innen 48 × 48 (Rand 8 / 12 px) */
.fc-wahl .fc-sym canvas.wappen { width: 48px; height: 48px; }   /* 24er-Wappen doppelt */
.fc-search { display: grid; gap: 6px; margin: 6px 0; }
.fc-box h3 { display: flex; align-items: baseline; gap: 8px; }
.fc-box h3 .right { margin-left: auto; }
.fc-search .fc-list:empty { display: none; }

/* Aufklappen (Clan gründen, Clan ändern): der Knopf ist das <summary> */
.fc-gruenden, .fc-aendern { margin: 10px 0 4px; }
.fc-gruenden > summary, .fc-aendern > summary { list-style: none; display: inline-flex; cursor: pointer; }
.fc-gruenden > summary::-webkit-details-marker, .fc-aendern > summary::-webkit-details-marker { display: none; }
.fc-gruenden[open] > summary, .fc-aendern[open] > summary { border-image-source: url("/img/ui/btn-butter-down.png"); padding-top: 4px; }
.fc-gruenden input, .fc-aendern input { margin: 6px 0; }
.fc-box:empty { display: none; }