:root {
  --bg: #080c14;
  --panel: #111827;
  --panel2: #182235;
  --text: #eef2ff;
  --muted: #94a3b8;
  --brand: #8083ff;
  --mint: #4edea3;
  --pink: #f472b6;
  --amber: #ffb95f;
}
body {
  background: radial-gradient(
    circle at top,
    #16213b 0,
    #080c14 45%,
    #05070d 100%
  );
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}
.app-nav {
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--pink));
  box-shadow: 0 0 24px rgba(128, 131, 255, 0.45);
}
.nav-link {
  color: var(--muted) !important;
}
.nav-link.active,
.nav-link:hover {
  color: #fff !important;
}
.hero {
  background: linear-gradient(
    135deg,
    rgba(45, 58, 95, 0.98),
    rgba(18, 28, 46, 0.98)
  );
  border-radius: 1.5rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.glass,
.card,
.modal-content {
  background: linear-gradient(
    180deg,
    rgba(24, 34, 53, 0.94),
    rgba(17, 24, 39, 0.94)
  );
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  border-radius: 1rem;
}
.card a,
.card {
  color: var(--text);
}
.form-control,
.form-select {
  background: #0b1220;
  color: var(--text);
  border-color: #26334a;
}
.form-control::placeholder {
  color: #64748b;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #6366f1);
  border: 0;
}
.btn-success {
  background: var(--mint);
  border: 0;
  color: #04130d;
}
.lang-select {
  width: 140px;
  min-width: 140px;
}
.user-avatar {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-weight: 800;
}
.user-avatar::after {
  display: none;
}
.dropdown-menu-dark {
  background: #0b1220;
  border-color: #26334a;
}
.dropdown-item {
  color: var(--text);
}
.dropdown-item:hover {
  background: #182235;
  color: #fff;
}
.word-card {
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
}
.choice,
.match-card {
  background: #0b1220;
  color: var(--text);
  border-color: #26334a;
}
.choice:hover,
.match-card:hover,
.match-card.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(128, 131, 255, 0.16);
}
.choice.correct,
.match-card.done {
  background: rgba(78, 222, 163, 0.2) !important;
  border-color: var(--mint) !important;
}
.choice.wrong {
  background: rgba(244, 114, 182, 0.18) !important;
  border-color: var(--pink) !important;
}
.stat {
  font-size: 2rem;
  font-weight: 800;
}
.small-muted {
  font-size: 0.9rem;
  color: var(--muted);
}
.list-group-item {
  background: transparent;
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.14);
}
.flip-card {
  perspective: 1200px;
  width: min(100%, 540px);
  margin-inline: auto;
}
.flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
  min-height: 200px;
}
.flip-inner.is-flipped {
  transform: rotateY(180deg);
}
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.25rem;
}
.flip-back {
  transform: rotateY(180deg);
}
.learn-word {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
}
.learn-meaning {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 600;
  line-height: 1.35;
  max-width: 100%;
  word-break: break-word;
}
.word-card {
  padding-inline: 1rem;
}
.word-card #learnCard {
  width: 100%;
}
@media (max-width: 576px) {
  .hero {
    border-radius: 1rem;
  }
  .lang-select {
    width: 124px;
    min-width: 124px;
  }
  .navbar .container {
    gap: 0.5rem;
  }
  .flip-inner {
    min-height: 170px;
  }
  .learn-word {
    font-size: 2rem;
  }
  .learn-meaning {
    font-size: 1.15rem;
  }
}

#authModal .nav-tabs {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}
#authModal .nav-tabs .nav-link {
  color: var(--muted);
  background: transparent;
  border-color: transparent transparent rgba(148, 163, 184, 0.22);
}
#authModal .nav-tabs .nav-link:hover {
  color: #fff;
  border-color: transparent transparent rgba(128, 131, 255, 0.45);
}
#authModal .nav-tabs .nav-link.active {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(128, 131, 255, 0.28),
    rgba(99, 102, 241, 0.18)
  );
  border-color: rgba(128, 131, 255, 0.45) rgba(128, 131, 255, 0.45) transparent;
}

/* Admin & Profile sekme stilleri */
#adminTabs .nav-link,
#aiSubTabs .nav-link {
  color: var(--muted);
  background: transparent;
  border-color: transparent transparent rgba(148, 163, 184, 0.22);
}
#adminTabs .nav-link:hover,
#aiSubTabs .nav-link:hover {
  color: #fff;
  border-color: transparent transparent rgba(128, 131, 255, 0.45);
}
#adminTabs .nav-link.active,
#aiSubTabs .nav-link.active {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(128, 131, 255, 0.28),
    rgba(99, 102, 241, 0.18)
  );
  border-color: rgba(128, 131, 255, 0.45) rgba(128, 131, 255, 0.45) transparent;
}

