/* ========================= GENERAL / SHARED ========================= */ .badge-strip{ display:flex; flex-wrap:wrap; gap:10px; } .badge-strip-tight{ gap:8px; } .badge{ width:34px; height:34px; border-radius:8px; border:2px solid rgba(255,215,0,0.35); background:rgba(0,0,0,0.55); position:relative; cursor:pointer; outline:none; } .badge img{ width:100%; height:100%; object-fit:cover; border-radius:6px; display:block; } .badge-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1rem; border-radius:6px; background:#111; color:var(--gold); } .badge-more{ display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--gold); border-style:dashed; } /* Popover */ .badge-popover{ display:none; position:absolute; left:50%; transform:translateX(-50%); bottom:44px; width:260px; z-index:2000; background:rgba(0,0,0,0.95); border:2px solid var(--gold); border-radius:10px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,0.8); } .badge:hover .badge-popover, .badge:focus .badge-popover{ display:block; } .badge-popover-title{ color:var(--gold); font-weight:900; margin-bottom:8px; } .badge-popover-img{ width:100%; max-height:140px; object-fit:cover; border-radius:8px; border:1px solid rgba(255,215,0,0.3); margin-bottom:10px; } .badge-popover-meta{ display:flex; justify-content:space-between; gap:10px; font-size:0.8rem; color:#ddd; margin-bottom:8px; } .badge-popover-desc{ font-size:0.85rem; color:#bbb; line-height:1.35; border-top:1px solid rgba(255,255,255,0.08); padding-top:8px; } @media (max-width:768px){ .badge-popover{ width:230px; left:0; transform:none; } } /* ========================= LADDER (YOUR NEW FORMAT) ========================= */ .ladder-container{ background:rgba(0,0,0,0.8); border:3px solid var(--gold); border-radius:10px; overflow:hidden; } .ladder-header{ background:linear-gradient(90deg,transparent 0%, rgba(255,215,0,0.2) 50%, transparent 100%); padding:20px; text-align:center; border-bottom:2px solid var(--gold); } /* Header row */ .ladder-row{ display:grid; grid-template-columns: 1.6fr 0.7fr 1.4fr 0.8fr 0.9fr; /* Name | Level | Badges | XP | Next */ align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid #333; } .ladder-row-head{ padding:12px 16px; background:rgba(255,215,0,0.06); } .ladder-head{ color:#aaa; font-size:0.72rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:900; } /* Data rows */ .ladder-row-data:hover{ background:rgba(255,215,0,0.05); } /* Name cell */ .ladder-name{ display:flex; align-items:center; gap:12px; min-width:0; } .ladder-rank-inline{ width:46px; text-align:center; font-weight:900; color:var(--gold); } .ladder-champ-block{ display:flex; align-items:center; gap:12px; min-width:0; } .ladder-avatar-round{ width:40px; height:40px; border-radius:50%; border:2px solid var(--primary); overflow:hidden; flex:0 0 auto; background:#111; display:flex; align-items:center; justify-content:center; } .ladder-avatar-round img{ width:100%; height:100%; object-fit:cover; display:block; } .ladder-emoji-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--gold); } .ladder-info{ min-width:0; } .ladder-info h3{ margin:0; font-size:1.05rem; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.05; } .ladder-info p{ margin:4px 0 0; font-size:0.78rem; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.05; } /* Center cells */ .ladder-cell-center{ text-align:center; } .ladder-big{ font-size:1.2rem; font-weight:900; color:var(--gold); } .ladder-small{ font-size:0.65rem; text-transform:uppercase; color:#666; margin-top:4px; letter-spacing:1px; font-weight:900; } /* Badge cell */ .ladder-cell-badges{ display:flex; flex-direction:column; gap:8px; } .badge-empty{ color:#666; font-weight:900; } .badge-countline{ display:flex; gap:6px; align-items:center; color:#aaa; font-size:0.75rem; } .badge-count{ color:var(--gold); font-weight:900; } .badge-countlabel{ color:#666; } /* Next playable pill */ .next-pill{ display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,215,0,0.35); background:rgba(0,0,0,0.6); color:#ddd; font-weight:900; font-size:0.85rem; } .next-today{ border-color:rgba(76,175,80,0.6); box-shadow:0 0 0 2px rgba(76,175,80,0.12) inset; color:#a5ffb1; } .next-tomorrow{ border-color:rgba(255,215,0,0.55); color:#ffe58b; } /* Mobile: stack into 2 lines per row */ @media (max-width: 900px){ .ladder-row{ grid-template-columns: 1fr 0.7fr 0.8fr; grid-template-areas: "name level xp" "name badges next"; row-gap:10px; } .ladder-row > :nth-child(1){ grid-area: name; } .ladder-row > :nth-child(2){ grid-area: level; } .ladder-row > :nth-child(3){ grid-area: badges; } .ladder-row > :nth-child(4){ grid-area: xp; } .ladder-row > :nth-child(5){ grid-area: next; } .ladder-row-head{ display:none; } /* keep clean on mobile */ } /* ========================= CALENDAR (KEEP YOUR FIXES) ========================= */ .calendar-grid{ display:grid !important; grid-template-columns:repeat(7, minmax(0, 1fr)) !important; gap:6px !important; margin:20px 0 !important; align-items:stretch !important; } .calendar-header{ text-align:center !important; padding:10px !important; background:rgba(255,215,0,0.2) !important; border:1px solid var(--gold) !important; font-weight:700 !important; color:var(--gold) !important; } .calendar-day{ aspect-ratio:1 / 1 !important; background:rgba(0,0,0,0.6) !important; border:1px solid #444 !important; padding:6px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; position:relative !important; overflow:hidden !important; min-height:64px !important; } .calendar-day:hover{ border-color:var(--gold) !important; background:rgba(255,215,0,0.08) !important; } .calendar-day.today{ border:2px solid var(--gold) !important; background:rgba(255,215,0,0.15) !important; } .calendar-day.completed{ background:rgba(76,175,80,0.18) !important; border-color:#4caf50 !important; } .day-number{ font-size:0.85rem !important; font-weight:800 !important; margin-bottom:4px !important; line-height:1 !important; } .day-champion, .calendar-day img{ width:32px !important; height:32px !important; max-width:32px !important; max-height:32px !important; border-radius:50% !important; object-fit:cover !important; display:block !important; border:1px solid var(--dark-gold) !important; } @media (max-width:768px){ .calendar-grid{ gap:3px !important; } .calendar-day{ padding:4px !important; min-height:54px !important; } .day-number{ font-size:0.75rem !important; } .day-champion, .calendar-day img{ width:26px !important; height:26px !important; max-width:26px !important; max-height:26px !important; } } /* ========================= DASHBOARD HERO CLAMP (KEEP) ========================= */ .container .hero-section img, .container .champion-portrait img, .container .hero-section .champion-portrait img{ width: 240px !important; max-width: 240px !important; height: 340px !important; max-height: 340px !important; display:block !important; margin: 0 auto 12px !important; object-fit: contain !important; } .container .champion-portrait, .container .hero-section .champion-portrait{ width: 240px !important; max-width: 240px !important; height: 340px !important; max-height: 340px !important; margin: 0 auto 12px !important; border: 3px solid var(--primary); border-radius: 10px; overflow: hidden; box-shadow: 0 0 24px rgba(0,0,0,0.7); } @media (max-width:768px){ .container .hero-section img, .container .champion-portrait img, .container .hero-section .champion-portrait img{ width: 190px !important; max-width: 190px !important; height: 270px !important; max-height: 270px !important; } .container .champion-portrait, .container .hero-section .champion-portrait{ width: 190px !important; max-width: 190px !important; height: 270px !important; max-height: 270px !important; } }