/* Ranglisten und Freunde (ui/social.js): Karten im Look der Raum-Karte (.rc-root/.rc-card/.ol-card aus online.css), Reiter je Board, Alle/Freunde,
   Zeilen wie die Lobby (Farb-Sticker, Name, Wert), Freundes-Code wie der Raum-Code (.ol-code, .ol-codein), Knöpfe im Zahnrad-Fenster. */
.so-card { gap: 7px; }
.so-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 40px; min-height: 44px; }
.so-headic { width: 44px; height: 44px; margin: -4px 0; filter: drop-shadow(0 2px 2px #0003); }
.so-head h2 { margin: 0; font-size: 23px; font-weight: 700; color: #5e3a19; }
.so-body { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.so-sub { text-align: center; font-size: 14px; font-weight: 600; color: #a0784e; }
.so-txt { margin: 2px 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.25; color: #8a5a2b; }
.so-empty { padding: 14px 6px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.25; color: #b0906a; }
.so-empty.err { color: #c0392b; }
.so-login { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 2px; }
.so-login .wood { min-width: 62%; }

/* Reiter je Board und Umschalter Alle/Freunde */
.so-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.so-tab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 1px 4px; border-radius: 13px; background: #f0dfc2;
  box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #d5bb90; font-size: 12.5px; font-weight: 700; color: #8a5a2b; }
.so-tab img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 1px 1px #0003); }
.so-tab.on { background: linear-gradient(#ffe08a, #f5b331); color: #5e3a19; box-shadow: inset 0 0 0 2px #d68a12, 0 2px 0 #a8650a; }
.so-tab:active { transform: translateY(1px); }
.so-scope { display: flex; gap: 3px; padding: 3px; border-radius: 15px; background: #e6d0aa; box-shadow: inset 0 2px 3px #0000001a; }
.so-scope button { flex: 1; padding: 7px 4px; border-radius: 12px; font-size: 15.5px; font-weight: 700; color: #8a5a2b; }
.so-scope button.on { background: #fffaf0; color: #5e3a19; box-shadow: 0 2px 0 #c9a876; }
.so-scope button:disabled { opacity: .45; }

/* Zeilen */
.so-list { display: flex; flex-direction: column; gap: 5px; }
.so-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 10px 3px 6px; border-radius: 14px;
  background: #f0dfc2; box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #d5bb90; }
.so-row.me { background: #f6e6c3; box-shadow: inset 0 0 0 2px #f5a623aa, 0 1px 0 #d5bb90; }
.so-rank { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-size: 14px; font-weight: 700; color: #8a5a2b;
  background: #e6d0a8; box-shadow: inset 0 1px 2px #0002; }
.so-rank.r1 { color: #6b4300; background: radial-gradient(circle at 40% 35%, #fff2b0, #f5b324); box-shadow: 0 0 0 2px #c98a0e, 0 2px 0 #9a6608; }
.so-rank.r2 { color: #4d5660; background: radial-gradient(circle at 40% 35%, #ffffff, #b9c2ca); box-shadow: 0 0 0 2px #8e99a3, 0 2px 0 #6b7680; }
.so-rank.r3 { color: #5e3214; background: radial-gradient(circle at 40% 35%, #ffd9b0, #cd8549); box-shadow: 0 0 0 2px #9c5a26, 0 2px 0 #74401a; }
.so-stk { flex: none; width: 38px; height: 38px; display: block; filter: drop-shadow(0 2px 2px #0003); }
.so-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: #5e3a19; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-name em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #f5a623; border-radius: 8px; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
.so-val { flex: none; font-size: 15px; font-weight: 700; color: #6d3f18; white-space: nowrap; }
.so-mine { min-height: 20px; }

/* Freunde */
.so-code b { font-size: 34px; letter-spacing: 5px; }
.so-codein { letter-spacing: 6px; font-size: 26px; }
.so-msg.bad { color: #c0392b; }
.so-row.fr { padding-right: 6px; }
.so-name .so-nm { display: block; overflow: hidden; text-overflow: ellipsis; }
.so-st { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #a0784e; }
.so-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c9b08a; }
.so-row.on .so-dot { background: #5fb52c; box-shadow: 0 0 0 2px #5fb52c44; }
.so-row.on .so-st { color: #3f8a1e; }
.so-join { flex: none; font-size: 14px; padding: 7px 10px 8px; }
.so-del { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: #e9d5b0; border: 2px solid #c9a06c; }
.so-del:not(.ask)::before, .so-del:not(.ask)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; margin: -1.5px -6px; border-radius: 2px;
  background: #8a5a2b; transform: rotate(45deg); }
.so-del:not(.ask)::after { transform: rotate(-45deg); }
.so-del.ask { width: auto; height: 30px; padding: 0 10px; border-radius: 15px; border-color: #9c1f22; background: #e5383b; color: #fff; font-size: 13px; font-weight: 700; }

/* Knöpfe im Zahnrad-Fenster */
.so-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.wood.so-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; font-size: 15px; }
.so-btn img { width: 38px; height: 38px; margin-top: -2px; filter: drop-shadow(0 1px 1px #0003); }
.so-tab[data-board="siege"] img { transform: scale(1.3); }