/* ══════════════════════════════════════════════
   ACCORDION LEVELS
══════════════════════════════════════════════ */
.acc-level {
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--brd,#0a2040);
}

.acc-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--card,#0d1422);
  user-select: none;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
}

.acc-hdr:active { background: var(--dim,#0a1828); }
.acc-level.locked .acc-hdr { opacity: .5; }

.acc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.acc-title {
  font-family: var(--font-title,'Share Tech Mono',monospace);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  flex: 1;
}

.acc-pill {
  font-size: var(--fs-sm);
  color: var(--muted,#2a5070);
  background: var(--dim,#0a1828);
  border: 1px solid var(--brd,#0a2040);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 700;
  white-space: nowrap;
}

.acc-chevron {
  font-size: var(--fs-sm);
  color: var(--muted,#2a5070);
  transition: transform .25s;
  margin-left: 2px;
  flex-shrink: 0;
}

.acc-level.open .acc-chevron { transform: rotate(180deg); }

.acc-body {
  display: none;
  background: var(--surf,#080d1a);
  padding: 6px 8px 8px;
}

.acc-level.open .acc-body { display: block; }

/* Milestone banner */
.ms-banner {
  background: rgba(255,179,0,.07);
  border: 1px solid rgba(255,179,0,.25);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--warning,#ffb300);
  margin-bottom: 6px;
  line-height: 1.4;
  display: flex;
  gap: 6px;
}

/* Degression alert (used in BO validation) */
.bo-alerte-deg {
  background: rgba(255,179,0,.06);
  border: 1px solid rgba(255,179,0,.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--fs-base);
  color: var(--warning,#ffb300);
  margin-bottom: 12px;
  line-height: 1.5;
}
.bo-alerte-msg { margin-top: 4px; color: var(--text); font-size: var(--fs-sm); }
.bo-alerte-conseil { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }

/* ══════════════════════════════════════════════
   MISSION CARDS
══════════════════════════════════════════════ */
.m-card {
  background: var(--card,#0d1422);
  border: 1px solid var(--brd,#0a2040);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  transition: background .15s;
  min-height: 56px;
}

.m-card.done { background: rgba(0,40,20,.5); }

.cat-pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px currentColor;
}

.m-body { flex: 1; min-width: 0; }

.m-name {
  font-family: var(--font-body,'Josefin Sans',sans-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text,#c8e8ff);
}

.m-card.done .m-name { color: var(--muted,#2a5070); text-decoration: line-through; }

.m-tags {
  display: flex;
  gap: 5px;
  margin-top: 3px;
  align-items: center;
  flex-wrap: wrap;
}

.tag { font-size: var(--fs-xs); font-family: var(--font-body,'Josefin Sans',sans-serif); padding: 1px 5px; border-radius: 10px; font-weight: 700; }
.tag-cat   { color: var(--muted,#2a5070); }
.tag-ms    { background: rgba(255,179,0,.12); color: var(--warning,#ffb300); border: 1px solid rgba(255,179,0,.25); }
.tag-sec   { background: rgba(200,120,255,.15); color: #d580ff; border: 1px solid rgba(200,120,255,.35); }
.m-meta { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
.m-stars { font-size:var(--fs-xs); line-height:1; }

.m-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.m-chf {
  font-family: var(--font-title,'Share Tech Mono',monospace);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--gold,#00cfff);
  white-space: nowrap;
}

.m-card.done .m-chf { color: var(--muted,#2a5070); }

/* Buttons */
.m-btn {
  padding: 7px 13px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body,'Josefin Sans',sans-serif);
  font-size: var(--fs-sm);
  font-weight: 800;
  transition: all .15s;
  white-space: nowrap;
  min-height: 34px;
  letter-spacing: .3px;
}

.btn-todo { background: var(--hi,#00cfff); color: #000; }
.btn-todo:active { transform: scale(.96); }

.btn-pend {
  background: rgba(255,179,0,.1);
  color: var(--warning,#ffb300);
  border: 1px solid var(--warning,#ffb300);
  animation: pls 1.5s ease-in-out infinite;
}

@keyframes pls {
  0%,100% { box-shadow: 0 0 3px rgba(255,179,0,.3); }
  50%      { box-shadow: 0 0 8px rgba(255,179,0,.7); }
}

.btn-done { background: transparent; color: var(--success,#00e676); border: 1px solid rgba(0,230,118,.25); cursor: default; }
.btn-lock { background: var(--dim,#0a1828); color: var(--muted,#2a5070); border: 1px solid var(--brd,#0a2040); cursor: default; }

/* ══════════════════════════════════════════════
   DAILY TAB
══════════════════════════════════════════════ */
.streak-card {
  background: var(--card,#0d1422);
  border: 1px solid var(--brd,#0a2040);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.streak-big {
  font-family: var(--font-title,'Share Tech Mono',monospace);
  font-size: var(--fs-hero);
  font-weight: 900;
  color: var(--warning,#ffb300);
  line-height: 1;
}

.streak-right { flex: 1; }
.streak-lbl { font-size: var(--fs-sm); color: var(--muted,#2a5070); margin-bottom: 6px; }

.daily-group { margin-bottom: 12px; }
.dg-title {
  font-family: var(--font-title,'Share Tech Mono',monospace);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted,#2a5070);
  padding: 6px 0 6px;
  border-bottom: 1px solid var(--brd,#0a2040);
  margin-bottom: 6px;
}

.daily-cards { border-radius: 12px; overflow: hidden; border: 1px solid var(--brd,#0a2040); }

.d-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--card,#0d1422);
  border-bottom: 1px solid var(--brd,#0a2040);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  min-height: 52px;
}

.d-card:last-child { border-bottom: none; }
.d-card:active { background: var(--dim,#0a1828); }
.d-card.checked { background: rgba(0,40,20,.4); }
.d-card.na { opacity: .3; pointer-events: none; }
.d-card.pend { border-left: 3px solid var(--warning,#ffb300); }

.d-check {
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 2px solid var(--brd2,#14305a);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-lg);
  transition: all .2s;
  background: var(--dim,#0a1828);
}

.d-card.checked .d-check {
  background: var(--success,#00e676);
  border-color: var(--success,#00e676);
  box-shadow: 0 0 8px rgba(0,230,118,.4);
}

.d-card.pend .d-check {
  background: rgba(255,179,0,.1);
  border-color: var(--warning,#ffb300);
  box-shadow: 0 0 6px rgba(255,179,0,.3);
}

.d-label {
  flex: 1;
  font-family: var(--font-body,'Josefin Sans',sans-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text,#c8e8ff);
}

.d-card.checked .d-label { color: var(--muted,#2a5070); text-decoration: line-through; }

/* ══════════════════════════════════════════════
   BADGES TAB
══════════════════════════════════════════════ */
.badge-cat-title {
  font-family: var(--font-title,'Share Tech Mono',monospace);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted,#2a5070);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--brd,#0a2040);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge-secret-note { font-size: var(--fs-xs); color: #b388ff; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 8px; margin-bottom: 16px; }

.badge-card {
  background: var(--card,#0d1422);
  border: 1px solid var(--brd,#0a2040);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  transition: all .25s;
}

.badge-card.earned {
  border-color: #ffd700;
  background: rgba(255,215,0,.05);
  box-shadow: 0 0 12px rgba(255,215,0,.12);
}

.badge-card:not(.earned) { filter: grayscale(.8); opacity: .35; }
.badge-card.earned .b-em { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.b-em  { font-size: var(--fs-xxl); display: block; margin-bottom: 5px; }
.b-nm  { font-family: var(--font-body,'Josefin Sans',sans-serif); font-size: var(--fs-xs); font-weight: 800; line-height: 1.3; color: var(--text,#c8e8ff); }
.b-st  { font-size: var(--fs-xs); color: var(--muted,#2a5070); margin-top: 2px; }
.badge-card.earned .b-st { color: #ffd700; }

/* ══════════════════════════════════════════════
   COMING SOON
══════════════════════════════════════════════ */
.soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 24px;
}

.soon-em  { font-size: 72px; margin-bottom: 16px; animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 33%{transform:translateY(-10px) rotate(-3deg)} 66%{transform:translateY(-5px) rotate(3deg)} }
.soon-nm  { font-family: var(--font-title,'Share Tech Mono',monospace); font-size: var(--fs-xxl); font-weight: 900; color: var(--hi,#00cfff); margin-bottom: 6px; }
.soon-pill { display: inline-block; background: var(--card,#0d1422); border: 1px solid var(--brd,#0a2040); border-radius: 20px; padding: 6px 16px; font-size: var(--fs-base); color: var(--muted,#2a5070); margin-top: 14px; }

/* ══════════════════════════════════════════════
   TOOLTIPS — tap-to-reveal ? button
══════════════════════════════════════════════ */
.tip-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }

.tip-btn {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--brd2,#14305a);
  color: var(--muted,#2a5070); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
  font-family: var(--font-body,'Nunito',sans-serif);
  transition: all .15s; vertical-align: middle;
  line-height: 1;
  position: relative; z-index: 5;
}
.tip-btn:active, .tip-btn.open {
  background: var(--hi,#00cfff); color: #000; border-color: var(--hi,#00cfff);
}

.tip-bubble {
  position: fixed;
  background: rgba(0,0,0,.92); color: #fff;
  padding: 10px 14px; border-radius: 10px;
  font-size: var(--fs-xs,11px); line-height: 1.5;
  max-width: 280px; width: max-content;
  white-space: normal; text-align: center;
  pointer-events: none; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}