/* ── cosmetics.css — Tier badges, Frames, Titles, Achievements, Stickers, Chat Frames ── */

/* ═══════════════════════════════════════════════════════
   TIER BADGES
   ═══════════════════════════════════════════════════════ */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid;
    line-height: 1.4;
    vertical-align: middle;
}

.tier-bronze { color: #CD7F32; border-color: #CD7F32; background: rgba(205,127,50,0.1); }
.tier-silver { color: #C0C0C0; border-color: #C0C0C0; background: rgba(192,192,192,0.1); }
.tier-gold { color: #FFD700; border-color: #FFD700; background: rgba(255,215,0,0.1); }
.tier-platinum { color: #00CED1; border-color: #00CED1; background: rgba(0,206,209,0.1); }
.tier-diamond { color: #B9F2FF; border-color: #B9F2FF; background: rgba(185,242,255,0.1); text-shadow: 0 0 4px rgba(185,242,255,0.5); }
.tier-master { color: #FF4500; border-color: #FF4500; background: rgba(255,69,0,0.1); text-shadow: 0 0 6px rgba(255,69,0,0.5); }

/* ═══════════════════════════════════════════════════════
   AVATAR FRAMES (CSS borders around avatar)
   border-radius inherits from parent context (round in world, square in chat)
   ═══════════════════════════════════════════════════════ */
/* — Tier 1: Normal — */
.frame-golden-glow { box-shadow: 0 0 8px #FFD700; border: 2px solid #FFD700 !important; }
.frame-emerald { border: 2px solid #2ecc71 !important; box-shadow: 0 0 10px rgba(46,204,113,0.5); }

/* — Tier 2: Rare — */
.frame-diamond { border: 2px solid #B9F2FF !important; box-shadow: 0 0 12px rgba(185,242,255,0.6); }
.frame-fire { border: 3px solid #FF4500 !important; box-shadow: 0 0 12px rgba(255,69,0,0.5); }
.frame-master { border: 3px solid #FF4500 !important; box-shadow: 0 0 16px rgba(255,69,0,0.7); }

/* — Tier 3: Legendary animated — */
@keyframes frame-aurora-spin {
  0%   { border-color: #00ff87; box-shadow: 0 0 14px #00ff87, 0 0 28px rgba(0,255,135,0.3); }
  25%  { border-color: #00d4ff; box-shadow: 0 0 14px #00d4ff, 0 0 28px rgba(0,212,255,0.3); }
  50%  { border-color: #a855f7; box-shadow: 0 0 14px #a855f7, 0 0 28px rgba(168,85,247,0.3); }
  75%  { border-color: #f472b6; box-shadow: 0 0 14px #f472b6, 0 0 28px rgba(244,114,182,0.3); }
  100% { border-color: #00ff87; box-shadow: 0 0 14px #00ff87, 0 0 28px rgba(0,255,135,0.3); }
}
.frame-aurora {
  border: 3px solid #00ff87 !important;
  animation: frame-aurora-spin 3s linear infinite;
}

@keyframes frame-void-pulse {
  0%, 100% { box-shadow: 0 0 12px #6d28d9, 0 0 24px rgba(109,40,217,0.4), inset 0 0 8px rgba(109,40,217,0.15); }
  50%      { box-shadow: 0 0 20px #7c3aed, 0 0 40px rgba(124,58,237,0.5), inset 0 0 14px rgba(124,58,237,0.25); }
}
.frame-void {
  border: 3px solid #7c3aed !important;
  animation: frame-void-pulse 2s ease-in-out infinite;
}

@keyframes frame-celestial-rotate {
  0%   { border-color: #fbbf24; box-shadow: 0 0 16px #fbbf24, 0 0 32px rgba(251,191,36,0.35); }
  33%  { border-color: #f9fafb; box-shadow: 0 0 16px #f9fafb, 0 0 32px rgba(249,250,251,0.35); }
  66%  { border-color: #60a5fa; box-shadow: 0 0 16px #60a5fa, 0 0 32px rgba(96,165,250,0.35); }
  100% { border-color: #fbbf24; box-shadow: 0 0 16px #fbbf24, 0 0 32px rgba(251,191,36,0.35); }
}
.frame-celestial {
  border: 4px solid #fbbf24 !important;
  animation: frame-celestial-rotate 4s linear infinite;
}

@keyframes frame-eternal-blaze {
  0%   { border-color: #ff0040; box-shadow: 0 0 12px #ff0040, 0 0 24px rgba(255,0,64,0.4), 0 0 48px rgba(255,165,0,0.2); }
  20%  { border-color: #ff6a00; box-shadow: 0 0 14px #ff6a00, 0 0 28px rgba(255,106,0,0.4), 0 0 48px rgba(255,0,64,0.2); }
  40%  { border-color: #ffd700; box-shadow: 0 0 16px #ffd700, 0 0 32px rgba(255,215,0,0.4), 0 0 48px rgba(168,85,247,0.2); }
  60%  { border-color: #a855f7; box-shadow: 0 0 14px #a855f7, 0 0 28px rgba(168,85,247,0.4), 0 0 48px rgba(0,212,255,0.2); }
  80%  { border-color: #00d4ff; box-shadow: 0 0 14px #00d4ff, 0 0 28px rgba(0,212,255,0.4), 0 0 48px rgba(255,0,64,0.2); }
  100% { border-color: #ff0040; box-shadow: 0 0 12px #ff0040, 0 0 24px rgba(255,0,64,0.4), 0 0 48px rgba(255,165,0,0.2); }
}
.frame-eternal {
  border: 4px solid #ff0040 !important;
  animation: frame-eternal-blaze 2.5s linear infinite;
}

/* Rare character frame — auto-applied when user owns a rare character */
.frame-rare-char { border: 2px solid #8b5cf6 !important; box-shadow: 0 0 8px rgba(139,92,246,.4); }

/* Keep border-radius: 50% only in world/character context */
.character.frame-golden-glow,
.character.frame-emerald,
.character.frame-diamond,
.character.frame-fire,
.character.frame-master,
.character.frame-aurora,
.character.frame-void,
.character.frame-celestial,
.character.frame-eternal,
.character.frame-rare-char { border-radius: 50%; }

/* ═══════════════════════════════════════════════════════
   TITLES (text under player name)
   ═══════════════════════════════════════════════════════ */
.title-normal { color: #808080; font-size: 0.75rem; }
.title-rare { color: #FFD700; font-size: 0.75rem; font-weight: 600; }
.title-legendary { color: #FF4500; font-size: 0.75rem; font-weight: 700; text-shadow: 0 0 4px rgba(255,69,0,0.3); }

/* — Individual title styles — */
.title-collector { color: #4FC3F7; }
.title-gambler { color: #AB47BC; font-weight: 600; }
.title-unbreakable { color: #26C6DA; font-weight: 600; text-shadow: 0 0 4px rgba(38,198,218,0.3); }

@keyframes title-overlord-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(255,109,0,0.4); }
  50%      { text-shadow: 0 0 10px rgba(255,109,0,0.7), 0 0 20px rgba(255,109,0,0.3); }
}
.title-overlord { color: #FF6D00; font-weight: 700; animation: title-overlord-glow 2s ease-in-out infinite; }

@keyframes title-immortal-shift {
  0%   { color: #E040FB; text-shadow: 0 0 6px rgba(224,64,251,0.5); }
  50%  { color: #7C4DFF; text-shadow: 0 0 6px rgba(124,77,255,0.5); }
  100% { color: #E040FB; text-shadow: 0 0 6px rgba(224,64,251,0.5); }
}
.title-immortal { font-weight: 700; animation: title-immortal-shift 3s ease-in-out infinite; }

@keyframes title-divine-shimmer {
  0%   { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.6), 0 0 20px rgba(255,215,0,0.2); }
  33%  { color: #FFF; text-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 20px rgba(255,215,0,0.3); }
  66%  { color: #FF6D00; text-shadow: 0 0 8px rgba(255,109,0,0.6), 0 0 20px rgba(255,109,0,0.2); }
  100% { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.6), 0 0 20px rgba(255,215,0,0.2); }
}
.title-divine { font-weight: 900; font-size: 0.8rem; animation: title-divine-shimmer 2.5s linear infinite; }

/* ═══════════════════════════════════════════════════════
   ACHIEVEMENT BADGES (text labels)
   ═══════════════════════════════════════════════════════ */
.badge-achievement {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.badge-solo { background: rgba(255,215,0,0.15); color: #FFD700; border: 1px solid rgba(255,215,0,0.3); }
.badge-caro { background: rgba(0,206,209,0.15); color: #00CED1; border: 1px solid rgba(0,206,209,0.3); }
.badge-uno { background: rgba(255,69,0,0.15); color: #FF6347; border: 1px solid rgba(255,69,0,0.3); }
.badge-tienlen { background: rgba(138,43,226,0.15); color: #9370DB; border: 1px solid rgba(138,43,226,0.3); }
.badge-social { background: rgba(147,112,219,0.15); color: #9370DB; border: 1px solid rgba(147,112,219,0.3); }

/* ═══════════════════════════════════════════════════════
   STREAK BADGE
   ═══════════════════════════════════════════════════════ */
.streak-badge { color: #FF6B35; font-weight: 700; font-size: 0.8rem; }
.streak-badge::before { content: '\1F525'; margin-right: 2px; }

/* ═══════════════════════════════════════════════════════
   STICKER IN CHAT
   ═══════════════════════════════════════════════════════ */
.chat-sticker img {
    max-width: 52px;
    max-height: 52px;
    border-radius: 4px;
    cursor: pointer;
}

.chat-sticker img.sticker-animated {
    /* GIF/APNG plays automatically */
}

/* Compact sticker (in game rooms) */
.chat-sticker.compact img {
    max-width: 80px;
    max-height: 80px;
}

/* ═══════════════════════════════════════════════════════
   CHAT FRAMES — applied to .chat-item wrapper
   ═══════════════════════════════════════════════════════ */
.chat-frame-default {
    background: var(--bg, rgba(0, 0, 0, 0.03));
}

.chat-frame-golden {
    background: linear-gradient(135deg, rgba(255,215,0,0.06), transparent);
    border-left: 3px solid #FFD700;
    padding-left: 8px;
}

.chat-frame-neon {
    background: linear-gradient(135deg, rgba(0,255,136,0.05), transparent);
    border-left: 3px solid #00ff88;
    padding-left: 8px;
}

.chat-frame-galaxy {
    background: linear-gradient(135deg, rgba(138,43,226,0.06), rgba(0,191,255,0.04));
    border-left: 3px solid #8A2BE2;
    padding-left: 8px;
}

.chat-frame-platinum {
    background: linear-gradient(135deg, rgba(0,206,209,0.06), transparent);
    border-left: 3px solid #00CED1;
    padding-left: 8px;
    border-image: linear-gradient(to bottom, #00CED1, #20B2AA) 1;
}

.chat-frame-diamond {
    background: linear-gradient(135deg, rgba(185,242,255,0.08), rgba(185,242,255,0.02));
    border-left: 3px solid #B9F2FF;
    padding-left: 8px;
    box-shadow: inset 0 0 15px rgba(185,242,255,0.03);
}

.chat-frame-master {
    background: linear-gradient(135deg, rgba(255,69,0,0.08), rgba(255,165,0,0.04));
    border-left: 3px solid #FF4500;
    padding-left: 8px;
    box-shadow: inset 0 0 20px rgba(255,69,0,0.04);
}

@keyframes chatframe-celestial-border {
  0%   { border-left-color: #fbbf24; }
  33%  { border-left-color: #f9fafb; }
  66%  { border-left-color: #60a5fa; }
  100% { border-left-color: #fbbf24; }
}
.chat-frame-celestial {
    background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(96,165,250,0.04), transparent);
    border-left: 4px solid #fbbf24;
    padding-left: 8px;
    box-shadow: inset 0 0 20px rgba(251,191,36,0.04);
    animation: chatframe-celestial-border 4s linear infinite;
}

@keyframes chatframe-eternal-border {
  0%   { border-left-color: #ff0040; box-shadow: inset 0 0 20px rgba(255,0,64,0.05); }
  20%  { border-left-color: #ff6a00; box-shadow: inset 0 0 20px rgba(255,106,0,0.05); }
  40%  { border-left-color: #ffd700; box-shadow: inset 0 0 20px rgba(255,215,0,0.05); }
  60%  { border-left-color: #a855f7; box-shadow: inset 0 0 20px rgba(168,85,247,0.05); }
  80%  { border-left-color: #00d4ff; box-shadow: inset 0 0 20px rgba(0,212,255,0.05); }
  100% { border-left-color: #ff0040; box-shadow: inset 0 0 20px rgba(255,0,64,0.05); }
}
.chat-frame-eternal {
    background: linear-gradient(135deg, rgba(255,0,64,0.06), rgba(168,85,247,0.04), rgba(0,212,255,0.03));
    border-left: 4px solid #ff0040;
    padding-left: 8px;
    animation: chatframe-eternal-border 2.5s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   STICKER PICKER
   ═══════════════════════════════════════════════════════ */
.sticker-picker-overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 320px;
    background: var(--surface, #1e293b);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

.sticker-picker-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

.sticker-picker-tabs .sp-tab {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: transparent;
    color: var(--muted, #94a3b8);
    transition: background 0.15s;
}

.sticker-picker-tabs .sp-tab.active {
    background: var(--accent, rgba(99,102,241,0.2));
    color: var(--text, #e2e8f0);
    font-weight: 600;
}

.sticker-picker-search {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

.sticker-picker-search input {
    width: 100%;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    background: var(--bg, #0f172a);
    color: var(--text, #e2e8f0);
    font-size: 0.8rem;
    outline: none;
}

.sticker-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

.sticker-picker-grid .sp-item {
    aspect-ratio: 1;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: background 0.15s;
}

.sticker-picker-grid .sp-item:hover {
    background: var(--accent, rgba(99,102,241,0.15));
}

.sticker-picker-grid .sp-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sticker-picker-grid .sp-item.locked {
    opacity: 0.4;
    position: relative;
}

.sticker-picker-grid .sp-item.locked::after {
    content: '\1F512';
    position: absolute;
    font-size: 14px;
    bottom: 2px;
    right: 2px;
}

/* Sticker toggle button */
.sticker-toggle-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.sticker-toggle-btn:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   COSMETIC SHOP MODAL
   ═══════════════════════════════════════════════════════ */
.cosmetic-shop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.cosmetic-shop-modal {
    background: var(--surface, #1e293b);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    overflow: hidden;
}

.cosmetic-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}

.cosmetic-shop-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.cosmetic-shop-header .cs-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--muted, #94a3b8);
}

.cosmetic-shop-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}

.cosmetic-shop-tabs .cs-tab {
    flex: 1;
    padding: 8px 4px;
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--muted, #94a3b8);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.cosmetic-shop-tabs .cs-tab.active {
    color: var(--accent, #6366f1);
    border-bottom-color: var(--accent, #6366f1);
    font-weight: 600;
}

.cosmetic-shop-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.cosmetic-shop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    margin-bottom: 8px;
    transition: border-color 0.15s;
    cursor: pointer;
}

.cosmetic-shop-item:hover {
    border-color: var(--accent, rgba(99,102,241,0.4));
}

.cosmetic-shop-item.equipped {
    border-color: var(--green, #10b981);
    background: rgba(16,185,129,0.05);
}

.cosmetic-shop-item .cs-preview {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg, rgba(0,0,0,0.2));
}

.cosmetic-shop-item .cs-info {
    flex: 1;
    min-width: 0;
}

.cosmetic-shop-item .cs-info .cs-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.cosmetic-shop-item .cs-info .cs-desc {
    font-size: 0.75rem;
    color: var(--muted, #94a3b8);
    margin-top: 2px;
}

.cosmetic-shop-item .cs-price {
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.cosmetic-shop-item .cs-price.owned {
    color: var(--green, #10b981);
}

.cosmetic-shop-item .cs-locked {
    font-size: 0.7rem;
    color: var(--muted, #94a3b8);
}

.cs-btn-buy, .cs-btn-equip, .cs-btn-unequip {
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.cs-btn-buy { background: var(--accent, #6366f1); color: #fff; }
.cs-btn-equip { background: var(--green, #10b981); color: #fff; }
.cs-btn-unequip { background: var(--muted, #64748b); color: #fff; }

.cs-btn-buy:hover, .cs-btn-equip:hover, .cs-btn-unequip:hover { opacity: 0.85; }

/* Sticker pack 3x3 grid preview */
.cs-sticker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 80px;
    height: 80px;
}
.cs-sticker-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 2px;
}

/* Tier-locked items */
.cosmetic-shop-item.tier-locked .cs-preview {
    opacity: 0.4;
    filter: grayscale(0.5);
}

/* ═══════════════════════════════════════════════════════
   WINNER ICONS (Vinh Danh)
   ═══════════════════════════════════════════════════════ */
.winner-weekly::after { content: ' \2B50'; font-size: 0.85em; }
.winner-monthly::after { content: ' \1F451'; font-size: 0.85em; }

/* ═══════════════════════════════════════════════════════
   EVENTS PANEL
   ═══════════════════════════════════════════════════════ */
.evt-panel { padding: 8px 0; }
.evt-section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; }
.evt-section { margin-bottom: 16px; }
.evt-section-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }

.evt-cards { display: flex; flex-direction: column; gap: 10px; }

.evt-card {
    background: var(--surface, #1e293b);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.evt-card:hover { border-color: var(--accent, rgba(99,102,241,0.4)); }

.evt-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.evt-icon { font-size: 1.2rem; }
.evt-label { font-weight: 600; font-size: 0.9rem; flex: 1; }
.evt-status { font-size: 0.7rem; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
.evt-status-active { background: rgba(16,185,129,0.15); color: #10b981; }
.evt-status-upcoming { background: rgba(107,114,128,0.15); color: #9ca3af; }
.evt-status-ending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.evt-status-ended { background: rgba(59,130,246,0.15); color: #3b82f6; }

.evt-countdown { font-family: var(--font-mono, monospace); font-size: 0.85rem; color: var(--gold, #f59e0b); margin-bottom: 4px; }
.evt-participants { font-size: 0.75rem; color: var(--muted, #94a3b8); margin-bottom: 6px; }

.evt-top3 { margin-bottom: 6px; }
.evt-top-row { font-size: 0.8rem; padding: 2px 0; }

.evt-my-rank {
    font-size: 0.8rem;
    color: var(--accent, #6366f1);
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(99,102,241,0.08);
    border-radius: 6px;
    margin-bottom: 6px;
}

.evt-view-link { font-size: 0.75rem; color: var(--accent, #6366f1); text-decoration: none; }
.evt-view-link:hover { text-decoration: underline; }

.evt-upcoming-item { font-size: 0.8rem; color: var(--muted, #94a3b8); padding: 4px 0; }

.evt-empty { text-align: center; color: var(--muted, #94a3b8); padding: 30px 0; font-size: 0.85rem; }

.evt-links { text-align: center; margin-top: 12px; font-size: 0.8rem; }
.evt-links a { color: var(--accent, #6366f1); text-decoration: none; }
.evt-links a:hover { text-decoration: underline; }

/* Event banner toast */
.evt-banner-toast {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    transition: top 0.3s ease;
    white-space: nowrap;
}
.evt-banner-toast.show { top: 16px; }
.evt-banner-toast a { color: #fbbf24; text-decoration: none; font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   GIFT TOAST
   ═══════════════════════════════════════════════════════ */
.gift-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(16,185,129,0.95);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.gift-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════
   HALL OF FAME WIDGET
   ═══════════════════════════════════════════════════════ */
.hof-widget {
    background: var(--surface, #1e293b);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.hof-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,165,0,0.04));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.hof-title { font-weight: 700; font-size: 0.9rem; }
.hof-toggle-icon { font-size: 0.7rem; color: var(--muted, #94a3b8); }

.hof-widget.collapsed .hof-body { display: none; }

.hof-body { padding: 10px 14px; }

.hof-section { margin-bottom: 10px; }
.hof-section:last-child { margin-bottom: 0; }
.hof-section-label { font-weight: 600; font-size: 0.75rem; color: var(--muted, #94a3b8); margin-bottom: 4px; letter-spacing: 0.05em; }

.hof-events-row { display: flex; gap: 10px; flex-wrap: wrap; }

.hof-event-mini {
    flex: 1;
    min-width: 140px;
    background: var(--bg, rgba(0,0,0,0.2));
    border-radius: 8px;
    padding: 8px 10px;
}
.hof-event-type { font-weight: 600; font-size: 0.8rem; margin-bottom: 4px; }
.hof-mini-row { font-size: 0.75rem; padding: 1px 0; }
.hof-mini-countdown { font-size: 0.7rem; color: var(--gold, #f59e0b); margin-top: 4px; }

.hof-winner-row { font-size: 0.8rem; padding: 2px 0; }
.hof-season-row { font-size: 0.8rem; padding: 2px 0; }

.hof-pin {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(99,102,241,0.08);
    border-radius: 8px;
    font-size: 0.8rem;
    border-left: 3px solid var(--accent, #6366f1);
}

/* Responsive: mobile compact */
@media (max-width: 480px) {
    .hof-events-row { flex-direction: column; }
    .hof-event-mini { min-width: auto; }
}

/* ═══════════════════════════════════════════════════════
   TIER BADGE MINI (world labels, compact displays)
   ═══════════════════════════════════════════════════════ */
.tier-badge-mini {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
.tier-rp { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; opacity: 0.8; }
.shield-icon { font-size: 0.7rem; vertical-align: middle; }
.streak-badge-mini { font-size: 8px; color: #FF6B35; font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   RANK DELTA DISPLAY (end-game popup)
   ═══════════════════════════════════════════════════════ */
.rank-delta-display { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.rank-delta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rank-delta-rp { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 600; }
.rank-delta-rp.rp-gain { color: #4ade80; }
.rank-delta-rp.rp-loss { color: #f87171; }
.rank-delta-coins { font-size: 0.75rem; color: #fbbf24; }
.rank-delta-streak { font-size: 0.75rem; color: #FF6B35; }
.rank-promotion { font-size: 0.85rem; font-weight: 700; color: #fbbf24; animation: promotion-pulse 1s ease-in-out 3; }
.rank-shield { font-size: 0.75rem; color: #60a5fa; }
.rank-progress-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; max-width: 180px; }
.rank-progress-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #22d3ee); border-radius: 2px; transition: width 0.5s ease; }
@keyframes promotion-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ═══════════════════════════════════════════════════════
   END-GAME RANK OVERLAY
   ═══════════════════════════════════════════════════════ */
.endgame-rank-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: flex; align-items: center; justify-content: center; animation: egrFadeIn 0.3s ease; }
.egr-card { background: linear-gradient(145deg, #1e1b4b, #0f172a); border: 1px solid rgba(99,102,241,0.3); border-radius: 16px; padding: 20px 24px; min-width: 280px; max-width: 400px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.egr-title { font-family: 'Bungee', cursive, sans-serif; font-size: 1.3rem; margin-bottom: 8px; }
.egr-title.win { color: #4ade80; }
.egr-title.lose { color: #f87171; }
.egr-title.draw { color: #fbbf24; }
.egr-reason { font-size: 0.8rem; color: #94a3b8; margin-bottom: 12px; }
.egr-players { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.egr-player { text-align: left; padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.egr-player.is-me { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.08); }
.egr-player-name { font-weight: 700; font-size: 0.85rem; color: #e2e8f0; margin-bottom: 4px; }
.egr-actions { display: flex; gap: 8px; justify-content: center; }
.egr-btn { padding: 8px 20px; border: none; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.egr-btn-retry { background: #4f46e5; color: #fff; }
.egr-btn-retry:hover { background: #4338ca; }
.egr-btn-close { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.egr-btn-close:hover { background: rgba(255,255,255,0.15); }
@keyframes egrFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════
   ACHIEVEMENT TOAST
   ═══════════════════════════════════════════════════════ */
.achievement-toast { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #1e1b4b, #312e81); border: 1px solid rgba(251,191,36,0.4); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; z-index: 300; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); max-width: 300px; }
.achievement-toast.show { transform: translateX(0); }
.achievement-toast.hiding { transform: translateX(120%); }
.achievement-toast-icon { font-size: 1.5rem; }
.achievement-toast-body { flex: 1; min-width: 0; }
.achievement-toast-title { font-size: 0.65rem; color: #fbbf24; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.achievement-toast-name { font-size: 0.85rem; font-weight: 700; color: #e2e8f0; }
.achievement-toast-desc { font-size: 0.7rem; color: #94a3b8; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════
   SEASON BANNER / COUNTDOWN / REWARDS
   ═══════════════════════════════════════════════════════ */
.season-end-banner { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #312e81, #1e1b4b); border: 1px solid rgba(251,191,36,0.3); border-radius: 12px; padding: 10px 20px; z-index: 250; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: top 0.5s cubic-bezier(0.16,1,0.3,1); }
.season-end-banner.show { top: 12px; }
.season-banner-content { display: flex; align-items: center; gap: 8px; color: #e2e8f0; font-size: 0.85rem; }
.season-banner-icon { font-size: 1.2rem; }
.season-banner-close { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.season-rewards-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 250; display: flex; align-items: center; justify-content: center; }
.season-rewards-card { background: linear-gradient(145deg, #1e1b4b, #0f172a); border: 1px solid rgba(251,191,36,0.3); border-radius: 16px; padding: 24px; min-width: 260px; max-width: 360px; text-align: center; }
.season-rewards-title { font-family: 'Bungee', cursive; font-size: 1.1rem; color: #fbbf24; margin-bottom: 8px; }
.season-rewards-tier { font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; }
.season-rewards-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.season-reward-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,0.04); border-radius: 6px; font-size: 0.8rem; color: #e2e8f0; }
.season-rewards-coins { font-size: 0.9rem; color: #fbbf24; font-weight: 600; margin-bottom: 12px; }
.season-rewards-close { padding: 8px 24px; background: #4f46e5; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }

/* Player stats modal styles are now in player-stats.js (injected inline) */

/* ═══════════════════════════════════════════════════════
   WORLD LABEL ENHANCEMENTS (rank integration)
   ═══════════════════════════════════════════════════════ */
.char-name-row { display: flex; align-items: center; gap: 2px; justify-content: center; }
.char-title { font-size: 8px; text-align: center; margin-top: 1px; }
.char-winner-icon { font-size: 10px; display: block; text-align: center; animation: winner-glow 2s ease-in-out infinite; }
@keyframes winner-glow { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; filter: drop-shadow(0 0 4px gold); } }

/* Character cosmetic frames in world entity layer */
.character.frame-golden-glow { filter: drop-shadow(0 0 4px #FFD700); }
.character.frame-diamond { filter: drop-shadow(0 0 5px rgba(185,242,255,0.6)); }
.character.frame-fire { filter: drop-shadow(0 0 5px rgba(255,69,0,0.5)); }
.character.frame-master { filter: drop-shadow(0 0 6px rgba(255,69,0,0.7)); }

/* Player stats modal styles (second block) — now in player-stats.js */