/* =====================================================================
   Aetherfall – UI styles (mobile-game look, landscape 16:9 / ultrawide)
   ===================================================================== */
:root {
  --font: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --font-title: 'Lilita One', 'Arial Black', Impact, sans-serif;
  --navy: #1b2246;
  --navy2: #273163;
  --ink: #1d2540;
  --ink-soft: #4a5680;
  --panel: #f2f6ff;
  --panel2: #e2ebff;
  --line: #c9d6f5;
  --gold: #ffc531;
  --orange: #ff8a1c;
  --blue: #3b7cff;
  --green: #3fbf5f;
  --red: #ff4d4d;
  --r0: #a7b0bd; --r1: #4fd35a; --r2: #3b8cff; --r3: #b25cff; --r4: #ff9d1c; --r5: #ff3b47; --r6: #ff5ed1;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.18), 0 10px 24px rgba(10, 20, 60, 0.25);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #0d1230; color: #fff; font-family: var(--font);
  user-select: none; -webkit-user-select: none;
}
body { background: #0d1230; }
button { font-family: var(--font); }
input, select { font-family: var(--font); }

#game-canvas, #overlay-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#overlay-canvas { pointer-events: none; z-index: 2; }
#game-canvas { z-index: 1; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2 L3 22 L9 17 L13 26 L17 24 L13 15 L21 15 Z' fill='%23fff' stroke='%231d2540' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default; }
#game-canvas.cur-attack { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M3 3 L18 18 M3 3 L9 4 L22 17 L17 22 L4 9 Z' fill='%23ff5a4f' stroke='%231d2540' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17 22 L22 17 L27 27 Z' fill='%23ffc531' stroke='%231d2540' stroke-width='2'/%3E%3C/svg%3E") 3 3, crosshair; }
#game-canvas.cur-gather { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M6 24 L20 10' stroke='%238d5a2b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M14 6 Q22 2 27 10 Q20 8 17 13 Z' fill='%23cfd8e3' stroke='%231d2540' stroke-width='2'/%3E%3C/svg%3E") 4 24, pointer; }
#game-canvas.cur-talk { cursor: pointer; }

#ui {
  position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none;
  transform-origin: 0 0;
}
/* full-screen layers (HUD container, toasts, banners) must let clicks through to the game */
#ui > *:not(.hud):not(.toasts):not(.banner-big):not(.cp-float) { pointer-events: auto; }
#ui > .hud, #ui > .toasts, #ui > .banner-big, #ui > .cp-float { pointer-events: none; }
#ui .pe-none { pointer-events: none; }

