/* ============================================================
   Quizaro – Cyber Gaming Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg:           #080614;
  --bg-card:      rgba(16, 12, 38, 0.88);
  --bg-nav:       rgba(6, 4, 18, 0.55);
  --glass:        rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.09);
  --border:       rgba(120, 90, 255, 0.2);

  --accent:       #00d4ff;
  --accent-glow:  rgba(0, 212, 255, 0.4);
  --accent2:      #a855f7;
  --accent2-glow: rgba(168, 85, 247, 0.4);

  --gold:         #ffd700;
  --gold-glow:    rgba(255, 215, 0, 0.5);
  --silver:       #c8c8e8;
  --bronze:       #e07a30;

  --correct:      #00ff88;
  --correct-glow: rgba(0, 255, 136, 0.5);
  --wrong:        #ff3860;
  --wrong-glow:   rgba(255, 56, 96, 0.5);

  --coin:         #f59e0b;
  --coin-glow:    rgba(245, 158, 11, 0.5);

  --text:         #e8e6f8;
  --text-muted:   #7e7aaa;
  --text-dim:     #38345a;

  --radius:       12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
}

/* === Reset & Base ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; height: 100%; overflow: hidden; }

body {
  background-color: var(--bg);
  background-image: url('/img/subjects/bg_space.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Fira Sans Condensed', 'Segoe UI', system-ui, -apple-system, sans-serif;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(168, 85, 247, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 55%),
    rgba(8, 6, 20, 0.78);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Site Header ========================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
}

/* === Logo Bar (full header bar) ========================= */
.site-logo-bar {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 5px 1rem;
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}
.site-logo-link {
  display: flex;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo-img {
  height: 42px;
  width: auto;
  display: block;
}
.site-header-left,
.site-header-right {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.site-header-right { justify-content: flex-end; }

/* === Pizza Menu Button =================================== */
.pizza-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  transition: background .2s, filter .2s, transform .2s;
}
.pizza-btn:hover {
  filter: drop-shadow(0 0 10px rgba(255, 210, 60, .85)) drop-shadow(0 0 22px rgba(255, 140, 0, .55));
  transform: scale(1.08);
}
.pizza-btn__icon { width: 38px; height: 38px; object-fit: contain; display: block; }

/* === Avatar Menu Button ================================== */
.avatar-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  transition: background .2s;
}
.avatar-menu-btn:hover { background: rgba(255,255,255,.08); }

/* === Pizza Overlay ======================================= */
.pizza-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(6,4,18,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pizza-overlay--open {
  opacity: 1;
  pointer-events: all;
}
.pizza-overlay__inner {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 2rem 1.5rem;
}
.pizza-overlay__close {
  position: absolute;
  top: -1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: .3rem .5rem;
  transition: color .2s;
}
.pizza-overlay__close:hover { color: var(--text); }
.pizza-nav { display: flex; flex-direction: column; gap: .5rem; width: fit-content; margin: 0 auto; }
.pizza-nav__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  padding: .8rem 1.5rem;
  border-radius: var(--radius-lg);
  transition: background .2s, color .2s;
  letter-spacing: .01em;
}
.pizza-nav__item:hover { background: rgba(255,255,255,.08); color: var(--accent); text-decoration: none; }
.pizza-nav__icon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; }
.pizza-nav__icon .theme-icon { width: 2.4rem; height: 2.4rem; object-fit: contain; display: block; }
.pizza-nav__item--toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  width: 100%;
}
.pizza-nav__chevron {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform .3s ease;
  line-height: 1;
}
.pizza-nav__item--toggle[aria-expanded="true"] .pizza-nav__chevron {
  transform: rotate(90deg);
  color: var(--accent);
}
.pizza-nav__sub {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 700px;
  opacity: 1;
  margin: -.3rem 0 .4rem;
  transition: max-height .4s ease, opacity .28s ease, margin .35s ease;
}
.pizza-nav__sub--collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.pizza-nav__sub-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: .35rem 1.5rem .35rem 3.75rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.pizza-nav__sub-item:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  text-decoration: none;
}
.pizza-nav__sub-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

/* === Avatar Overlay ====================================== */
.avatar-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(12,4,28,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.avatar-overlay--open {
  opacity: 1;
  pointer-events: all;
}
.avatar-overlay__menu {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.avatar-overlay__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.avatar-overlay__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(168,85,247,.5);
  box-shadow: 0 0 20px rgba(168,85,247,.4);
}
.avatar-overlay__name {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text);
}
.avatar-overlay__nav {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: fit-content;
  margin: 0 auto;
}
.avatar-overlay__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  padding: .7rem 1.5rem;
  border-radius: var(--radius-lg);
  transition: background .2s, color .2s;
}
.avatar-overlay__item:hover { background: rgba(168,85,247,.15); color: var(--accent2); text-decoration: none; }
.avatar-overlay__item--special { color: var(--accent2); font-size: 1.3rem; }
.avatar-overlay__item--special:hover { color: var(--text); }
.avatar-overlay__item--toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.avatar-overlay__chevron {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform .3s ease;
  line-height: 1;
}
.avatar-overlay__item--toggle[aria-expanded="true"] .avatar-overlay__chevron {
  transform: rotate(90deg);
  color: var(--accent2);
}
.avatar-overlay__sub {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  overflow: hidden;
  max-height: 400px;
  opacity: 1;
  margin: -.2rem 0 .3rem;
  padding-left: 1rem;
  transition: max-height .35s ease, opacity .25s ease, margin .35s ease;
}
.avatar-overlay__sub--collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.avatar-overlay__sub-item {
  font-size: .85rem;
  color: var(--text-muted);
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.2);
  border-radius: var(--radius);
  padding: .4rem 1rem;
  text-decoration: none;
  transition: all .2s;
  display: block;
  text-align: left;
  white-space: nowrap;
}
.avatar-overlay__sub-item:hover { color: var(--accent2); background: rgba(168,85,247,.18); text-decoration: none; }

/* Close button (reuse pizza style) */
.avatar-overlay__close {
  position: absolute;
  top: -1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: .3rem .5rem;
  transition: color .2s;
}
.avatar-overlay__close:hover { color: var(--text); }

.nav-link {
  color: var(--text-muted);
  padding: .38rem .9rem;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 500;
  transition: all .2s ease;
  text-decoration: none;
  border: 1px solid transparent;
}
.nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.nav-link--admin { color: var(--gold); }
.nav-link--cta {
  background: linear-gradient(135deg, var(--accent), #0090b8);
  color: #000;
  font-weight: 700;
  border-color: transparent;
  box-shadow: 0 0 16px var(--accent-glow);
}
.nav-link--cta:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 28px var(--accent-glow);
  color: #000;
}
.nav-link--logout { color: var(--text-dim); font-size: .85rem; }
.nav-link--store  { color: var(--coin); font-weight: 600; }
.nav-link--store:hover { color: var(--gold); text-decoration: none; }

/* Coins in nav */
.nav-coins {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--coin);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  margin-right: .75rem;
}
.nav-coins img, .nav-coins .icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Profile dropdown */
.nav-profile { position: relative; }
.nav-profile__btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  padding: .25rem .65rem .25rem .3rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  transition: all .2s;
}
.nav-profile__btn:hover,
.nav-profile--open .nav-profile__btn {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}
.nav-profile__caret {
  font-size: .62rem;
  color: var(--text-muted);
  transition: transform .2s;
  margin-left: .1rem;
}
.nav-profile--open .nav-profile__caret { transform: rotate(180deg); }

.nav-profile__dropdown {
  display: none !important;
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: rgba(12, 8, 32, 0.97);
  border: 1px solid rgba(120, 90, 255, 0.3);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 32px rgba(0, 212, 255, 0.1);
  min-width: 195px;
  z-index: 500;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.nav-profile--open .nav-profile__dropdown { display: flex !important; }
.nav-profile__item {
  padding: .72rem 1.1rem;
  font-size: .88rem;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .55rem;
  transition: background .15s;
  white-space: nowrap;
}
.nav-profile__item:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.nav-profile__item--logout {
  color: var(--text-muted);
  border-top: 1px solid rgba(120, 90, 255, 0.15);
}

/* Katalog dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown__btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  padding: .38rem .85rem;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.nav-dropdown__btn:hover,
.nav-dropdown--open .nav-dropdown__btn {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(0, 212, 255, 0.08);
  text-decoration: none;
}
.nav-dropdown__caret {
  font-size: .62rem;
  color: var(--text-muted);
  transition: transform .2s;
}
.nav-dropdown--open .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  background: rgba(12, 8, 32, 0.97);
  border: 1px solid rgba(120, 90, 255, 0.3);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  min-width: 175px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 500;
  flex-direction: column;
  backdrop-filter: blur(16px);
}
.nav-dropdown--open .nav-dropdown__menu { display: flex; }
.nav-dropdown__item {
  padding: .68rem 1.1rem;
  font-size: .88rem;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-dropdown__item:hover { background: rgba(255,255,255,.05); color: var(--text); text-decoration: none; }
.nav-dropdown__item--active { color: var(--accent); font-weight: 600; }
.nav-dropdown__divider { height: 1px; background: rgba(120,90,255,.15); margin: .3rem 0; }

.nav-username {
  font-size: .88rem;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Layout ============================================== */
.page-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-left: 28px;
  padding-right: 28px;
}
.page-main {
  flex: 1;
  padding: 2rem 1.5rem;
  width: 100%;
}

