/* =====================================================================
   Книжный дракон — оформление (детская тема)
   ===================================================================== */
:root{
  --kd-purple:#6c4cf1;
  --kd-purple-dark:#4d33c4;
  --kd-teal:#19c3b2;
  --kd-gold:#ffb703;
  --kd-pink:#ff5d8f;
  --kd-bg:#f3f0ff;
  --kd-ink:#2b2350;
}

*{ font-family:'Nunito',system-ui,Segoe UI,sans-serif; }
body{
  background:var(--kd-bg);
  background-image:radial-gradient(circle at 12% 8%, #e9e2ff 0, transparent 38%),
                   radial-gradient(circle at 88% 0%, #d8fff9 0, transparent 34%);
  color:var(--kd-ink);
  min-height:100vh;
}
.fw-black{ font-weight:900; }

/* ----- Навигация ----- */
.kd-nav{
  background:linear-gradient(90deg,var(--kd-purple),var(--kd-purple-dark));
  box-shadow:0 4px 18px rgba(76,52,196,.28);
}
.kd-nav .navbar-brand{ color:#fff; font-weight:900; font-size:1.25rem; }
.kd-nav .nav-link{ color:#ffffffcc !important; font-weight:700; border-radius:12px; padding:.35rem .7rem; }
.kd-nav .nav-link:hover{ color:#fff !important; background:#ffffff22; }
.kd-coin{
  background:var(--kd-gold); color:#5a3d00; font-weight:900;
  padding:.2rem .65rem; border-radius:999px; white-space:nowrap;
}

/* ----- Карточки ----- */
.card{ border:none; border-radius:22px; box-shadow:0 8px 26px rgba(70,50,160,.10); }
.kd-tile{
  border-radius:22px; padding:1.2rem 1.4rem; color:#fff; height:100%;
  box-shadow:0 10px 24px rgba(70,50,160,.18);
}
.kd-tile .kd-num{ font-size:2.2rem; font-weight:900; line-height:1; }
.kd-tile .kd-lbl{ opacity:.92; font-weight:700; }
.kd-tile .kd-ico{ font-size:2rem; }
.kd-t-purple{ background:linear-gradient(135deg,#7b5cff,#5a3ee0); }
.kd-t-teal{   background:linear-gradient(135deg,#1fd3c0,#12a596); }
.kd-t-gold{   background:linear-gradient(135deg,#ffc23d,#ff9e00); color:#4a2f00; }
.kd-t-pink{   background:linear-gradient(135deg,#ff7aa8,#ff4d83); }

/* ----- Кнопки ----- */
.kd-btn{
  background:linear-gradient(135deg,var(--kd-purple),var(--kd-purple-dark));
  color:#fff; font-weight:800; border:none; border-radius:14px; padding:.55rem 1.1rem;
  box-shadow:0 6px 16px rgba(76,52,196,.30); transition:transform .08s ease;
}
.kd-btn:hover{ color:#fff; transform:translateY(-2px); }
.kd-btn-gold{ background:linear-gradient(135deg,#ffc23d,#ff9e00); color:#4a2f00; box-shadow:0 6px 16px rgba(255,158,0,.35); }
.kd-btn-gold:hover{ color:#4a2f00; }

/* ----- Дракон / уровень ----- */
.kd-hero{
  background:linear-gradient(135deg,#7b5cff,#19c3b2);
  border-radius:26px; color:#fff; padding:1.6rem; position:relative; overflow:hidden;
}
.kd-hero .kd-dragon{ font-size:5rem; line-height:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.kd-level-badge{
  background:#fff; color:var(--kd-purple-dark); font-weight:900;
  border-radius:999px; padding:.25rem .9rem; display:inline-block;
}
.kd-xpbar{ height:18px; border-radius:999px; background:#ffffff44; overflow:hidden; }
.kd-xpbar > span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#ffd166,#ffb703); transition:width .6s ease; }

/* ----- Прогресс книги ----- */
.progress{ height:16px; border-radius:999px; background:#eae6fb; }
.progress-bar{ background:linear-gradient(90deg,var(--kd-teal),#0fb0a0); font-weight:800; }
.progress-bar.done{ background:linear-gradient(90deg,#43d17a,#23b85e); }

.book-cover{
  width:64px; height:88px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff;
  background:linear-gradient(135deg,#8a6bff,#19c3b2); box-shadow:0 4px 12px rgba(70,50,160,.25);
}

/* ----- Бейджи наград ----- */
.kd-award{
  text-align:center; border-radius:18px; padding:1rem .6rem; background:#fff;
  box-shadow:0 6px 18px rgba(70,50,160,.10); height:100%;
}
.kd-award .ico{ font-size:2.6rem; line-height:1; }
.kd-award.locked{ filter:grayscale(1); opacity:.5; }
.kd-award .ttl{ font-weight:800; margin-top:.4rem; }

/* ----- Логин ----- */
.kd-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.kd-login-card{ max-width:430px; width:100%; }

/* ----- Модалка-поздравление ----- */
.kd-reward-modal{ border:none; border-radius:24px; }
.kd-reward-row{
  display:flex; align-items:center; gap:.9rem; background:var(--kd-bg);
  border-radius:16px; padding:.7rem 1rem; margin:.5rem 0;
}
.kd-reward-icon{ font-size:2.4rem; }

/* ----- Таблицы ----- */
.table{ --bs-table-bg:transparent; }
.table thead th{ color:#7a73a6; font-weight:800; border:none; }
.table td,.table th{ vertical-align:middle; }

.rank-1{ color:#ffb703; } .rank-2{ color:#9aa0b5; } .rank-3{ color:#cd7f32; }

/* ----- Колесо выбора книги ----- */
.wheel-wrap{ position:relative; width:320px; max-width:86vw; margin:0 auto; }
.wheel-rot{ transition:transform 4.6s cubic-bezier(.16,.86,.28,1); transform-origin:50% 50%; will-change:transform; }
.wheel{ width:100%; height:auto; display:block; border-radius:50%;
  box-shadow:0 12px 34px rgba(70,50,160,.28); border:6px solid #fff; }
.wheel-pointer{ position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent;
  border-top:28px solid var(--kd-pink); z-index:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.wheel-hub{ position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%);
  background:#fff; border-radius:50%; border:4px solid var(--kd-purple); z-index:2;
  display:flex; align-items:center; justify-content:center; font-size:22px; }