/* Profile sekme stilleri */
#profileTabs .nav-link {
  color: var(--muted);
  background: transparent;
  border-color: transparent transparent rgba(148, 163, 184, 0.22);
}
#profileTabs .nav-link:hover {
  color: #fff;
  border-color: transparent transparent rgba(128, 131, 255, 0.45);
}
#profileTabs .nav-link.active {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(128, 131, 255, 0.28),
    rgba(99, 102, 241, 0.18)
  );
  border-color: rgba(128, 131, 255, 0.45) rgba(128, 131, 255, 0.45) transparent;
}

/* Kelime Tahmin (Hangman) */
.hg-score {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
}
.hg-word {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 60px;
  align-items: flex-end;
}
.hg-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 48px;
  font-size: 1.4rem;
  font-weight: 700;
  border-bottom: 3px solid rgba(148, 163, 184, 0.4);
  line-height: 1;
}
.hg-revealed {
  border-bottom-color: var(--brand);
  color: #eef2ff;
}
.hg-blank {
  color: rgba(148, 163, 184, 0.55);
  font-size: 1.6rem;
  font-weight: 300;
}
.hg-special {
  border-bottom: none;
  color: var(--muted);
  min-width: 12px;
}
.hg-lbtn {
  --bs-btn-color: #eef2ff;
  position: relative;
  min-width: 48px;
  padding: 0.4rem 0.65rem;
  background: rgba(15, 22, 40, 0.95);
  color: #eef2ff !important;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: 1rem;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.hg-lbtn:hover:not([disabled]) {
  background: rgba(128, 131, 255, 0.15);
  border-color: var(--brand);
  box-shadow: 0 0 0 0.15rem rgba(128, 131, 255, 0.22);
  color: #eef2ff !important;
}
.hg-lbtn[disabled].hg-lbtn-done {
  opacity: 0.3;
  color: #94a3b8 !important;
  background: rgba(8, 12, 20, 0.6);
}
.hg-cost {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1;
  margin-top: 3px;
}

/* Bootstrap tablo — dark tema override */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: rgba(148, 163, 184, 0.13);
  --bs-table-hover-bg: rgba(128, 131, 255, 0.07);
  --bs-table-hover-color: var(--text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: var(--text);
  --bs-table-active-bg: rgba(128, 131, 255, 0.12);
  --bs-table-active-color: var(--text);
  color: var(--text);
}
.table > :not(caption) > * > * {
  color: var(--text);
  background-color: transparent;
  border-bottom-color: rgba(148, 163, 184, 0.13);
}
.table thead > tr > th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* ── Avatar — sabit köşe ── */
#josephAvatar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 110px;
  height: 110px;
  background: none;
  border: none;
  box-shadow: none;
  z-index: 1040;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
#josephAvatar:hover {
  animation: jrTumble 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes jrTumble {
  0% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.12) rotate(-12deg);
  }
  60% {
    transform: scale(1.1) rotate(15deg);
  }
  80% {
    transform: scale(1.06) rotate(-5deg);
  }
  100% {
    transform: scale(1.08) rotate(0deg);
  }
}
#josephAvatar:hover .jr-idle {
  display: none;
}
#josephAvatar:hover .jr-excited {
  display: block;
}
#josephAvatar.speaking {
  animation: josephTalk 0.22s ease-in-out infinite alternate;
}
@keyframes josephTalk {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06) translateY(-2px);
  }
}
@media (max-width: 576px) {
  #josephAvatar {
    width: 82px;
    height: 82px;
    bottom: 12px;
    right: 12px;
  }
}

/* ── SVG Robot (jr) ── */
svg.jr {
  width: 92px;
  height: auto;
  animation: jrBob 1.8s ease-in-out infinite alternate;
}
@keyframes jrBob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(5px);
  }
}
svg.jr {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
}
.jr-ear,
.jr-head-bk,
.jr-face {
  stroke: none;
}
.jr-ear,
.jr-head-bk {
  fill: #cbcbcb;
}
.jr-head {
  fill: #fff;
}
.jr-face {
  fill: #2a2d4a;
}
.jr-feat {
  stroke: #95ebe0;
  stroke-width: 3.5;
  stroke-linecap: round;
  fill: none;
}
.jr-feat-fill {
  fill: #95ebe0;
  stroke: none;
}
.jr-feat-filled {
  fill: #95ebe0;
  stroke: none;
}
.jr-mouth-line {
  stroke: #95ebe0;
  stroke-width: 4;
  stroke-linecap: round;
}
/* toggle idle/speaking/excited groups */
.jr-speaking,
.jr-excited {
  display: none;
}
#josephAvatar.speaking .jr-speaking {
  display: block;
}
#josephAvatar.speaking .jr-idle {
  display: none;
}
#josephAvatar.excited .jr-speaking {
  display: none;
}
#josephAvatar.excited .jr-excited {
  display: block;
}
#josephAvatar.excited .jr-idle {
  display: none;
}
#josephAvatar.idle-expr .jr-idle {
  display: none;
}
#josephAvatar.idle-expr .jr-excited {
  display: block;
}