.page-footer {
  flex-shrink: 0;
  margin-left: -28px;
  margin-right: -28px;
  padding: .7rem calc(1.5rem + 28px);
  color: var(--text-dim);
  font-size: .78rem;
  border-top: 1px solid rgba(120, 90, 255, 0.15);
  background: rgba(6, 4, 18, 0.6);
  backdrop-filter: blur(8px);
}
.page-footer__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-height: 2.5rem;
}
.page-footer__inner p {
  flex: 1;
  text-align: center;
}
.page-footer__logo {
  height: 22px;
  width: auto;
  opacity: .45;
  filter: brightness(0) invert(1);
  align-self: center;
}

/* === Online Bar ========================================== */
/* === Online Panel (slide-out right) ====================== */
.online-panel {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-220px);
  z-index: 300;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.online-panel--open {
  transform: translateY(-50%) translateX(0);
}
.online-panel__body {
  width: 220px;
  background: rgba(16,12,38,.97);
  border: 1px solid rgba(120,90,255,.3);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1rem;
  backdrop-filter: blur(16px);
}
.online-panel__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 28px;
  padding: .7rem .2rem;
  background: rgba(16,12,38,.92);
  border: 1px solid rgba(120,90,255,.3);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .65rem;
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  align-self: center;
}
.online-panel__tab:hover { background: rgba(30,22,65,.95); color: var(--text); }
.online-panel__tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.8);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.online-panel__tab-label { writing-mode: vertical-rl; font-size: .62rem; }
.online-panel__title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .85rem;
}

.online-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  min-height: 1rem;
}
.online-bar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .8);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,.7); }
  50%       { box-shadow: 0 0 14px rgba(34,197,94,1), 0 0 24px rgba(34,197,94,.4); }
}
.online-bar__label { font-size: .8rem; color: var(--text-muted); }
.online-bar__user {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: var(--text-muted);
  transition: color .2s;
}
.online-bar__user:hover { color: var(--text); }
.online-bar__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(120,90,255,.3);
}
.online-bar__more { font-size: .78rem; color: var(--text-muted); }

/* === Avatar Tooltip ====================================== */
.lb-avatar-tip {
  position: fixed;
  z-index: 9999;
  background: rgba(10, 7, 28, 0.96);
  border: 1px solid rgba(120, 90, 255, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  min-width: 280px;
  max-width: 320px;
  display: flex;
  gap: 1rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.8), 0 0 32px rgba(0,212,255,.08);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.lb-avatar-tip--visible { opacity: 1; pointer-events: auto; }
.lb-avatar-tip__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 70px;
}
.lb-avatar-tip__img {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(120,90,255,.3);
}
.lb-avatar-tip__name {
  font-weight: 700;
  font-size: .82rem;
  text-align: center;
  color: var(--text);
  word-break: break-word;
}
.lb-avatar-tip__lvl { text-align: center; }
.lb-avatar-tip__level {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: center;
  font-size: .8rem;
}
.lb-avatar-tip__level-star { font-size: .75rem; }
.lb-avatar-tip__level-num { font-weight: 800; color: var(--accent); }
.lb-avatar-tip__level-tier { color: var(--text-muted); font-size: .72rem; }
.lb-avatar-tip__xpbar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  margin-top: .3rem;
  overflow: hidden;
}
.lb-avatar-tip__xpbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px;
  transition: width .4s ease;
}
.lb-avatar-tip__right { flex: 1; min-width: 0; }
.lb-avatar-tip__stats {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .5rem;
}
.lb-avatar-tip__stat {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  gap: .5rem;
}
.lb-avatar-tip__stat span { color: var(--text-muted); }
.lb-avatar-tip__stat strong { color: var(--text); font-weight: 600; }
.lb-avatar-tip__divider { height: 1px; background: rgba(255,255,255,.08); margin: .5rem 0; }
.lb-avatar-tip__highlights { display: flex; flex-direction: column; gap: .25rem; }
.lb-avatar-tip__hl {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.lb-avatar-tip__hl-rank { font-size: .85rem; flex-shrink: 0; }
.lb-avatar-tip__hl-rank--1 { color: var(--gold); }
.lb-avatar-tip__hl-rank--2 { color: var(--silver); }
.lb-avatar-tip__hl-rank--3 { color: var(--bronze); }
.lb-avatar-tip__ach-label { font-size: .72rem; color: var(--text-muted); margin-bottom: .3rem; }
.lb-avatar-tip__ach-grid { display: flex; flex-wrap: wrap; gap: .25rem; }
.lb-avatar-tip__ach { font-size: 1.1rem; cursor: default; transition: transform .2s; }
.lb-avatar-tip__ach:hover { transform: scale(1.3); }
.lb-avatar-tip__loading { font-size: .8rem; color: var(--text-muted); padding: .5rem; }

/* === Toasts ============================================== */
.toast {
  position: fixed;
  bottom: 1.5rem; /* JS overrides this via inline style */
  right: 1.5rem;
  z-index: 20000;
  display: flex;
  align-items: center;
  gap: .85rem;
  background: rgba(12, 8, 32, 0.97);
  border: 1px solid rgba(120,90,255,.35);
  border-radius: var(--radius-lg);
  padding: .85rem 1.1rem;
  min-width: 260px;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 24px rgba(0,212,255,.1);
  backdrop-filter: blur(20px);
  animation: toast-in .35s cubic-bezier(.34,1.56,.64,1) both;
  transition: bottom .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast--hiding { animation: toast-out .3s ease forwards; }
@keyframes toast-out {
  to { opacity: 0; transform: translateY(20px) scale(.95); }
}
.toast--levelup {
  border-color: rgba(255, 215, 0, .5);
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 28px rgba(255,215,0,.3);
}
.toast--achievement {
  border-color: rgba(168, 85, 247, .5);
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 28px rgba(168,85,247,.3);
  opacity: 0;
  transition: opacity .3s ease;
}
.toast--achievement.toast--visible { opacity: 1; }
.toast__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(120,90,255,.3);
}
.toast__body { flex: 1; min-width: 0; }
.toast__action { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
.toast__name { font-weight: 700; font-size: .95rem; color: var(--text); }
.toast__levelup-icon { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 0 8px var(--gold-glow)); }
.toast__ach-icon { font-size: 1.8rem; flex-shrink: 0; }
.toast__ach-desc { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }

/* === Streak Modal ======================================== */
.streak-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(4, 3, 14, 0.92);
  backdrop-filter: blur(12px);
  padding: 2rem;
}
.streak-modal__stars { display: flex; gap: .75rem; font-size: 3.5rem; }
.streak-star {
  display: inline-block;
  opacity: 0;
  animation: star-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  filter: drop-shadow(0 0 16px var(--gold-glow));
}
@keyframes star-pop {
  from { opacity: 0; transform: scale(0) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.streak-modal__title {
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), #fff8a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .02em;
}
.streak-modal__sub { font-size: 1.15rem; color: var(--text); text-align: center; }
.streak-modal__hint { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }

/* === Lootbox Modal ======================================= */
.lootbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: rgba(4, 3, 14, 0.93);
  backdrop-filter: blur(14px);
  padding: 2rem;
  text-align: center;
}
.lootbox-box {
  font-size: 5rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 0 24px rgba(255,215,0,.5));
  animation: lootbox-float 2s ease-in-out infinite;
}
@keyframes lootbox-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}
.lootbox-box--shake { animation: lootbox-shake .6s ease !important; }
@keyframes lootbox-shake {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(-12deg) scale(1.1); }
  30%  { transform: rotate(12deg) scale(1.15); }
  45%  { transform: rotate(-10deg) scale(1.1); }
  60%  { transform: rotate(10deg) scale(1.05); }
  75%  { transform: rotate(-6deg); }
  90%  { transform: rotate(4deg); }
  100% { transform: rotate(0) scale(1); }
}
.lootbox-modal__title {
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), #fff060, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .08em;
}
.lootbox-modal__sub { font-size: 1rem; color: var(--text-muted); }
.lootbox-reward-amount {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 32px var(--gold-glow);
}

