/* ==========================================================================
   Paneller (modallar) – referans tasarım sayfasındaki ekranlar
   ========================================================================== */
#modalRoot { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(4, 2, 10, 0.64);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.24s ease;
  overflow-y: auto;
}
.modal-backdrop.show { opacity: 1; }
.modal-backdrop.hide { opacity: 0; pointer-events: none; }
.modal-backdrop.instant { transition: none; opacity: 1; }

.modal {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 60, 210, 0.16), transparent 60%),
    linear-gradient(180deg, #171026 0%, #0d0916 100%);
  border: 1px solid rgba(178, 150, 230, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 0 3px rgba(120, 90, 180, 0.08),
    0 0 40px rgba(110, 50, 210, 0.35),
    0 20px 60px rgba(0, 0, 0, 0.7);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.modal-backdrop.show .modal { transform: none; }
.modal-backdrop.instant .modal { transition: none; transform: none; }
.modal-backdrop.hide .modal { transform: translateY(8px) scale(0.97); }

/* köşe süsleri */
.m-orn { position: absolute; width: 16px; height: 16px; border-color: rgba(214, 190, 255, 0.6); border-style: solid; border-width: 0; pointer-events: none; z-index: 2; }
.m-orn.tl { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 10px; }
.m-orn.tr { right: -1px; top: -1px; border-right-width: 2px; border-top-width: 2px; border-top-right-radius: 10px; }
.m-orn.bl { left: -1px; bottom: -1px; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 10px; }
.m-orn.br { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 10px; }

.m-head {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  height: 54px;
  padding: 0 56px;
  border-bottom: 1px solid rgba(170, 140, 225, 0.22);
  background: linear-gradient(180deg, rgba(44, 30, 72, 0.85), rgba(18, 12, 30, 0.6));
  border-radius: 10px 10px 0 0;
}
.m-head h2 {
  position: relative;
  font-size: 23px;
  font-weight: 500;
  color: #f5f0ff;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.55), 0 2px 2px #000;
  white-space: nowrap;
}
.m-head h2::before,
.m-head h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 180, 255, 0.7));
}
.m-head h2::before { right: calc(100% + 14px); }
.m-head h2::after { left: calc(100% + 14px); transform: scaleX(-1); }
.m-close {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, rgba(60, 40, 100, 0.9), rgba(22, 15, 38, 0.95));
  border: 1px solid rgba(200, 175, 245, 0.5);
  transition: box-shadow 0.2s, transform 0.15s;
}
.m-close svg { width: 18px; height: 18px; }
.m-close:hover { box-shadow: 0 0 14px rgba(168, 85, 247, 0.85); transform: rotate(90deg); }

.m-body { padding: 22px 26px; overflow-y: auto; }
.m-foot {
  flex: none;
  padding: 10px 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  border-top: 1px solid rgba(170, 140, 225, 0.14);
}
.m-foot .i-svg { color: var(--violet-2); }

/* ---------------- Melek Geliştirme / İnşaat ---------------- */
.up-grid { display: grid; grid-template-columns: 290px 1fr; gap: 22px; align-items: center; }
.up-art { position: relative; height: 300px; display: grid; place-items: center; }
.up-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(120, 50, 220, 0.5)); }
.up-art-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.65), transparent);
  animation: artGlow 3s ease-in-out infinite;
}
@keyframes artGlow { 50% { transform: scale(1.12); opacity: 0.7; } }
.rune-ring {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(220, 180, 255, 0.75);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.8), inset 0 0 18px rgba(168, 85, 247, 0.6);
  transform: perspective(300px) rotateX(72deg);
  animation: rune 7s linear infinite;
  z-index: 0;
}
@keyframes rune { to { transform: perspective(300px) rotateX(72deg) rotateZ(360deg); } }

