/* ══════════════════════════════════════════════
   BADGE SYSTEM — Phase 3, Day 11 (M-4)
   One shared "tinted pill" base for every small colored
   label in the app: difficulty/repeat/attribute tags,
   XP badges, penalty badge, streak badges, and area meta
   pills. Replaces what used to be 6 independently
   hand-coded pill families (.badge-tag.*, .mq-xp-badge,
   .habit-xp-badge/.enemy-xp-badge, .habit-penalty-badge,
   .habit-streak-badge/.ally-streak/.enemy-streak,
   .area-meta-pill-quests/-tasks).

   Every color modifier below follows the same formula:
   background = color @ 12% alpha, border = color @ 35%
   alpha, text = the full color. RGB triplets are spelled
   out explicitly (with a comment naming the source token)
   because hex custom properties can't be split into
   components inside rgba() without relative-color syntax
   (rgb(from var(--x) r g b / a)), which isn't broadly
   supported yet.

   Structure: `.badge` (required) + one color modifier
   (required) + `.badge-caps` and/or `.badge-mono` as
   needed (optional). Example: a difficulty tag is
   `class="badge badge-caps badge-easy"`; an XP value is
   `class="badge badge-mono badge-xp"`.
   ══════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    line-height: 1.3;
    white-space: nowrap;
}

/* Modifier: uppercase tag styling (difficulty/repeat/attribute
   tags, area meta pills) */
.badge-caps {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Modifier: monospace numeric styling (XP values, penalties) */
.badge-mono {
    font-family: var(--font-mono);
}

/* ── Color modifiers ── */
.badge-easy   { color: var(--easy);             background: rgba(106,176,76,0.12);  border-color: rgba(106,176,76,0.35); }  /* --easy */
.badge-medium { color: var(--medium);           background: rgba(240,147,43,0.12);  border-color: rgba(240,147,43,0.35); }  /* --medium */
.badge-hard   { color: var(--hard);             background: rgba(236,87,85,0.12);   border-color: rgba(236,87,85,0.35); }   /* --hard */
.badge-repeat { color: var(--blue-accent);      background: rgba(106,159,216,0.12); border-color: rgba(106,159,216,0.35); } /* --blue-accent */
.badge-attr   { color: var(--creativity-color); background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.35); } /* --creativity-color */
.badge-xp     { color: var(--xp-green);         background: rgba(92,201,138,0.12);  border-color: rgba(92,201,138,0.35); }  /* --xp-green */
.badge-enemy  { color: var(--enemy-color);      background: rgba(236,72,153,0.12);  border-color: rgba(236,72,153,0.35); } /* --enemy-color */
.badge-danger { color: var(--danger);           background: rgba(224,85,106,0.12); border-color: rgba(224,85,106,0.35); }  /* --danger */
.badge-gold   { color: var(--gold);             background: rgba(226,176,74,0.12); border-color: rgba(226,176,74,0.35); }  /* --gold */

/* ── Toast ── */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   TOAST SYSTEM — Phase 3, Day 12 (M-5)
   Toast variants now derive from the same tinted-pill
   formula as .badge (Phase 3, Day 11): background =
   color @ 12% alpha, border = color @ 35% alpha, text =
   the full color. Previously each variant hand-picked its
   own independent hex triad with no shared logic. Toasts
   keep their own base rule (bigger padding, pill radius,
   larger type) since they're a distinct component size —
   only the color *formula* is shared with .badge, not the
   markup/selector.
   ══════════════════════════════════════════════ */
.toast {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--text-lg);
    border: 1px solid transparent;
    animation: toastIn 0.4s ease-out, toastOut 0.4s 2.5s ease-in forwards;
    text-align: center;
    pointer-events: auto;
}

/* Same recipe as .badge-xp (--xp-green) */
.toast.xp-toast {
    background: rgba(92,201,138,0.12);
    color: var(--xp-green);
    border-color: rgba(92,201,138,0.35);
}

/* --gold-glow (240,200,96) — kept distinct from .badge-gold's --gold;
   deliberately brighter/more "epic" for level-up moments, same formula */
.toast.level-toast {
    background: rgba(240,200,96,0.12);
    color: var(--gold-glow);
    border-color: rgba(240,200,96,0.35);
    font-size: var(--text-xl);
}

/* Same recipe as .badge-repeat (--blue-accent) */
.toast.achievement-toast {
    background: rgba(106,159,216,0.12);
    color: var(--blue-accent);
    border-color: rgba(106,159,216,0.35);
}

/* --info-color (138,180,248) */
.toast.info-toast {
    background: rgba(138,180,248,0.12);
    color: var(--info-color);
    border-color: rgba(138,180,248,0.35);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-16px); }
}

/* ── Level Up Overlay ── */
.levelup-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-effect);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: overlayFade 2.5s ease-out forwards;
}

.levelup-text {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--gold-glow);
    text-shadow: 0 0 60px rgba(240, 200, 96, 0.7);
    animation: levelUpBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

@keyframes levelUpBounce {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes overlayFade {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── XP Float ── */
.xp-float {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-effect);
    font-weight: 800;
    font-size: var(--text-xl);
    color: var(--xp-green);
    animation: floatUp 1.5s ease-out forwards;
    text-shadow: 0 0 10px rgba(92, 201, 138, 0.5);
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
}