/* === Cards =============================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.card--glow {
  box-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(0,212,255,.08);
}

/* === Alerts ============================================== */
.alert {
  padding: .9rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1.2rem;
  font-size: .93rem;
  backdrop-filter: blur(8px);
}
.alert--success {
  background: rgba(0, 255, 136, .1);
  border: 1px solid rgba(0,255,136,.35);
  color: #86efac;
}
.alert--error {
  background: rgba(255, 56, 96, .1);
  border: 1px solid rgba(255,56,96,.35);
  color: #fca5a5;
}

/* === Forms =============================================== */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  margin-bottom: .5rem;
  font-size: .88rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .02em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(120,90,255,.25);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,212,255,.15), 0 0 20px rgba(0,212,255,.1);
}
.form-group select option { background: #14103a; color: var(--text); }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-checkbox {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .92rem;
  color: var(--text-muted);
}
.form-checkbox input { width: auto; }

/* === Buttons ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .15s;
  user-select: none;
  letter-spacing: .01em;
}
.btn:active:not(:disabled) { transform: translateY(3px) !important; }

/* Primary */
.btn--primary {
  background: linear-gradient(160deg, #38b6ff 0%, var(--accent) 50%, #007eb8 100%);
  color: #001a26;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  box-shadow: 0 5px 0 #005580, 0 8px 20px rgba(0,212,255,.3);
}
.btn--primary:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #005580, 0 16px 32px rgba(0,212,255,.45);
  filter: brightness(1.08);
  text-decoration: none;
}
.btn--primary:active:not(:disabled) {
  box-shadow: 0 2px 0 #005580, 0 3px 10px rgba(0,212,255,.3);
}

/* Gold */
.btn--gold {
  background: linear-gradient(180deg, #ffd54a 0%, #ff9a00 100%);
  color: #2b1a00;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(255,255,255,.25);
  box-shadow:
    0 6px 0 #b45309,
    0 0 28px rgba(255,170,0,.55),
    inset 0 2px 6px rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(180,80,0,.5);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
  overflow: hidden;
}
.btn--gold:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow:
    0 9px 0 #b45309,
    0 0 45px rgba(255,170,0,.85),
    inset 0 2px 8px rgba(255,255,255,.4);
  filter: brightness(1.06);
  text-decoration: none;
}
.btn--gold:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #b45309,
    0 0 15px rgba(255,170,0,.4),
    inset 0 2px 6px rgba(255,255,255,.2);
}

/* Danger */
.btn--danger {
  background: linear-gradient(160deg, #ff6b8a 0%, var(--wrong) 55%, #991a38 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 5px 0 #7a0028, 0 8px 20px rgba(255,56,96,.35);
}
.btn--danger:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #7a0028, 0 16px 32px rgba(255,56,96,.45);
  filter: brightness(1.08);
  text-decoration: none;
}
.btn--danger:active:not(:disabled) {
  box-shadow: 0 2px 0 #7a0028, 0 3px 10px rgba(255,56,96,.3);
}

/* Ghost */
.btn--ghost {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border: 1px solid rgba(120,90,255,.25);
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.2);
}
.btn--ghost:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,212,255,.07);
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 12px 24px rgba(0,212,255,.2);
  text-decoration: none;
}
.btn--ghost:active:not(:disabled) {
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
}

.btn--sm { padding: .42rem .95rem; font-size: .82rem; }
.btn--lg { padding: .95rem 2.2rem; font-size: 1.1rem; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

/* === Headings ============================================ */
.page-title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: .4rem;
  text-align: center;
  background: linear-gradient(135deg, #fff 30%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.01em;
}
.page-subtitle { color: var(--text-muted); margin-bottom: 2rem; text-align: center; font-size: .95rem; }

.page-header-tile {
  background: rgba(16,12,38,.10);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.5rem 2rem 1.25rem;
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.page-header-tile .page-title   { margin-bottom: .3rem; }
.page-header-tile .page-subtitle { margin-bottom: 0; }
.page-header-tile .page-header-tile__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .8rem;
}
.page-header-tile .page-header-tile__hint {
  color: var(--text-muted);
  font-size: .82rem;
  margin-top: .5rem;
}
/* ── Admin band helper (full-bleed, no rounded sides) ─── */
.admin-band {
  margin-left: calc(-1.5rem - 28px);
  width: calc(100% + 3rem + 56px);
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.page-header-tile--admin {
  background: rgba(180,20,40,.12);
  border-color: rgba(220,38,60,.25);
  padding: .55rem 1.5rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: -2rem;
  margin-bottom: 0;
}
.page-header-tile--admin .page-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  opacity: .85;
}
.page-header-tile--admin .page-subtitle {
  font-size: .8rem;
  margin: 0;
  opacity: .6;
}

/* Gap between admin title band and tab content */
.admin-tab-panel { padding-top: 7px; }

/* Admin filter bar — same band style as title bar */
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: .75rem;
  padding: .5rem 1.5rem;
  background: rgba(6,182,212,.07);
  border-top: 1px solid rgba(6,182,212,.22);
  border-bottom: 1px solid rgba(6,182,212,.22);
  border-left: none;
  border-right: none;
}
.admin-filter-input,
.admin-filter-select {
  padding: .38rem .65rem;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(220,38,60,.25);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .85rem;
}
.admin-filter-input { flex: 1; min-width: 160px; }
.admin-filter-sort-btn {
  padding: .38rem .75rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(220,38,60,.25);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.admin-filter-sort-btn:hover { background: rgba(255,255,255,.1); }
.admin-filter-count { font-size: .8rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* Admin tables — mobile-friendly overflow wrap */
.admin-table-wrap {
  overflow-x: auto;
  margin-left: calc(-1.5rem - 28px);
  width: calc(100% + 3rem + 56px);
  margin-bottom: .5rem;
}
@media (max-width: 768px) {
  .admin-band        { margin-left: calc(-1rem - 28px); width: calc(100% + 2rem + 56px); }
  .admin-table-wrap  { margin-left: calc(-1rem - 28px); width: calc(100% + 2rem + 56px); }
  .admin-filter-bar  { padding: .5rem 1rem; }
  .admin-col--tablet { display: none; }
  .page-header-tile--admin { padding: .5rem 1rem; margin-top: -1.5rem; }
}

/* === Auth Pages ========================================== */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 6rem 1rem 2rem;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(12, 8, 32, 0.92);
  border: 1px solid rgba(120,90,255,.3);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  padding-top: 1.5rem;
  box-shadow: 0 0 60px rgba(0,212,255,.12), 0 0 120px rgba(168,85,247,.08), 0 32px 80px rgba(0,0,0,.7);
  backdrop-filter: blur(24px);
  overflow: visible;
}
.auth-title {
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: .3rem;
  background: linear-gradient(135deg, #fff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-logo {
  text-align: center;
  margin-top: -90px;
  margin-bottom: .5rem;
}
.auth-logo img {
  height: 180px;
  width: auto;
  filter: drop-shadow(0 8px 24px rgba(0,212,255,.35));
}
.auth-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 2rem;
}
.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .88rem;
  color: var(--text-muted);
}

.default-credentials-hint {
  margin-bottom: 1rem;
  padding: .6rem .9rem;
  border-radius: var(--radius);
  background: rgba(0,212,255,.05);
  border: 1px solid rgba(0,212,255,.15);
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
}
.default-credentials-hint__label {
  display: block;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .25rem;
}
.default-credentials-hint code {
  font-family: monospace;
  color: var(--accent);
  background: rgba(0,212,255,.1);
  padding: .1rem .35rem;
  border-radius: 4px;
}

/* === Avatar frame wrap =================================== */
.avatar-frame-wrap { display: inline-flex; border-radius: 50%; flex-shrink: 0; }
.avatar-frame-wrap--nav  { }
.avatar-frame-wrap--hero { }
.avatar-frame-wrap--xs   { }