.up-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.up-info h3 { font-size: 27px; font-weight: 500; color: #fff; text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
.up-sub { font-size: 14px; color: var(--text-dim); margin-top: -4px; }
.up-lv { font-size: 28px; color: #f0e8ff; display: flex; align-items: center; gap: 10px; }
.up-lv.small { font-size: 20px; }
.arrow { color: var(--violet-2); font-weight: 700; }
.up-dmg { font-size: 19px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.up-dmg b { color: #e7c9ff; font-weight: 500; }
.up-rate { font-size: 13px; color: var(--text-mute); }
.up-stats { display: flex; gap: 28px; margin: 6px 0 4px; }
.up-stats > div { display: flex; flex-direction: column; gap: 6px; }
.up-stats label { font-size: 14px; color: var(--text-dim); }
.up-cost, .up-time { display: inline-flex; align-items: center; gap: 8px; font-size: 23px; color: #fff; }
.up-cost .i-flame { width: 24px; }
.up-cost.poor { color: var(--danger); }
.up-time .i-svg { width: 24px; height: 24px; color: #e6dcff; }
.up-note, .cons-note { font-size: 14px; color: var(--text-dim); }
.up-warn { font-size: 13px; color: #ffcf8a; max-width: 360px; }
.up-error { font-size: 14px; color: var(--danger); }
.up-info .btn-primary { margin-top: 10px; }

.cons-label { font-size: 16px; color: var(--text-2); margin-top: 6px; }
.cons-time { display: flex; align-items: center; gap: 10px; font-size: 26px; color: #fff; }
.cons-time .i-svg { width: 26px; height: 26px; }
.cons-bar {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 255, 0.25);
  overflow: hidden;
}
.cons-bar > i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #6d28d9, #a855f7 60%, #e9d5ff);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.9);
}
.cons-bar > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.btn-speed { font-size: 20px; gap: 8px; }
.btn-speed .sp-label { font-size: 17px; font-weight: 500; opacity: 0.95; }
.btn-speed .i-flame { width: 22px; }
.btn-speed.poor b { color: #ffc0d4; }

/* ---------------- Ruh Özü paneli (test) ---------------- */
.modal-shop { width: min(640px, 100%); }
.shop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 16px; color: var(--text-2); }
.shop-head b { color: #fff; font-size: 18px; margin-left: 4px; }
.test-badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0.08em; color: #ffd89a; border: 1px solid rgba(255, 200, 120, 0.55); background: rgba(80, 50, 10, 0.35); }
.secure-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; letter-spacing: 0.03em; color: #b9f5cf; border: 1px solid rgba(120, 230, 160, 0.5); background: rgba(10, 60, 30, 0.4); }
.secure-badge .i-svg, .secure-badge svg { width: 13px; height: 13px; }
.secure-badge.sandbox { color: #ffd89a; border-color: rgba(255, 200, 120, 0.55); background: rgba(80, 50, 10, 0.35); }
.pack-btn.tl { font-size: 0.92em; white-space: nowrap; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(36, 24, 60, 0.9), rgba(16, 11, 28, 0.95));
  border: 1px solid rgba(170, 140, 225, 0.3);
  box-shadow: inset 0 0 20px rgba(100, 50, 200, 0.15);
  transition: transform 0.18s ease, box-shadow 0.2s, border-color 0.2s;
}
.pack:hover { transform: translateY(-3px); border-color: rgba(210, 180, 255, 0.6); box-shadow: inset 0 0 26px rgba(130, 70, 230, 0.3), 0 0 18px rgba(168, 85, 247, 0.45); }
.pack-orb { position: relative; width: 78px; height: 78px; display: grid; place-items: center; }
.pack-orb > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(168, 85, 247, 0), rgba(200, 140, 255, 0.85), rgba(120, 60, 230, 0.1), rgba(220, 170, 255, 0.8), rgba(168, 85, 247, 0));
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 52%, #000 54%, #000 70%, transparent 72%);
  animation: orbSpin 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
}
.pack:nth-child(2n) .pack-orb > i { animation-duration: 6.5s; animation-direction: reverse; }
.pack-orb .i-flame.big { width: 40px; filter: drop-shadow(0 0 12px rgba(190, 110, 255, 1)); }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.pack-amt { display: inline-flex; align-items: center; gap: 4px; font-size: 19px; color: #fff; }
.pack-amt .i-flame { width: 18px; }
.pack-btn { margin-top: 2px; padding: 4px 14px; border-radius: 6px; font-size: 14px; color: #fff; background: linear-gradient(180deg, #7c46e0, #5226a8); box-shadow: inset 0 0 0 1px rgba(230, 200, 255, 0.45); }
.pack-btn { min-width: 64px; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pack-bonus { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a0f00; background: linear-gradient(180deg, #ffe08a, #f4c463); box-shadow: 0 0 10px rgba(244, 196, 99, 0.45); }
.pack-bonus.none { color: var(--text-dim); background: rgba(255, 255, 255, 0.06); box-shadow: none; font-weight: 500; }
.pack.got { animation: packGot 0.5s ease-out; }
@keyframes packGot { 30% { transform: scale(1.06); box-shadow: 0 0 30px rgba(200, 140, 255, 0.9); } }

/* ---------------- Sezon Sıralaması ---------------- */
.modal-ranking { width: min(780px, 100%); }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { height: 34px; padding: 0 18px; border-radius: 6px; font-size: 15px; color: var(--text-dim); border: 1px solid rgba(170, 140, 225, 0.25); background: rgba(24, 16, 40, 0.8); }
.tab.on { color: #fff; background: linear-gradient(180deg, #6c3bd0, #4a2296); border-color: rgba(220, 190, 255, 0.55); box-shadow: 0 0 12px rgba(140, 70, 240, 0.5); }
.rk-grid { display: grid; grid-template-columns: 1fr 210px; gap: 18px; align-items: start; }
.rk-list { max-height: min(430px, 56vh); overflow-y: auto; border-radius: 8px; border: 1px solid rgba(170, 140, 225, 0.16); background: rgba(8, 5, 14, 0.5); }
.rk-line { display: grid; grid-template-columns: 34px 30px 1fr auto; align-items: center; gap: 8px; padding: 9px 14px; font-size: 17px; color: var(--text-2); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.rk-line .n { text-align: center; font-variant-numeric: tabular-nums; }
.rk-line img { width: 26px; height: 26px; object-fit: contain; }
.rk-line img.low { filter: sepia(1) hue-rotate(220deg) saturate(2.4) brightness(0.9); }
.rk-line .sc { font-variant-numeric: tabular-nums; color: #f1ecfa; }
.rk-line.me { color: #fff; background: linear-gradient(90deg, #4d2b92, rgba(62, 36, 118, 0.7)); }
.rk-side { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.rk-trophy { width: 88px; height: auto; image-rendering: auto; filter: drop-shadow(0 0 18px rgba(245, 190, 90, 0.55)) drop-shadow(0 0 30px rgba(168, 85, 247, 0.5)); animation: trophyFloat 4s ease-in-out infinite; }
@keyframes trophyFloat { 50% { transform: translateY(-6px); } }
.rk-side-box { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 8px; border: 1px solid rgba(170, 140, 225, 0.25); background: rgba(20, 13, 34, 0.8); font-size: 14px; color: var(--text-dim); }
.rk-side-box > b { font-size: 21px; color: #fff; font-weight: 500; }
.rk-me b { color: #e2c4ff; }
.empty { padding: 26px 16px; color: var(--text-dim); text-align: center; font-size: 15px; }
.hist-line { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'hs hr' 'hd hdmg' 'hc hc'; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; color: var(--text-dim); }
.hist-line .hs { grid-area: hs; font-size: 17px; color: #fff; }
.hist-line .hr { grid-area: hr; text-align: right; font-size: 17px; color: #e2c4ff; }
.hist-line .hd { grid-area: hd; }
.hist-line .hdmg { grid-area: hdmg; text-align: right; font-variant-numeric: tabular-nums; }
.hist-line .hc { grid-area: hc; font-size: 13px; color: var(--text-mute); }
.hist-line.champ .hr { color: var(--gold); }

/* ---------------- Sezon Bilgileri ---------------- */
.modal-seasonInfo { width: min(680px, 100%); }
.si-grid { display: grid; grid-template-columns: 1fr 170px; gap: 10px 20px; }
.si-main { display: flex; flex-direction: column; gap: 8px; }
.si-main h3 { font-size: 24px; font-weight: 500; text-align: center; color: #fff; }
.si-days { font-size: 46px; line-height: 1; text-align: center; color: #e9c9ff; text-shadow: 0 0 18px rgba(190, 110, 255, 0.85); }
.si-desc { text-align: center; font-size: 15px; color: var(--text-2); }
.si-left { text-align: center; font-size: 15px; color: var(--text-dim); }
.si-left b { color: #fff; font-weight: 500; }
.si-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.si-bar > i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #6d28d9, #c084fc); box-shadow: 0 0 10px #a855f7; }
.si-main h4 { margin-top: 6px; font-size: 17px; font-weight: 500; color: #fff; }
.si-phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.si-phases li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-dim); padding: 4px 8px; border-radius: 6px; }
.si-phases li > i { width: 9px; height: 9px; transform: rotate(45deg); background: #8b5cf6; box-shadow: 0 0 6px #a855f7; }
.si-phases li b { color: var(--violet-2); font-weight: 500; }
.si-phases li.on { color: #fff; background: linear-gradient(90deg, rgba(110, 50, 210, 0.45), transparent); }
.si-phases li.on > i { background: #f0d9ff; box-shadow: 0 0 10px #e9d5ff; }
.si-glass { display: grid; place-items: center; }
.si-glass svg { width: 140px; height: auto; filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.7)); animation: glassFloat 5s ease-in-out infinite; }
.si-glass .hg-stream { animation: sand 0.6s linear infinite; }
@keyframes sand { 50% { opacity: 0.4; } }
@keyframes glassFloat { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.si-rules { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.si-rules > div { padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(170, 140, 225, 0.2); background: rgba(20, 13, 34, 0.7); }
.si-rules h5 { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.si-rules ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-dim); display: grid; gap: 3px; }

/* ---------------- Profilim ---------------- */
.modal-profile { width: min(640px, 100%); }
.pf-grid { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.pf-avatar { position: relative; display: block; border-radius: 50%; cursor: pointer; }
.pf-avatar img { width: 180px; height: auto; filter: drop-shadow(0 0 22px rgba(150, 70, 240, 0.65)); transition: filter 0.2s; }
.pf-avatar img.round { border-radius: 50%; }
.pf-avatar:hover img, .pf-avatar:focus-visible img { filter: drop-shadow(0 0 28px rgba(190, 120, 255, 0.95)) brightness(1.08); }
.pf-avatar:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 4px; }
.pf-av-edit { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font-size: 14px; color: #fff; white-space: nowrap; background: linear-gradient(180deg, #7c46e0, #5226a8); box-shadow: inset 0 0 0 1px rgba(230, 200, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5); }
.modal-avatars { width: min(720px, 100%); }
.av-lead { margin-bottom: 10px; color: var(--text-2); font-size: 15px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.av-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s, background-color 0.2s, transform 0.15s; }
.av-item img { width: 100%; max-width: 92px; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
.av-item span { font-size: 12px; line-height: 1.2; color: var(--text-dim); text-align: center; }
.av-item:hover { transform: translateY(-2px); border-color: var(--line); background: rgba(168, 85, 247, 0.1); }
.av-item:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.av-item.on { border-color: var(--violet-2); background: rgba(168, 85, 247, 0.18); box-shadow: 0 0 14px rgba(168, 85, 247, 0.45); }
.av-item.on span { color: #fff; }
.pf-info { display: flex; flex-direction: column; gap: 8px; }
.pf-name { display: flex; align-items: center; gap: 8px; font-size: 26px; color: #fff; }
.pf-name img { width: 30px; }
.pf-level { font-size: 19px; color: var(--text-2); }
.pf-bar { position: relative; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(200, 170, 255, 0.2); }
.pf-bar > i { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, #6d3be0, #a47bff); box-shadow: 0 0 10px rgba(150, 90, 255, 0.8); }
.pf-bar > span { position: absolute; right: 8px; top: 0; font-size: 11px; line-height: 14px; color: #fff; }
.pf-stats { display: grid; grid-template-columns: 1fr; gap: 0; margin: 6px 0; }
.pf-stats > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 15px; }
.pf-stats dt { color: var(--text-dim); }
.pf-stats dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }
.pf-edit { display: flex; flex-direction: column; gap: 8px; }
.pf-input { height: 42px; padding: 0 12px; font-size: 20px; border-radius: 8px; border: 1px solid rgba(200, 170, 255, 0.45); background: rgba(10, 6, 18, 0.9); color: #fff; outline: none; }
.pf-input:focus { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35); }
.pf-edit-btns { display: flex; gap: 10px; align-items: center; }
.pf-err { min-height: 18px; font-size: 13px; color: var(--danger); }
.modal-welcome { width: min(440px, 100%); }
.welcome { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 16px; line-height: 1.4; color: var(--text-2); }
.welcome .wl-lead { font-size: 18px; color: #fff; }
.welcome .wl-lead b { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
.welcome .wl-lead .i-flame { width: 18px; }
.welcome .btn-primary { margin-top: 4px; min-width: 160px; }
.pf-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 15px; color: var(--text-dim); }
.pf-account b { color: var(--text-2); font-weight: 500; word-break: break-all; }
.pf-acc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-ghost.danger { color: #ffb3c6; border-color: rgba(255, 107, 147, 0.45); }
.btn-ghost.danger:hover { color: #fff; border-color: var(--danger); box-shadow: 0 0 12px rgba(255, 107, 147, 0.35); }
.modal-deleteAccount { width: min(480px, 100%); }
.del-acc { display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: 16px; line-height: 1.4; }
.del-acc ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.del-warn { color: var(--danger); font-weight: 700; font-size: 17px; }
.del-label { margin-top: 4px; color: #fff; }
.del-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.del-note { font-size: 13.5px; color: var(--text-dim); }
.del-note a, .set-legal a { color: var(--violet-2); }
.set-legal { margin: 12px 0 0; font-size: 14px; color: var(--text-dim); text-align: center; }
.set-ver { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); text-align: center; opacity: .8; }

/* ---------------- Ayarlar ---------------- */
.modal-settings { width: min(580px, 100%); }
.set-list { display: flex; flex-direction: column; gap: 4px; }
.set-row { display: grid; grid-template-columns: 34px 130px 1fr; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.set-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #d6c4ff; background: rgba(60, 40, 100, 0.55); border: 1px solid rgba(170, 140, 225, 0.3); }
.set-ic svg { width: 18px; height: 18px; }
.set-row > label { font-size: 17px; color: #fff; }
.set-slider { display: flex; align-items: center; gap: 12px; }
.set-slider output { width: 42px; text-align: right; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.set-slider input[type='range'] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c3aed 0, #c084fc var(--v, 50%), rgba(255, 255, 255, 0.1) var(--v, 50%));
  outline: none;
}
.set-slider input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #b07cff 32%); box-shadow: 0 0 10px #a855f7; cursor: pointer; }
.set-slider input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #b07cff 32%); box-shadow: 0 0 10px #a855f7; cursor: pointer; }
.toggle { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); }
.toggle > i { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(200, 170, 255, 0.35); transition: background 0.2s; }
.toggle > i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #cbbbe6; transition: transform 0.2s, background 0.2s; }
.toggle[aria-checked='true'] > i { background: linear-gradient(90deg, #6d28d9, #a855f7); box-shadow: 0 0 10px rgba(168, 85, 247, 0.7); }
.toggle[aria-checked='true'] > i::after { transform: translateX(20px); background: #fff; }
.set-select { justify-self: end; position: relative; }
.set-select select {
  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  min-width: 150px;
  padding: 0 38px 0 12px;
  border-radius: 7px;
  font-size: 15px;
  border: 1px solid rgba(200, 170, 255, 0.35);
  background: linear-gradient(180deg, rgba(40, 28, 66, 0.95), rgba(22, 15, 38, 0.95));
  color: #fff;
  cursor: pointer;
}
.set-select::after { content: ''; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #d6c4ff; border-bottom: 2px solid #d6c4ff; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.set-select option { background: #1a1229; }
.set-actions { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.set-home { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; }
.set-home .i-svg { color: var(--violet-2); }
.test-tools { margin-top: 18px; padding: 10px 12px; border-radius: 8px; border: 1px dashed rgba(255, 200, 120, 0.35); background: rgba(40, 26, 8, 0.25); }
.test-tools summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 15px; color: #ffd89a; list-style: none; }
.test-tools summary::-webkit-details-marker { display: none; }
.test-tools p { margin: 8px 0; font-size: 13px; color: var(--text-dim); }
.tt-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------- Sezon Sonu ---------------- */
.modal-seasonEnd { width: min(520px, 100%); }
.se-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.se-crest { width: 260px; height: 130px; }
.se-crest svg { width: 100%; height: 100%; filter: drop-shadow(0 0 16px rgba(255, 200, 90, 0.45)) drop-shadow(0 0 26px rgba(168, 85, 247, 0.6)); animation: trophyFloat 3.5s ease-in-out infinite; }
.se-rank { font-size: 46px; line-height: 1; color: #ffe2a0; text-shadow: 0 0 20px rgba(255, 190, 80, 0.7), 0 2px 2px #000; }
.se-wrap:not(.champ) .se-rank { color: #ead6ff; text-shadow: 0 0 20px rgba(190, 110, 255, 0.8), 0 2px 2px #000; }
.se-msg { font-size: 16px; color: var(--text-2); }
.se-dmg { font-size: 16px; color: var(--text-dim); }
.se-dmg b { color: #fff; font-size: 20px; font-weight: 500; }
.se-top { list-style: none; counter-reset: r; width: 100%; max-width: 360px; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.se-top li { counter-increment: r; display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 6px; background: rgba(30, 20, 50, 0.7); font-size: 15px; color: var(--text-2); }
.se-top li::before { content: counter(r) '.'; color: var(--violet-2); width: 22px; text-align: left; }
.se-top li span { flex: 1; text-align: left; }
.se-top li.me { background: linear-gradient(90deg, #4d2b92, rgba(62, 36, 118, 0.7)); color: #fff; }
.se-reset { font-size: 13px; color: var(--text-dim); max-width: 400px; }

/* ---------------- Dar ekran ---------------- */
@media (max-width: 640px) {
  .m-body { padding: 16px; }
  .m-head h2 { font-size: 20px; }
  .m-head h2::before, .m-head h2::after { width: 26px; }
  .up-grid { grid-template-columns: 1fr; gap: 10px; }
  .up-art { height: 200px; overflow: hidden; }
  .up-info { align-items: stretch; }
  .up-info .btn-primary { align-self: center; }
  .up-stats { gap: 20px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .rk-grid { grid-template-columns: 1fr; }
  .rk-side { order: -1; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .rk-trophy { width: 54px; }
  .rk-side-box { width: auto; flex: 1; min-width: 160px; }
  .si-grid { grid-template-columns: 1fr; }
  .si-glass { display: none; }
  .si-rules { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; justify-items: center; }
  .pf-avatar img { width: 130px; }
  .av-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .av-item span { font-size: 11px; }
  .pf-info { width: 100%; }
  .set-row { grid-template-columns: 32px 1fr; }
  .set-row > :last-child { grid-column: 1 / -1; justify-self: stretch; }
  .set-select select { width: 100%; }
  .toggle { justify-self: start; }
}

/* ---------------- Yeni özellikler: pencereler ---------------- */
.ability { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; background: rgba(60, 36, 110, .35); border: 1px solid rgba(200, 170, 255, .3); }
.ab-ico { display: inline-flex; width: 22px; height: 22px; color: #f4c463; flex: none; margin-top: 1px; }
.ab-ico svg { width: 100%; height: 100%; }
.ability b { display: block; font-size: 15px; color: #fff; font-weight: 600; }
.ability span { font-size: 13.5px; color: var(--text-2); }
.ability strong { color: #fff; }
.ability strong.up { color: #b8f0c8; }
.up-cost.gift { font-size: 20px; color: #b8f0c8; font-weight: 600; }
.tab.dot::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #e3323d; vertical-align: 2px; }
.btn-ghost.sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn-primary.sm .i-flame { width: 16px; }

/* Kozmetikler */
.cos-note { font-size: 13px; color: var(--text-dim); max-width: 60%; }
.cos-list { display: flex; flex-direction: column; gap: 14px; max-height: min(480px, 60vh); overflow-y: auto; padding-right: 4px; }
.cos-sec h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; font-weight: 500; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cos-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 10px; text-align: center; background: linear-gradient(180deg, rgba(36, 24, 60, .9), rgba(16, 11, 28, .95)); border: 1px solid rgba(170, 140, 225, .28); }
.cos-item.is-on { border-color: #c79bff; box-shadow: 0 0 14px rgba(168, 85, 247, .45); }
.cos-item b { font-size: 14.5px; font-weight: 500; }
.cos-item small { font-size: 11.5px; color: #f0d39b; }
.cos-sw { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--b) 30%, var(--a) 70%, rgba(0, 0, 0, .2)); box-shadow: 0 0 16px var(--a); }
.cos-sw.cos-cards { width: 44px; height: 58px; border-radius: 7px; background: #1a1230; box-shadow: 0 0 0 2px var(--a), 0 0 14px var(--a); }
.cos-sw.cos-impact { background: radial-gradient(circle, transparent 38%, var(--a) 40%, transparent 48%, transparent 58%, var(--b) 60%, transparent 68%); box-shadow: none; }
.cos-state { font-size: 13px; color: var(--text-dim); }
.cos-state.on { color: #b8f0c8; }

/* Sıralama */
.rk-note { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; color: var(--text-2); background: rgba(60, 40, 14, .3); border: 1px solid rgba(244, 196, 99, .3); }
.rk-note .i-svg { color: #f4c463; flex: none; margin-top: 2px; }
.rk-line.prize .n { color: #f4c463; font-weight: 700; }
.rk-line.prize { box-shadow: inset 3px 0 0 #f4c463; }
.rk-skill { font-size: 12.5px; }
.rk-skill b { color: #fff; font-size: 13px; }

/* Sezon bilgisi / sonu */
.si-theme { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 9px; background: rgba(60, 36, 110, .35); border: 1px solid rgba(200, 170, 255, .3); }
.si-theme span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.si-theme b { font-size: 19px; color: #f0d39b; font-weight: 600; }
.si-theme em { font-style: normal; font-size: 13.5px; color: var(--text-2); }
.se-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.se-pair > div { display: flex; flex-direction: column; gap: 2px; padding: 9px; border-radius: 8px; background: rgba(30, 20, 50, .75); }
.se-pair span { font-size: 12px; color: var(--text-dim); }
.se-pair b { font-size: 24px; color: #fff; }
.se-pair em { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.se-tokens { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 10px; background: linear-gradient(180deg, rgba(110, 70, 20, .45), rgba(50, 30, 10, .5)); border: 1px solid rgba(244, 196, 99, .55); box-shadow: 0 0 16px rgba(244, 196, 99, .3); }
.se-tokens b { font-size: 22px; color: #ffe39a; }
.se-tokens span { font-size: 12.5px; color: var(--text-2); }

/* Görevler */
.q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.q-item, .q-bonus { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 9px; background: rgba(26, 17, 46, .85); border: 1px solid rgba(170, 140, 230, .22); }
.q-item.is-done, .q-bonus.is-done { border-color: rgba(244, 196, 99, .65); box-shadow: 0 0 12px rgba(244, 196, 99, .25); }
.q-item.is-claimed, .q-bonus.is-claimed { opacity: .6; }
.q-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.q-main b { font-size: 14.5px; font-weight: 500; color: #fff; }
.q-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.q-bar i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #6d28d9, #d8b4fe); box-shadow: 0 0 6px #a855f7; }
.q-item.is-done .q-bar i { background: linear-gradient(90deg, #d39a2f, #ffe39a); }
.q-reward { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #fff; white-space: nowrap; }
.q-reward .i-flame { width: 16px; }
.q-progress { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.q-claimed { display: inline-flex; width: 26px; height: 26px; color: #b8f0c8; }
.q-claimed svg { width: 100%; height: 100%; }
.q-bonus { margin-top: 6px; background: rgba(50, 32, 10, .35); }
.q-bonus > span:first-child { font-size: 14px; color: #f0d39b; }
.q-foot { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* Giriş serisi */
.lt-lead { text-align: center; font-size: 14.5px; color: var(--text-2); }
.login-track { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.lt-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 9px; border-radius: 9px; background: rgba(26, 17, 46, .85); border: 1px solid rgba(170, 140, 230, .22); }
.lt-n { font-size: 11.5px; color: var(--text-dim); }
.lt-day b { font-size: 14px; color: #fff; }
.lt-flame { width: 26px !important; }
.lt-chest { width: 34px; height: 30px; }
.lt-chest svg { width: 100%; height: 100%; }
.lt-day.got { opacity: .55; }
.lt-day.today { border-color: #ffe39a; box-shadow: 0 0 16px rgba(255, 200, 90, .5); background: linear-gradient(180deg, rgba(90, 60, 20, .5), rgba(30, 20, 46, .9)); animation: ltPulse 1.3s ease-in-out infinite alternate; }
.lt-day.chest { background: linear-gradient(180deg, rgba(80, 40, 140, .6), rgba(26, 17, 46, .9)); }
.lt-ok { position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; color: #b8f0c8; }
.lt-ok svg { width: 100%; height: 100%; }
@keyframes ltPulse { to { box-shadow: 0 0 22px rgba(255, 200, 90, .8); } }
.lt-note { font-size: 12.5px; color: var(--text-dim); text-align: center; margin-bottom: 10px; }
.modal-login .m-body, .modal-quests .m-body { display: flex; flex-direction: column; align-items: stretch; }
.modal-login .btn-primary, .modal-quests .login-track ~ .btn-primary { align-self: center; }
.modal-quests, .modal-login { width: min(640px, 100%); }
@media (max-width: 640px) {
  .login-track { grid-template-columns: repeat(4, 1fr); }
  .q-item, .q-bonus { grid-template-columns: 1fr auto; }
  .q-item > :last-child, .q-bonus > :last-child { grid-column: 1 / -1; justify-self: end; }
  .se-pair { grid-template-columns: 1fr; }
  .cos-note { max-width: none; }
}

/* ---------------- Arkadaş daveti ---------------- */
.is-invite .modal-quests { width: min(780px, 100%); }
.iv-wait, .iv-empty { margin: 6px 0; text-align: center; color: var(--text-2); font-size: 14px; }
.iv-lead { margin: 0 0 12px; text-align: center; font-size: 15.5px; color: var(--text-2); }
.iv-lead b { color: #ffe39a; }
.iv-grid { display: grid; grid-template-columns: 1fr 238px; gap: 16px; align-items: start; }
.iv-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.iv-code { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, rgba(60, 36, 104, .55), rgba(24, 14, 44, .7)); box-shadow: inset 0 0 0 1px rgba(200, 170, 255, .35), 0 0 18px rgba(140, 70, 240, .25); }
.iv-label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #bfaee6; }
.iv-value { grid-row: 2; font-size: 30px; font-weight: 700; letter-spacing: .08em; color: #fff; text-shadow: 0 0 14px rgba(190, 120, 255, .8); font-variant-numeric: tabular-nums; user-select: all; }
.iv-copy { grid-column: 2; grid-row: 1 / span 2; }
.iv-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 9px; background: rgba(10, 6, 20, .55); box-shadow: inset 0 0 0 1px var(--line); }
.iv-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #cfc3ea; }
.btn-ghost .i-svg, .iv-share .i-svg { display: inline-grid; width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.btn-ghost .i-svg svg, .iv-share .i-svg svg { width: 100%; height: 100%; }
.iv-share { align-self: stretch; }
.iv-status { min-height: 18px; margin: -2px 0 0; text-align: center; font-size: 13px; color: #b8f0c8; }
.iv-status.bad { color: #ff9cb6; }
.iv-steps { margin: 0; padding: 0; list-style: none; counter-reset: ivs; display: flex; flex-direction: column; gap: 6px; }
.iv-steps li { counter-increment: ivs; position: relative; padding-left: 30px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.iv-steps li::before { content: counter(ivs); position: absolute; left: 0; top: -1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #7a4bd2, #4f2b98); box-shadow: inset 0 0 0 1px rgba(230, 205, 255, .5); }
.iv-steps b { color: #ffe39a; }
.iv-redeem, .iv-redeemed { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(10, 6, 20, .5); box-shadow: inset 0 0 0 1px var(--line); }
.iv-redeemed { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.iv-redeemed .i-svg { width: 22px; height: 22px; color: #c9a8ff; flex: none; }
.iv-redeemed b { color: #fff; letter-spacing: .05em; }
.iv-prog { margin-left: auto; font-size: 13px; color: #b8f0c8; white-space: nowrap; }
.iv-redeem-row { display: flex; gap: 8px; }
.iv-input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(8, 5, 16, .8); color: #fff; font: inherit; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.iv-input:focus { outline: none; border-color: #c9a8ff; box-shadow: 0 0 0 3px rgba(168, 85, 247, .3); }
.iv-input::placeholder { color: #6f638c; letter-spacing: .08em; }
.iv-hint { font-size: 12px; color: #9a8fb5; }
.iv-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.iv-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.iv-qr-img { width: 100%; max-width: 238px; aspect-ratio: 1; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(200, 170, 255, .5), 0 0 22px rgba(140, 70, 240, .45); }
.iv-qr-img svg { display: block; width: 100%; height: 100%; }
.iv-qr figcaption { font-size: 12px; color: #a99dc2; text-align: center; }
.iv-fhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 14px; }
.iv-fhead span { font-size: 12px; color: #a99dc2; }
.iv-friends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 168px; overflow-y: auto; }
.iv-f { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(10, 6, 20, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-size: 13.5px; }
.iv-fn { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-fs { flex: none; font-size: 12px; color: #a99dc2; }
.iv-f.is-rewarded .iv-fs, .iv-f.is-qualified .iv-fs { color: #ffe39a; }
.iv-f.is-capped .iv-fs { color: #8c82a6; }
.iv-mode { margin: 12px 0 0; font-size: 12px; color: #8f84ab; text-align: center; }
.iv-mode.is-server { color: #9fd9b4; }
.pf-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 640px) {
  .iv-grid { grid-template-columns: 1fr; }
  .iv-side { align-items: stretch; }
  .iv-qr-img { max-width: 200px; }
  .iv-value { font-size: 26px; }
}

/* ---------------- Oda lobisi ---------------- */
.modal-lobby { width: min(560px, 100%); }
.modal-lobby .m-body { display: flex; flex-direction: column; }
.lb { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.lb > .btn-primary { align-self: center; min-width: 240px; }
.lb-wait { text-align: center; color: var(--text-2); }
.lb-state { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lb-state h3 { margin: 4px 0 0; font-size: 28px; font-weight: 700; color: #fff; }
.lb-state p { margin: 0; color: var(--text-2); font-size: 15px; }
.lb-state.bad h3 { color: #ff9cb6; }
.lb-tag { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e6d6ff; background: rgba(140, 80, 240, .25); box-shadow: inset 0 0 0 1px rgba(200, 160, 255, .45); }
.lb-tag.full { color: #2a1600; background: linear-gradient(180deg, #ffe39a, #f0a020); box-shadow: 0 0 16px rgba(255, 190, 80, .7); }
.lb-tag.run { color: #d7ffe6; background: rgba(40, 170, 100, .3); box-shadow: inset 0 0 0 1px rgba(120, 230, 170, .5); }
.lb-state.full h3 { color: #ffe39a; text-shadow: 0 0 16px rgba(255, 190, 80, .7); }
.lb-countdown { font-size: 64px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(190, 120, 255, .9); margin: 6px 0 2px; }
.lb-fill { display: flex; flex-direction: column; gap: 6px; }
.lb-bar { height: 14px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(200, 170, 255, .25); }
.lb-bar i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #6d2fd6, #b06cff, #ffe39a); box-shadow: 0 0 12px rgba(176, 108, 255, .8); transition: transform .4s ease; }
.lb-count { text-align: center; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lb-count b { font-size: 22px; color: #fff; }
.lb-prizes { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); }
.lb-prizes i { font-style: normal; margin-right: 4px; }
.lb-prizes b { color: #ffd27a; font-size: 17px; }
.lb-rules { margin: 0; padding: 12px 14px 12px 32px; border-radius: 10px; background: rgba(10, 6, 20, .5); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.lb-note { margin: 0; text-align: center; font-size: 14px; color: var(--text-2); }
.lb-ok { margin: 0; text-align: center; font-size: 14px; color: #b8f0c8; }
.lb-notify { align-self: center; }
.lb-actions { display: flex; justify-content: center; gap: 10px; }
.lb-msg { margin: 0; min-height: 18px; text-align: center; font-size: 14px; color: #ff9cb6; }
.lb-msg:empty { display: none; }
.lb-demo, .lb-last { margin: 0; text-align: center; font-size: 12.5px; color: #9a8fb5; }
.tt-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }