/* Dashboard-specific styles — imported after tokens.css + base.css */

/* ── Greeting ───────────────────────────────────────────── */
.greet {
  font-family: 'Space Mono'; font-size: 11px;
  color: var(--mute); letter-spacing: 1px;
  text-transform: uppercase; margin: 4px 2px 2px;
}
.greet b { color: var(--frost); }

/* ── Section heading ────────────────────────────────────── */
.sec { margin-top: 26px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
.sec-h h2 { font-family: 'Anton'; font-weight: 400; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }
.sec-h a  { font-family: 'Space Mono'; font-size: 10px; color: var(--track); text-decoration: none; letter-spacing: 1px; text-transform: uppercase; }

/* ── Hero level card ────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 22px;
  padding: 22px 20px 20px; margin-top: 6px; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(70,224,232,.18), transparent 70%);
}
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; position: relative; }
.biblabel  { font-family: 'Space Mono'; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--track); }
.level     { font-family: 'Anton'; font-weight: 400; font-size: 78px; line-height: .82; letter-spacing: -1px; }
.rank      { font-family: 'Archivo'; font-weight: 800; font-size: 17px; margin-top: 2px; }
.ranksub   { font-family: 'Space Mono'; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 1px; }
.xpbadge        { flex: none; text-align: right; }
.xpbadge .n     { font-family: 'Anton'; font-size: 26px; color: var(--track); line-height: 1; }
.xpbadge .l     { font-family: 'Space Mono'; font-size: 9px; color: var(--mute); text-transform: uppercase; letter-spacing: 1px; }

/* XP bar */
.xpbar-wrap { margin-top: 18px; position: relative; }
.xpbar-meta { display: flex; justify-content: space-between; font-family: 'Space Mono'; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
.xpbar-meta b { color: var(--frost); }
.xpbar  { height: 12px; border-radius: 999px; background: #06121f; overflow: hidden; border: 1px solid var(--line); }
.xpfill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--track), #9af6ff); box-shadow: 0 0 14px rgba(70,224,232,.6); transition: width 1.6s cubic-bezier(.2,.9,.2,1); }

/* Weekly target row */
.targets     { display: flex; gap: 9px; margin-top: 16px; align-items: center; }
.targets .lbl { font-family: 'Space Mono'; font-size: 9px; color: var(--mute); text-transform: uppercase; letter-spacing: 1px; margin-right: 2px; }

/* ── Campaign banner ────────────────────────────────────── */
.campaign { background: linear-gradient(135deg, #2a0a12, var(--surface)); border: 1px solid rgba(225,31,58,.35); border-radius: 18px; padding: 16px; position: relative; overflow: hidden; }
.campaign .tag  { font-family: 'Space Mono'; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--fire); font-weight: 700; }
.campaign h3    { font-family: 'Anton'; font-weight: 400; font-size: 24px; letter-spacing: .5px; margin: 3px 0 2px; }
.campaign .desc { font-size: 12px; color: var(--mute); }
.campaign .cbar  { height: 9px; border-radius: 999px; background: #06121f; margin-top: 13px; overflow: hidden; border: 1px solid var(--line); }
.campaign .cfill { height: 100%; width: 65%; background: linear-gradient(90deg, var(--fire-deep), var(--fire)); box-shadow: 0 0 12px rgba(225,31,58,.5); }
.campaign .cmeta { display: flex; justify-content: space-between; font-family: 'Space Mono'; font-size: 10px; color: var(--mute); margin-top: 8px; }
.campaign .cmeta b { color: var(--frost); }

/* ── Attributes radar ───────────────────────────────────── */
.attrcard   { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 12px 12px; display: flex; gap: 6px; align-items: center; }
.radar      { width: 165px; height: 165px; flex: none; }
.attrlist   { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-left: 6px; }
.attrrow    { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.attrrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--track); flex: none; }
.attrrow .nm  { flex: 1; color: var(--frost); }
.attrrow .vl  { font-family: 'Space Mono'; font-size: 11px; color: var(--mute); }

/* ── Mission cards ──────────────────────────────────────── */
.mission          { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 15px 16px; margin-bottom: 12px; position: relative; overflow: hidden; }
.mission .mtop    { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mission .loc     { font-family: 'Space Mono'; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--track); }
.mission h3       { font-family: 'Archivo'; font-weight: 800; font-size: 17px; margin: 2px 0 6px; }
.mission .req     { font-size: 12px; color: var(--mute); margin-bottom: 12px; }
.mission .xp      { font-family: 'Anton'; font-size: 20px; color: var(--gold); line-height: 1; text-align: right; white-space: nowrap; }
.mission .xp small { display: block; font-family: 'Space Mono'; font-size: 8px; color: var(--mute); letter-spacing: 1px; }
.mission .mfoot   { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }

.garmin       { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Mono'; font-size: 10px; color: var(--track); background: rgba(70,224,232,.1); border: 1px solid rgba(70,224,232,.3); border-radius: 999px; padding: 5px 10px; }
.garmin .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--track); box-shadow: 0 0 8px var(--track); animation: garmin-pulse 1.4s infinite; }
@keyframes garmin-pulse { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.3)} }