/* === Subject Color Themes ================================ */
.subject--geo        { --card-accent: #22c55e; --card-glow: rgba(34,197,94,.4); }
.subject--history    { --card-accent: #f97316; --card-glow: rgba(249,115,22,.4); }
.subject--physics    { --card-accent: #00d4ff; --card-glow: rgba(0,212,255,.4); }
.subject--chemistry  { --card-accent: #a855f7; --card-glow: rgba(168,85,247,.4); }
.subject--biology    { --card-accent: #14b8a6; --card-glow: rgba(20,184,166,.4); }
.subject--math       { --card-accent: #06b6d4; --card-glow: rgba(6,182,212,.4); }
.subject--german     { --card-accent: #f43f5e; --card-glow: rgba(244,63,94,.4); }
.subject--english    { --card-accent: #fb923c; --card-glow: rgba(251,146,60,.4); }
.subject--informatics { --card-accent: #818cf8; --card-glow: rgba(129,140,248,.4); }

/* === Dashboard =========================================== */
.dashboard-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
}
.dashboard-hero__title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: .75rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2, #c084fc) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dashboard-hero__sub {
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 2rem;
  font-size: .97rem;
  line-height: 1.7;
}
.dashboard-hero__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.dashboard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 80px;
}
.dashboard-step__icon  { font-size: 2rem; line-height: 1; }
.dashboard-step__label { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.dashboard-step__arrow {
  font-size: 1.4rem;
  color: var(--text-dim, var(--text-muted));
  opacity: .45;
  margin-bottom: .8rem; /* align with icon row */
}

.dashboard-section-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 2rem 0 .85rem;
}

/* Subject tiles grid */
.subject-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.subject-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem;
  width: 180px;
  height: 180px;
  background: rgba(10, 12, 30, 0.55);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  overflow: hidden;
}
@media (max-width: 480px) {
  .subject-tile { width: calc(50% - .5rem); height: auto; aspect-ratio: 1; }
}
.subject-tile:hover {
  transform: translateY(-5px);
  border-color: var(--card-accent, var(--accent));
  box-shadow: 0 12px 32px var(--card-glow, rgba(99,102,241,.3));
  text-decoration: none;
}

.subject-tile__icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transition: transform .22s ease, filter .22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.8rem;
  line-height: 1;
}
.subject-tile__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.subject-tile:hover .subject-tile__icon {
  transform: scale(1.1) translateY(-3px);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.55));
}
.subject-tile__name {
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  line-height: 1.25;
  transition: color .2s ease, text-shadow .2s ease;
}
.subject-tile:hover .subject-tile__name {
  color: var(--card-accent, var(--accent));
  text-shadow: 0 0 12px var(--card-glow, rgba(99,102,241,.6));
}
.subject-tile__count {
  font-size: .72rem;
  color: var(--text-muted);
}

/* Special tiles */
.subject-tile--all       { --card-accent: var(--accent); --card-glow: rgba(99,102,241,.35); }
.subject-tile--teststoff { --card-accent: #f59e0b;       --card-glow: rgba(245,158,11,.35); }
.subject-tile--group     { --card-accent: #34d399;       --card-glow: rgba(52,211,153,.35); }
.subject-tile--locked    { opacity: .5; pointer-events: none; cursor: not-allowed; }

/* Subject icons for tiles (matching existing catalog-card__icon rules) */
.subject--geo         .subject-tile__icon { background-image: url('/img/subjects/subject_geo.png'); }
.subject--history     .subject-tile__icon { background-image: url('/img/subjects/subject_history.png?v=2'); }
.subject--physics     .subject-tile__icon { background-image: url('/img/subjects/subject_physics.png'); }
.subject--chemistry   .subject-tile__icon { background-image: url('/img/subjects/subject_chemistry.png'); }
.subject--biology     .subject-tile__icon { background-image: url('/img/subjects/subject_biology.png'); }
.subject--math        .subject-tile__icon { background-image: url('/img/subjects/subject_math.png?v=2'); }
.subject--german      .subject-tile__icon { background-image: url('/img/subjects/subject_german.png?v=2'); }
.subject--english     .subject-tile__icon { background-image: url('/img/subjects/subject_english.png?v=2'); }
.subject--informatics .subject-tile__icon { background-image: url('/img/subjects/subject_informatics.png?v=2'); }

/* === Catalog Grid ======================================== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
}

.catalog-card {
  position: relative;
  cursor: default;
  transition: transform .28s ease;
  border: none;
  background: transparent;
  box-shadow: none;
}
.catalog-card__inner {
  padding: 2.2rem 2.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.catalog-card:hover {
  transform: translateY(-7px);
}

/* Card frame image overlay — sibling of __inner, NOT clipped by overflow:hidden */
.catalog-card__frame {
  position: absolute;
  inset: -2.5%;
  width: 105%;
  height: 105%;
  object-fit: fill;
  pointer-events: none;
  z-index: 2;
  display: block;
  filter: drop-shadow(0 0 8px rgba(138,43,226,.5)) drop-shadow(0 0 18px rgba(255,80,200,.2));
}
.catalog-card:hover .catalog-card__frame {
  filter: drop-shadow(0 0 14px rgba(255,0,200,.7)) drop-shadow(0 0 30px rgba(138,43,226,.4));
}

/* Subject icon */
.catalog-card__icon {
  width: 110px;
  height: 110px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: .8rem auto .2rem;
  filter:
    drop-shadow(0 0 16px rgba(138,43,226,.6))
    drop-shadow(0 4px 24px rgba(0,0,0,.5));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
  flex-shrink: 0;
}
.catalog-card:hover .catalog-card__icon {
  transform: scale(1.12) translateY(-6px);
  filter:
    drop-shadow(0 0 28px rgba(255,0,200,.55))
    drop-shadow(0 0 50px rgba(138,43,226,.35))
    drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.subject--geo         .catalog-card__icon { background-image: url('/img/subjects/subject_geo.png'); }
.subject--history     .catalog-card__icon { background-image: url('/img/subjects/subject_history.png?v=2'); }
.subject--physics     .catalog-card__icon { background-image: url('/img/subjects/subject_physics.png'); }
.subject--chemistry   .catalog-card__icon { background-image: url('/img/subjects/subject_chemistry.png'); }
.subject--biology     .catalog-card__icon { background-image: url('/img/subjects/subject_biology.png'); }
.subject--math        .catalog-card__icon { background-image: url('/img/subjects/subject_math.png?v=2'); }
.subject--german      .catalog-card__icon { background-image: url('/img/subjects/subject_german.png?v=2'); }
.subject--english     .catalog-card__icon { background-image: url('/img/subjects/subject_english.png?v=2'); }
.subject--informatics .catalog-card__icon { background-image: url('/img/subjects/subject_informatics.png?v=2'); }

/* Teststoff pulse */
.catalog-card--teststoff .catalog-card__frame {
  animation: teststoff-pulse 2.5s ease-in-out infinite;
}
.catalog-card--teststoff:hover .catalog-card__frame {
  animation: none;
  filter: drop-shadow(0 0 18px rgba(255,215,0,.9)) drop-shadow(0 0 40px rgba(255,150,0,.5));
}
@keyframes teststoff-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,215,0,.5)) drop-shadow(0 0 20px rgba(255,150,0,.25)); }
  50%       { filter: drop-shadow(0 0 20px rgba(255,215,0,.95)) drop-shadow(0 0 45px rgba(255,150,0,.55)); }
}

/* Locked state */
.catalog-card--locked { opacity: .75; }
.catalog-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,6,20,.78);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  z-index: 5;
  backdrop-filter: blur(4px);
}
.catalog-lock-icon { font-size: 2.2rem; }
.catalog-lock-label { font-weight: 700; color: var(--text-muted); font-size: .9rem; }
.catalog-lock-countdown { font-size: 1.3rem; font-weight: 800; color: var(--accent); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.catalog-subject {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--card-accent, var(--text));
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 0 20px rgba(var(--card-accent-rgb,138,43,226),.55);
  letter-spacing: .01em;
}

.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: var(--text-muted);
}

/* Badges pinned top-right inside the card */
.catalog-card__badges {
  position: absolute;
  top: calc(.85rem + 15px);
  right: calc(.9rem + 20px);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: flex-end;
  z-index: 4;
  pointer-events: none; /* badges selbst nicht klickbar */
}
.catalog-card__mat-icon-btn {
  pointer-events: auto; /* Button wieder aktivieren */
}

/* Type badges */
.catalog-type-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 99px;
}
.catalog-type-badge--quiz {
  background: rgba(0,212,255,.12);
  color: var(--accent);
  border: 1px solid rgba(0,212,255,.25);
}
.catalog-type-badge--teststoff {
  background: rgba(255,215,0,.12);
  color: var(--gold);
  border: 1px solid rgba(255,215,0,.3);
}
.catalog-type-badge--group {
  background: rgba(52,211,153,.12);
  color: #34d399;
  border: 1px solid rgba(52,211,153,.3);
}