/* ---------- Boot & rotate hint ---------- */
#boot {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #2f4aa8 0%, #16204f 55%, #0b1030 100%);
  transition: opacity 0.6s;
}
#boot.hide { opacity: 0; pointer-events: none; }
.boot-logo { font-family: var(--font-title); font-size: 76px; letter-spacing: 4px; color: #ffe27a; text-shadow: 0 5px 0 #b06a00, 0 10px 30px rgba(0,0,0,0.5); -webkit-text-stroke: 2px #6b3a00; }
.boot-sub { font-family: var(--font-title); font-size: 26px; color: #bfe0ff; margin-top: -4px; letter-spacing: 6px; }
.boot-bar { width: 420px; height: 16px; margin-top: 40px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 2px solid #0a0f28; overflow: hidden; }
#boot-fill { height: 100%; width: 5%; background: linear-gradient(#ffe066, #ff9d1c); transition: width 0.25s; }
#boot-text { margin-top: 12px; color: #bcd0ff; font-size: 15px; }

#rotate-hint { display: none; position: fixed; inset: 0; z-index: 99; background: #0d1230; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 20px; }
.rotate-box { padding: 24px; }
.rotate-icon { font-size: 64px; animation: spin 2s linear infinite; }
@media (orientation: portrait) and (max-aspect-ratio: 4/5) { #rotate-hint { display: flex; } }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255, 197, 49, 0.7); } 50% { box-shadow: 0 0 0 10px rgba(255, 197, 49, 0); } }
@keyframes popC { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes slideUpC { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes floatUpC { 0% { transform: translate(-50%, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-50%, -60px); opacity: 0; } }
@keyframes popB { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- Generic text helpers ---------- */
.outline { text-shadow: -2px -2px 0 #1d2540, 2px -2px 0 #1d2540, -2px 2px 0 #1d2540, 2px 2px 0 #1d2540, 0 3px 0 #1d2540; }
.outline-sm { text-shadow: -1px -1px 0 #1d2540, 1px -1px 0 #1d2540, -1px 1px 0 #1d2540, 1px 1px 0 #1d2540, 0 2px 0 #1d2540; }
.title-font { font-family: var(--font-title); letter-spacing: 0.5px; }
.dim { color: var(--ink-soft); }
.gold-text { color: #ffcb2f; }
.r-text-0 { color: #8a93a3; } .r-text-1 { color: #2fae3b; } .r-text-2 { color: #2a73e8; } .r-text-3 { color: #9a3ff0; }
.r-text-4 { color: #f08300; } .r-text-5 { color: #e8202e; } .r-text-6 { color: #f03fbd; }
.up { color: #19a83a; font-weight: 700; } .down { color: #e33; font-weight: 700; }
svg { display: block; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 18px; border-radius: 14px; border: 3px solid #1d2540; cursor: pointer;
  font-weight: 700; font-size: 17px; color: #fff; white-space: nowrap;
  background: linear-gradient(#6aa8ff, #3270e6); box-shadow: inset 0 3px 0 rgba(255,255,255,0.45), inset 0 -4px 0 rgba(0,0,0,0.18), 0 4px 0 #1d2540;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35); transition: transform 0.06s, filter 0.1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.18), 0 1px 0 #1d2540; }
.btn:disabled, .btn.disabled { filter: grayscale(0.9) brightness(0.9); cursor: not-allowed; opacity: 0.7; }
.btn-yellow { background: linear-gradient(#ffe778, #ffb21c); color: #5a3100; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.btn-green { background: linear-gradient(#8ef07c, #2fa84a); }
.btn-red { background: linear-gradient(#ff8f80, #d93a3a); }
.btn-purple { background: linear-gradient(#d29bff, #8a3ff0); }
.btn-gray { background: linear-gradient(#cfd7e8, #8e9ab8); color: #1d2540; text-shadow: none; }
.btn-dark { background: linear-gradient(#3b4677, #232b52); }
.btn-sm { min-height: 32px; padding: 3px 12px; font-size: 14px; border-radius: 11px; border-width: 2.5px; }
.btn-lg { min-height: 54px; padding: 8px 30px; font-size: 22px; border-radius: 18px; }
.btn-xl { min-height: 66px; padding: 10px 44px; font-size: 28px; border-radius: 20px; font-family: var(--font-title); }
.btn .ic { width: 22px; height: 22px; }
.btn-sm .ic { width: 18px; height: 18px; }
.btn .cost { display: inline-flex; align-items: center; gap: 3px; font-size: 0.85em; }

.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 3px solid #1d2540; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(#ff8f80, #d93a3a); box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), 0 3px 0 #1d2540; padding: 0; }
.icon-btn svg { width: 22px; height: 22px; }

.dot { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #ff3b3b; border: 2.5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.4); display: none; }
.has-dot > .dot { display: block; animation: pulse 1.2s infinite; }

/* ---------- Toggle / inputs ---------- */
.toggle { position: relative; width: 58px; height: 30px; border-radius: 20px; background: #b9c3dc; border: 3px solid #1d2540; cursor: pointer; flex: none; transition: background 0.15s; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.25); transition: left 0.15s; }
.toggle.on { background: #3fbf5f; }
.toggle.on::after { left: 30px; }
.inp { height: 40px; padding: 0 12px; border-radius: 12px; border: 3px solid #1d2540; background: #fff; color: #1d2540; font-size: 17px; font-weight: 600; outline: none; }
.inp:focus { border-color: #3b7cff; }
select.inp { padding: 0 8px; }
input[type=range] { accent-color: #3b7cff; width: 100%; }

/* =====================================================================
   HUD
   ===================================================================== */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud > .hud-boss, .hud > .instance-timer, .hud > .hud-log, .hud > .hud-streak, .hud > .hud-xp { pointer-events: none; }
.hud.hidden-ui > *:not(.hud-keep) { display: none; }

/* player card */
.hud-player { position: absolute; left: 16px; top: 14px; display: flex; align-items: center; gap: 10px; }
.avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; border: 4px solid #1d2540; background: radial-gradient(circle at 50% 35%, #fff 0%, #cfe0ff 60%, #8fb0ff 100%); box-shadow: 0 4px 0 #1d2540; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: visible; }
.avatar svg { width: 70px; height: 70px; }
.avatar .lvl { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: linear-gradient(#ffe778, #ffb21c); color: #5a3100; border: 3px solid #1d2540; border-radius: 12px; font-family: var(--font-title); font-size: 15px; padding: 0 8px; white-space: nowrap; }
.avatar.premium { border-color: #b8860b; box-shadow: 0 0 0 3px #ffd54f, 0 4px 0 #1d2540, 0 0 18px #ffd54f; }
.pc-info { display: flex; flex-direction: column; gap: 3px; }
.pc-name { font-weight: 700; font-size: 19px; display: flex; align-items: center; gap: 6px; }
.pc-title { font-size: 12px; color: #bfe0ff; font-weight: 600; background: rgba(15,22,55,0.6); padding: 0 6px; border-radius: 8px; }
.pc-cp { display: flex; align-items: center; gap: 4px; font-family: var(--font-title); font-size: 26px; color: #ffd84a; line-height: 1; }
.pc-cp svg { width: 26px; height: 26px; }
.pc-cp small { font-size: 15px; color: #ffefb0; }
.hpbar { position: relative; width: 250px; height: 20px; border-radius: 10px; background: rgba(15,20,45,0.85); border: 3px solid #1d2540; overflow: hidden; }
.hpbar .fill { position: absolute; inset: 0; width: 100%; background: linear-gradient(#ff8a80, #e53935); transition: width 0.15s; }
.hpbar .fill.green { background: linear-gradient(#8ef07c, #2fa84a); }
.hpbar .txt { position: absolute; inset: 0; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pc-badges { display: flex; gap: 6px; align-items: center; }
.vip-badge { font-family: var(--font-title); font-size: 13px; padding: 0 8px; border-radius: 8px; border: 2px solid #1d2540; background: linear-gradient(#ffe778, #ff9d1c); color: #5a3100; cursor: pointer; }
.prem-badge { font-family: var(--font-title); font-size: 13px; padding: 0 8px; border-radius: 8px; border: 2px solid #6b3a00; background: linear-gradient(#fff3b0, #ffcc33 50%, #d68a00); color: #5a3100; }
.buffs { position: absolute; left: 16px; top: 128px; display: flex; gap: 6px; }
.buff { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 2.5px solid #1d2540; background: #2a3563; overflow: hidden; }
.buff svg { width: 100%; height: 100%; }
.buff .t { position: absolute; bottom: 0; right: 0; left: 0; text-align: center; font-size: 11px; font-weight: 700; background: rgba(0,0,0,0.55); }

/* feature row */
.hud-features { position: absolute; left: 400px; top: 10px; display: flex; gap: 8px; }
.feat { position: relative; width: 70px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.1s; }
.feat:hover { transform: translateY(-2px) scale(1.04); }
.feat .fi { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 3px 0 rgba(13,18,48,0.85)); }
.feat .fi svg { width: 54px; height: 54px; }
.feat .fl { font-size: 13px; font-weight: 700; margin-top: 1px; white-space: nowrap; }
.feat .dot { top: -2px; right: 6px; }

/* currencies */
.hud-currency { position: absolute; right: 278px; top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cur-row { display: flex; gap: 6px; }
.cur { display: flex; align-items: center; gap: 4px; min-width: 116px; height: 34px; padding: 0 10px 0 4px; border-radius: 18px; background: rgba(15,22,55,0.78); border: 2.5px solid #0b1030; font-weight: 700; font-size: 16px; }
.cur svg { width: 28px; height: 28px; flex: none; }
.cur span { flex: 1; text-align: right; }
.cur .plus { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#8ef07c, #2fa84a); border: 2px solid #0b1030; font-size: 16px; line-height: 16px; text-align: center; cursor: pointer; margin-left: 4px; }

/* minimap */
.hud-map { position: absolute; right: 14px; top: 10px; width: 250px; }
.zone-banner { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 10px; border-radius: 12px 12px 0 0; background: linear-gradient(#3e4b8a, #273163); border: 3px solid #0b1030; border-bottom: none; }
.zone-name { font-family: var(--font-title); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diff-chip { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 8px; border: 2px solid #0b1030; }
.minimap { position: relative; width: 250px; height: 200px; border: 3px solid #0b1030; border-radius: 0 0 12px 12px; overflow: hidden; background: #2a3563; cursor: pointer; }
.minimap canvas { width: 100%; height: 100%; display: block; }
.map-coords { position: absolute; bottom: 3px; left: 6px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.map-btns { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.map-btns .btn-sm { font-size: 13px; padding: 2px 10px; }

/* boss bar */
.hud-boss { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: 640px; display: none; flex-direction: column; align-items: center; gap: 3px; }
.hud-boss.show { display: flex; }
.boss-name { font-family: var(--font-title); font-size: 22px; color: #ffd6d6; }
.boss-bar { position: relative; width: 100%; height: 24px; border-radius: 12px; border: 3px solid #1d2540; background: rgba(20,10,20,0.85); overflow: hidden; }
.boss-bar .fill { position: absolute; inset: 0; background: linear-gradient(#ff6b6b, #c0161e); transition: width 0.2s; }
.boss-bar .ghost { position: absolute; inset: 0; background: #ffd6a0; transition: width 0.8s 0.3s; }
.boss-bar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.boss-sub { font-size: 14px; font-weight: 700; color: #ffe08a; }
.enrage { color: #ff5252; animation: pulse 0.8s infinite; }

/* left quest tracker */
.hud-left { position: absolute; left: 16px; top: 176px; width: 318px; display: flex; flex-direction: column; gap: 8px; }
.qcard { border-radius: 14px; background: rgba(15,22,55,0.78); border: 2.5px solid #0b1030; padding: 8px 10px; cursor: pointer; }
.qcard:hover { background: rgba(25,34,75,0.86); }
.qhead { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 15px; color: #ffd84a; }
.qhead svg { width: 22px; height: 22px; }
.qtext { font-size: 14px; font-weight: 600; margin: 3px 0 5px; line-height: 1.2; }
.qprog { position: relative; height: 14px; border-radius: 8px; background: rgba(0,0,0,0.45); overflow: hidden; }
.qprog .fill { height: 100%; background: linear-gradient(#8ef07c, #2fa84a); transition: width 0.3s; }
.qprog .txt { position: absolute; inset: 0; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qcard.ready { border-color: #ffc531; animation: glowPulse 1.4s infinite; }
.qclaim { margin-top: 6px; width: 100%; }
.fb-card .qhead { color: #ff9e9e; }
.fb-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.fb-row b { font-family: var(--font-title); font-size: 16px; }
.fb-alive { color: #ff5a5a; animation: pulse 1s infinite; }

/* right action column */
.hud-right { position: absolute; right: 16px; top: 330px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auto-btn { position: relative; width: 92px; height: 92px; border-radius: 50%; border: 4px solid #1d2540; cursor: pointer; background: radial-gradient(circle at 50% 35%, #8fb7ff, #2f5ce0); box-shadow: 0 5px 0 #1d2540, inset 0 4px 0 rgba(255,255,255,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 21px; }
.auto-btn svg { width: 36px; height: 36px; }
.auto-btn.on { background: radial-gradient(circle at 50% 35%, #a8ff8f, #24a845); }
.auto-btn .ring { position: absolute; inset: -9px; border-radius: 50%; border: 4px dashed rgba(255,255,255,0.9); display: none; }
.auto-btn.on .ring { display: block; animation: spin 4s linear infinite; }
.auto-btn small { font-family: var(--font); font-size: 11px; font-weight: 700; }
.round-btn { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 3.5px solid #1d2540; cursor: pointer; background: radial-gradient(circle at 50% 35%, #4e5b98, #232b52); box-shadow: 0 4px 0 #1d2540; display: flex; align-items: center; justify-content: center; }
.round-btn svg { width: 40px; height: 40px; }
.round-btn .lbl { position: absolute; bottom: -16px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.auto-status { max-width: 220px; text-align: center; font-size: 13px; font-weight: 700; background: rgba(15,22,55,0.78); border: 2px solid #0b1030; padding: 3px 8px; border-radius: 10px; }
.mode-chip { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 10px; border: 2.5px solid #1d2540; background: linear-gradient(#ffe778, #ffb21c); color: #5a3100; cursor: pointer; }

/* skill bar */
.hud-skills { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 12px; }
.skill { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 4px solid #1d2540; background: #222a50; cursor: pointer; overflow: hidden; box-shadow: 0 5px 0 #1d2540; transition: transform 0.08s; }
.skill:hover { transform: translateY(-2px); }
.skill.ult { width: 92px; height: 92px; border-color: #5a2f00; box-shadow: 0 5px 0 #5a2f00, 0 0 0 3px #ffc531; }
.skill svg { width: 100%; height: 100%; }
.skill .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(10,14,35,0.72) var(--p, 0%), transparent 0); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 24px; }
.skill .key { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-family: var(--font-title); font-size: 15px; background: rgba(10,14,35,0.8); border-radius: 6px; padding: 0 5px; line-height: 18px; }
.skill .slv { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; background: rgba(10,14,35,0.75); border-radius: 6px; padding: 0 4px; }
.skill.flash { animation: pop 0.25s; }
.skill.off-auto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #ff5a5a; }
.potion { position: relative; width: 60px; height: 60px; border-radius: 16px; border: 3.5px solid #1d2540; background: #222a50; cursor: pointer; overflow: hidden; box-shadow: 0 4px 0 #1d2540; }
.potion svg { width: 100%; height: 100%; padding: 4px; }
.potion .cnt { position: absolute; right: 3px; bottom: 1px; font-family: var(--font-title); font-size: 15px; }
.potion .key { position: absolute; left: 4px; top: 1px; font-family: var(--font-title); font-size: 13px; }
.potion .cd { position: absolute; inset: 0; background: conic-gradient(rgba(10,14,35,0.72) var(--p, 0%), transparent 0); }

/* xp bar */
.hud-xp { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: rgba(10,14,35,0.9); border-top: 2px solid #0b1030; }
.hud-xp .fill { height: 100%; background: linear-gradient(#ffe778, #ffb21c); transition: width 0.3s; }
.hud-xp .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* main menu */
.hud-menu { position: absolute; left: 16px; bottom: 24px; display: flex; gap: 10px; }
.mbtn { position: relative; width: 76px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.1s; }
.mbtn:hover { transform: translateY(-3px); }
.mbtn .mi { width: 66px; height: 66px; border-radius: 50%; border: 3.5px solid #1d2540; background: radial-gradient(circle at 50% 30%, #ffe9a8, #ffb21c 70%, #d07a00); box-shadow: 0 4px 0 #1d2540, inset 0 3px 0 rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; }
.mbtn .mi svg { width: 46px; height: 46px; }
.mbtn .ml { margin-top: 2px; font-size: 13px; font-weight: 700; }
.mbtn .dot { right: 4px; }

/* log */
.hud-log { position: absolute; left: 16px; bottom: 124px; width: 400px; max-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; pointer-events: none; }
.log-line { font-size: 13px; font-weight: 600; background: rgba(10,14,35,0.55); padding: 1px 8px; border-radius: 8px; width: fit-content; max-width: 100%; animation: slideUp 0.25s; transition: opacity 1s; }
.log-line .sys { display: inline-block; font-size: 10px; padding: 0 4px; border-radius: 4px; background: #3b7cff; margin-right: 4px; }
.log-line.loot .sys { background: #ff9d1c; }
.log-line.warn .sys { background: #ff4d4d; }
.log-line.fade { opacity: 0; }

/* bottom right */
.hud-br { position: absolute; right: 16px; bottom: 26px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.session { font-size: 12px; font-weight: 700; background: rgba(15,22,55,0.75); border: 2px solid #0b1030; padding: 4px 10px; border-radius: 10px; display: flex; gap: 10px; }
.br-btns { display: flex; gap: 8px; }

/* notifications */
.toasts { position: absolute; left: 50%; top: 160px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 16px; background: rgba(15,22,55,0.92); border: 3px solid #0b1030; font-weight: 700; font-size: 17px; animation: pop 0.3s; box-shadow: var(--shadow); }
.toast svg { width: 26px; height: 26px; }
.toast.error { background: rgba(120,20,30,0.92); }
.toast.epic { background: linear-gradient(90deg, rgba(120,40,180,0.95), rgba(60,30,140,0.95)); border-color: #ffc531; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: all 0.4s; }

.newgear { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: linear-gradient(#f4f8ff, #d9e6ff); border: 3.5px solid #1d2540; color: var(--ink); box-shadow: var(--shadow); animation: slideUpC 0.3s both; }
.newgear .ng-title { font-family: var(--font-title); font-size: 15px; color: #2a73e8; }
.newgear .ng-name { font-weight: 700; font-size: 17px; }
.cp-float { position: absolute; left: 50%; bottom: 210px; transform: translateX(-50%); font-family: var(--font-title); font-size: 40px; color: #ffd84a; pointer-events: none; animation: floatUpC 1.6s forwards; -webkit-text-stroke: 2px #7a2600; text-shadow: 0 4px 0 #7a2600; }
.cp-float.neg { color: #ff8a80; -webkit-text-stroke-color: #5a0000; }

.banner-big { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 5; }
.banner-big .bt { font-family: var(--font-title); font-size: 76px; color: #ffe27a; -webkit-text-stroke: 3px #6b3a00; text-shadow: 0 6px 0 #6b3a00, 0 0 40px rgba(255,200,60,0.8); animation: pop 0.5s; }
.banner-big .bs { font-size: 22px; font-weight: 700; animation: fadeIn 0.6s; }
.banner-big .rays { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255,230,120,0.18) 0 10deg, transparent 10deg 20deg); border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: rays 8s linear infinite; z-index: -1; }
.banner-quest .bt { font-size: 52px; color: #ffffff; -webkit-text-stroke: 2.5px #1d4fb0; text-shadow: 0 5px 0 #1d4fb0; }
.banner-boss .bt { font-size: 58px; color: #ff6b6b; -webkit-text-stroke: 2.5px #4a0000; text-shadow: 0 5px 0 #4a0000; }

.instance-timer { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); font-family: var(--font-title); font-size: 24px; padding: 2px 16px; border-radius: 12px; background: rgba(15,22,55,0.8); border: 2.5px solid #0b1030; display: none; }
.instance-timer.show { display: block; }
.instance-timer.warn { color: #ff6b6b; }

/* =====================================================================
   Windows / panels
   ===================================================================== */
.backdrop { position: absolute; inset: 0; background: rgba(8,12,35,0.55); animation: fadeIn 0.15s; z-index: 10; }
.win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1180px; max-width: calc(100% - 40px); height: 780px; max-height: calc(100% - 40px); display: flex; flex-direction: column; border-radius: 24px; background: var(--panel); border: 4px solid #1d2540; box-shadow: 0 10px 0 #1d2540, 0 30px 80px rgba(0,0,0,0.5); color: var(--ink); z-index: 11; animation: popC 0.22s both; overflow: hidden; }
.win.sm { width: 640px; height: auto; max-height: 86%; }
.win.md { width: 900px; height: 680px; }
.win-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(#5e9bff, #2f63dd); border-bottom: 4px solid #1d2540; color: #fff; }
.win-head .wi svg { width: 40px; height: 40px; }
.win-title { font-family: var(--font-title); font-size: 30px; flex: 1; }
.win-tabs { display: flex; gap: 6px; padding: 10px 16px 0; background: var(--panel2); border-bottom: 3px solid var(--line); }
.tab { padding: 8px 18px; border-radius: 14px 14px 0 0; background: #c6d4f5; border: 3px solid #1d2540; border-bottom: none; font-weight: 700; font-size: 16px; cursor: pointer; color: var(--ink); position: relative; top: 3px; }
.tab.active { background: var(--panel); color: #2a5ad8; }
.tab .dot { right: -2px; top: -6px; }
.win-body { flex: 1; overflow: auto; padding: 16px 18px; }
.win-body::-webkit-scrollbar { width: 12px; }
.win-body::-webkit-scrollbar-thumb { background: #9fb3e6; border-radius: 8px; border: 3px solid var(--panel); }
.win-foot { padding: 10px 16px; border-top: 3px solid var(--line); display: flex; gap: 10px; align-items: center; justify-content: flex-end; background: var(--panel2); }

.card { background: #fff; border: 3px solid #c3d1f2; border-radius: 16px; padding: 12px; box-shadow: 0 3px 0 #c3d1f2; }
.card.dark { background: #1d2540; color: #fff; border-color: #0b1030; box-shadow: 0 3px 0 #0b1030; }
.card h3 { margin: 0 0 8px; font-family: var(--font-title); font-weight: normal; font-size: 20px; color: #2a5ad8; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }
.sep { height: 3px; background: var(--line); border-radius: 2px; margin: 10px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 13px; font-weight: 700; background: #e1e9ff; color: #2a5ad8; border: 2px solid #b9caf3; }
.chip svg { width: 16px; height: 16px; }
.pbar { position: relative; height: 18px; border-radius: 10px; background: #d5def5; border: 2.5px solid #1d2540; overflow: hidden; }
.pbar .fill { height: 100%; background: linear-gradient(#8ef07c, #2fa84a); transition: width 0.25s; }
.pbar .fill.gold { background: linear-gradient(#ffe778, #ffb21c); }
.pbar .fill.blue { background: linear-gradient(#8fc0ff, #3b7cff); }
.pbar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #1d2540; }
.empty { text-align: center; padding: 40px; color: var(--ink-soft); font-weight: 600; }
.mat-line { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.mat-line svg { width: 22px; height: 22px; }
.mat-line.miss { color: #e33; }

/* ---------- Item slots ---------- */
.slot { position: relative; width: 74px; height: 74px; border-radius: 14px; border: 3px solid #1d2540; cursor: pointer; display: flex; align-items: center; justify-content: center; background: linear-gradient(#cfd8e8, #9aa6bb); box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), 0 3px 0 #1d2540; transition: transform 0.08s; flex: none; }
.slot:hover { transform: translateY(-2px); }
.slot svg { width: 86%; height: 86%; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25)); }
.slot.empty-slot { background: linear-gradient(#e7edf9, #c9d3e8); }
.slot.empty-slot svg { opacity: 0.45; }
.slot.r0 { background: linear-gradient(#d9dee6, #8f99a8); }
.slot.r1 { background: linear-gradient(#a6f5a0, #2fae3b); }
.slot.r2 { background: linear-gradient(#a6cdff, #2a73e8); }
.slot.r3 { background: linear-gradient(#e2bdff, #8f35e8); }
.slot.r4 { background: linear-gradient(#ffe0a3, #f08300); }
.slot.r5 { background: linear-gradient(#ffb3b8, #d9141f); }
.slot.r6 { background: linear-gradient(#ffd1f1, #e62fb0); box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), 0 3px 0 #1d2540, 0 0 14px #ff5ed1; }
.slot.r4::before, .slot.r5::before, .slot.r6::before { content: ''; position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); background-size: 200% 100%; animation: shine 3s infinite; pointer-events: none; }
.slot .enh { position: absolute; top: 1px; right: 4px; font-family: var(--font-title); font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.slot .tier { position: absolute; bottom: 1px; left: 4px; font-family: var(--font-title); font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.slot .new { position: absolute; top: -6px; left: -6px; background: #ff3b3b; color: #fff; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 0 4px; border: 2px solid #fff; }
.slot .lock { position: absolute; bottom: 1px; right: 3px; width: 16px; height: 16px; }
.slot .up-arrow { position: absolute; top: 2px; left: 3px; width: 18px; height: 18px; }
.slot.sel { outline: 4px solid #ffc531; outline-offset: 1px; }
.slot.small { width: 58px; height: 58px; border-radius: 12px; }
.slot .slot-lbl { position: absolute; bottom: -18px; font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.slot .qty { position: absolute; bottom: 1px; right: 5px; font-family: var(--font-title); font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, 74px); gap: 10px; }

/* tooltip */
.tooltip { position: fixed; z-index: 100; width: 330px; padding: 12px 14px; border-radius: 16px; background: rgba(18,24,52,0.97); border: 3px solid #0b1030; color: #fff; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-size: 14px; }
.tooltip .tt-name { font-family: var(--font-title); font-size: 21px; line-height: 1.1; }
.tooltip .tt-sub { font-size: 12px; color: #aab6dc; font-weight: 600; margin-bottom: 6px; }
.tooltip .tt-stat { display: flex; justify-content: space-between; font-weight: 600; padding: 1px 0; }
.tooltip .tt-stat.main { font-size: 16px; }
.tooltip .tt-sep { height: 2px; background: rgba(255,255,255,0.12); margin: 6px 0; }
.tooltip .tt-lore { font-style: italic; color: #ffcf8a; font-size: 13px; }
.tooltip .tt-cp { font-family: var(--font-title); font-size: 17px; }
.tooltip .tt-unique { color: #ffd84a; font-weight: 700; font-size: 12px; }

/* ---------- Character panel ---------- */
.char-layout { display: grid; grid-template-columns: 460px 1fr; gap: 16px; height: 100%; }
.equip-area { position: relative; display: grid; grid-template-columns: 90px 1fr 90px; gap: 6px; align-items: center; }
.equip-col { display: flex; flex-direction: column; gap: 26px; align-items: center; padding-bottom: 18px; }
.hero-preview { position: relative; height: 420px; border-radius: 20px; background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, #cfe0ff 55%, #9cb8f5 100%); border: 3px solid #b9caf3; overflow: hidden; }
.hero-preview canvas { width: 100%; height: 100%; display: block; }
.hero-cp { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-title); font-size: 28px; color: #ffd84a; -webkit-text-stroke: 1.5px #7a2600; text-shadow: 0 3px 0 #7a2600; }
.stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.stat-row { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; padding: 3px 6px; border-radius: 8px; background: #f3f6ff; }
.stat-row svg { width: 20px; height: 20px; }
.stat-row b { margin-left: auto; }
.enh-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.enh-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #fff; border: 3px solid #c3d1f2; cursor: pointer; }
.enh-item.sel { border-color: #3b7cff; background: #eef4ff; }
.enh-detail { text-align: center; }
.big-num { font-family: var(--font-title); font-size: 42px; color: #2a5ad8; }
.train-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.train-card svg { width: 60px; height: 60px; }

/* skills */
.skill-row { display: grid; grid-template-columns: 96px 1fr 210px; gap: 16px; align-items: center; padding: 12px; margin-bottom: 10px; }
.skill-row .sicon { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #1d2540; overflow: hidden; }
.skill-row .sicon svg { width: 100%; height: 100%; }
.skill-name { font-family: var(--font-title); font-size: 22px; color: #1d2540; }
.skill-desc { font-size: 14px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.kbd { display: inline-block; min-width: 26px; text-align: center; padding: 1px 6px; border-radius: 6px; border: 2px solid #1d2540; background: #fff; font-family: var(--font-title); font-size: 14px; color: #1d2540; box-shadow: 0 2px 0 #1d2540; }

/* talents */
.talent-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tbranch { position: relative; border-radius: 20px; padding: 14px; background: #fff; border: 3px solid #c3d1f2; }
.tbranch h3 { text-align: center; }
.tgrid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 112px); }
.tgrid svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tnode { position: relative; z-index: 1; justify-self: center; align-self: center; width: 76px; height: 76px; border-radius: 50%; border: 4px solid #1d2540; background: #d7def0; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; transition: transform 0.08s; }
.tnode:hover { transform: scale(1.06); }
.tnode.avail { background: #fff; }
.tnode.has { background: var(--bc, #ff5a3c); color: #fff; }
.tnode.keystone { width: 90px; height: 90px; border-radius: 22px; transform: rotate(45deg); }
.tnode.keystone > * { transform: rotate(-45deg); }
.tnode .tn { font-size: 11px; font-weight: 700; line-height: 1.05; padding: 0 3px; }
.tnode .tr { font-family: var(--font-title); font-size: 15px; }
.tnode.locked { opacity: 0.45; cursor: not-allowed; }

/* pets */
.pet-layout { display: grid; grid-template-columns: 1fr 380px; gap: 16px; }
.pet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start; }
.pet-card { position: relative; border-radius: 16px; padding: 8px; background: #fff; border: 3px solid #c3d1f2; text-align: center; cursor: pointer; }
.pet-card.sel { border-color: #3b7cff; box-shadow: 0 0 0 3px #a9c6ff; }
.pet-card.locked { filter: grayscale(1); opacity: 0.55; }
.pet-card .pname { font-weight: 700; font-size: 14px; }
.pet-card .pstars { color: #ffb21c; font-size: 14px; letter-spacing: 1px; }
.pet-card .active-tag { position: absolute; top: 4px; right: 4px; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 6px; background: #3fbf5f; color: #fff; }
.pet-portrait { height: 100px; display: flex; align-items: center; justify-content: center; }
.pet-portrait svg { width: 80px; height: 80px; }
.pet-preview { height: 260px; border-radius: 18px; background: radial-gradient(ellipse at 50% 70%, #fff, #d9c9ff 70%, #b49cf5); border: 3px solid #c3d1f2; overflow: hidden; }
.pet-preview canvas { width: 100%; height: 100%; }

/* world map */
.world-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.world-card { position: relative; border-radius: 20px; overflow: hidden; border: 4px solid #1d2540; background: #fff; box-shadow: 0 4px 0 #1d2540; display: flex; flex-direction: column; }
.world-card.locked { filter: grayscale(0.85) brightness(0.85); }
.world-card.current { box-shadow: 0 0 0 4px #ffc531, 0 4px 0 #1d2540; }
.world-art { height: 120px; position: relative; display: flex; align-items: flex-end; padding: 8px 12px; }
.world-art .wname { font-family: var(--font-title); font-size: 26px; color: #fff; -webkit-text-stroke: 1.5px #1d2540; text-shadow: 0 3px 0 #1d2540; }
.world-art .wlvl { position: absolute; top: 8px; right: 10px; font-weight: 700; font-size: 13px; padding: 1px 8px; border-radius: 10px; background: rgba(15,22,55,0.75); color: #fff; }
.world-art .zone { position: absolute; top: 8px; left: 10px; font-weight: 700; font-size: 12px; padding: 1px 8px; border-radius: 10px; color: #fff; border: 2px solid rgba(0,0,0,0.3); }
.world-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.world-info p { margin: 0; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.diff-btns { display: flex; gap: 6px; }
.diff-btns .btn { flex: 1; font-size: 13px; padding: 2px 6px; }

/* boss panel */
.boss-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: 100%; }
.boss-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.boss-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #fff; border: 3px solid #c3d1f2; cursor: pointer; }
.boss-item.sel { border-color: #ff5a3c; background: #fff2ef; }
.boss-item.locked { opacity: 0.5; }
.boss-item svg { width: 44px; height: 44px; }
.boss-item .bn { font-weight: 700; font-size: 15px; }
.boss-item .bl { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.boss-preview { height: 250px; border-radius: 18px; background: radial-gradient(ellipse at 50% 70%, #fff3e0, #ffb199 70%, #d9705a); border: 3px solid #c3d1f2; overflow: hidden; }
.boss-preview canvas { width: 100%; height: 100%; }
.drop-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.drop-table td, .drop-table th { padding: 4px 8px; text-align: left; border-bottom: 2px solid #e3eaf9; }
.drop-table th { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; }
.drop-table td:last-child, .drop-table th:last-child { text-align: right; }

/* shop */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.shop-card { position: relative; border-radius: 18px; padding: 12px; background: linear-gradient(#ffffff, #eef3ff); border: 3px solid #c3d1f2; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; box-shadow: 0 4px 0 #c3d1f2; }
.shop-card .si svg { width: 84px; height: 84px; }
.shop-card .sn { font-family: var(--font-title); font-size: 19px; color: #1d2540; }
.shop-card .sd { font-size: 13px; color: var(--ink-soft); font-weight: 600; min-height: 18px; }
.shop-card .tag { position: absolute; top: -10px; right: -6px; background: linear-gradient(#ff8f80, #d93a3a); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 2.5px solid #1d2540; transform: rotate(6deg); }
.shop-card .btn { width: 100%; }
.shop-card.done { opacity: 0.55; }
.shop-free-note { text-align: center; font-weight: 700; color: #2fa84a; margin-bottom: 10px; }
.vip-hero { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 20px; background: linear-gradient(120deg, #3a2a00, #8a5a00 50%, #3a2a00); color: #fff; border: 3px solid #1d2540; }
.vip-big { font-family: var(--font-title); font-size: 64px; color: #ffe27a; -webkit-text-stroke: 2px #6b3a00; text-shadow: 0 4px 0 #6b3a00; }
.vip-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.vip-cell { padding: 8px; border-radius: 14px; background: #fff; border: 3px solid #c3d1f2; font-size: 12px; font-weight: 600; }
.vip-cell.cur { border-color: #ffb21c; background: #fff8e1; }
.vip-cell b { font-family: var(--font-title); font-size: 18px; color: #b06a00; }
.premium-hero { padding: 22px; border-radius: 22px; color: #5a3100; border: 4px solid #6b3a00; background: linear-gradient(120deg, #fff3b0, #ffcc33 50%, #ffb000); box-shadow: 0 5px 0 #6b3a00; }
.premium-hero h2 { margin: 0; font-family: var(--font-title); font-size: 40px; color: #fff; -webkit-text-stroke: 2px #6b3a00; text-shadow: 0 4px 0 #6b3a00; }
.premium-hero ul { margin: 10px 0; padding-left: 20px; font-weight: 700; }

/* daily / quests */
.daily-chests { display: flex; justify-content: space-between; align-items: flex-end; position: relative; padding: 10px 20px 0; }
.daily-track { position: absolute; left: 40px; right: 40px; top: 46px; height: 16px; border-radius: 10px; background: #d5def5; border: 2.5px solid #1d2540; overflow: hidden; }
.daily-track .fill { height: 100%; background: linear-gradient(#ffe778, #ffb21c); }
.dchest { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.dchest svg { width: 64px; height: 64px; }
.dchest .at { font-family: var(--font-title); font-size: 16px; color: #1d2540; }
.dchest.ready svg { animation: pulse 0.9s infinite; filter: drop-shadow(0 0 10px #ffc531); }
.dchest.done { opacity: 0.45; }
.goal-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 3px solid #c3d1f2; margin-bottom: 8px; }
.goal-row.done { background: #ecffe9; border-color: #8ee08a; }
.goal-row .gt { flex: 1; font-weight: 700; }
.goal-row .gp { width: 160px; }
.goal-row .pts { font-family: var(--font-title); color: #b06a00; width: 54px; text-align: right; }

/* leaderboard */
.lb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.lb-table td { background: #fff; padding: 8px 12px; font-weight: 700; border-top: 3px solid #c3d1f2; border-bottom: 3px solid #c3d1f2; }
.lb-table td:first-child { border-left: 3px solid #c3d1f2; border-radius: 14px 0 0 14px; width: 70px; text-align: center; font-family: var(--font-title); font-size: 22px; }
.lb-table td:last-child { border-right: 3px solid #c3d1f2; border-radius: 0 14px 14px 0; text-align: right; font-family: var(--font-title); font-size: 20px; color: #2a5ad8; }
.lb-table tr.me td { background: #fff8e1; border-color: #ffc531; }
.lb-table tr.top1 td:first-child { color: #e0a800; } .lb-table tr.top2 td:first-child { color: #8a96a8; } .lb-table tr.top3 td:first-child { color: #c0703a; }
.lb-name { display: flex; align-items: center; gap: 8px; }
.lb-name svg { width: 28px; height: 28px; }
.lb-banner { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 8px; background: linear-gradient(#fff3b0, #ffcc33 50%, #d68a00); color: #5a3100; border: 2px solid #6b3a00; }
.lb-admin { font-size: 11px; padding: 0 6px; border-radius: 6px; background: #ff5a3c; color: #fff; }
.lb-title { font-size: 12px; color: var(--ink-soft); }
/* dungeon window: "Bestzeiten" speed board (ui/dungeonboard.js) + run time in the victory dialog */
.dt-card { gap: 6px; }
.dt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-head h3 { margin: 0; }
.dt-head .seg button { padding: 3px 12px; font-size: 13px; }
.dt-head .seg button:disabled { opacity: 0.45; cursor: not-allowed; }
.dt-status .server-pill { font-size: 12px; padding: 2px 10px; }
.dt-list { display: flex; flex-direction: column; gap: 3px; }
.dt-row { display: flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 9px; background: var(--w-surface-solid, rgba(255, 255, 255, 0.05)); border: 1px solid var(--w-line, rgba(150, 170, 255, 0.15)); font-weight: 700; font-size: 14px; }
.dt-row.me { background: rgba(255, 207, 74, 0.14); border-color: rgba(255, 207, 74, 0.5); }
.dt-rank { width: 30px; text-align: center; font-family: var(--font-title); }
.dt-cls svg { width: 22px; height: 22px; }
.dt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-name.prem { color: var(--w-gold, #e0a800); }
.dt-lvl { font-size: 12px; opacity: 0.7; }
.dt-time { font-family: var(--font-title); font-size: 16px; min-width: 62px; text-align: right; color: var(--w-accent, #2a5ad8); }
.dt-empty { padding: 4px 2px; font-size: 13px; }
.dt-me { font-size: 13px; }
.run-time { font-size: 17px; margin: -2px 0 8px; }
.run-time .run-new { color: var(--w-gold, #e0a800); font-weight: 800; }
/* player profile (ui/profile.js): leaderboard dialog + character tab "Statistik" */
.lb-click { cursor: pointer; }
.lb-table tr.lb-click:hover td { filter: brightness(1.12); }
.dt-row.lb-click:hover { border-color: var(--w-line-strong, rgba(150, 170, 255, 0.35)); }
.pf { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pf-dialog { max-height: min(70vh, 720px); overflow: auto; margin: -6px -8px; padding: 6px 8px; }
.pf-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: radial-gradient(ellipse at 10% 50%, rgba(255, 207, 74, 0.14), transparent 60%), var(--w-surface-solid, rgba(255, 255, 255, 0.05)); border: 1px solid var(--w-line, rgba(150, 170, 255, 0.15)); }
.pf-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-title); font-size: 24px; }
.pf-sub { font-weight: 700; }
.pf-title { color: var(--w-gold, #c88a00); }
.pf-dates { font-size: 12px; opacity: 0.7; }
.pf-cp { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; opacity: 0.95; }
.pf-cp b { font-family: var(--font-title); font-size: 26px; color: var(--w-accent, #2a5ad8); }
.pf-ranks { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-note { font-size: 13px; opacity: 0.75; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pf-card { padding: 8px 12px 10px; border-radius: 12px; background: var(--w-surface-solid, rgba(255, 255, 255, 0.05)); border: 1px solid var(--w-line, rgba(150, 170, 255, 0.15)); }
.pf-card-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 16px; margin-bottom: 4px; color: var(--w-title, inherit); }
.pf-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dashed var(--w-line, rgba(150, 170, 255, 0.12)); }
.pf-row:last-child { border-bottom: none; }
.pf-l { opacity: 0.8; }
.pf-v { text-align: right; white-space: nowrap; }
.pf-dts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; }
.pf-dt { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.pf-dt .pf-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dt .chip { font-size: 11px; padding: 0 6px; }
.pf-rank { width: 34px; text-align: right; font-weight: 700; }

/* settings */
.set-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 3px solid #c3d1f2; margin-bottom: 8px; }
.set-row .sl { flex: 1; font-weight: 700; }
.set-row .sl small { display: block; font-weight: 600; color: var(--ink-soft); font-size: 12px; }
.set-row input[type=range] { width: 220px; }
.seg { display: inline-flex; border: 3px solid #1d2540; border-radius: 12px; overflow: hidden; }
.seg button { border: none; padding: 6px 14px; font-weight: 700; background: #e1e9ff; color: #1d2540; cursor: pointer; font-size: 14px; }
.seg button.on { background: #3b7cff; color: #fff; }
.keys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; }
.keys-grid div { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }

/* route editor */
.route-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; height: 100%; }
.route-map { position: relative; border-radius: 18px; border: 4px solid #1d2540; overflow: hidden; background: #2a3563; cursor: crosshair; aspect-ratio: 1; max-height: 100%; }
.route-map canvas { width: 100%; height: 100%; display: block; }
.route-list { display: flex; flex-direction: column; gap: 8px; }
.route-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #fff; border: 3px solid #c3d1f2; cursor: pointer; font-weight: 700; }
.route-item.sel { border-color: #3fbf5f; background: #ecffe9; }

/* craft */
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.recipe { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: #fff; border: 3px solid #c3d1f2; }
.recipe .rh { display: flex; align-items: center; gap: 10px; }
.recipe .rh svg { width: 48px; height: 48px; }
.recipe .rn { font-family: var(--font-title); font-size: 18px; }
.recipe .rd { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.recipe .rc { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.mat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mat-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 14px; background: #fff; border: 3px solid #c3d1f2; font-weight: 700; }
.mat-pill svg { width: 26px; height: 26px; }

/* modal dialog */
.dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; max-width: 90%; border-radius: 24px; background: var(--panel); border: 4px solid #1d2540; box-shadow: 0 10px 0 #1d2540, 0 30px 80px rgba(0,0,0,0.5); color: var(--ink); z-index: 21; animation: popC 0.22s both; overflow: hidden; }
.dialog .win-head { justify-content: center; }
.dialog .win-title { flex: none; font-size: 28px; }
.dialog-body { padding: 18px 22px; font-size: 16px; font-weight: 600; }
.dialog-foot { display: flex; gap: 12px; justify-content: center; padding: 0 22px 20px; }
.dialog-backdrop { position: absolute; inset: 0; background: rgba(8,12,35,0.6); z-index: 20; animation: fadeIn 0.15s; }
.reward-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0; }
.reward { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; }
.reward .rbox { width: 70px; height: 70px; border-radius: 14px; border: 3px solid #1d2540; background: linear-gradient(#ffffff, #d9e6ff); display: flex; align-items: center; justify-content: center; }
.reward .rbox svg { width: 52px; height: 52px; }
.reward .ra { font-family: var(--font-title); font-size: 15px; color: #1d2540; }
.reward .rn { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.1; }

/* power save */
.powersave { position: absolute; inset: 0; z-index: 30; background: radial-gradient(ellipse at 50% 40%, #121a3a, #05070f); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #cfe0ff; animation: fadeIn 0.4s; cursor: pointer; }
.powersave .ps-title { font-family: var(--font-title); font-size: 46px; color: #7fb2ff; }
.powersave .ps-stats { display: grid; grid-template-columns: repeat(3, 220px); gap: 14px; }
.powersave .ps-stat { padding: 14px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.12); text-align: center; }
.powersave .ps-stat b { display: block; font-family: var(--font-title); font-size: 30px; color: #ffd84a; }
.powersave .ps-hint { font-size: 15px; opacity: 0.7; }
.powersave .ps-status { font-size: 18px; font-weight: 700; color: #8ef07c; }

/* title / character select */
.title-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: linear-gradient(rgba(8,12,35,0.15), rgba(8,12,35,0.55)); animation: fadeIn 0.5s; }
.title-logo { text-align: center; }
.title-logo .tl1 { font-family: var(--font-title); font-size: 110px; line-height: 0.95; color: #ffe27a; -webkit-text-stroke: 3px #6b3a00; text-shadow: 0 8px 0 #6b3a00, 0 16px 40px rgba(0,0,0,0.5); letter-spacing: 3px; }
.title-logo .tl2 { font-family: var(--font-title); font-size: 34px; color: #fff; -webkit-text-stroke: 1.5px #1d2540; text-shadow: 0 4px 0 #1d2540; letter-spacing: 8px; }
.slots { display: flex; gap: 20px; }
.char-slot { position: relative; width: 300px; height: 330px; border-radius: 26px; border: 4px solid #1d2540; background: linear-gradient(#f4f8ff, #d6e3ff); color: var(--ink); box-shadow: 0 8px 0 #1d2540, 0 20px 50px rgba(0,0,0,0.35); display: flex; flex-direction: column; align-items: center; padding: 16px; gap: 6px; cursor: pointer; transition: transform 0.12s; }
.char-slot:hover { transform: translateY(-6px); }
.char-slot .cs-icon svg { width: 110px; height: 110px; }
.char-slot .cs-name { font-family: var(--font-title); font-size: 28px; }
.char-slot .cs-cls { font-weight: 700; color: var(--ink-soft); }
.char-slot .cs-cp { font-family: var(--font-title); font-size: 22px; color: #e08a00; }
.char-slot.empty { background: rgba(255,255,255,0.12); color: #fff; border-style: dashed; border-color: rgba(255,255,255,0.6); justify-content: center; box-shadow: none; }
.char-slot.empty .plus { font-family: var(--font-title); font-size: 80px; line-height: 1; }
.char-slot .del { position: absolute; top: 10px; right: 10px; }
.char-slot .cs-meta { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.char-slot .cs-time { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.server-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 16px; background: rgba(15,22,55,0.8); border: 2px solid #0b1030; font-weight: 700; font-size: 14px; }
.server-pill .led { width: 10px; height: 10px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 8px #ff5252; }
.server-pill.on .led { background: #4cd964; box-shadow: 0 0 8px #4cd964; }
.class-pick { display: flex; gap: 18px; }
.class-card { width: 330px; border-radius: 24px; border: 4px solid #1d2540; background: linear-gradient(#f4f8ff, #d6e3ff); color: var(--ink); padding: 0 0 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 8px 0 #1d2540; transition: transform 0.12s; overflow: hidden; }
.class-card:hover { transform: translateY(-4px); }
.class-card.sel { box-shadow: 0 0 0 5px #ffc531, 0 8px 0 #1d2540; transform: translateY(-6px); }
.class-card .cc-prev { width: 100%; height: 240px; background: radial-gradient(ellipse at 50% 75%, #ffffff, #bcd2ff 70%); }
.class-card .cc-prev canvas { width: 100%; height: 100%; display: block; }
.class-card .cc-name { font-family: var(--font-title); font-size: 30px; }
.class-card .cc-role { font-weight: 700; color: #2a5ad8; }
.class-card .cc-desc { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 0 16px; text-align: center; min-height: 52px; }
.class-card .cc-stats { width: 85%; display: flex; flex-direction: column; gap: 4px; }
.cc-stat { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.cc-stat .bar { height: 10px; border-radius: 6px; background: #c9d6f5; overflow: hidden; }
.cc-stat .bar div { height: 100%; background: linear-gradient(90deg, #ffb21c, #ff5a3c); }
.create-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 20px; background: rgba(15,22,55,0.8); border: 3px solid #0b1030; }

/* admin cheat panel */
.admin { position: absolute; right: 20px; top: 70px; width: 520px; max-height: calc(100% - 100px); display: flex; flex-direction: column; z-index: 25; border-radius: 10px; background: #0c0f14; border: 2px solid #00ff9c; box-shadow: 0 0 30px rgba(0,255,156,0.25); color: #c8ffe6; font-family: Consolas, 'Courier New', monospace; font-size: 13px; animation: fadeIn 0.2s; }
.admin-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(90deg, #00331f, #0c0f14); border-bottom: 1px solid #00ff9c; cursor: move; }
.admin-head .at { flex: 1; font-weight: 700; color: #00ff9c; letter-spacing: 1px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid #1f3d31; }
.admin-tabs button { background: #111a17; color: #8fd9b8; border: 1px solid #1f3d31; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 12px; border-radius: 4px; }
.admin-tabs button.on { background: #00ff9c; color: #04140d; }
.admin-body { overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.adm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-row label { min-width: 140px; color: #8fd9b8; }
.adm-row input, .adm-row select { background: #111a17; color: #c8ffe6; border: 1px solid #1f3d31; padding: 4px 6px; font-family: inherit; font-size: 13px; border-radius: 4px; }
.adm-row input[type=number] { width: 110px; }
.adm-btn { background: #102a1f; color: #00ff9c; border: 1px solid #00ff9c; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 12px; border-radius: 4px; }
.adm-btn:hover { background: #00ff9c; color: #04140d; }
.adm-btn.warn { color: #ff6b6b; border-color: #ff6b6b; background: #2a1010; }
.adm-btn.warn:hover { background: #ff6b6b; color: #000; }
.adm-sec { color: #00ff9c; font-weight: 700; border-bottom: 1px dashed #1f3d31; padding-bottom: 3px; margin-top: 4px; }
.adm-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.adm-check input { accent-color: #00ff9c; }
.adm-log { font-size: 12px; color: #6fbf9a; min-height: 16px; }

/* loading */
.loading { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(8,12,35,0.75); animation: fadeIn 0.15s; }
.loading .lb { font-family: var(--font-title); font-size: 34px; color: #ffe27a; -webkit-text-stroke: 1.5px #6b3a00; display: flex; align-items: center; gap: 14px; }
.loading .spinner { width: 40px; height: 40px; border-radius: 50%; border: 6px solid rgba(255,255,255,0.25); border-top-color: #ffc531; animation: spin 0.8s linear infinite; }

/* offline rewards */
.offline-time { text-align: center; font-family: var(--font-title); font-size: 34px; color: #2a5ad8; }

/* =====================================================================
   Sets, dungeons, cosmetics, ultra-rare
   ===================================================================== */
.slot.rset { background: linear-gradient(#a6fff0, #12b89e); box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), 0 3px 0 #1d2540, 0 0 12px #21e3c4; }
.slot.rset::after { content: '◆'; position: absolute; top: -3px; left: 3px; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #004d40; }
.slot.dim-slot { filter: grayscale(0.85) brightness(0.8); opacity: 0.6; }
.set-bonus { font-size: 13px; font-weight: 600; color: #8a93a8; padding: 3px 8px; border-radius: 8px; background: #f1f4fb; }
.set-bonus.on { color: #0b6b5c; background: #dcfff7; border: 2px solid #7be8d3; }
.swatch { width: 26px; height: 26px; border-radius: 7px; border: 2.5px solid #1d2540; display: inline-block; box-shadow: inset 0 2px 0 rgba(255,255,255,0.35); }
.swatch.round { border-radius: 50%; }
.swatch.big { width: 38px; height: 38px; }
.cos-card { display: flex; flex-direction: column; gap: 8px; }
.cos-card.locked { background: #f1f3f8; }
.cos-card.locked .swatch { filter: grayscale(1) opacity(0.5); }
.cos-card.active { border-color: #3fbf5f; box-shadow: 0 3px 0 #3fbf5f; }
.cos-card.owned { border-color: #ff9ae6; }
.ultra-chip { background: linear-gradient(90deg, #ffd6f5, #e1d4ff); color: #a01d84; border-color: #ff9ae6; }
.banner-ultra .bt { font-size: 66px; background: linear-gradient(90deg, #ff5252, #ffab40, #ffff00, #69f0ae, #40c4ff, #e040fb, #ff5252); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2.5px #3a0040; text-shadow: none; animation: pop 0.5s, shine 2.5s linear infinite; filter: drop-shadow(0 6px 0 #3a0040) drop-shadow(0 0 30px rgba(255, 120, 230, 0.8)); }
.banner-ultra .bs { font-size: 26px; color: #ffe3fb; }
.banner-ultra .rays { background: repeating-conic-gradient(rgba(255, 150, 240, 0.22) 0 10deg, transparent 10deg 20deg); }
.dungeon-progress { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); }
.log-line.feed .sys { background: #e040b0; }
.hud-streak { position: absolute; right: 130px; top: 340px; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.hud-streak.show { opacity: 1; }
.hud-streak.pulse b { animation: pop 0.25s; }
.hud-streak b { font-family: var(--font-title); font-size: 46px; line-height: 1; color: #ffcf3a; -webkit-text-stroke: 2px #7a2600; text-shadow: 0 4px 0 #7a2600, 0 0 18px rgba(255, 160, 40, 0.7); display: block; }
.hud-streak span { font-family: var(--font-title); font-size: 15px; letter-spacing: 3px; color: #fff; -webkit-text-stroke: 1px #7a2600; }
.login-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.login-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: #f3f6ff; border: 3px solid #c9d6f5; }
.login-day.today { background: #fff8e1; border-color: #ffb21c; box-shadow: 0 0 0 3px #ffe08a; animation: glowPulse 1.4s infinite; }
.login-day.done { opacity: 0.5; }

/* FPS / frame-time meter (Einstellungen → Grafik → FPS-Anzeige) */
#fps-meter {
  position: fixed; bottom: 2px; left: 6px; z-index: 9000;
  pointer-events: none; padding: 1px 8px; border-radius: 8px;
  background: rgba(10, 14, 36, 0.72); border: 2px solid rgba(255, 255, 255, 0.12);
  font: 600 11px/1.3 'Fredoka', system-ui, sans-serif; color: #b8ffcf; letter-spacing: 0.2px;
  white-space: nowrap; text-shadow: 0 1px 0 #000;
}
#fps-meter.ok { color: #ffe08a; }
#fps-meter.bad { color: #ff8a80; }