.claim      { font-family: 'Space Mono'; font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; background: var(--track); color: var(--field); border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: filter .2s, transform .2s; }
.claim:hover { filter: brightness(1.1); transform: translateY(-1px); }
.claim.done  { background: transparent; color: var(--mute); border: 1px solid var(--line); cursor: default; }

.mini-targets      { display: flex; gap: 5px; }
.mini-targets .d   { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--mute); background: var(--miss); transition: background .3s, border-color .3s; }
.mini-targets .d.hit { background: var(--hit); border-color: var(--hit); }

/* ── Squad standings ────────────────────────────────────── */
.squad                      { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.squad .row                 { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.squad .row:last-child      { border-bottom: none; }
.squad .row.me              { background: rgba(70,224,232,.07); }
.squad .pos                 { font-family: 'Anton'; font-size: 20px; width: 24px; color: var(--mute); }
.squad .row:first-child .pos { color: var(--gold); }
.squad .team                { flex: 1; font-weight: 600; font-size: 14px; }
.squad .team em             { font-style: normal; font-family: 'Space Mono'; font-size: 9px; color: var(--track); display: block; letter-spacing: 1px; text-transform: uppercase; }
.squad .pts                 { font-family: 'Space Mono'; font-size: 12px; color: var(--frost); }

/* ── Map teaser ─────────────────────────────────────────── */
.map-teaser     { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; position: relative; }
.map-teaser svg { display: block; width: 100%; height: auto; }
.map-teaser .cap { position: absolute; left: 16px; bottom: 14px; font-family: 'Space Mono'; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 1px; }
.map-teaser .cap b { color: var(--frost); display: block; font-family: 'Archivo'; font-weight: 800; font-size: 15px; text-transform: none; letter-spacing: 0; }

/* ── Level-up toast ─────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; top: 24px; z-index: 50;
  background: var(--frost); color: var(--field);
  font-family: 'Anton'; font-size: 15px; letter-spacing: .5px;
  padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transform: translateX(-50%) translateY(-160%);
  transition: transform .5s cubic-bezier(.2,1.4,.4,1);
  white-space: nowrap; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Registration prompt ───────────────────────────────── */
.reg-prompt {
  background: var(--surface);
  border: 1px solid rgba(244,184,76,.3);
  border-radius: 16px;
  padding: 20px 18px;
  margin-bottom: 20px;
}
.reg-prompt-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
}
.reg-prompt-activity {
  margin-bottom: 14px;
}
.reg-prompt-activity-link {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--frost);
  transition: border-color .2s;
}
.reg-prompt-activity-link:hover { border-color: var(--track); }
.reg-prompt-activity-link span {
  font-family: 'Space Mono'; font-size: 11px;
  color: var(--gold); white-space: nowrap;
}
.reg-prompt-question {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 12px;
}
.reg-prompt-options {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.reg-opt {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: 'Space Mono'; font-size: 11px;
  letter-spacing: .5px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--frost);
  transition: border-color .2s, background .2s;
}
.reg-opt:hover { border-color: var(--track); background: rgba(70,224,232,.06); }
.reg-opt-primary {
  background: var(--track); color: var(--field);
  border-color: var(--track); font-weight: 700;
}
.reg-opt-primary:hover { filter: brightness(1.1); background: var(--track); }

.reg-prompt-confirm {
  text-align: center;
  padding: 8px 0;
}
.reg-prompt-confirm svg { margin-bottom: 10px; }
.reg-prompt-confirm h3 {
  font-size: 17px;
  color: var(--track);
  margin-bottom: 6px;
}
.reg-prompt-confirm p {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.5;
}

/* ── Demo mode ──────────────────────────────────────────── */
.demo-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, rgba(70,224,232,.12), rgba(244,184,76,.08));
  border: 1px solid rgba(70,224,232,.25);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.demo-banner-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(70,224,232,.15);
  color: var(--track);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.demo-banner-text strong {
  font-size: 14px; color: var(--track);
  display: block; margin-bottom: 4px;
}
.demo-banner-text p {
  font-size: 13px; color: var(--mute);
  line-height: 1.5; margin: 0;
}

.demo-hint {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.demo-hint-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(244,184,76,.15);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: 'Space Mono'; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.demo-hint-icon:hover { background: rgba(244,184,76,.25); }
.demo-hint-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--frost);
  width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 10;
}
.demo-hint-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px; right: 8px;
  width: 10px; height: 10px;
  background: var(--surface-2);
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
}
.demo-hint.open .demo-hint-bubble { display: block; }

.demo-cta {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 20px;
  margin-top: 24px;
}
.demo-cta-discs {
  display: flex; gap: 8px; justify-content: center;
  margin-bottom: 16px;
}
.demo-cta h3 {
  font-family: 'Anton'; font-weight: 400;
  font-size: 20px; letter-spacing: .5px;
  margin-bottom: 8px;
}
.demo-cta p {
  font-size: 13px; color: var(--mute);
  line-height: 1.5; margin-bottom: 16px;
}
.demo-cta-btn {
  display: inline-block;
  font-family: 'Space Mono'; font-weight: 700;
  font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--track); color: var(--field);
  border-radius: 12px;
  padding: 14px 28px;
  text-decoration: none;
  transition: filter .2s;
}
.demo-cta-btn:hover { filter: brightness(1.1); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 380px) {
  .level { font-size: 66px; }
  .radar { width: 140px; height: 140px; }
}