/* Difficulty badge */
.difficulty-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 99px;
  border: 1px solid;
}
.difficulty-badge--leicht { background: rgba(0,255,136,.1); color: var(--correct); border-color: rgba(0,255,136,.25); }
.difficulty-badge--mittel { background: rgba(245,158,11,.1); color: var(--coin); border-color: rgba(245,158,11,.25); }
.difficulty-badge--schwer { background: rgba(255,56,96,.1); color: var(--wrong); border-color: rgba(255,56,96,.25); }

/* Record + attempts */
.catalog-card__record {
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .3rem .7rem;
}
.catalog-card__record-score {
  color: var(--gold);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255,215,0,.5);
}
.catalog-card__attempts-slot { min-height: 2.2rem; }
.catalog-attempts {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: center;
  padding: .3rem .5rem .4rem;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.catalog-attempts__text { line-height: 1.2; }
.catalog-attempts__bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.catalog-attempts__fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8a2be2, #00d4ff);
  box-shadow: 0 0 8px rgba(138,43,226,.7);
  transition: width .4s ease;
}
.catalog-attempts--exhausted {
  color: var(--wrong);
  background: rgba(255,56,96,.08);
  border-color: rgba(255,56,96,.2);
}

/* Card actions */
.catalog-card__actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: auto;
  padding-top: .4rem;
}
.catalog-card__lb-link {
  display: block;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: .15rem 0;
  transition: color .2s;
  letter-spacing: .01em;
}
.catalog-card__lb-link:hover { color: var(--gold); text-decoration: none; }

.catalog-card__material-slot { min-height: 2rem; display: flex; justify-content: center; }
.catalog-card__mat-icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: .2rem .4rem;
  border-radius: 8px;
  opacity: .55;
  transition: opacity .2s ease, transform .2s ease;
  margin-top: 20px;
  margin-right: 15px;
}
.catalog-card__mat-icon-btn:hover {
  opacity: 1;
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(0,212,255,.7)) drop-shadow(0 0 12px rgba(0,212,255,.4));
}
.catalog-card__mat-icon-btn .mat-count-badge {
  position: absolute;
  top: -.3rem;
  right: -.4rem;
}
.mat-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: rgba(0,212,255,.2);
  color: var(--accent);
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 700;
  padding: 0 .3rem;
}

/* Material modal */
.mat-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(4,3,14,.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(8px);
}
.mat-overlay--open { display: flex; }
.mat-modal {
  background: rgba(12,8,32,.97);
  border: 1px solid rgba(120,90,255,.35);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
}
.mat-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(120,90,255,.15);
}
.mat-modal__title { font-weight: 700; font-size: 1rem; }
.mat-modal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: .25rem .5rem;
  border-radius: 6px;
  transition: background .2s, color .2s;
}
.mat-modal__close:hover { background: rgba(255,56,96,.15); color: var(--wrong); }
.mat-modal__body { overflow-y: auto; padding: 1rem 1.4rem 1.4rem; flex: 1; }
.mat-loading, .mat-empty { text-align: center; color: var(--text-muted); padding: 2rem; }
.mat-file {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.mat-file:last-child { border-bottom: none; }
.mat-file__icon { font-size: 1.6rem; flex-shrink: 0; }
.mat-file__info { flex: 1; min-width: 0; }
.mat-file__name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-file__meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.mat-dl-btn { flex-shrink: 0; }

/* === Game Page =========================================== */
.game-wrapper {
  display: flex;
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
  align-items: flex-start;
}
.game-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

/* Game header */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.jokers { display: flex; gap: .6rem; }
.joker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(120,90,255,.3);
  border-radius: var(--radius);
  padding: .55rem .8rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  transition: all .2s;
  min-width: 58px;
}
.joker-btn:hover:not(:disabled) {
  border-color: var(--accent2);
  background: rgba(168,85,247,.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168,85,247,.25);
}
.joker-icon { font-size: 1.4rem; line-height: 1; }
.joker-btn--used { opacity: .3; cursor: not-allowed; }

/* Timer */
.timer-wrap { display: flex; justify-content: center; }
.timer-circle {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timer-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.timer-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke .5s ease;
}
.timer-num {
  position: absolute;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Eltern hint */
.eltern-hint {
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.35);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  font-size: .92rem;
  color: var(--text);
}

/* Question box */
.question-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,90,255,.2);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.question-level {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  opacity: .85;
}
.question-text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
}
.question-text--caption { font-size: 1rem; margin-top: .75rem; color: var(--text-muted); }
.question-image-wrap { margin-bottom: .75rem; }
.question-image { max-width: 100%; max-height: 280px; border-radius: var(--radius); object-fit: contain; border: 1px solid rgba(120,90,255,.2); }

/* Answer grid */
.answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.answer-btn {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(120,90,255,.22);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: .97rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s ease;
  backdrop-filter: blur(8px);
  min-height: 68px;
}
.answer-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(0,212,255,.1);
  box-shadow: 0 0 24px rgba(0,212,255,.25), inset 0 0 16px rgba(0,212,255,.06);
  transform: translateY(-2px);
}
.answer-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(120,90,255,.18);
  border: 1.5px solid rgba(120,90,255,.35);
  font-weight: 800;
  font-size: .88rem;
  color: var(--accent2);
  flex-shrink: 0;
}
.answer-btn--correct {
  background: rgba(0,255,136,.14) !important;
  border-color: var(--correct) !important;
  color: var(--correct) !important;
  box-shadow: 0 0 30px var(--correct-glow), inset 0 0 20px rgba(0,255,136,.08) !important;
  animation: correct-pulse .55s ease;
}
@keyframes correct-pulse {
  0%   { box-shadow: 0 0 0 0 var(--correct-glow); }
  50%  { box-shadow: 0 0 40px 12px rgba(0,255,136,.4); }
  100% { box-shadow: 0 0 30px var(--correct-glow); }
}
.answer-btn--wrong {
  background: rgba(255,56,96,.14) !important;
  border-color: var(--wrong) !important;
  color: var(--wrong) !important;
  animation: wrong-shake .5s ease;
}
@keyframes wrong-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}
.answer-btn--eliminated { opacity: .15; pointer-events: none; }
.answer-btn:disabled:not(.answer-btn--correct):not(.answer-btn--wrong):not(.answer-btn--eliminated) { opacity: .6; cursor: default; }

