/* Kopfgeld-Brett (client/bounty.js) – Steckbriefe auf Pergament */
.bb { --bb-ink: #ebe1cc; --bb-dim: rgba(235,225,204,0.66); --bb-gold: #f0b85a; color: var(--bb-ink); }
.bb .hidden { display: none !important; }
.bb-lede { margin: 0 0 14px; max-width: 66ch; font-size: 14px; line-height: 1.5; color: var(--bb-dim); }
.bb-onme { margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; background: rgba(120,18,14,0.45); border: 1px solid rgba(255,120,100,0.55); color: #ffd5cc; font-size: 14px; }
.bb-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.bb-poster {
  position: relative; padding: 12px 10px 10px; text-align: center; cursor: pointer; color: #3a2414;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,246,220,0) 55%, rgba(120,80,30,0.35) 100%),
    linear-gradient(175deg, #efdcb0, #e2c58c 60%, #d4b072);
  border-radius: 3px; box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(90,55,20,0.35);
  transform: rotate(-1.2deg); transition: transform .15s;
}
.bb-poster:nth-child(even) { transform: rotate(1deg); }
.bb-poster::before { content: ''; position: absolute; top: 6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9c3b6, #5b5248); box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.bb-poster:hover, .bb-poster:focus-visible { transform: rotate(0) scale(1.03); }
.bb-poster.is-top { background: radial-gradient(120% 90% at 50% 40%, rgba(255,246,220,0) 55%, rgba(140,60,20,0.4) 100%), linear-gradient(175deg, #f4dba6, #e7bf73 60%, #d6a254); }
.bb-poster.is-me { outline: 2px solid #c0392b; cursor: default; }
.bb-wanted { margin-top: 6px; font-family: 'Cinzel', Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #6b1d10; }
.bb-name { margin: 2px 0 6px; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sum { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: #4a2a0c; }
.bb-sum img { width: 20px; height: 20px; }
.bb-count { margin-top: 2px; font-size: 12px; color: rgba(58,36,20,0.75); }
.bb-empty { grid-column: 1 / -1; color: var(--bb-dim); font-style: italic; }
.bb-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding: 12px; border-radius: 10px; background: rgba(5,12,18,0.55); border: 1px solid rgba(240,184,90,0.28); }
.bb-form h4, .bb-mine h4 { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 600; color: #fff3dc; }
.bb-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--bb-dim); }
.bb-form input { padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 15px; background: rgba(3,10,16,0.7); color: #fff3dc; border: 1px solid rgba(147,179,182,0.35); }
.bb-form input:focus { outline: none; border-color: var(--bb-gold); box-shadow: 0 0 0 3px rgba(240,184,90,0.18); }
.bb-form button { padding: 9px 18px; border-radius: 6px; cursor: pointer; font: 600 14px Georgia, serif; border: 0; background: linear-gradient(180deg, #f2c464, #d9a441); color: #1c1208; }
.bb-form button:disabled { opacity: 0.45; cursor: default; }
.bb-calc { grid-column: 1 / -1; font-size: 13px; color: var(--bb-dim); }
.bb-mine { margin-top: 14px; }
.bb-mine ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.bb-mine li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,0.04); font-size: 14px; }
.bb-mine em { font-style: normal; font-size: 12px; color: var(--bb-dim); }
.bb .bb-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 9800; max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 8px; font-size: 14px;
  background: rgba(60,20,14,0.97); border: 1px solid rgba(255,140,120,0.5); color: #ffd9cf; box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.bb .bb-toast.ok { background: rgba(16,44,24,0.97); border-color: rgba(120,210,140,0.55); color: #d6f5dc; }
.bb .bb-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .bb-form { grid-template-columns: 1fr; } .bb-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bb-poster, .bb .bb-toast { transition: none; } }

#bounty-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 760px); z-index: 7; pointer-events: auto; }
#bounty-panel.hidden { display: none; }
#bounty-panel .admin-card { width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
#bounty-body { overflow-y: auto; padding: 4px 2px 6px; }

/* ---------- Freunde werben (client/referral.js) ---------- */
.rf { --rf-ink: #ebe1cc; --rf-dim: rgba(235,225,204,0.66); --rf-gold: #f0b85a; color: var(--rf-ink); }
.rf-lede { margin: 0 0 14px; max-width: 66ch; font-size: 14px; line-height: 1.5; color: var(--rf-dim); }
.rf-link { margin: 0 0 16px; padding: 12px; border-radius: 10px; background: rgba(5,12,18,0.55); border: 1px solid rgba(240,184,90,0.35); }
.rf-link label { display: block; margin: 0 0 6px; font-size: 13px; color: var(--rf-gold); font-weight: 600; }
.rf-link-row { display: flex; gap: 8px; }
.rf-link-row input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 14px; background: rgba(3,10,16,0.7); color: #fff3dc; border: 1px solid rgba(147,179,182,0.35); }
.rf-link-row button { padding: 8px 16px; border-radius: 6px; cursor: pointer; font: 600 14px Georgia, serif; border: 0; background: linear-gradient(180deg, #f2c464, #d9a441); color: #1c1208; white-space: nowrap; }
.rf-link small { display: block; margin-top: 6px; font-size: 12px; color: var(--rf-dim); }
.rf-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.rf-step { position: relative; padding: 10px; border-radius: 8px; background: rgba(5,12,18,0.55); border: 1px solid rgba(147,179,182,0.18); }
.rf-step.rf-start { border-color: rgba(127,211,200,0.5); }
.rf-step h5 { margin: 0; font-size: 15px; color: #fff3dc; }
.rf-step > span { font-size: 12px; color: var(--rf-dim); }
.rf-rewards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.rf-rewards li { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.rf-rewards img { width: 18px; height: 18px; border-radius: 4px; }
.rf-h { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #fff3dc; }
.rf-h em { font-style: normal; color: var(--rf-gold); margin-left: 4px; }
.rf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rf-list li { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(80px, 160px) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,0.04); font-size: 14px; }
.rf-lvl { font-size: 12px; color: var(--rf-dim); }
.rf-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,0.45); overflow: hidden; }
.rf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7fd3c8, #f0b85a); }
.rf-chips { display: flex; gap: 4px; }
.rf-chip { min-width: 26px; padding: 1px 5px; border-radius: 999px; font-size: 11px; text-align: center; border: 1px solid rgba(233,226,208,0.25); color: var(--rf-dim); }
.rf-chip.on { background: var(--rf-gold); border-color: var(--rf-gold); color: #1c1208; font-weight: 700; }
.rf-empty { color: var(--rf-dim); font-style: italic; }
.rf-by { margin: 12px 0 0; font-size: 13px; color: var(--rf-dim); }
.rf-fine { margin: 10px 0 0; font-size: 12px; color: var(--rf-dim); }
@media (max-width: 640px) { .rf-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rf-list li { grid-template-columns: minmax(0, 1fr) auto; } .rf-bar { display: none; } }
#referral-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 760px); z-index: 7; pointer-events: auto; }
#referral-panel.hidden { display: none; }
#referral-panel .admin-card { width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
#referral-body { overflow-y: auto; padding: 4px 2px 6px; }

/* ---------- Flaggen-Editor (client/flag.js) ---------- */
.fe { color: #ebe1cc; }
.fe-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 12px; }
.fe-preview { width: 300px; height: 200px; border-radius: 8px; background: radial-gradient(120% 100% at 30% 20%, rgba(80,140,170,0.35), rgba(5,14,22,0.8)); }
.fe-info h4 { margin: 0 0 6px; font-size: 17px; color: #fff3dc; }
.fe-info p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: rgba(235,225,204,0.7); }
.fe-save { padding: 9px 18px; border-radius: 6px; cursor: pointer; font: 600 14px Georgia, serif; border: 0; background: linear-gradient(180deg, #f2c464, #d9a441); color: #1c1208; }
.fe-hoist { margin-left: 8px; padding: 8px 16px; border-radius: 6px; cursor: pointer; font: 600 14px Georgia, serif; background: transparent; color: #ebe1cc; border: 1px solid rgba(235,225,204,0.35); }
.fe-hoist.lowered { border-color: rgba(242,196,100,0.7); color: #f2c464; }
.fe-msg { min-height: 1.2em; margin-top: 6px; font-size: 13px; color: #ff9a86; }
.fe-msg.ok { color: #9fe2ad; }
.fe-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(233,226,208,0.08); }
.fe-row > span { font-size: 13px; color: rgba(235,225,204,0.7); }
.fe-pats, .fe-sws, .fe-embs { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-pat, .fe-emb { padding: 3px; border-radius: 6px; border: 1px solid rgba(233,226,208,0.2); background: rgba(5,12,18,0.55); cursor: pointer; line-height: 0; }
.fe-pat canvas { width: 42px; height: 28px; border-radius: 2px; }
.fe-emb canvas { width: 32px; height: 32px; }
.fe-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.5); background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.fe-pat.on, .fe-emb.on { border-color: #f0b85a; box-shadow: 0 0 0 2px rgba(240,184,90,0.35); }
.fe-sw.on { outline: 2px solid #f0b85a; outline-offset: 2px; }
.fe [data-k]:focus-visible { outline: 2px solid #f0b85a; outline-offset: 2px; }
.fg-tabs { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid rgba(240,184,90,0.28); }
.fg-tabs button { padding: 8px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: rgba(235,225,204,0.66); font: 600 15px Georgia, serif; cursor: pointer; margin-bottom: -1px; }
.fg-tabs button.active { color: #f0b85a; border-bottom-color: #f0b85a; }
.fg-note { font-size: 13px; color: rgba(235,225,204,0.7); margin: 0 0 10px; }
@media (max-width: 640px) { .fe-top { grid-template-columns: 1fr; } .fe-preview { width: 100%; height: auto; aspect-ratio: 3 / 2; } .fe-row { grid-template-columns: 1fr; } }
#flag-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 760px); z-index: 7; pointer-events: auto; }
#flag-panel.hidden { display: none; }
#flag-panel .admin-card { width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
#flag-body { overflow-y: auto; padding: 4px 2px 6px; }
/* Eigenes Gildenflaggen-Bild (Admin-Freigabe) */
.fg-upload { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 14px; padding: 12px; border-radius: 10px; background: rgba(5,12,18,0.55); border: 1px solid rgba(214,178,102,0.3); color: #ebe1cc; }
.fg-upload[hidden] { display: none; }
.fgu-preview { aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, rgba(255,255,255,0.08) 8px 16px); border: 1px solid rgba(214,178,102,0.45); }
.fgu-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fgu-preview img[hidden], .fgu-preview span[hidden] { display: none; }
.fgu-preview span { font-size: 12px; color: rgba(235,225,204,0.5); }
.fgu-info h4 { margin: 0 0 4px; font-size: 15px; color: #fff3dc; }
.fgu-info p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: rgba(235,225,204,0.72); max-width: 60ch; }
.fgu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fgu-pick, .fgu-send, .fgu-clear { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 6px; cursor: pointer; font: 600 13px Georgia, serif; }
.fgu-pick { border: 1px solid rgba(235,225,204,0.4); color: #ebe1cc; background: rgba(255,255,255,0.04); }
.fgu-pick.disabled { opacity: 0.45; pointer-events: none; }
.fgu-pick:focus-within { outline: 2px solid #fff3dc; outline-offset: 2px; }
.fgu-send { border: 0; background: linear-gradient(180deg, #f2c464, #d9a441); color: #1c1208; }
.fgu-send:disabled { opacity: 0.45; cursor: default; }
.fgu-clear { border: 1px solid rgba(255,154,134,0.5); background: transparent; color: #ff9a86; }
.fgu-clear[hidden] { display: none; }
.fgu-status { min-height: 1.2em; margin-top: 8px; font-size: 13px; color: #9fe2ad; }
.fgu-status.bad { color: #ff9a86; }
@media (max-width: 560px) { .fg-upload { grid-template-columns: 1fr; } .fgu-preview { max-width: 240px; } }
#flag-review-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 620px); z-index: 8; pointer-events: auto; }
#flag-review-panel.hidden { display: none; }
#flag-review-panel .admin-card { width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
#flag-review-body { overflow-y: auto; padding: 4px 2px 6px; color: #ebe1cc; }
.fr-hint { margin: 0 0 10px; font-size: 13px; color: rgba(235,225,204,0.72); }
.fr-empty { margin: 8px 0; font-style: italic; color: rgba(235,225,204,0.6); }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-list li { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 8px; background: rgba(5,12,18,0.55); border: 1px solid rgba(147,179,182,0.2); }
.fr-flag { aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; border: 1px solid rgba(214,178,102,0.45); }
.fr-flag img { width: 100%; height: 100%; display: block; image-rendering: auto; }
.fr-meta { display: flex; flex-direction: column; gap: 4px; }
.fr-meta small { font-size: 12px; color: rgba(235,225,204,0.6); }
.fr-btns { display: flex; gap: 8px; margin-top: 8px; }
.fr-btns button { padding: 7px 14px; border-radius: 6px; cursor: pointer; font: 600 13px Georgia, serif; }
.fr-ok { border: 0; background: linear-gradient(180deg, #8fd6a0, #4f9d63); color: #0b1c10; }
.fr-no { border: 1px solid rgba(255,154,134,0.6); background: transparent; color: #ff9a86; }
.fr-btns button:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 560px) { .fr-list li { grid-template-columns: 1fr; } }

/* ---------- Schiffsrollen ---------- */
.rl-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: rgba(235,225,204,0.7); max-width: 66ch; }
.rl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: rgba(5,12,18,0.55); border: 1px solid rgba(147,179,182,0.2); color: #ebe1cc; }
.rl-card.is-mine { border-color: #f0b85a; box-shadow: 0 0 0 1px rgba(240,184,90,0.35) inset; }
.rl-head { display: flex; align-items: center; gap: 10px; }
.rl-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 40% 35%, rgba(240,184,90,0.35), rgba(0,0,0,0.5)); border: 1px solid rgba(240,184,90,0.55); }
.rl-head h4 { margin: 0; font-size: 16px; color: #fff3dc; }
.rl-head small { display: block; font-size: 12px; color: rgba(235,225,204,0.6); }
.rl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.rl-list li.up::before { content: '▲ '; color: #9fe2ad; font-size: 10px; }
.rl-list li.down::before { content: '▼ '; color: #ff9a86; font-size: 10px; }
.rl-ab { padding: 7px 9px; border-radius: 6px; background: rgba(240,184,90,0.08); border-left: 3px solid #f0b85a; font-size: 13px; line-height: 1.4; }
.rl-ab b { color: #f0b85a; }
.rl-card button { align-self: flex-start; margin-top: auto; padding: 7px 14px; border-radius: 6px; cursor: pointer; font: 600 14px Georgia, serif; border: 0; background: linear-gradient(180deg, #f2c464, #d9a441); color: #1c1208; }
.rl-card button:disabled { opacity: 0.5; cursor: default; }
.rl-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: #ff9a86; }
.rl-msg.ok { color: #9fe2ad; }
@media (max-width: 640px) { .rl-grid { grid-template-columns: 1fr; } }
#role-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 760px); z-index: 7; pointer-events: auto; }
#role-panel.hidden { display: none; }
#role-panel .admin-card { width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
#role-body { overflow-y: auto; padding: 4px 2px 6px; }
/* Fähigkeiten-Knopf neben der Hotbar */
#role-ability { position: absolute; right: -66px; bottom: 4px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2a14, #120c06); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5); pointer-events: auto; }
#role-ability.hidden { display: none; }
#role-ability .ra-ring { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); }
#role-ability .ra-track { fill: none; stroke: rgba(240,184,90,0.35); stroke-width: 3; }
#role-ability .ra-fill { fill: none; stroke: #f0b85a; stroke-width: 3.5; stroke-dasharray: 157.08; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
#role-ability .ra-icon { position: relative; font-size: 24px; line-height: 56px; }
#role-ability .ra-time { position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px Georgia, serif; color: #fff; text-shadow: 0 1px 3px #000; }
#role-ability.cooling .ra-icon { opacity: 0.35; }
#role-ability.ready { box-shadow: 0 0 0 2px rgba(240,184,90,0.6), 0 4px 14px rgba(0,0,0,0.5); }
#role-ability.party { box-shadow: 0 0 0 3px rgba(255,120,90,0.8), 0 0 18px rgba(255,120,90,0.5); }
#role-ability kbd { position: absolute; right: -2px; bottom: -2px; padding: 0 4px; border-radius: 4px; font: 700 10px/14px Georgia, serif; background: #1c1208; color: #f0b85a; border: 1px solid rgba(240,184,90,0.6); }
#role-ability:focus-visible { outline: 2px solid #f0b85a; outline-offset: 3px; }
@media (max-width: 900px) { #role-ability { right: 4px; bottom: calc(100% + 8px); } }
/* Handy: Rollen-Knopf links neben der Schnellwahl statt über der HP-Leiste */
@media (max-width: 600px) {
  #combat-row #role-ability { --rs: calc((100vw - 60px) / 9 * 0.85); position: relative; inset: auto; order: -2; flex: 0 0 auto; align-self: flex-start; width: var(--rs); height: var(--rs); margin: 0 4px 0 0; box-shadow: none; }
  #combat-row #role-ability.ready { box-shadow: 0 0 0 1px rgba(240,184,90,0.6); }
  #combat-row #role-ability .ra-ring { width: 100%; height: 100%; }
  #combat-row #role-ability .ra-icon { font-size: 17px; line-height: var(--rs); }
  #combat-row #role-ability .ra-time { font-size: 13px; }
  #combat-row #role-ability kbd { display: none; }
  #combat-row #role-ability:not(.hidden) ~ #quickbar { flex: 1 1 0; min-width: 0; }
  #combat-row #role-ability:not(.hidden) ~ #quickbar .qs-slot { flex: 1 1 0; width: auto; min-width: 0; }
}