* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0a0e16; color: #e6e6e6;
  font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#game-wrap { position: relative; width: 1280px; height: 720px; margin: 0 auto; user-select: none; }
canvas#game { display: block; background: radial-gradient(#16243a, #0a0e16); }
button { background: #28324a; color: #e6e6e6; border: 1px solid #3d4b6b; border-radius: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 13px; }
button:hover { background: #344161; border-color: #5a6da0; }
button:disabled { opacity: .4; cursor: not-allowed; }

/* Topbar */
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; gap: 20px;
  align-items: center; padding: 0 14px; background: linear-gradient(#000b, #0000); font-size: 15px; z-index: 5; }
.hud-item b { color: #ffd34d; }
.hud-item.hp { display: flex; align-items: center; gap: 6px; }
.hud-item .bar { display: inline-block; width: 120px; height: 10px; background: #0008; border: 1px solid #444; border-radius: 5px; overflow: hidden; }
.hud-item .bar #hud-hp-bar { display: block; height: 100%; width: 100%; background: #4caf50; transition: width .1s; }
.hud-item .bar #hud-shield-bar { display: block; height: 100%; width: 100%; background: #4ad0ff; transition: width .1s; }
.hud-item.right { margin-left: auto; display: flex; gap: 8px; }

/* Shop unten */
#shopbar { position: absolute; left: 0; right: 0; bottom: 22px; height: 132px; display: flex; gap: 10px;
  padding: 8px 12px; background: linear-gradient(#0000, #000d 30%); z-index: 5; }
#shop-left { width: 150px; flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.shop-title { font-weight: 700; color: #ffd34d; font-size: 15px; }
.shop-timer { height: 8px; background: #0008; border: 1px solid #345; border-radius: 4px; overflow: hidden; }
.shop-timer #shop-timer-bar { display: block; height: 100%; background: #4ad0ff; }
#shop-items { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.shop-card { position: relative; background: #141a28; border: 2px solid #333; border-radius: 8px;
  padding: 4px; text-align: center; cursor: pointer; overflow: hidden; }
.shop-card:hover { background: #1d2740; }
.shop-card img { width: 38px; height: 38px; object-fit: contain; }
.shop-card .cn { font-size: 11px; font-weight: 600; line-height: 1.1; height: 24px; overflow: hidden; }
.shop-card .cs { font-size: 9px; color: #9fb0d0; height: 12px; overflow: hidden; }
.shop-card .cp { font-size: 11px; color: #ffd34d; font-weight: 700; }
.shop-card .hk { position: absolute; top: 2px; left: 4px; font-size: 11px; font-weight: 700; color: #8fa; }
.shop-card .own { position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 700; color: #ffd34d; }
.shop-card.afford { box-shadow: 0 0 13px 2px #ffe08a77; filter: brightness(1.12); }
.shop-card.poor { opacity: .4; filter: grayscale(.55) brightness(.78); }
.shop-card.sold { visibility: hidden; }

.b-Common   { border-color: #5a6a82 !important; } .rar-Common   { color: #b8c4d8; }
.b-Uncommon { border-color: #2e7d32 !important; } .rar-Uncommon { color: #4caf50; }
.b-Rare     { border-color: #1565c0 !important; } .rar-Rare     { color: #2196f3; }
.b-Epic     { border-color: #7b29c9 !important; } .rar-Epic     { color: #b061ff; }

/* Inventar */
#inventory { position: absolute; right: 8px; top: 46px; width: 230px; max-height: 480px; overflow-y: auto;
  background: #0d1320ee; border: 1px solid #2a3a55; border-radius: 10px; padding: 10px; z-index: 6; }
#inventory.hidden { display: none; }
#inventory h3 { margin: 0 0 8px; font-size: 15px; }
.inv-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.inv-tab { flex: 1; background: #141c2e; color: #aab4c8; border: 1px solid #2a3a55; border-radius: 6px;
  padding: 4px 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.inv-tab.active { background: #24345a; color: #fff; border-color: #4a6099; }
.bonus-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
.bonus-cell { display: flex; align-items: center; gap: 3px; background: #1a2236; border: 1px solid #2a3a55;
  border-radius: 6px; padding: 2px 6px; font-size: 11px; }
.bonus-cell b { color: #ffd34d; }
.inv-grp { margin-bottom: 8px; }
.inv-h { text-transform: capitalize; font-weight: 700; border-bottom: 1px solid #2a3a55; padding-bottom: 2px; display: flex; justify-content: space-between; }
.inv-h span { color: #4caf50; }
.inv-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; }
.inv-row img { width: 22px; height: 22px; object-fit: contain; }
.inv-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row b { color: #ffd34d; }
.inv-row .dps { color: #7fc7ff; font-style: normal; font-size: 10px; white-space: nowrap; min-width: 52px; text-align: right; }
.inv-empty { color: #889; font-size: 12px; }

/* Namensfeld + Rangliste */
.name-row { margin: 0 0 14px; }
#player-name { width: 240px; max-width: 70vw; padding: 8px 12px; font-size: 16px; text-align: center;
  background: #0d1320; color: #fff; border: 1px solid #2a3a55; border-radius: 8px; outline: none; }
#player-name:focus { border-color: #4a6099; }
#lb-list { max-width: 480px; margin: 0 auto; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 14px; border-bottom: 1px solid #1d2740; }
.lb-head { color: #8aa6c8; font-weight: 700; font-size: 12px; border-bottom: 1px solid #2a3a55; }
.lb-rk { width: 30px; text-align: right; color: #ffd34d; font-weight: 700; }
.lb-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tm { width: 60px; text-align: right; color: #7fc7ff; }
.lb-kl { width: 52px; text-align: right; color: #ff8a6a; }
.lb-top { background: #ffd34d12; }
.lb-top .lb-rk { color: #ffec5c; }
.go-rank { color: #ffd34d; font-weight: 700; }
.lb-tag { text-align: center; color: #8aa6c8; font-size: 12px; margin-bottom: 6px; }

#infobar { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 14px; background: #000c;
  font-size: 12px; color: #9fb0d0; z-index: 5; }

.overlay { position: absolute; inset: 0; background: #050810ee; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; z-index: 20; }
.overlay.hidden { display: none; }
.overlay h2 { margin: 0; font-size: 30px; }
.overlay p { font-size: 18px; margin: 2px; } .overlay b { color: #ffd34d; }

/* Hauptmenü */
.overlay.menu { background: radial-gradient(circle at 50% 35%, #1b2c4a, #070b14 70%); }
.game-title { font-size: 64px; font-weight: 800; letter-spacing: 4px; line-height: .95; text-align: center;
  color: #fff; text-shadow: 0 0 24px #2a6cff80; margin: 0 0 10px; }
.game-title span { color: #ffd34d; }
.menu-btns { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.menu-btn { font-size: 20px; padding: 12px 40px; min-width: 260px; background: #1d2740; border: 2px solid #3d4b6b;
  border-radius: 10px; color: #eef; cursor: pointer; transition: transform .07s, border-color .15s; }
.menu-btn:hover { transform: translateY(-2px); border-color: #ffd34d; background: #25324f; }
.menu-btn.small { font-size: 15px; padding: 8px 22px; min-width: 0; }
.menu-foot { margin-top: 24px; color: #7c8aa6; font-size: 13px; }

/* Panels (Steuerung / Erfolge) */
.panel { background: #0d1320e0; border: 1px solid #2a3a55; border-radius: 12px; padding: 18px 24px;
  max-width: 620px; width: 80%; max-height: 460px; overflow-y: auto; }
.panel p { font-size: 15px; margin: 8px 0; color: #cdd6e6; }
.panel hr { border: none; border-top: 1px solid #2a3a55; margin: 12px 0; }
.key { display: inline-block; min-width: 20px; text-align: center; padding: 2px 7px; margin-right: 4px;
  background: #28324a; border: 1px solid #5a6da0; border-radius: 5px; font-size: 13px; font-weight: 700; color: #fff; }

/* Erfolge */
.ach-count { text-align: center; color: #ffd34d; font-weight: 700; margin-bottom: 10px; }
.ach-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; margin-bottom: 6px; background: #141a28; }
.ach-row.locked { opacity: .55; }
.ach-row.got { border: 1px solid #4caf5066; background: #14241a; }
.ach-ic { font-size: 26px; width: 34px; text-align: center; }
.ach-txt { flex: 1; text-align: left; }
.ach-t { font-weight: 700; font-size: 15px; }
.ach-d { font-size: 12px; color: #9fb0d0; }
.ach-chk { color: #4caf50; font-size: 20px; font-weight: 700; }

/* Toast */
#toast { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: #1d2740ee; border: 1px solid #ffd34d; border-radius: 10px; padding: 10px 18px;
  font-size: 15px; color: #fff; box-shadow: 0 4px 18px #000a; text-align: center; }
#toast.hidden { display: none; }

/* Sprachauswahl */
.lang-row { display: flex; gap: 8px; margin-top: 18px; }
.lang-btn { font-size: 13px; padding: 6px 14px; background: #141a28; border: 1px solid #3d4b6b;
  border-radius: 8px; color: #cdd6e6; cursor: pointer; }
.lang-btn:hover { border-color: #ffd34d; }
.lang-btn.active { background: #ffd34d; color: #1a1a1a; border-color: #ffd34d; font-weight: 700; }

/* Detail-Panel (Hover) */
#detail { position: absolute; left: 12px; top: 56px; width: 332px; max-height: 502px; overflow-y: auto;
  background: #0d1320f2; border: 2px solid #2a3a55; border-radius: 14px; padding: 16px; z-index: 4; }
#d-empty { color: #7c8aa6; font-size: 14px; text-align: center; padding: 40px 8px; }
#d-empty.hidden, #d-content.hidden { display: none; }
.d-img { width: 92px; height: 92px; object-fit: contain; display: block; margin: 0 auto 8px;
  border: 3px solid #555; border-radius: 10px; background: #0a0f18; }
.d-name { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.d-cell .d-l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7c8aa6; }
.d-cell .d-v { font-size: 14px; color: #dfe6f0; margin-top: 1px; }
.d-ability { margin-top: 14px; border-top: 1px solid #2a3a55; padding-top: 10px; }
.d-ab-h { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7c8aa6; text-align: center; }
.d-ab-t { font-size: 13px; color: #cdd6e6; margin-top: 5px; text-align: center; line-height: 1.4; }

/* Pause-Anzeige */
#pause-badge { position: absolute; left: 50%; top: 290px; transform: translateX(-50%); z-index: 4;
  font-size: 36px; font-weight: 800; color: #ffd34d; text-shadow: 0 0 16px #000, 0 0 6px #000; pointer-events: none; }
#pause-badge.hidden { display: none; }

/* Bibliothek / Codex */
.codex-tabs { display: flex; gap: 10px; }
.cx-tab { font-size: 15px; padding: 8px 22px; background: #141a28; border: 1px solid #3d4b6b;
  border-radius: 8px 8px 0 0; color: #cdd6e6; cursor: pointer; }
.cx-tab.active { background: #1d2740; border-color: #ffd34d; color: #ffd34d; }
.panel.wide { max-width: 1120px; width: 94%; max-height: 372px; }
#codex { justify-content: flex-start; gap: 10px; padding-top: 16px; }
#cx-filters { width: 94%; max-width: 1120px; display: flex; flex-direction: column; gap: 5px; }
.cx-frow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cx-flabel { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #7c8aa6; width: 90px; flex: 0 0 90px; text-align: right; }
.cx-chip { font-size: 11px; padding: 3px 9px; background: #141a28; border: 1px solid #3d4b6b; border-radius: 12px; color: #cdd6e6; cursor: pointer; }
.cx-chip:hover { border-color: #5a6da0; }
.cx-chip.active { background: #ffd34d; color: #1a1a1a; border-color: #ffd34d; font-weight: 700; }
.cx-reset { align-self: flex-start; margin-left: 96px; font-size: 11px; padding: 3px 10px; background: #3a1d1d; border: 1px solid #7b3b3b; border-radius: 8px; color: #ffcaca; cursor: pointer; }

/* Erfolge-Sektionen + Challenge-Popup */
.ach-sec { margin: 14px 0 6px; font-size: 15px; color: #ffd34d; border-bottom: 1px solid #2a3a55; padding-bottom: 3px; }
.ach-row.got { border: 1px solid #4caf5066; background: #14241a; box-shadow: 0 0 10px #4caf5040; }
#challenge-popup { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); z-index: 25; pointer-events: none;
  background: #0d1320f5; border: 2px solid #ffd34d; border-radius: 14px; padding: 16px 24px; text-align: center;
  box-shadow: 0 0 30px #ffd34d66; max-width: 540px; }
#challenge-popup.hidden { display: none; }
.cp-title { font-size: 22px; font-weight: 800; color: #ffd34d; margin-bottom: 8px; }
.cp-row { font-size: 14px; margin: 3px 0; }
.cp-row b { color: #fff; } .cp-row span { color: #9fb0d0; margin-left: 6px; }
.cx-grp { margin-bottom: 14px; }
.cx-grp h4 { margin: 0 0 8px; font-size: 16px; text-transform: capitalize; border-bottom: 1px solid #2a3a55; padding-bottom: 4px; }
.cx-grp h4 span { color: #7c8aa6; font-weight: 400; font-size: 13px; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 8px; align-items: start; }
.cx-card { background: #141a28; border: 2px solid #333; border-radius: 8px; padding: 8px 6px; text-align: center; }
.cx-card img { width: 40px; height: 40px; object-fit: contain; }
.cx-nm { font-size: 12px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.cx-meta { font-size: 10px; margin-top: 2px; }
.cx-ab { font-size: 10px; color: #9fb0d0; margin-top: 5px; line-height: 1.3; text-align: left; }