/* Prize ladder */
.prize-ladder {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 150px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
}
.prize-ladder-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: .4rem;
}
.prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .32rem .7rem;
  border-radius: 7px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  font-size: .76rem;
  color: var(--text-dim);
  transition: all .2s;
}
.prize-row--current {
  background: rgba(0,212,255,.14) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0,212,255,.4), inset 0 0 10px rgba(0,212,255,.1);
}
.prize-row--done { color: rgba(0,212,255,.35); border-color: rgba(0,212,255,.12); }
.prize-row--checkpoint {
  border-color: rgba(255,215,0,.35) !important;
  background: rgba(255,215,0,.06) !important;
  color: var(--gold);
}
.prize-row--checkpoint.prize-row--done { color: rgba(255,215,0,.4); }
.prize-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Result screen */
.result-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
}
.result-icon {
  font-size: 5rem;
  line-height: 1;
  filter: drop-shadow(0 0 24px rgba(255,215,0,.5));
  animation: result-icon-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes result-icon-in {
  from { opacity: 0; transform: scale(0) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.result-title {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(135deg, var(--gold), #fff8a0, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 20px var(--gold-glow));
}
.result-title--lose {
  background: linear-gradient(135deg, var(--wrong), #ffb3c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px var(--wrong-glow));
}
.result-score { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }
.result-score strong { color: var(--text); font-weight: 800; }
.coins-earned {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--coin);
  padding: .6rem 1.4rem;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 99px;
}
.result-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Win page body */
body.win-page { overflow: hidden; }
.confetti-piece {
  position: fixed;
  top: -10px;
  animation: confetti-fall linear forwards;
  pointer-events: none;
  z-index: 9999;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* === Leaderboard ========================================= */
.lb-back-link {
  display: inline-block;
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.lb-back-link:hover { color: var(--accent); text-decoration: none; }

.lb-strip-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.lb-strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex: 1;
  padding: .2rem .1rem;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-strip-arrow {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(120,90,255,.2);
  border-radius: 99px;
  color: var(--text-muted);
  cursor: pointer;
  padding: .35rem .65rem;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all .2s;
}
.lb-strip-arrow:hover { color: var(--accent); border-color: var(--accent); background: rgba(0,212,255,.08); }

.lb-cpill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: .65rem .85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(120,90,255,.2);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  font-size: .82rem;
  color: var(--text-muted);
  transition: all .2s;
  flex-shrink: 0;
  min-width: 140px;
  min-height: 96px;
  height: 96px;
}
.lb-cpill:hover { border-color: var(--accent); color: var(--text); text-decoration: none; background: rgba(0,212,255,.07); }
.lb-cpill--active {
  background: rgba(0,212,255,.12);
  border-color: var(--accent);
  color: var(--text);
  height: auto;
  min-height: 96px;
}
.lb-cpill--ts { border-color: rgba(255,215,0,.25); }
.lb-cpill--ts.lb-cpill--active { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,.1); }
.lb-cpill__name { font-weight: 700; font-size: .85rem; color: var(--text); margin-bottom: .15rem; }
.lb-cpill__sub  { font-size: .72rem; color: var(--text-muted); }
.lb-cpill__badge {
  font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .25rem;
  background: rgba(120,90,255,.15); border: 1px solid rgba(120,90,255,.25);
  padding: .1rem .4rem; border-radius: 99px; color: var(--text-muted);
}
.lb-cpill__date { font-size: .68rem; color: var(--text-muted); margin-top: .15rem; }
/* invisible spacer so pills without date stay same height */
.lb-cpill__date--placeholder { visibility: hidden; }

.lb-topn {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.lb-global-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .75rem calc(-1.5rem - 28px + 10px);
}
.lb-topn {
  margin-left: calc(-1.5rem - 28px + 10px);
}
.lb-global-wrap {
  overflow-x: auto;
  margin-left: calc(-1.5rem - 28px);
  margin-right: calc(-1.5rem - 28px);
}
.lb-topn__label { font-size: .82rem; color: var(--text-muted); }
.lb-topn__btn {
  padding: .3rem .75rem;
  border-radius: 99px;
  border: 1px solid rgba(120,90,255,.2);
  background: none;
  color: var(--text-muted);
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.lb-topn__btn:hover { border-color: var(--accent); color: var(--accent); }
.lb-topn__btn--active { background: rgba(0,212,255,.12); border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* Podium */
.podium-scene {
  position: relative;
  container-type: inline-size;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(0,212,255,.30),
    0 0 48px rgba(0,212,255,.20),
    0 0 96px rgba(120,90,255,.15);
  max-width: 860px;
  margin: 0 auto 1.5rem;
  aspect-ratio: 4/3;
  overflow: hidden;
  min-height: 240px;
}
.podium-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/leaderboard.png') center/cover no-repeat;
  opacity: 0.75;
  z-index: 0;
}
.podium-scene > * { position: relative; z-index: 1; }
.podium-particle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: particle-rise linear infinite;
}
@keyframes particle-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-80cqi) scale(0); opacity: 0; }
}

.podium-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqi;
  transform: translateX(-50%);
}
.podium-slot--1 { left: 49.88%; top: 19.4%; }
.podium-slot--2 { left: 23%; top: 40.2%; }
.podium-slot--3 { left: 76.3%; top: 40.2%; }
.podium-slot--empty { opacity: .35; }

.podium-medal, .podium-crown { font-size: 3.5cqi; line-height: 1; }
.podium-slot--2 .podium-medal,
.podium-slot--3 .podium-medal { display: none; }
.podium-crown { font-size: 8.64cqi; filter: drop-shadow(0 0 12px var(--gold-glow)); }

.podium-avatar-wrap {
  position: relative;
  border-radius: 50%;
  transition: transform .2s;
}
.podium-avatar-wrap:hover { transform: scale(1.06); }
.podium-avatar-wrap--1 { margin-bottom: 0.5cqi; margin-top: -1.15cqi; }
.podium-avatar { width: 16.3cqi; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: none; }
.podium-avatar-wrap--2 .podium-avatar,
.podium-avatar-wrap--3 .podium-avatar { width: 15cqi; aspect-ratio: 1; border: none; }
.podium-avatar-wrap--2,
.podium-avatar-wrap--3 { box-shadow: none !important; }
.podium-avatar--float { /* float animation paused */ }
.podium-crown--animated { display: inline-block; animation: crown-float 3s ease-in-out infinite; }
.podium-crown-img { width: 8.64cqi; height: 8.64cqi; object-fit: contain; filter: drop-shadow(0 0 12px var(--gold-glow)); }
@keyframes crown-float {
  0%,100% { transform: translateY(-1.14cqi) rotate(-6deg); }
  50%     { transform: translateY(-2.14cqi) rotate(6deg); }
}
.podium-avatar-ring { display: none; }
.podium-avatar-wrap--1 .podium-avatar { animation: avatar-glow-gold 2s ease-in-out infinite; }
@keyframes avatar-glow-gold {
  0%,100% { box-shadow: 0 0 20px rgba(255,215,0,.6), 0 0 50px rgba(255,215,0,.35), 0 0 80px rgba(255,215,0,.15); }
  50%     { box-shadow: 0 0 30px rgba(255,215,0,1),  0 0 70px rgba(255,215,0,.6),  0 0 120px rgba(255,215,0,.3); }
}
.podium-avatar-wrap--2 .podium-avatar { animation: avatar-glow-cyan 2s ease-in-out infinite; }
@keyframes avatar-glow-cyan {
  0%,100% { box-shadow: 0 0 20px rgba(0,212,255,.6), 0 0 50px rgba(0,212,255,.35), 0 0 80px rgba(0,212,255,.15); }
  50%     { box-shadow: 0 0 30px rgba(0,212,255,1),  0 0 70px rgba(0,212,255,.6),  0 0 120px rgba(0,212,255,.3); }
}
.podium-avatar-wrap--3 .podium-avatar { animation: avatar-glow-purple 2s ease-in-out infinite; }
@keyframes avatar-glow-purple {
  0%,100% { box-shadow: 0 0 20px rgba(180,0,255,.6), 0 0 50px rgba(180,0,255,.35), 0 0 80px rgba(180,0,255,.15); }
  50%     { box-shadow: 0 0 30px rgba(180,0,255,1),  0 0 70px rgba(180,0,255,.6),  0 0 120px rgba(180,0,255,.3); }
}
.podium-avatar-ring--1 { border-color: var(--gold); box-shadow: 0 0 16px var(--gold-glow); }
.podium-avatar-ring--2 { border-color: var(--silver); box-shadow: 0 0 10px rgba(200,200,200,.3); animation-delay: .5s; }
.podium-avatar-ring--3 { border-color: var(--bronze); box-shadow: 0 0 10px rgba(224,122,48,.3); animation-delay: 1s; }
@keyframes ring-pulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%     { transform: scale(1.08); opacity: 1; }
}
.podium-halo {
  position: absolute;
  top: -0.9cqi; left: 50%;
  transform: translateX(-50%);
  width: 10cqi; height: 1.9cqi;
  background: radial-gradient(ellipse, var(--gold-glow) 0%, transparent 70%);
  pointer-events: none;
}

.podium-cyber-ring {
  position: absolute;
  top: 16.5%;
  right: 9.71%;
  width: 3.6cqi;
  height: 3.6cqi;
  border-radius: 50%;
  border: 0.35cqi solid rgba(30,80,255,.15);
  border-top-color: rgba(30,80,255,.95);
  border-right-color: rgba(30,80,255,.55);
  box-shadow: 0 0 10px rgba(30,80,255,.4), inset 0 0 10px rgba(30,80,255,.1);
  animation: cyber-ring-spin 3s linear infinite;
}
@keyframes cyber-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes cyber-ring-spin-reverse {
  to { transform: rotate(-360deg); }
}
.podium-cyber-ring--purple {
  width: 7.9cqi;
  height: 7.9cqi;
  top: 13.7%;
  right: 7.62%;
  border: 0.35cqi solid rgba(180,0,255,.15);
  border-top-color: rgba(180,0,255,.95);
  border-right-color: rgba(180,0,255,.55);
  box-shadow: 0 0 10px rgba(180,0,255,.4), inset 0 0 10px rgba(180,0,255,.1);
  animation: cyber-ring-spin-reverse 3s linear infinite;
}

.podium-star-dot {
  position: absolute;
  top: 25.52%;
  left: 13.46%;
  width: 0.6cqi;
  height: 0.6cqi;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,200,.8) 40%, transparent 70%);
  animation: star-twinkle 2s ease-in-out infinite;
}
@keyframes star-twinkle {
  0%,100% { opacity: .2; transform: scale(.6); box-shadow: 0 0 4px 1px rgba(255,255,200,.2); }
  50%     { opacity: 1;  transform: scale(1);  box-shadow: 0 0 12px 4px rgba(255,255,200,.8), 0 0 24px 8px rgba(255,255,150,.4); }
}

