@font-face {
  font-family: "Friz Quadrata";
  src: url("/static/fonts/frizqt.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #07090d;
  --bg-2: #10141c;
  --panel: rgba(16, 20, 28, 0.92);
  --panel-border: #3a3220;
  --gold: #f0c050;
  --gold-dim: #a8873a;
  --text: #e9e4d8;
  --muted: #8f8a7e;
  --error: #ff6b5b;
  --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd;
  --q4: #a335ee; --q5: #ff8000; --q6: #e6cc80; --q7: #e6cc80;
  --heading: "Friz Quadrata", "Palatino Linotype", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(240, 192, 80, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
  background-color: var(--bg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, .brand, .charname, .button { font-family: var(--heading); font-weight: normal; }
h1 { font-size: 1.7rem; margin: 0 0 .3rem; color: var(--gold); }
h2 { font-size: 1.25rem; margin: 0 0 .3rem; color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.error { color: var(--error); }
.online { color: var(--q2); }

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

/* --- Kopfzeile --- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 12px 24px;
  background: rgba(0, 0, 0, .55);
  border-bottom: 1px solid var(--panel-border);
}
.brand { font-size: 1.5rem; color: var(--gold); letter-spacing: .04em; text-shadow: 0 0 12px rgba(240,192,80,.35); }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-left: auto; }
.topbar form { margin: 0; }
.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
.link-button:hover { color: var(--gold); }

input {
  font: inherit; color: var(--text);
  background: #05070a; border: 1px solid var(--panel-border); border-radius: 4px;
  padding: 8px 10px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
select {
  font: inherit; color: var(--text); width: 100%;
  background: #05070a; border: 1px solid var(--panel-border); border-radius: 4px; padding: 8px 10px;
}
.search input { width: 220px; padding: 6px 10px; }

.button {
  display: inline-block; cursor: pointer;
  color: #1a1206; font-size: 1rem; letter-spacing: .03em;
  background: linear-gradient(180deg, #f6d27a, #c8922c);
  border: 1px solid #6b4d14; border-radius: 4px; padding: 9px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.button:hover { filter: brightness(1.08); }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(240,192,80,.04);
  margin-bottom: 20px;
}
.page-title { margin-bottom: 16px; }

/* --- Login --- */
.login { max-width: 380px; margin: 60px auto; text-align: center; }
.login form { display: grid; gap: 14px; text-align: left; margin-top: 18px; }
.login label { display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }
.login .button { margin-top: 6px; }
.login-emblem { width: 64px; height: 64px; border: 2px solid var(--gold-dim); border-radius: 6px; }

.searchbox { display: flex; gap: 10px; }

/* --- Charakterkarten --- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.charcard {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; padding: 12px;
  color: var(--text); transition: border-color .15s, transform .15s;
}
.charcard:hover { border-color: var(--gold-dim); transform: translateY(-1px); text-decoration: none; }
.charcard-text { display: grid; min-width: 0; }
.charcard .charname { font-size: 1.2rem; }

.portrait { position: relative; flex: none; width: 56px; height: 56px; }
.portrait > img:first-child { width: 100%; height: 100%; border: 2px solid var(--gold-dim); border-radius: 50%; }
.class-badge {
  position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px;
  border: 1px solid #000; border-radius: 50%;
}
.portrait.big { width: 96px; height: 96px; }
.portrait.big .class-badge { width: 38px; height: 38px; }

/* Klassenfarben */
.class-1 { color: #c79c6e; } .class-2 { color: #f58cba; } .class-3 { color: #abd473; }
.class-4 { color: #fff569; } .class-5 { color: #ffffff; } .class-6 { color: #c41f3b; }
.class-7 { color: #0070de; } .class-8 { color: #69ccf0; } .class-9 { color: #9482c9; }
.class-11 { color: #ff7d0a; }

/* --- Charakterseite --- */
.char-header {
  display: flex; align-items: center; gap: 22px;
  padding: 24px; margin-bottom: 20px;
  border: 1px solid var(--panel-border); border-radius: 6px;
  background: linear-gradient(90deg, rgba(240,192,80,.08), transparent 70%), var(--panel);
}
.char-header h1 { font-size: 2.2rem; margin: 0; }
.char-header p { margin: 2px 0; }
.guild { color: var(--q2); font-family: var(--heading); }

.paperdoll {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px) 1fr;
  grid-template-areas: "left center right" "weapons weapons weapons";
  gap: 16px;
  margin-bottom: 20px;
}
.slots.left { grid-area: left; }
.slots.right { grid-area: right; }
.center { grid-area: center; }
.slots.weapons { grid-area: weapons; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; }
.slots { display: grid; gap: 8px; align-content: start; }

.slot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.slots.right .slot { flex-direction: row-reverse; text-align: right; }
.slot-text { display: grid; min-width: 0; }
.item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.item-icon {
  flex: none; display: block; width: 46px; height: 46px; padding: 0;
  border: 2px solid #444; border-radius: 5px; background: #000; cursor: help;
  box-shadow: 0 0 0 1px #000;
}
.item-icon img { display: block; width: 100%; height: 100%; border-radius: 3px; }
.item-icon.empty { cursor: default; opacity: .55; }
.item-icon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.item-icon.q0 { border-color: var(--q0); } .item-icon.q1 { border-color: #c8c8c8; }
.item-icon.q2 { border-color: var(--q2); } .item-icon.q3 { border-color: var(--q3); }
.item-icon.q4 { border-color: var(--q4); } .item-icon.q5 { border-color: var(--q5); }
.item-icon.q6, .item-icon.q7 { border-color: var(--q6); }

.q0 { color: var(--q0); } .q1 { color: var(--q1); } .q2 { color: var(--q2); }
.q3 { color: var(--q3); } .q4 { color: var(--q4); } .q5 { color: var(--q5); }
.q6, .q7 { color: var(--q6); }

.stat-block { text-align: center; }
.ilvl { display: grid; margin-bottom: 14px; }
.big-number { font-family: var(--heading); font-size: 2.6rem; color: var(--gold); line-height: 1.1; }
.stat-block dl { margin: 0; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.stat-block dt { color: var(--muted); }
.stat-block dd { margin: 0; text-align: right; }
.money span { margin-left: 8px; }
.money span:first-child { margin-left: 0; }
.money span::after {
  content: ""; display: inline-block; width: .65em; height: .65em; margin-left: 3px;
  border-radius: 50%; vertical-align: .05em;
}
.money .gold::after { background: #f2c94c; }
.money .silver::after { background: #c0c6cc; }
.money .copper::after { background: #c47a3a; }

/* Freunde */
.friends { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.friends li {
  display: grid; grid-template-columns: 24px minmax(90px, auto) 1fr 120px 100px;
  align-items: center; gap: 10px;
}
.friends img { width: 24px; height: 24px; border-radius: 50%; }
.bond { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 4px; background: #1c1f27; overflow: hidden; }
.bond::-webkit-progress-bar { background: #1c1f27; }
.bond::-webkit-progress-value { background: linear-gradient(90deg, #b03030, var(--gold), var(--q2)); }
.bond::-moz-progress-bar { background: linear-gradient(90deg, #b03030, var(--gold), var(--q2)); }

/* --- Titel, Berufe, Erfolge, Ruf --- */
.char-title { color: var(--gold); font-family: var(--heading); }
h3 { font-family: var(--heading); font-weight: normal; color: var(--gold-dim); font-size: 1rem; margin: 16px 0 4px; }

.progress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.progress-grid .panel { margin-bottom: 20px; }

.bar {
  width: 100%; height: 10px; appearance: none; border: 1px solid #000; border-radius: 3px;
  background: #1c1f27; overflow: hidden;
}
.bar::-webkit-progress-bar { background: #1c1f27; }
.bar::-webkit-progress-value { background: linear-gradient(180deg, #4a8fe0, #1f5aa8); }
.bar::-moz-progress-bar { background: linear-gradient(180deg, #4a8fe0, #1f5aa8); }

.skills, .ach-cats, .ach-recent, .reps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.skills li { display: grid; grid-template-columns: 26px 1fr 1.2fr 64px; align-items: center; gap: 10px; }
.skills img { width: 26px; height: 26px; border-radius: 4px; border: 1px solid #000; }
.skills .small { text-align: right; }

.ach-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.ach-points { display: inline-flex; align-items: center; gap: 8px; font-family: var(--heading); font-size: 1.8rem; color: var(--gold); }
.ach-points img { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--gold-dim); }
.ach-cats li { display: grid; grid-template-columns: 1fr 1.2fr 64px; align-items: center; gap: 10px; }
.ach-cats .small { text-align: right; }
.ach-cats .bar::-webkit-progress-value { background: linear-gradient(180deg, #5bbf3a, #2f7d1c); }
.ach-cats .bar::-moz-progress-bar { background: linear-gradient(180deg, #5bbf3a, #2f7d1c); }

.ach-recent { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ach-recent li {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  padding: 8px; border: 1px solid var(--panel-border); border-radius: 5px; background: rgba(0,0,0,.25);
}
.ach-recent img { width: 40px; height: 40px; border-radius: 4px; border: 1px solid #000; }
.ach-text, .ach-meta { display: grid; }
.ach-name { color: var(--text); }
.ach-meta { text-align: right; }
.ach-pts { font-family: var(--heading); color: var(--gold); font-size: 1.1rem; }

.rep-group { border-top: 1px solid var(--panel-border); padding: 8px 0; }
.rep-group:first-of-type { border-top: 0; }
.rep-group summary { cursor: pointer; font-family: var(--heading); color: var(--gold); font-size: 1.05rem; padding: 4px 0; }
.reps li { display: grid; grid-template-columns: 1.2fr 1.5fr 100px 90px; align-items: center; gap: 10px; }
.rep-num { text-align: right; }
.rank-0, .rank-1 { --rep: #cc4d38; } .rank-2 { --rep: #bf4500; } .rank-3 { --rep: #e6b300; }
.rank-4 { --rep: #2e9a2e; } .rank-5 { --rep: #1fb36b; } .rank-6 { --rep: #10bfa0; } .rank-7 { --rep: #2fd0e0; }
.rep-label { color: var(--rep); }
.reps .bar::-webkit-progress-value { background: var(--rep); }
.reps .bar::-moz-progress-bar { background: var(--rep); }

/* --- Gegenstände --- */
.item-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; align-items: end; }
.item-filters label { display: grid; gap: 4px; color: var(--muted); font-size: .85rem; }
.item-filters .wide { grid-column: span 2; }
.item-filters .range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filter-actions { display: flex; align-items: center; gap: 16px; }
.result-count { margin: -8px 0 10px; }

.item-table { padding: 8px 12px; }
.item-row {
  display: grid; grid-template-columns: 36px minmax(0, 2.6fr) 60px 70px 1fr 1fr;
  align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.item-row:last-child { border-bottom: 0; }
.item-row.head { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.item-row .tip-content { display: none; }
.item-icon.small-icon { width: 34px; height: 34px; border-width: 1px; }
a.item-name:hover { text-decoration: underline; }

.pager { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0; }

.item-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.item-detail-head h1 { margin: 0; font-size: 2rem; }
.item-icon.big-icon { width: 64px; height: 64px; cursor: default; }
.item-detail-body { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 20px; align-items: start; margin-bottom: 20px; }
.tooltip.tooltip-static { position: static; max-width: none; pointer-events: auto; font-size: 14px; }
.item-facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.item-facts dt { color: var(--muted); }
.item-facts dd { margin: 0; }
.set-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.set-list li { display: flex; align-items: center; gap: 10px; }
.set-list img { width: 26px; height: 26px; border-radius: 4px; border: 1px solid #000; }

/* --- Quests --- */
.item-filters .checkbox { display: flex; align-items: center; gap: 8px; color: var(--text); }
.item-filters .checkbox input { width: auto; }
.quest-row {
  display: grid; grid-template-columns: minmax(0, 2.4fr) 54px 44px 1.3fr 1fr 70px;
  align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.quest-row:last-child { border-bottom: 0; }
.quest-row.head { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.quest-title { color: #ffd100; }
.side { font-size: .85rem; }
.side-allianz { color: #4a8fe0; } .side-horde { color: #d23c3c; } .side-beide { color: var(--muted); }

.quest-heading { font-size: 2rem; color: #ffd100; }
.quest-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.quest-meta > span {
  padding: 3px 10px; border: 1px solid var(--panel-border); border-radius: 999px;
  background: rgba(0,0,0,.3); font-size: .85rem;
}
.quest-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.parchment { line-height: 1.6; }
.parchment p { margin: 0 0 10px; }
.objectives { margin: 4px 0 12px; padding-left: 20px; }
.item-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.item-card {
  display: flex; align-items: center; gap: 10px; padding: 6px;
  border: 1px solid var(--panel-border); border-radius: 5px; background: rgba(0,0,0,.25); min-width: 0;
}
.item-card .item-name { overflow-wrap: anywhere; line-height: 1.3; }
.item-icon { position: relative; }
.stack {
  position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: bold; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.reward-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; }
.reward-facts dt { color: var(--muted); }
.reward-facts dd { margin: 0; }
.givers dt { color: var(--muted); font-size: .85rem; margin-top: 8px; }
.givers dd { margin: 2px 0 0; }
.quest-links { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.quest-links a { color: #ffd100; }

/* --- Bezugsquellen --- */
.sources { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 4px; }
.sources li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.src-chance { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.src-cost { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
.cost-item { display: inline-flex; align-items: center; gap: 6px; }
.cost-item img { width: 18px; height: 18px; border-radius: 3px; }
.tag { font-size: .72rem; padding: 1px 6px; border-radius: 3px; background: #4a3a10; color: #ffd100; }

/* --- Tooltip --- */
.tooltip {
  position: fixed; z-index: 100; max-width: 340px; pointer-events: none;
  padding: 9px 11px; font-size: 13px; line-height: 1.4;
  background: rgba(8, 10, 24, .96); color: #fff;
  border: 1px solid #6c6c80; border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
}
.tooltip.touch { pointer-events: auto; }
.tt-name { font-size: 15px; }
.tt-row { display: flex; justify-content: space-between; gap: 16px; }
.tt-gap { height: 8px; }
.tt-socket { display: flex; align-items: center; gap: 6px; color: #fff; }
.tt-socket img { width: 14px; height: 14px; }
.tt-socket.empty { color: var(--q0); }
.tt-socket.empty::before { content: ""; width: 12px; height: 12px; border: 1px solid #777; background: #333; }
.tt-socket.socket-1::before { border-radius: 50%; background: #888; }
.tt-socket.socket-2::before { background: #a22; }
.tt-socket.socket-4::before { background: #cc2; }
.tt-socket.socket-8::before { background: #26c; }
.q-set { color: #ffd100; }
.tt-set-item { padding-left: 10px; }
.tt-set-item.owned { color: #ffff98; }
.q-flavor { color: #ffd100; }

/* --- schmale Bildschirme --- */
@media (max-width: 760px) {
  .topbar { padding: 12px 16px; }
  .search input { width: 100%; }
  .topbar nav { width: 100%; margin-left: 0; }
  .topbar nav .search { flex: 1 1 100%; order: 3; }
  .paperdoll { grid-template-columns: 1fr; grid-template-areas: "center" "left" "right" "weapons"; }
  .slots.right .slot { flex-direction: row; text-align: left; }
  .slots.weapons { display: grid; justify-content: stretch; }
  .char-header { padding: 16px; gap: 14px; }
  .char-header h1 { font-size: 1.6rem; }
  .portrait.big { width: 72px; height: 72px; }
  .progress-grid { grid-template-columns: 1fr; gap: 0; }
  .item-filters { grid-template-columns: 1fr 1fr; }
  .item-filters .wide { grid-column: 1 / -1; }
  .item-row { grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .item-row > span:nth-of-type(n+2) { display: none; }
  .item-row.head { display: none; }
  .item-detail-body { grid-template-columns: 1fr; }
  .quest-layout { grid-template-columns: 1fr; }
  .sources li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .src-cost { justify-content: flex-start; }
  .quest-row { grid-template-columns: minmax(0, 1fr) 40px 70px; }
  .quest-row > span:nth-of-type(2), .quest-row > span:nth-of-type(4), .quest-row > span:nth-of-type(3) { display: none; }
  .quest-row.head { display: none; }
  .quest-heading { font-size: 1.5rem; }
  .item-detail-head h1 { font-size: 1.5rem; }
  .skills li { grid-template-columns: 26px 1fr 64px; }
  .skills li .bar { grid-column: 2 / -1; grid-row: 2; }
  .reps li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .reps li .bar { grid-column: 1 / -1; }
  .reps li .rep-num { display: none; }
  .ach-recent { grid-template-columns: 1fr; }
  .ach-cats li { grid-template-columns: 1fr 64px; row-gap: 2px; }
  .ach-cats li .bar { grid-column: 1 / -1; grid-row: 2; }
  .friends li { grid-template-columns: 24px 1fr 70px; row-gap: 2px; }
  .friends li .muted { display: none; }
  .friends li > span:last-child { grid-column: 2 / -1; color: var(--muted); }
}