.podium-slot--1 .podium-name { margin-top: 1.53cqi; }
.podium-badge {
  position: absolute;
  width: 8cqi;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: screen;
  transform: translateX(-50%);
}
.podium-badge--1 { width: 12.48cqi; left: 49.88%; top: 72.16%; filter: drop-shadow(0 0 6px rgba(255,215,0,.7)) drop-shadow(0 0 14px rgba(255,215,0,.4)); }
.podium-badge--2 { width: 8.36cqi; left: 22.19%; top: 77.73%; filter: drop-shadow(0 0 6px rgba(0,212,255,.7)) drop-shadow(0 0 14px rgba(0,212,255,.4)); }
.podium-badge--3 { width: 7.2cqi; left: 77.11%; top: 78.66%; filter: drop-shadow(0 0 6px rgba(180,0,255,.7)) drop-shadow(0 0 14px rgba(180,0,255,.4)); }

.podium-slot--2 .podium-name,
.podium-slot--3 .podium-name { margin-top: 1.78cqi; }
.podium-name {
  font-size: 1.6cqi; font-weight: 700; color: #fff; text-align: center;
  max-width: 14cqi; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,.8);
}
.podium-name--1 { font-size: 1.9cqi; color: var(--gold); }
.podium-score {
  font-size: 1.5cqi; color: rgba(255,255,255,.85); font-weight: 600;
  text-shadow: 0 1px 5px rgba(0,0,0,1);
  margin-top: -0.3cqi;
}
.podium-score--1 { font-size: 1.7cqi; color: var(--gold); font-weight: 800; }
.podium-time {
  font-size: 1.4cqi; color: rgba(255,255,255,.65);
  text-shadow: 0 1px 4px rgba(0,0,0,1);
  margin-top: -0.3cqi;
}

/* Leaderboard table */
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.lb-table th {
  text-align: left;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(120,90,255,.15);
}
.lb-table td {
  padding: .45rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tbody tr:hover td { background: rgba(0,212,255,.04); }
.lb-table tr[data-rank="1"] td { background: rgba(255,215,0,.04); }
.lb-table tr[data-rank="2"] td { background: rgba(200,200,200,.02); }
.lb-table tr[data-rank="3"] td { background: rgba(224,122,48,.03); }

.lb-player { display: flex; align-items: center; gap: .65rem; }

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  font-weight: 800;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
}
.rank-badge--1 { background: rgba(255,215,0,.18); border-color: rgba(255,215,0,.4); color: var(--gold); font-size: 1rem; }
.rank-badge--2 { background: rgba(200,200,200,.12); border-color: rgba(200,200,200,.3); color: var(--silver); font-size: 1rem; }
.rank-badge--3 { background: rgba(224,122,48,.14); border-color: rgba(224,122,48,.3); color: var(--bronze); font-size: 1rem; }
.rank-badge--n { }

.badge {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
}
.badge--active { background: rgba(0,255,136,.12); color: var(--correct); border: 1px solid rgba(0,255,136,.25); }
.badge--inactive { background: rgba(255,56,96,.1); color: var(--wrong); border: 1px solid rgba(255,56,96,.2); }

.score-complete { font-weight: 700; color: var(--text); }

/* Catalog leaderboard header */
.lb-catalog-header { text-align: center; margin-bottom: 1.5rem; }
.lb-catalog-subject { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.lb-catalog-subtitle { font-size: .95rem; color: var(--text-muted); margin-top: .3rem; }
.lb-catalog-meta { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.lb-catalog-date { font-size: .82rem; color: var(--text-muted); }

/* === Profile Page ======================================== */
.profile-hero {
  background: var(--bg-card);
  border: 1px solid rgba(var(--hero-color, 59,130,246),.25);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.profile-hero::before {
  content: '';
  position: absolute;
  top: -40px; left: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.profile-hero__avatar-wrap { position: relative; flex-shrink: 0; }
.profile-hero__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(0,212,255,.3);
  display: block;
}
.profile-hero__lvl-badge {
  position: absolute;
  bottom: -4px; right: -4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 99px;
  padding: .15rem .5rem;
  display: flex;
  align-items: center;
  gap: .2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.profile-hero__lvl-star { font-size: .7rem; }
.profile-hero__lvl-num { font-size: .78rem; font-weight: 800; color: #000; }
.profile-hero__info { flex: 1; min-width: 0; }
.profile-hero__name { font-size: 1.5rem; font-weight: 900; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero__email { font-size: .82rem; color: var(--text-muted); margin-top: .1rem; }
.profile-hero__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.profile-tier-pill {
  padding: .22rem .65rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(0,212,255,.12);
  border: 1px solid rgba(0,212,255,.3);
  color: var(--accent);
}
.profile-streak-pill {
  padding: .22rem .65rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  color: var(--coin);
}
.profile-new-pill {
  padding: .22rem .65rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.3);
  color: var(--accent2);
}
.profile-hero__meta { font-size: .78rem; color: var(--text-dim); }

/* XP Card */
.profile-xp-card { margin-bottom: 1.25rem; padding: 1.4rem; }
.xp-card { display: flex; align-items: center; gap: 1.25rem; }
.xp-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  flex-shrink: 0;
  box-shadow: 0 0 20px var(--accent-glow);
}
.xp-badge__star { font-size: .9rem; }
.xp-badge__level { font-size: 1.25rem; font-weight: 900; color: #000; line-height: 1; }
.xp-info { flex: 1; min-width: 0; }
.xp-level-title { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
}
.xp-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px;
  transition: width .6s cubic-bezier(.34,1.1,.64,1);
  box-shadow: 0 0 10px var(--accent-glow);
}
.xp-text { font-size: .78rem; color: var(--text-muted); margin-top: .45rem; }

/* Stats grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1rem;
  text-align: center;
  backdrop-filter: blur(12px);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,212,255,.15); }
.stat-card__icon { font-size: 1.6rem; margin-bottom: .35rem; }
.stat-card__value { font-size: 1.35rem; font-weight: 900; color: var(--text); line-height: 1; }
.stat-card__label { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; font-weight: 500; }
.stat-card__sub { font-size: .72rem; color: var(--accent); margin-top: .15rem; }

/* Rank card */
.profile-rank-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.4rem;
}
.profile-rank-card--top { border-color: rgba(255,215,0,.35); box-shadow: 0 0 24px rgba(255,215,0,.15); }
.profile-rank__icon { font-size: 2.2rem; flex-shrink: 0; }
.profile-rank__inner { flex: 1; }
.profile-rank__label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.profile-rank__pos { font-size: 1.15rem; font-weight: 800; color: var(--text); }

/* Profile section */
.profile-section-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Achievements */
.profile-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .7rem;
}
.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .8rem .5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,90,255,.18);
  border-radius: var(--radius);
  cursor: default;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  text-align: center;
}
.achievement-badge:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--accent2);
  box-shadow: 0 6px 20px rgba(168,85,247,.25);
}
.achievement-badge__icon { font-size: 1.8rem; }
.achievement-badge__label { font-size: .68rem; color: var(--text-muted); font-weight: 600; word-break: break-word; }

/* Catalog list */
.profile-catalog-list { display: flex; flex-direction: column; gap: .6rem; }
.profile-catalog-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(120,90,255,.12);
  border-radius: var(--radius);
  transition: background .2s;
}
.profile-catalog-item:hover { background: rgba(0,212,255,.04); }
.profile-catalog-rank {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.2);
  color: var(--accent);
  font-weight: 800;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-catalog-info { flex: 1; min-width: 0; }
.profile-catalog-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-catalog-meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .2rem; font-size: .74rem; }
.profile-catalog-score { text-align: right; flex-shrink: 0; }
.profile-catalog-score__val { font-size: 1rem; font-weight: 800; color: var(--text); }
.profile-catalog-score__sub { font-size: .72rem; color: var(--text-muted); }

/* Avatar grid in profile */
.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .7rem;
}
.profile-av-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .7rem .4rem;
  border-radius: var(--radius);
  border: 1px solid rgba(120,90,255,.15);
  position: relative;
  transition: border-color .2s, box-shadow .2s;
  cursor: default;
}
.profile-av-item--equipped {
  border-color: rgba(255,215,0,.5);
  box-shadow: 0 0 16px rgba(255,215,0,.2);
}
.profile-av-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(120,90,255,.2); }
.profile-av-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  font-size: .65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-av-name { font-size: .68rem; color: var(--text-muted); text-align: center; word-break: break-word; }

/* === Store =============================================== */
.coins-display {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--coin);
  padding: .5rem 1.2rem;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 99px;
  box-shadow: 0 0 20px rgba(245,158,11,.2);
}
.xp-level-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent);
}
.xp-level-pill__star { font-size: .8rem; }
.xp-level-pill__tier { color: var(--text-muted); font-weight: 500; font-size: .82rem; }

/* Store tabs (shared with admin) */
.admin-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(120,90,255,.15);
  padding-bottom: .5rem;
}
.admin-tab-btn {
  padding: .5rem 1.1rem;
  border-radius: 99px 99px 0 0;
  border: 1px solid transparent;
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.admin-tab-btn:hover { color: var(--text); background: rgba(0,212,255,.08); }
.admin-tab-btn.active,
.admin-tab-btn--active,
.admin-tab-btn[data-active="true"] {
  color: var(--accent);
  border-color: rgba(0,212,255,.3);
  background: rgba(0,212,255,.1);
}

/* Admin nav cards grid */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-nav-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s, background .2s, transform .15s;
}
.admin-nav-card:hover {
  border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.07);
  transform: translateY(-2px);
}
.admin-nav-card__title {
  font-weight: 600;
  font-size: .95rem;
}
.admin-nav-card__sub {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .15rem;
}
.admin-stat-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Admin section title */
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin: 1.5rem 0 .75rem;
  letter-spacing: .03em;
}

/* Settings box */
.settings-box {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.settings-box__title {
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--accent2);
}
.settings-box__desc {
  font-size: .83rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Admin tab badge (count pill on tab button) */
.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(0,212,255,.18);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  margin-left: .35rem;
  line-height: 1;
}

/* Admin stat cards (Übersicht tab) */
.admin-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}
.admin-stat-val {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.admin-stat-label {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

/* Danger nav card variant */
.admin-nav-card--danger {
  border-color: rgba(255,56,96,.25);
  background: rgba(255,56,96,.06);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
}
.admin-nav-card--danger:hover {
  border-color: rgba(255,56,96,.5);
  background: rgba(255,56,96,.12);
}

/* Data table (users, catalogs) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.data-table th {
  text-align: left;
  padding: .55rem .75rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: .55rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.data-table tbody tr:hover td {
  background: rgba(0,212,255,.03);
}

/* Status / role badges */
.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
}
.badge--active     { background: rgba(0,255,136,.14); color: var(--correct); }
.badge--inactive   { background: rgba(255,56,96,.12);  color: var(--wrong); }
.badge--admin      { background: rgba(0,212,255,.15);  color: var(--accent); }
.badge--superadmin { background: rgba(168,85,247,.2);  color: var(--accent2); }

/* Context / pizza menu */
.ctx-menu { position: relative; display: inline-block; }
.ctx-menu__btn {
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: .2rem .55rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  line-height: 1;
}
.ctx-menu__btn:hover { border-color: var(--accent); color: var(--text); }
.ctx-menu__dropdown {
  display: none;
  position: fixed;
  min-width: 200px;
  background: rgba(10,8,28,.97);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  z-index: 500;
  overflow: hidden;
}
.ctx-menu__dropdown--open { display: block; }
.ctx-menu__item {
  display: block;
  width: 100%;
  padding: .55rem .9rem;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: .85rem;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
}
.ctx-menu__item:hover        { background: rgba(0,212,255,.09); }
.ctx-menu__item--danger      { color: var(--wrong); }
.ctx-menu__item--danger:hover{ background: rgba(255,56,96,.12); }
.ctx-menu__item--warn        { color: var(--gold); }
.ctx-menu__item--warn:hover  { background: rgba(255,215,0,.08); }
.ctx-menu__item--ok          { color: var(--correct); }
.ctx-menu__sep {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: .25rem 0;
}

.store-tab-panel { }
.store-tab-panel[hidden] { display: none; }

/* Store item grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
}
.store-card {
  background: rgba(30, 22, 65, 0.98);
  border: 1px solid rgba(120,90,255,.28);
  border-radius: var(--radius-lg);
  padding: 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  backdrop-filter: blur(12px);
}
.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,212,255,.15);
  border-color: rgba(0,212,255,.3);
}
.store-card--equipped {
  border-color: rgba(255,215,0,.5) !important;
  box-shadow: 0 0 24px rgba(255,215,0,.2) !important;
}
.store-card--level-locked,
.store-card--locked { opacity: .6; }
.store-card__badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 10;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 99px;
  letter-spacing: .04em;
}
.store-card__badge--equipped { background: rgba(255,215,0,.2); color: var(--gold); border: 1px solid rgba(255,215,0,.4); }
.store-card__badge--owned { background: rgba(0,255,136,.12); color: var(--correct); border: 1px solid rgba(0,255,136,.25); }
.store-card__badge--locked { background: rgba(120,90,255,.12); color: var(--text-muted); }
.store-card__img-wrap { margin: .25rem 0; }
.store-card__img-wrap .avatar { width: 96px; height: 96px; }

/* Store frame preview (circle, shows avatar + frame box-shadow) */
.store-frame-preview {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--bg-page);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .25s;
}

/* Store tooltip-bg preview thumbnail */
.store-tipbg-preview {
  width: 80px; height: 56px;
  border-radius: var(--radius);
  background: var(--bg-page);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.store-card__name { font-weight: 700; font-size: .85rem; text-align: center; }
.store-level-req {
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 99px;
}
.store-level-req--locked { background: rgba(255,56,96,.1); color: var(--wrong); border: 1px solid rgba(255,56,96,.2); }
.store-level-req--ok { background: rgba(0,255,136,.08); color: var(--correct); border: 1px solid rgba(0,255,136,.15); }
.store-card__price {
  font-size: .88rem;
  font-weight: 700;
  color: var(--coin);
}
.store-card__price--free { color: var(--correct); }

/* Inline theme icon (replaces emoji with custom upload) */
.theme-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.15em;
  object-fit: contain;
  display: inline-block;
}

/* Avatar sizes */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}
.avatar--nav  { width: 32px; height: 32px; }
.avatar--xs   { width: 30px; height: 30px; }
.avatar--lg   { width: 72px; height: 72px; }
.avatar--equipped { border: 3px solid var(--gold); box-shadow: 0 0 14px var(--gold-glow); }

/* === Admin Area ========================================== */
.admin-area { }

/* Avatar admin grid */
.avatar-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.avatar-admin-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 1rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  transition: border-color .2s;
}
.avatar-admin-card:hover { border-color: rgba(255,255,255,.18); }
.avatar-admin-card--inactive { opacity: .45; }
.avatar-admin-card__name  { font-size: .82rem; font-weight: 700; color: var(--text); word-break: break-word; }
.avatar-admin-card__meta  { font-size: .75rem; color: var(--text-muted); }
.avatar-admin-card__actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin-top: .25rem; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.admin-table th {
  text-align: left;
  padding: .7rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(120,90,255,.15);
}
.admin-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.admin-table tbody tr:hover td { background: rgba(0,212,255,.03); }

/* === Responsive ========================================== */
@media (max-width: 768px) {
  .page-main { padding: 1.5rem 1rem; }
  .lb-col--tablet { display: none; }
  .lb-global-wrap { margin-left: calc(-1rem - 28px); margin-right: calc(-1rem - 28px); }
  .lb-table th, .lb-table td { padding: .6rem .75rem; font-size: .85rem; }
  .catalog-card__inner { padding: 1.4rem 1.6rem 1.2rem; gap: .4rem; }
  .catalog-card__icon { width: 80px; height: 80px; margin: .4rem auto .1rem; }

  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }

  .game-wrapper { flex-direction: column; }
  .prize-ladder {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    position: static;
  }
  .prize-row { flex: 1; min-width: 80px; justify-content: center; gap: .3rem; font-size: .7rem; }
  .prize-ladder-title { width: 100%; }

  .answers-grid { grid-template-columns: 1fr; }

  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }

  .podium-scene { min-height: 180px; }

  .auth-wrapper { padding: 5rem 1rem 2rem; }
  .auth-logo { margin-top: -80px; }
  .auth-logo img { height: 150px; }

  .toast { right: .75rem; left: .75rem; max-width: none; min-width: 0; bottom: 1.5rem; }

  .store-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 600px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card__inner { padding: 1rem 1.2rem .9rem; gap: .3rem; }
  .catalog-card__icon { width: 64px; height: 64px; margin: .2rem auto 0; }
}

@media (max-width: 480px) {
  .nav-links { gap: .35rem; }
  .nav-link { padding: .32rem .65rem; font-size: .82rem; }
  .nav-coins { font-size: .78rem; }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .answers-grid { gap: .55rem; }
  .answer-btn { padding: .9rem 1rem; font-size: .9rem; }
}