/* ============================================================ VALORANT CARDS — Direction artistique Valorant (v2) Rouge #FF4655, angles vifs, typo condensée, animations riches. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap'); :root { --bg-0: #0f1923; --bg-1: #16222d; --bg-2: #1b2733; --panel: #18242f; --panel-2: #1f2c38; --line: #2b3a47; --line-bright: #3a4b5a; --red: #ff4655; --red-dim: #c23542; --orange: #ff8c42; --cream: #ece8e1; --muted: #8b98a8; --muted-2: #5f6c79; --font-title: 'Oswald', sans-serif; --font-body: 'Rajdhani', sans-serif; --cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--cream); background: var(--bg-0); min-height: 100vh; overflow-x: hidden; } /* ============================================================ Fond animé (dégradés qui bougent + grille) ============================================================ */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 48px 48px; } body::after { content: ""; position: fixed; inset: -50%; z-index: 0; pointer-events: none; background: radial-gradient(40% 40% at 30% 20%, rgba(255,70,85,0.14), transparent 70%), radial-gradient(35% 35% at 75% 15%, rgba(255,140,66,0.10), transparent 70%), radial-gradient(45% 45% at 60% 80%, rgba(176,124,255,0.08), transparent 70%); animation: bgDrift 26s ease-in-out infinite alternate; } @keyframes bgDrift { 0% { transform: translate(-3%, -2%) rotate(0deg); } 100% { transform: translate(3%, 2%) rotate(8deg); } } .wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 20px; } /* ============================================================ Header ============================================================ */ header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(15,25,35,0.96), rgba(15,25,35,0.88)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 22px; padding: 14px 0; } .logo { display: flex; flex-direction: column; line-height: 0.95; text-transform: uppercase; font-family: var(--font-title); font-weight: 700; letter-spacing: 2px; } .logo .lg-main { font-size: 28px; color: var(--cream); } .logo .lg-main span { color: var(--red); text-shadow: 0 0 18px rgba(255,70,85,0.7); animation: logoGlow 2.6s ease-in-out infinite; } .logo .lg-sub { font-size: 11px; letter-spacing: 5px; color: var(--muted); font-weight: 600; } @keyframes logoGlow { 0%, 100% { text-shadow: 0 0 10px rgba(255,70,85,0.5); } 50% { text-shadow: 0 0 26px rgba(255,70,85,0.95); } } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .pack-pill { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; clip-path: var(--cut); font-weight: 700; font-size: 17px; letter-spacing: 1px; transition: border-color 0.2s; } .pack-pill.full { border-color: var(--red); animation: pulseBorder 1.4s ease-in-out infinite; } .pack-pill .pp-ico { font-size: 18px; } .pack-pill .pp-num { color: var(--cream); font-family: var(--font-title); font-size: 20px; } .pack-pill .pp-lbl { color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } @keyframes pulseBorder { 0%,100% { box-shadow: 0 0 0 rgba(255,70,85,0); } 50% { box-shadow: 0 0 18px rgba(255,70,85,0.5); } } .auth-zone { display: flex; align-items: center; gap: 8px; } .user-chip { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; clip-path: var(--cut); font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: border-color 0.2s; } .user-chip:hover { border-color: var(--red); } .user-chip.admin { border-color: var(--orange); box-shadow: 0 0 14px rgba(255,140,66,0.35); } .alpha-title-badge { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-left:7px; padding:3px 7px 2px; border:1px solid #54d9ff; border-radius:3px; color:#9beaff; background:linear-gradient(120deg,#063347b8,#07131de8); box-shadow:0 0 7px #00c8ff8a,0 0 16px #00baff4d,inset 0 0 8px #00baff22; font:800 9px/1 var(--font-title); letter-spacing:1.5px; text-shadow:0 0 8px #00caff; white-space:nowrap; animation:alphaTitleNeon 2.4s ease-in-out infinite alternate; } @keyframes alphaTitleNeon { from { filter:brightness(.9); box-shadow:0 0 5px #00c8ff75,0 0 12px #00baff36,inset 0 0 7px #00baff18; } to { filter:brightness(1.24); box-shadow:0 0 9px #00c8ffbb,0 0 22px #00baff78,inset 0 0 10px #00baff30; } } .user-chip .uc-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--red), var(--orange)); font-family: var(--font-title); font-size: 14px; color: #fff; } .user-chip .uc-badge { font-size: 11px; color: var(--orange); letter-spacing: 1px; } /* Menu déroulant du profil (header) */ .user-menu { position: relative; } .uc-caret { font-size: 12px; color: var(--muted); margin-left: 2px; } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: var(--panel-2); border: 1px solid var(--line-bright); clip-path: var(--cut); z-index: 60; display: none; flex-direction: column; padding: 6px; } .user-dropdown.open { display: flex; animation: fadeUp 0.18s ease; } .ud-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 1px; padding: 10px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; } .ud-item:hover { background: var(--panel); color: var(--red); } .ud-item.ud-danger { color: var(--muted); } .ud-item.ud-danger:hover { color: var(--red); } /* ============================================================ Tabs ============================================================ */ nav.tabs { flex: 1; display: flex; align-items: stretch; gap: 4px; margin: 0; border-bottom: none; justify-content: space-evenly; } .tab { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 16px; color: var(--muted); background: transparent; border: none; padding: 14px 16px; cursor: pointer; position: relative; flex: 1; text-align: center; white-space: nowrap; transition: color 0.15s; } .tab:hover { color: var(--cream); } .tab.active { color: var(--cream); } .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); animation: tabSlide 0.3s ease; box-shadow: 0 0 12px var(--red); } @keyframes tabSlide { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================================ Panneaux / sections ============================================================ */ .panel { display: none; } .panel.active { display: block; animation: fadeUp 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .section-title { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 24px; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; } .section-title::before { content: ""; width: 28px; height: 4px; background: var(--red); display: inline-block; box-shadow: 0 0 10px var(--red); } .section-sub { color: var(--muted); margin-bottom: 20px; font-size: 16px; } .sub-title { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 18px; margin: 28px 0 4px; color: var(--cream); display: flex; align-items: center; gap: 10px; } .sub-title::before { content: ""; width: 16px; height: 3px; background: var(--orange); display: inline-block; } /* ============================================================ Pack hero + meter ============================================================ */ .pack-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 26px 30px; clip-path: var(--cut); margin-bottom: 22px; } .pack-hero-left { max-width: 480px; } .pack-hero-left .section-title::before { display: none; } .pack-meter { display: flex; align-items: center; gap: 18px; } .pack-meter-ring { width: 110px; height: 110px; border-radius: 50%; position: relative; background: conic-gradient(var(--red) 0%, #24303c 0%); display: grid; place-items: center; transition: background 0.4s linear; } .pack-meter-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg-1); } .pack-meter-inner { position: relative; text-align: center; line-height: 1; } .pack-meter-inner .pm-num { font-family: var(--font-title); font-size: 40px; font-weight: 700; color: var(--cream); } .pack-meter-inner .pm-lbl { color: var(--muted); font-size: 13px; letter-spacing: 2px; } .pack-meter-timer { color: var(--muted); font-size: 15px; letter-spacing: 1px; font-variant-numeric: tabular-nums; min-width: 150px; } .pack-meter-timer b { color: var(--cream); } .bonus-pack-pill { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 10px 16px; clip-path: var(--cut); font-weight: 700; font-size: 16px; letter-spacing: 1px; } .bonus-pack-pill .bpp-ico { font-size: 18px; } .bonus-pack-pill .bpp-num { color: var(--orange); font-family: var(--font-title); font-size: 24px; } .bonus-pack-pill .bpp-lbl { color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } /* ============================================================ Bouton ouvrir un pack (gros + animé) ============================================================ */ .open-pack-zone { display: flex; justify-content: center; margin: 10px 0 30px; } .open-pack-btn { position: relative; overflow: hidden; font-family: var(--font-title); text-transform: uppercase; letter-spacing: 4px; font-weight: 700; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--red), var(--red-dim)); border: none; cursor: pointer; padding: 22px 60px; clip-path: var(--cut); transition: transform 0.15s, filter 0.2s; } .open-pack-btn:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.08); } .open-pack-btn:active { transform: translateY(0) scale(0.99); } .open-pack-btn:disabled { background: var(--line); color: var(--muted-2); cursor: not-allowed; transform: none; filter: none; } .open-pack-btn .opb-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 45%, transparent 60%); transform: translateX(-120%); animation: shineSweep 3s ease-in-out infinite; } .open-pack-btn .opb-label { position: relative; z-index: 1; } .open-pack-btn .opb-count { position: relative; z-index: 1; margin-left: 14px; font-size: 18px; color: rgba(255,255,255,0.85); } @keyframes shineSweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } } /* ============================================================ Grille des packs bonus ============================================================ */ .packs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .pack-card { position: relative; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 22px; clip-path: var(--cut); transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; display: flex; flex-direction: column; gap: 12px; } .pack-card:hover { transform: translateY(-4px); border-color: var(--line-bright); box-shadow: 0 12px 30px rgba(0,0,0,0.45); } .pack-art { height: 70px; display: grid; place-items: center; font-size: 42px; background: radial-gradient(circle at 50% 40%, rgba(255,70,85,0.16), transparent 70%); } .pack-name { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 21px; text-align: center; } .pack-cats { align-self: center; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); border: 1px solid rgba(255,70,85,0.4); padding: 4px 10px; clip-path: var(--cut); } .pack-blurb { color: var(--muted); font-size: 14px; text-align: center; min-height: 40px; } .pack-odds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 11.5px; letter-spacing: 0.5px; } .pack-odds .od { padding: 3px 8px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; } .pack-odds .od b { color: var(--cream); } .pack-odds-label { color:var(--muted); text-align:center; font-size:10px; letter-spacing:.7px; } .godpack-rate { color:#ffd783; text-align:center; font:800 10px var(--font-title); letter-spacing:1px; text-shadow:0 0 10px #ffb34755; } .free-pack-odds { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:0 0 24px; padding:12px 16px; border:1px solid var(--line); background:linear-gradient(110deg,#111d27,#0b131a); } .free-pack-odds-label { flex-basis:100%; color:var(--muted); text-align:center; font-size:10px; font-weight:700; letter-spacing:1px; } .free-pack-odds .od { padding:4px 9px; border:1px solid var(--line); color:var(--muted); font-size:11px; } .free-pack-odds .od b { color:var(--cream); } .pack-tag { margin-top: auto; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--orange); border: 1px dashed rgba(255,140,66,0.4); padding: 7px; } /* ============================================================ Boutons ============================================================ */ .btn { font-family: var(--font-body); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--red); background: var(--red); color: #fff; padding: 10px 18px; cursor: pointer; clip-path: var(--cut); transition: filter 0.15s, box-shadow 0.15s, transform 0.1s; } .btn:hover { filter: brightness(1.12); box-shadow: 0 0 22px rgba(255,70,85,0.45); } .btn:active { transform: scale(0.97); } .btn:disabled { background: var(--line); border-color: var(--line); color: var(--muted-2); cursor: not-allowed; box-shadow: none; } .btn.ghost { background: transparent; border-color: var(--line-bright); color: var(--cream); } .btn.ghost:hover { border-color: var(--red); background: rgba(255,70,85,0.12); box-shadow: none; } .btn.small { padding: 7px 13px; font-size: 13px; } /* ============================================================ Overlay d'ouverture de pack ============================================================ */ .overlay { position: fixed; inset: 0; z-index: 100; background: rgba(5,9,13,0.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; } .overlay.open { display: flex; animation: fadeUp 0.25s ease; } .pack-reveal { width: 100%; max-width: 1000px; text-align: center; } .reveal-head { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 26px; margin-bottom: 24px; } .reveal-stage { display: flex; flex-direction: column; align-items: center; gap: 26px; min-height: 300px; perspective: 1200px; } .reveal-pile { position: relative; width: 158px; height: 224px; margin: 0 auto; } .pile-slot { position: absolute; top: 0; left: 0; width: 158px; height: 224px; cursor: pointer; transition: transform 0.25s ease; } .reveal-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .revealed-slot { width: 158px; height: 224px; animation: cardPop 0.45s ease; } .reveal-slot { width: 158px; height: 224px; perspective: 900px; cursor: pointer; opacity: 0; animation: cardDrop 0.5s forwards; } .reveal-slot:nth-child(1) { animation-delay: 0.05s; } .reveal-slot:nth-child(2) { animation-delay: 0.15s; } .reveal-slot:nth-child(3) { animation-delay: 0.25s; } .reveal-slot:nth-child(4) { animation-delay: 0.35s; } .reveal-slot:nth-child(5) { animation-delay: 0.45s; } @keyframes cardDrop { from { opacity: 0; transform: translateY(-70px) rotate(-8deg) scale(0.7); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } } .rv-card { position: relative; width: 100%; height: 100%; perspective: 1200px; transition:filter .35s ease; } .rv-card:not(.flipped) { filter:drop-shadow(0 0 8px var(--rv-rarity-glow,transparent)) drop-shadow(0 0 18px var(--rv-rarity-glow,transparent)); } .rv-card-inner { position: relative; width: 100%; height: 100%; transform: rotateY(0deg); transform-style: preserve-3d; transition: transform .82s cubic-bezier(.2,.72,.16,1); } .rv-card.flipped .rv-card-inner { transform: rotateY(180deg); } .rv-card:not(.flipped):hover .rv-card-inner { transform: translateY(-4px) scale(1.02); } .rv-face { position: absolute; inset: 0; backface-visibility: hidden; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .rv-back { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 13px 9px 11px; color: #e8e4db; background: radial-gradient(ellipse at 50% 49%, #ff465526 0, #ff46550a 33%, transparent 68%), repeating-linear-gradient(-45deg, #ffffff08 0 1px, transparent 1px 9px), linear-gradient(145deg, #263541 0%, #111b24 48%, #202e38 100%); border: 1px solid #8895a0; box-shadow: inset 0 0 28px #0009, inset 0 1px #ffffff1c; isolation: isolate; transition: filter .35s ease, box-shadow .35s ease; } .rv-back::before { content:""; position:absolute; z-index:-1; inset:7px; border:1px solid #e8e4db70; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); box-shadow:inset 0 0 20px #ff465512; } .rv-back::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.48; background:linear-gradient(90deg,transparent 49.6%,#ff465533 50%,transparent 50.4%),linear-gradient(0deg,transparent 49.6%,#ff465522 50%,transparent 50.4%); pointer-events:none; } .rv-back-mark,.rv-back-title,.rv-back-caption,.rv-back-logo { position:relative; z-index:1; } .rv-back-mark { display:flex; align-items:center; gap:5px; width:100%; padding:0 4px 7px; border-bottom:1px solid #ffffff25; color:#b9c3ca; font:700 8px var(--font-title); letter-spacing:1.4px; text-align:left; } .rv-back-mark i { color:#ff4655; font-style:normal; } .rv-back-mark b { margin-left:auto; color:#ff7b86; font-size:8px; } .rv-back-reticle { position:absolute; top:50%; left:50%; width:76%; aspect-ratio:1; border:1px solid #ff657544; border-radius:50%; transform:translate(-50%,-50%); background:repeating-conic-gradient(from 0deg,#ff46551c 0deg 1deg,transparent 1deg 15deg); box-shadow:0 0 28px #ff46551a,inset 0 0 22px #ff46551c; } .rv-back-reticle::before,.rv-back-reticle::after { content:""; position:absolute; background:#e5e5dd42; } .rv-back-reticle::before { top:50%; left:-12%; width:124%; height:1px; } .rv-back-reticle::after { left:50%; top:-12%; width:1px; height:124%; } .rv-back-logo { display:block; width:94%; height:70px; object-fit:contain; filter:drop-shadow(0 0 12px #ff465566) drop-shadow(0 5px 6px #000b); } .rv-back-title { margin-top:-10px; color:#f5f1e9; font:700 9px var(--font-title); letter-spacing:2px; text-shadow:0 0 12px #ff465566; } .rv-back-caption { width:100%; padding-top:7px; border-top:1px solid #ffffff25; color:#aeb9c1; font:600 6px var(--font-title); letter-spacing:1.7px; text-align:center; } .rv-front { transform: rotateY(180deg); overflow: hidden; display: flex; flex-direction: column; } /* Lift fluide de la carte pendant le retournement */ .reveal-slot.pop { opacity: 1; animation: cardLift 0.6s ease; } @keyframes cardLift { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-16px) rotate(-2.5deg); } 100% { transform: translateY(0) rotate(0); } } .reveal-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .reveal-summary { margin-top: 18px; font-size: 16px; color: var(--muted); min-height: 22px; } .reveal-summary b { color: var(--cream); } .rv-front.flash { animation: rarityFlash 0.9s ease; } @keyframes rarityFlash { 0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); } 30% { box-shadow: inset 0 0 70px 0 var(--flash-color); } 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); } } /* ============================================================ Cartes de collection (tilt 3D + effets rareté) ============================================================ */ .collection-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .stat { flex: 1; min-width: 150px; background: var(--panel); border: 1px solid var(--line); padding: 14px 18px; clip-path: var(--cut); transition: transform 0.2s, border-color 0.2s; } .stat:hover { transform: translateY(-3px); border-color: var(--line-bright); } .stat .st-num { font-family: var(--font-title); font-size: 30px; font-weight: 700; letter-spacing: 1px; } .stat .st-lbl { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 2px; } .progress-bar { height: 10px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 24px; overflow: hidden; } .progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--orange), var(--red)); background-size: 200% 100%; animation: shimmer 3s linear infinite; transition: width 0.5s ease; } @keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .filter { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 7px 14px; cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s; } .filter:hover { color: var(--cream); border-color: var(--line-bright); transform: translateY(-1px); } .filter.active { color: #fff; background: var(--red); border-color: var(--red); } .filter .f-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; perspective: 1200px; } .game-card { position: relative; aspect-ratio: 5 / 7; cursor: pointer; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); background: linear-gradient(165deg, var(--gc-tint), var(--bg-1)); border: 1px solid var(--gc-border); display: flex; flex-direction: column; overflow: hidden; transform-style: flat; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s, border-color 0.3s; } .game-card:hover { border-color: var(--gc-color); box-shadow: 0 14px 30px rgba(0,0,0,0.55), 0 0 28px var(--gc-glow); } .game-card .gc-monogram, .rv-front .gc-monogram { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-title); font-weight: 700; font-size: 62px; letter-spacing: 2px; color: rgba(236,232,225,0.10); pointer-events: none; } /* Zone d'art : image réelle par-dessus le monogramme (filigrane) */ .game-card .gc-art, .rv-front .gc-art, .vp-item .gc-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .game-card .gc-art::after, .rv-front .gc-art::after, .vp-item .gc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,25,35,0.08) 0%, transparent 42%, rgba(15,25,35,0.82) 100%); } .game-card .gc-img, .rv-front .gc-img, .vp-item .gc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; pointer-events: none; } .game-card .gc-top, .rv-front .gc-top, .game-card .gc-bottom, .rv-front .gc-bottom, .vp-item .gc-top, .vp-item .gc-bottom { position: relative; z-index: 3; } .game-card .gc-top, .rv-front .gc-top { position: relative; padding: 10px 12px 0; display: flex; justify-content: space-between; align-items: flex-start; } .game-card .gc-cat-ico, .rv-front .gc-cat-ico { font-size: 16px; color: var(--gc-color); } .game-card .gc-count, .rv-front .gc-count { font-family: var(--font-title); font-weight: 700; font-size: 14px; background: rgba(0,0,0,0.45); padding: 2px 8px; letter-spacing: 1px; } .game-card .gc-bottom, .rv-front .gc-bottom { margin-top: auto; padding: 0 12px 12px; position: relative; } .game-card .gc-name, .rv-front .gc-name { font-family: var(--font-title); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; line-height: 1.1; color: var(--cream); } .game-card .gc-cat, .rv-front .gc-cat { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .game-card .gc-rarity, .rv-front .gc-rarity { margin-top: 8px; display: inline-block; font-family: var(--font-title); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; color: var(--gc-border); border: 1px solid var(--gc-border); background: rgba(0,0,0,0.4); } /* Carte non possédée */ .game-card.locked { cursor: default; filter: grayscale(1) brightness(0.55); border-color: var(--line); } .game-card.locked:hover { transform: none; box-shadow: none; } .game-card.locked .gc-monogram { color: rgba(236,232,225,0.05); } .game-card.locked .gc-name, .game-card.locked .gc-cat { color: var(--muted-2); } .game-card.locked .gc-rarity { border-color: var(--line); color: var(--muted-2); } .game-card.locked .gc-lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; color: var(--muted-2); } /* Shine animé pour Épique+ */ .game-card.shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 45%, transparent 60%); transform: translateX(-120%); animation: shine 3.4s ease-in-out infinite; } @keyframes shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } } /* Halo pulsant pour Légendaire */ .game-card.halo { animation: haloPulse 2.6s ease-in-out infinite; } @keyframes haloPulse { 0%, 100% { box-shadow: 0 0 12px var(--gc-glow); } 50% { box-shadow: 0 0 30px var(--gc-glow), 0 0 60px var(--gc-glow); } } /* GOAT : étincelles */ .game-card.goat-card::before { content: ""; position: absolute; inset: -30%; pointer-events: none; opacity: 0.9; background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 15%, #ffe08a, transparent), radial-gradient(3px 3px at 85% 65%, #fff, transparent), radial-gradient(2px 2px at 40% 80%, #ffd27a, transparent), radial-gradient(2px 2px at 15% 70%, #fff, transparent); animation: sparkle 2.2s linear infinite; } @keyframes sparkle { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translateY(-26px) scale(1.4); opacity: 0; } } /* ============================================================ Modal détail carte ============================================================ */ .modal { position: fixed; inset: 0; z-index: 110; background: rgba(5,9,13,0.86); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; padding: 20px; } .modal.open { display: flex; animation: fadeUp 0.22s ease; } .modal-box { width: 100%; max-width: 560px; background: linear-gradient(165deg, var(--m-tint), var(--bg-1)); border: 1px solid var(--m-border); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); padding: 30px; position: relative; } .modal-close { position: absolute; top: 14px; right: 16px; background: transparent; border: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--cream); } .modal-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; } .modal-mono { width: 84px; height: 84px; flex: none; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: 40px; color: var(--m-color); border: 1px solid var(--m-border); background: rgba(0,0,0,0.3); overflow: hidden; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .modal-mono .modal-img { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-title { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 30px; line-height: 1.05; } .modal-sub { color: var(--muted); margin-top: 6px; font-size: 15px; letter-spacing: 1px; } .modal-rarity { display: inline-block; font-family: var(--font-title); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; padding: 5px 12px; margin-bottom: 14px; color: var(--m-border); border: 1px solid var(--m-border); background: rgba(0,0,0,0.4); } .modal-desc { color: var(--cream); font-size: 17px; line-height: 1.5; } .modal-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================ Auth modal + formulaires ============================================================ */ .auth-box { width: 100%; max-width: 420px; background: linear-gradient(165deg, var(--panel-2), var(--bg-1)); border: 1px solid var(--line-bright); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); padding: 30px; position: relative; } .auth-title { font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 24px; margin-bottom: 18px; text-align: center; } .auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; } .auth-tab { flex: 1; font-family: var(--font-body); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .auth-tab.active { color: #fff; background: var(--red); border-color: var(--red); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .code-input, .field input { width: 100%; background: var(--bg-1); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-body); font-size: 16px; padding: 11px 14px; outline: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: border-color 0.2s, box-shadow 0.2s; } .code-input:focus, .field input:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,70,85,0.2); } .auth-error { color: #ff7a84; font-size: 14px; margin-bottom: 12px; min-height: 18px; } .divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted-2); font-size: 13px; letter-spacing: 2px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .discord-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: #5865F2; border: 1px solid #5865F2; color: #fff; font-weight: 700; letter-spacing: 1px; padding: 12px; cursor: pointer; clip-path: var(--cut); transition: filter 0.15s; } .discord-btn:hover { filter: brightness(1.12); } .discord-btn:disabled { opacity: 0.78; cursor: wait; } .auth-submit { width: 100%; padding: 12px; } /* ============================================================ Bonus (redeem + admin) ============================================================ */ .redeem-box { display: flex; gap: 12px; max-width: 520px; margin-bottom: 30px; flex-wrap: wrap; } .redeem-box .code-input { flex: 1; min-width: 220px; text-transform: uppercase; letter-spacing: 1px; } .admin-panel { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid rgba(255,140,66,0.35); padding: 22px; clip-path: var(--cut); } .admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; } .admin-form .code-input { min-width: 0; } .codes-list { display: flex; flex-direction: column; gap: 8px; } .code-row { display: flex; align-items: center; gap: 12px; background: var(--bg-1); border: 1px solid var(--line); padding: 10px 14px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .code-row .cr-code { font-family: var(--font-title); font-weight: 700; letter-spacing: 2px; font-size: 18px; color: var(--orange); } .code-row .cr-reward { color: var(--muted); flex: 1; } .code-row .cr-uses { color: var(--muted); font-size: 13px; } .code-row .cr-del { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; padding: 4px 10px; clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); } .code-row .cr-del:hover { color: var(--red); border-color: var(--red); } /* ============================================================ Vitrine ============================================================ */ .vitrine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; margin-bottom: 30px; perspective: 1200px; } .vitrine-slot { position: relative; aspect-ratio: 5 / 7; display: grid; place-items: center; border: 1px dashed var(--line-bright); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); color: var(--muted-2); font-family: var(--font-title); font-size: 34px; } .vitrine-slot.filled { border-style: solid; } .vitrine-slot { background: radial-gradient(ellipse at 50% 35%, #ff465510, transparent 60%), linear-gradient(150deg, #131f29, #0b1117); transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s, border-color .35s; } .vitrine-slot.filled:hover { transform: translateY(-7px) rotateX(2deg); box-shadow: 0 14px 32px #0008, 0 0 25px var(--gc-glow); } .vitrine-slot:not(.filled)::after { content:"EMPLACEMENT LIBRE"; position:absolute; bottom:14px; font:700 9px var(--font-title); letter-spacing:1px; color:#8794a055; } .vitrine-remove-btn { position:absolute; z-index:5; top:9px; right:9px; min-height:34px; padding:0 11px; border:1px solid #ff6978a8; color:#fff; background:linear-gradient(135deg,#a92b3cdd,#5d1725eF); box-shadow:0 4px 16px #0008,0 0 14px #ff46552c; font:700 10px var(--font-title); letter-spacing:.8px; text-transform:uppercase; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; } .vitrine-remove-btn:hover { transform:translateY(-2px); border-color:#ff9aa4; background:linear-gradient(135deg,#e33d52,#7c2030); box-shadow:0 7px 20px #0009,0 0 20px #ff46555a; } .vitrine-remove-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; } .profile-vitrine-remove-btn { top:8px; right:8px; min-height:30px; padding:0 9px; } .profile-vitrine { position:relative; isolation:isolate; overflow:hidden; margin-top:24px; padding:clamp(16px,2.8vw,26px); border:1px solid #435766; background:radial-gradient(ellipse at 12% -5%,#ff46551c,transparent 45%),radial-gradient(ellipse at 90% 100%,#e8a84f12,transparent 38%),linear-gradient(145deg,#121f29,#0a1118 75%); box-shadow:inset 0 1px #ffffff0b,0 18px 38px #0003; } .profile-vitrine::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,#ff4655,#ffc56b,#ff4655,transparent); opacity:.8; } .profile-vitrine-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .profile-vitrine-title { display:flex; flex-direction:column; gap:4px; } .profile-vitrine-title .eyebrow { color:#ff9b76; } .profile-vitrine-title h3 { margin:0; color:#f4f0e9; font:700 clamp(20px,3vw,27px) var(--font-title); letter-spacing:.5px; } .profile-vitrine-count { margin-left:auto; padding:6px 10px; border:1px solid #526573; color:#c4d0d7; background:#ffffff07; font:700 11px var(--font-title); letter-spacing:.7px; } .profile-vitrine-edit { order:3; } .profile-vitrine-copy { margin:10px 0 18px; color:var(--muted); font-size:13px; } .profile-vitrine-podium { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr) minmax(0,.92fr); align-items:end; gap:clamp(8px,2vw,20px); width:min(100%,850px); margin:10px auto 28px; padding:14px 10px 0; perspective:1200px; } .profile-vitrine-place { --stage-height:48px; display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:flex-end; animation:profilePodiumRise .65s cubic-bezier(.2,.8,.2,1) both; } .profile-vitrine-place-1 { --stage-height:78px; animation-delay:90ms; } .profile-vitrine-place-2 { --stage-height:48px; animation-delay:0ms; } .profile-vitrine-place-3 { --stage-height:34px; animation-delay:180ms; } .profile-vitrine-place-label { display:flex; align-items:center; justify-content:center; gap:6px; min-height:30px; margin-bottom:9px; color:#c8d5dd; font:700 clamp(9px,1.2vw,12px) var(--font-title); letter-spacing:.8px; text-align:center; text-transform:uppercase; text-shadow:0 2px 12px #000; } .profile-vitrine-place-1 .profile-vitrine-place-label { color:#ffe2a0; } .profile-vitrine-place-2 .profile-vitrine-place-label { color:#dce8ef; } .profile-vitrine-place-3 .profile-vitrine-place-label { color:#e8b28c; } .profile-vitrine-medal { color:inherit; font-size:16px; filter:drop-shadow(0 0 7px currentColor); } .profile-vitrine-place .profile-vitrine-card { width:100%; max-width:168px; } .profile-vitrine-place-1 .profile-vitrine-card { max-width:202px; } .profile-vitrine-stage { position:relative; display:grid; place-items:center; width:82%; height:var(--stage-height); margin-top:-1px; overflow:hidden; border:1px solid #8fa2ae66; border-top-color:#d5e0e799; background:linear-gradient(145deg,#a9bcc51e,#18252f 45%,#0c141b); box-shadow:inset 0 1px #ffffff30,0 12px 24px #0005; clip-path:polygon(10% 0,90% 0,100% 100%,0 100%); } .profile-vitrine-stage::before { position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,#ffffff16 50%,transparent 76%); content:""; transform:translateX(-100%); animation:profilePodiumSheen 5s ease-in-out infinite; } .profile-vitrine-stage span { color:#dce6ec66; font:800 clamp(17px,3vw,28px) var(--font-title); letter-spacing:2px; text-shadow:0 0 14px #d8e5ed26; } .profile-vitrine-place-1 .profile-vitrine-stage { border-color:#ffd36b99; border-top-color:#fff0bd; background:linear-gradient(145deg,#ffd36b35,#51401f 44%,#11171c); box-shadow:inset 0 1px #fff3c866,0 0 26px #ffce5b20,0 12px 24px #0006; } .profile-vitrine-place-1 .profile-vitrine-stage span { color:#ffdc8c99; } .profile-vitrine-place-3 .profile-vitrine-stage { border-color:#ce8b6399; background:linear-gradient(145deg,#c17d5430,#38251f 44%,#11171c); } .profile-vitrine-rest-heading { display:flex; align-items:center; gap:12px; margin:8px 0 14px; color:#b9c6ce; font:700 11px var(--font-title); letter-spacing:1.4px; text-transform:uppercase; } .profile-vitrine-rest-heading::after { height:1px; flex:1; background:linear-gradient(90deg,#62737f80,transparent); content:""; } .profile-vitrine-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(8px,1.5vw,15px); perspective:1200px; } .profile-vitrine-card { min-width:0; aspect-ratio:5/7; cursor:default; } .profile-vitrine-card[role="button"] { cursor:pointer; } .profile-vitrine-card:hover { transform:translateY(-7px) rotateX(2deg) scale(1.025); box-shadow:0 14px 30px #0008,0 0 22px var(--gc-glow); z-index:2; } .profile-vitrine-card:focus-visible { outline:2px solid var(--gc-border); outline-offset:4px; } .profile-vitrine-empty { grid-column:1/-1; min-height:130px; display:flex; align-items:center; justify-content:center; gap:14px; padding:20px; border:1px dashed #586b78; background:linear-gradient(110deg,#ffffff05,transparent); color:#aab7c0; text-align:center; font-size:13px; } .profile-vitrine-empty-icon { color:#ffb66e; font-size:26px; text-shadow:0 0 16px #ffb66e66; animation:vitrineSparkle 3s ease-in-out infinite; } @keyframes vitrineSparkle { 50% { opacity:.55; transform:rotate(18deg) scale(.86); } } @keyframes profilePodiumRise { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes profilePodiumSheen { 0%,65%,100% { transform:translateX(-110%); } 82% { transform:translateX(110%); } } .vitrine-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; } .vp-item { position: relative; aspect-ratio: 5 / 7; cursor: pointer; overflow: hidden; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: linear-gradient(165deg, var(--gc-tint), var(--bg-1)); border: 1px solid var(--gc-border); display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; } .vp-item:hover { transform: translateY(-3px); box-shadow: 0 0 18px var(--gc-glow); } .vp-item.pinned { border-color: var(--orange); box-shadow: 0 0 18px rgba(255,140,66,0.5); } .vp-item .gc-monogram { font-size: 44px; } .vp-item .gc-bottom { padding: 0 8px 8px; } .vp-item .gc-name { font-size: 13px; } /* ============================================================ Profil ============================================================ */ .profile-card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 22px; clip-path: var(--cut); margin-bottom: 22px; } .profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; } .profile-avatar { width: 72px; height: 72px; flex: none; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: 34px; color: #fff; background: linear-gradient(135deg, var(--red), var(--orange)); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .profile-name { font-family: var(--font-title); font-size: 26px; font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .profile-pseudo-name { display:inline-flex; align-items:center; flex-wrap:wrap; } .profile-name .uc-badge { font-size: 12px; color: var(--orange); letter-spacing: 1px; } .profile-email { color: var(--muted); font-size: 15px; letter-spacing: 0.5px; } .profile-return { margin-left:auto; } .profile-best-pack { margin-top:24px; padding:20px; border:1px solid #384b59; background:radial-gradient(ellipse at 50% 0,#ff465510,transparent 65%),linear-gradient(145deg,#111e28,#0b131a); } .profile-best-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:14px; } .profile-best-score { margin-left:auto; color:var(--cream); font:700 15px var(--font-title); letter-spacing:1px; } .profile-godpack-badge { padding:5px 9px; border:1px solid #ffb34799; color:#ffd888; background:#ffb34716; font:800 10px var(--font-title); letter-spacing:1px; text-shadow:0 0 12px #ffb34766; } .profile-best-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } .profile-best-item { display:flex; align-items:center; gap:9px; min-width:0; padding:9px; border:1px solid color-mix(in srgb,var(--best-color) 55%,transparent); background:linear-gradient(140deg,color-mix(in srgb,var(--best-glow) 16%,#111a22),#0b131a); box-shadow:inset 0 0 18px color-mix(in srgb,var(--best-glow) 14%,transparent); } .profile-best-item img { width:42px; height:42px; flex:none; object-fit:contain; filter:drop-shadow(0 0 9px var(--best-glow)); } .profile-best-icon { width:42px; flex:none; color:var(--best-color); text-align:center; font-size:25px; } .profile-best-details { display:flex; flex-direction:column; min-width:0; gap:4px; } .profile-best-details strong { overflow:hidden; color:#f5f1e9; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .profile-best-details small { color:var(--best-color); font:700 9px var(--font-title); letter-spacing:.7px; } .profile-best-empty,.profile-best-date { color:var(--muted); font-size:13px; } .profile-best-empty { margin:0; } .profile-best-date { display:block; margin-top:12px; text-align:right; font-size:11px; } .profile-card .profile-vitrine + .profile-best-pack { margin-top:24px; } .player-profile-link { cursor:pointer; } .player-profile-link:hover { color:#ff8a94; text-decoration:underline; text-underline-offset:3px; } .player-profile-link:focus-visible { outline:2px solid var(--red); outline-offset:3px; } /* ============================================================ Toasts ============================================================ */ #toasts { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--panel-2); border: 1px solid var(--line-bright); border-left: 3px solid var(--red); padding: 12px 16px; font-weight: 600; letter-spacing: 0.5px; min-width: 220px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: slideIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .profile-vitrine-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-vitrine-card .gc-name { font-size:clamp(10px,2.4vw,14px); } } @media (max-width: 480px) { .profile-vitrine { padding:14px; } .profile-vitrine-podium { gap:7px; margin:8px auto 22px; padding-inline:0; } .profile-vitrine-place-label { gap:3px; min-height:26px; margin-bottom:6px; letter-spacing:.25px; } .profile-vitrine-medal { font-size:13px; } .profile-vitrine-place .profile-vitrine-card { max-width:none; } .profile-vitrine-place-1 .profile-vitrine-card { max-width:none; } .profile-vitrine-place-1 { --stage-height:56px; } .profile-vitrine-place-2 { --stage-height:36px; } .profile-vitrine-place-3 { --stage-height:27px; } .profile-vitrine-stage { width:90%; } .profile-vitrine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .profile-vitrine-count { margin-left:0; } .profile-vitrine-edit { order:0; } } @media (prefers-reduced-motion: reduce) { .profile-vitrine-empty-icon { animation:none; } .profile-vitrine-place,.profile-vitrine-stage::before { animation:none; } .profile-vitrine-card, .vitrine-slot { transition:none; } .profile-vitrine-card:hover, .vitrine-slot.filled:hover { transform:none; } .vitrine-remove-btn:hover { transform:none; } } /* ============================================================ Confettis ============================================================ */ #confetti-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; } .confetti { position: absolute; top: -20px; width: 10px; height: 16px; opacity: 0.95; animation: confettiFall linear forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(110vh) rotate(720deg); } } #bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .game-card .gc-monogram, .game-card .gc-top, .game-card .gc-bottom, .game-card .gc-lock { z-index: 1; } /* Aura d'énergie tournante (GOAT / Légendaire) */ .gc-aura { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0%, rgba(255,70,85,0.32) 12%, transparent 25%, rgba(255,140,66,0.28) 45%, transparent 55%, rgba(255,210,122,0.26) 75%, transparent 90%); animation: spinAura 4.5s linear infinite; z-index: 0; pointer-events: none; } @keyframes spinAura { to { transform: rotate(360deg); } } /* Apparition en cascade des cartes */ .game-card.stagger-in { animation: cardPop 0.45s ease backwards; } @keyframes cardPop { from { opacity: 0; transform: translateY(18px) scale(0.88); } to { opacity: 1; transform: none; } } /* Rayon de lumière au reveal */ .rv-front .rv-beam { position: absolute; left: 50%; top: -20%; width: 40%; height: 140%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55), transparent); opacity: 0; pointer-events: none; } .rv-front.flash .rv-beam { animation: beam 0.9s ease; } @keyframes beam { 0% { opacity: 0; transform: translateX(-50%) scaleY(0.15); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.5); } } /* Secousse sur GOAT */ .rv-front.shake { animation: cardShake 0.55s ease; } @keyframes cardShake { 0%, 100% { transform: rotateY(180deg); } 20% { transform: rotateY(180deg) translateX(-7px) rotate(-3deg); } 40% { transform: rotateY(180deg) translateX(7px) rotate(3deg); } 60% { transform: rotateY(180deg) translateX(-5px); } 80% { transform: rotateY(180deg) translateX(5px); } } /* Barre de rareté en bas de carte */ .gc-rarity-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 1; } .vitrine-slot .gc-rarity-bar, .vp-item .gc-rarity-bar { height: 2px; } /* Badge "Épinglée" sur la vitrine */ .vp-pin-badge { position: absolute; top: 6px; left: 6px; font-family: var(--font-title); font-weight: 700; font-size: 10px; letter-spacing: 1px; color: var(--orange); border: 1px solid var(--orange); padding: 2px 6px; background: rgba(0,0,0,0.5); z-index: 2; } /* Particules d'éclat (burst) au reveal */ .burst-particle { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 160; animation: burst 0.8s ease-out forwards; } @keyframes burst { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); } } /* Flash d'écran (GOAT / légendaire / ultra rare) */ .screen-flash { position: fixed; inset: 0; z-index: 155; pointer-events: none; animation: screenFlashOut 0.6s ease-out forwards; } @keyframes screenFlashOut { 0% { opacity: 0.85; } 100% { opacity: 0; } } /* Onde de choc radiale (ultra rare / légendaire / GOAT) */ .shockwave { position: fixed; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 3px solid var(--red); border-radius: 50%; pointer-events: none; z-index: 156; animation: shockwave 0.9s ease-out forwards; } @keyframes shockwave { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(13); opacity: 0; } } /* Pill VP (header) */ .vp-pill { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; clip-path: var(--cut); font-weight: 700; font-size: 17px; letter-spacing: 1px; } .vp-pill .vp-ico { color: var(--orange); } .vp-pill .vp-num { color: var(--cream); font-family: var(--font-title); font-size: 20px; } .vp-pill .vp-lbl { color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } /* Boutique : bouton acheter */ .pack-buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .price { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--orange); letter-spacing: 1px; } .price small { font-size: 12px; color: var(--muted); letter-spacing: 2px; } /* Classement */ .lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; } .lb-tab { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 8px 16px; cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: color 0.15s, border-color 0.15s, background 0.15s; } .lb-tab:hover { color: var(--cream); border-color: var(--line-bright); } .lb-tab.active { color: #fff; background: var(--red); border-color: var(--red); } .lb-podium { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(8px,2.5vw,24px);max-width:900px;margin:28px auto 30px;padding:18px 12px 0; } .lb-podium-place { display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;text-align:center; } .lb-podium-place.rank-1 { grid-column:2;grid-row:1; } .lb-podium-place.rank-2 { grid-column:1;grid-row:1; } .lb-podium-place.rank-3 { grid-column:3;grid-row:1; } .lb-podium-medal { height:35px;font-size:25px;filter:drop-shadow(0 3px 7px #0008); } .lb-podium-avatar { display:grid;place-items:center;width:clamp(54px,8vw,76px);aspect-ratio:1;margin:0 0 10px;border:2px solid var(--podium-color);border-radius:50%;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--podium-color) 38%,#263744),#101820 72%);box-shadow:0 0 22px color-mix(in srgb,var(--podium-color) 38%,transparent);color:#fff;font-family:var(--font-title);font-size:clamp(22px,3.5vw,32px);font-weight:900; } .lb-podium-name {max-width:100%;overflow-wrap:anywhere;color:#f4f2ec;font-size:clamp(12px,1.5vw,16px);letter-spacing:.7px;} .lb-podium-score {margin:4px 0 12px;color:var(--podium-color);font-family:var(--font-title);font-size:clamp(12px,1.6vw,16px);font-weight:800;} .lb-podium-step {display:grid;place-items:center;width:100%;height:var(--podium-height);border:1px solid color-mix(in srgb,var(--podium-color) 58%,#263441);border-bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--podium-color) 20%,#14212c),#0d151d 90%);box-shadow:inset 0 1px color-mix(in srgb,var(--podium-color) 42%,transparent),0 12px 26px #0004;color:color-mix(in srgb,var(--podium-color) 75%,#fff);font-family:var(--font-title);font-size:clamp(26px,4vw,42px);font-weight:900; } .lb-podium-place.rank-1 { --podium-color:#f1c65b;--podium-height:94px; } .lb-podium-place.rank-2 { --podium-color:#bdcbd4;--podium-height:66px; } .lb-podium-place.rank-3 { --podium-color:#d98d62;--podium-height:48px; } .lb-podium-place.me .lb-podium-avatar {box-shadow:0 0 0 4px #ff465522,0 0 28px color-mix(in srgb,var(--podium-color) 55%,transparent);} .lb-podium-place.me .lb-podium-name::after {content:" · TOI";color:var(--red);font-size:10px;} .lb-row { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); padding: 12px 18px; clip-path: var(--cut); margin-bottom: 8px; } .lb-row.me { border-color: var(--red); box-shadow: 0 0 14px rgba(255,70,85,0.3); } .lb-medal { width: 36px; text-align: center; font-size: 20px; } .lb-rank { font-family: var(--font-title); font-weight: 700; color: var(--muted); } .lb-pseudo { flex: 1; font-weight: 700; letter-spacing: 1px; } .lb-points { font-family: var(--font-title); font-weight: 700; color: var(--orange); font-size: 18px; } @media(max-width:480px) { .lb-podium {gap:7px;padding-left:0;padding-right:0;margin-top:18px}.lb-podium-medal{font-size:21px}.lb-podium-score{min-height:30px}.lb-podium-step{height:var(--podium-height)}.lb-row{gap:9px;padding:10px}.lb-row .lb-points{font-size:14px} } /* Admin sous-onglets */ .admin-tabs { display: flex; gap: 6px; margin: 16px 0; } .admin-tab { font-family: var(--font-body); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 8px 16px; cursor: pointer; clip-path: var(--cut); transition: color 0.15s, border-color 0.15s, background 0.15s; } .admin-tab.active { color: #fff; background: var(--orange); border-color: var(--orange); } /* Liste des items (admin) */ .admin-item-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-1); border: 1px solid var(--line); padding: 8px 14px; clip-path: var(--cut); margin-bottom: 6px; } .ai-name { flex: 1; min-width: 140px; font-weight: 600; letter-spacing: 0.5px; } .ai-ico { margin-right: 4px; } .ai-cat { color: var(--muted); font-size: 13px; min-width: 90px; } .ai-rarity { max-width: 160px; padding: 6px 10px; font-size: 14px; } .ai-image { flex: 1; min-width: 200px; background: var(--bg-1); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-body); font-size: 13px; padding: 6px 10px; outline: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .ai-image:focus { border-color: var(--red); } .ai-img-btn { background: var(--panel); border: 1px solid var(--line-bright); color: var(--cream); cursor: pointer; padding: 6px 12px; font-size: 14px; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); transition: border-color 0.15s, color 0.15s; } .ai-img-btn:hover { border-color: var(--red); color: var(--red); } /* VP par rareté (admin) */ .admin-vp-row { display: flex; align-items: center; gap: 14px; background: var(--bg-1); border: 1px solid var(--line); padding: 10px 14px; clip-path: var(--cut); margin-bottom: 6px; } .avp-label { flex: 1; font-family: var(--font-title); font-weight: 700; font-size: 16px; letter-spacing: 2px; } .avp-select { max-width: 160px; padding: 6px 10px; font-size: 14px; } /* Code row : temps restant */ .cr-exp { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; } footer { margin-top: 60px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 13px; text-align: center; letter-spacing: 0.5px; } @media (max-width: 620px) { .header-inner { flex-wrap: wrap; gap: 12px; } nav.tabs { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; } .tab { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; } .header-right { margin-left: 0; width: 100%; justify-content: space-between; } .logo .lg-main { font-size: 24px; } .reveal-slot, .pile-slot, .revealed-slot { width: 110px; height: 156px; } .reveal-pile { width: 110px; height: 156px; } .reveal-stage { gap: 8px; } .open-pack-btn { font-size: 20px; padding: 18px 36px; } } /* Collection 01 — tactical gallery */ :root { --bg-0:#090f16; --bg-1:#111c27; --panel:#121e29; --muted:#a3b1bf; } body::after { opacity:.45; } header { background:rgba(9,15,22,.94); } .header-inner { min-height:86px; } .tabs { gap:4px; } .tab { letter-spacing:1.2px; } .tab.active { background:rgba(255,70,85,.09); box-shadow:inset 0 -2px var(--red); } .collection-intro,.drop-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; } .collection-intro { margin:28px 0 18px; } .eyebrow,.season-tag,.drop-heading { font-size:11px; font-weight:700; letter-spacing:2.5px; } .eyebrow { color:var(--muted); } .season-tag { border:1px solid var(--line); padding:8px 12px; color:var(--cream); } .collection-banner { min-height:415px; position:relative; overflow:hidden; border:1px solid #34414b; background:radial-gradient(ellipse at 80% 80%,#424d5a 0,transparent 52%),linear-gradient(110deg,#182631,#0c141d); display:grid; grid-template-columns:1fr 1fr; } .collection-banner::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(130deg,transparent 0 80px,#ffffff05 81px 82px); pointer-events:none; } .banner-copy { padding:48px 42px; z-index:2; } .banner-copy .eyebrow { color:#ff8a94; font-size:10px; } .banner-copy h1 { font-family:var(--font-title); font-size:clamp(42px,5.7vw,72px); line-height:1.07; letter-spacing:-1px; margin:22px 0 18px; } .banner-copy h1 em { font-style:normal; color:var(--red); } .banner-copy p { color:#b1becb; font-size:17px; line-height:1.5; } .banner-link { display:inline-flex; gap:35px; color:var(--cream); text-decoration:none; border-bottom:1px solid #ff465566; padding:18px 0 8px; font-size:12px; font-weight:700; letter-spacing:1.5px; } .banner-link span { color:var(--red); } .banner-art { position:relative; min-width:0; } .art-orbit { position:absolute; width:350px; height:350px; border:1px solid #ff465555; border-radius:50%; top:40px; left:12%; box-shadow:0 0 0 35px #ffffff03,0 0 0 70px #ffffff02; } .hero-agent { position:absolute; height:145%; width:150%; object-fit:contain; bottom:-35%; left:-18%; filter:drop-shadow(0 0 24px #0008); } .hero-reyna { left:-45%; bottom:-42%; opacity:.6; transform:scale(.9); } .hero-jett { left:0; } .art-caption { position:absolute; bottom:22px; right:25px; color:#d7e3ec; font-size:9px; letter-spacing:2px; line-height:1.8; text-align:right; } .drop-heading { margin:36px 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line); color:#8a9caa; font-size:10px; } .drop-heading .eyebrow { color:var(--red); } .pack-hero { background:linear-gradient(110deg,#18253199,#0c151e); border:1px solid var(--line); padding:24px 30px; margin-bottom:0; } .pack-hero .section-title { font-size:27px; letter-spacing:.3px; } .pack-hero .section-sub { margin-bottom:0; } .open-pack-zone { position:relative; gap:65px; align-items:center; min-height:305px; margin:0 0 36px; border:1px solid var(--line); border-top:0; background:radial-gradient(ellipse at 25% 60%,#ff465512,transparent 50%),#0d161f; overflow:hidden; } .display-pack,.sealed-pack { position:relative; width:150px; height:211px; color:var(--cream); background:linear-gradient(125deg,#ff4655 0 12%,#27313a 12% 13%,#0c131b 13% 68%,#ff4655 68% 70%,#24313d 70%); border:1px solid #6b7782; box-shadow:12px 17px 35px #0008; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-10deg); } .display-pack::after,.sealed-pack::after { content:""; position:absolute; inset:6px; border:1px solid #ffffff22; pointer-events:none; } .pack-serial { font-size:8px; letter-spacing:2px; position:absolute; top:17px; } .pack-symbol { font-family:Arial,sans-serif; font-size:55px; font-weight:900; color:var(--red); transform:scaleX(1.3); line-height:1; } .display-pack strong,.sealed-pack strong { font-family:var(--font-title); font-size:22px; text-align:center; line-height:1.15; letter-spacing:2px; margin-top:10px; } .display-pack small,.sealed-pack small { position:absolute; bottom:18px; font-size:7px; letter-spacing:1.5px; } .drop-cta p { font-size:23px; margin:10px 0 24px; } .open-pack-btn { font-size:20px; padding:20px 32px; box-shadow:0 8px 35px #ff465520; } .quick-pack-toggle { display:flex; align-items:center; gap:10px; width:min(100%,330px); margin:14px auto 0; padding:10px 12px; border:1px solid #40515e; color:#c8d1d8; background:linear-gradient(120deg,#15222c,#0b1219); text-align:left; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s,transform .2s; } .quick-pack-toggle:hover { transform:translateY(-2px); border-color:#778793; } .quick-pack-toggle.active { border-color:#ff6474; color:#fff; background:linear-gradient(120deg,#3a1b25,#111a22); box-shadow:0 0 22px #ff465523,inset 0 0 18px #ff465510; } .quick-pack-toggle > span:nth-child(2) { display:grid; gap:3px; flex:1; } .quick-pack-toggle b { font:700 11px var(--font-title); letter-spacing:1px; text-transform:uppercase; } .quick-pack-toggle small { color:var(--muted); font-size:10px; } .quick-pack-indicator { display:grid; place-items:center; width:27px; height:27px; border:1px solid #ff465566; color:#ff6573; font-size:18px; } .quick-pack-state { min-width:31px; color:#82909a; font:700 9px var(--font-title); letter-spacing:1px; text-align:right; } .quick-pack-toggle.active .quick-pack-state { color:#ff8e98; text-shadow:0 0 10px #ff465566; } #pack-overlay .reveal-actions { gap:10px; } #pack-overlay .reveal-actions .quick-pack-toggle { width:auto; min-width:190px; max-width:100%; margin:0; padding:8px 10px; } #pack-overlay .reveal-actions .quick-pack-toggle small { font-size:9px; } #pack-overlay .reveal-actions #btn-next-pack { border-color:#ff465566; color:#ffb6bc; } #pack-overlay .reveal-actions #btn-next-pack:not(:disabled) { border-color:#ff6474; color:#fff; background:linear-gradient(120deg,#4a1d29,#1a2029); box-shadow:0 0 18px #ff465522; } #pack-overlay .reveal-actions #btn-next-pack:disabled { opacity:.45; cursor:not-allowed; } #pack-overlay .reveal-pile.instant-reveal .pile-slot { animation:none!important; } #pack-overlay .reveal-pile.instant-reveal .rv-card-inner, #pack-overlay .reveal-pile.instant-reveal .rv-card.flipped .rv-card-inner { animation:none!important; transition:none!important; transform:rotateY(180deg)!important; } #pack-overlay .reveal-pile.instant-reveal .rv-front::after { animation:none!important; } #pack-overlay .reveal-pile.quick-reveal-grid .pile-slot { animation:none!important; } #pack-overlay .reveal-pile.quick-reveal-grid .pile-slot.quick-instant-slot .rv-card-inner { animation:none!important; transition:none!important; transform:rotateY(180deg)!important; } #pack-overlay .reveal-pile.quick-reveal-grid .pile-slot.quick-surprise-slot { z-index:12!important; } #pack-overlay .rv-card.quick-surprise { animation:quickRareSuspense 1.35s ease-in-out infinite; } #pack-overlay .rv-card.quick-surprise .rv-back { box-shadow:inset 0 0 45px color-mix(in srgb,var(--rv-rarity-glow) 46%,transparent),0 0 32px color-mix(in srgb,var(--rv-rarity-glow) 85%,transparent); } @keyframes quickRareSuspense { 0%,100% { transform:translateY(0) scale(1); filter:brightness(1); } 50% { transform:translateY(-7px) scale(1.035); filter:brightness(1.22); } } .packs-grid { gap:20px; } .pack-card { background:linear-gradient(150deg,#1c2936,#0e1721); } .game-card { transition:transform .25s,box-shadow .25s; } .game-card .art-agent .gc-img,.rv-front .art-agent .gc-img { object-fit:cover; object-position:50% 13%; height:115%; } .game-card .art-arme .gc-img,.game-card .art-skin .gc-img,.rv-front .art-arme .gc-img,.rv-front .art-skin .gc-img,.vp-item .art-arme .gc-img,.vp-item .art-skin .gc-img { object-fit:contain; width:92%; height:67%; left:4%; top:9%; transform:rotate(-25deg); filter:drop-shadow(0 10px 8px #0008); } .game-card .art-equipe .gc-img,.rv-front .art-equipe .gc-img { object-fit:contain; padding:25px; height:75%; filter:drop-shadow(0 3px 7px #0008); } .gc-art:has(.gc-img.image-loaded) .gc-monogram { visibility:hidden; } .gc-art .gc-img:not(.image-loaded) { visibility:hidden; } .gc-art.image-fallback { background:radial-gradient(ellipse at 50% 42%,#ff46552b,transparent 58%),linear-gradient(145deg,#1a2936,#0a1118); } .gc-art.image-fallback .gc-monogram { visibility:visible; color:var(--cream); text-shadow:0 0 28px var(--gc-glow),0 2px 8px #000; } .gc-art::after { background:linear-gradient(180deg,#090f1610 10%,transparent 30%,#090f16bb 70%,#090f16 100%)!important; } .overlay { background:radial-gradient(ellipse at 50% 40%,#203142ed,#03070bf9); backdrop-filter:blur(16px); overflow-y:auto; } .pack-reveal { padding:30px 12px; } .reveal-eyebrow { color:var(--red); margin-bottom:14px; } .reveal-head { font-size:32px; } .sealed-pack { cursor:pointer; width:205px; height:285px; margin:28px auto; transform:rotate(-5deg); animation:sealedFloat 3s ease-in-out infinite; font-family:var(--font-body); } .sealed-pack strong { font-size:32px; } .sealed-pack .pack-symbol { font-size:75px; } .seal-top { position:absolute; top:-20px; left:-1px; width:calc(100% + 2px); padding:9px 0; background:var(--red); color:#fff; font-size:9px; letter-spacing:2px; border-bottom:2px dashed #ffffff88; transition:transform .5s,opacity .5s; } .sealed-pack:hover { filter:brightness(1.18); } .sealed-pack.unsealing { animation:packTear .85s ease-in forwards; } .unsealing .seal-top { transform:translate(90px,-70px) rotate(35deg); opacity:0; } [hidden] { display:none!important; } .pack-emerge { animation:packEmerge .6s cubic-bezier(.2,.8,.2,1); } .reveal-pile { margin-bottom:32px; } .revealed-slot { animation:packEmerge .5s ease-out; } .reveal-summary { font-size:18px; } :focus-visible { outline:2px solid #8de5dc; outline-offset:6px; } @keyframes sealedFloat { 0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(-2deg)} } @keyframes packTear { 0%{transform:rotate(-5deg)}25%{transform:rotate(5deg) scale(1.05)}55%{transform:rotate(-3deg) scale(1.1);filter:brightness(1.8)}100%{transform:translateY(40px) scale(1.25);opacity:0;filter:brightness(3)} } @keyframes packEmerge { from{opacity:0;transform:translateY(35px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)} } @media(max-width:760px) { .header-inner{flex-wrap:wrap;padding:15px 0}.tabs{order:3;width:100%;overflow-x:auto}.collection-banner{min-height:380px;grid-template-columns:1.2fr .8fr}.banner-copy{padding:28px 20px}.banner-copy h1{font-size:44px}.banner-copy p{font-size:14px}.banner-art{opacity:.8}.hero-agent{width:260%;left:-85%}.hero-reyna{display:none}.art-caption{display:none}.art-orbit{left:-40%;width:250px;height:250px}.season-tag{display:none}.collection-intro .eyebrow{font-size:9px}.drop-heading{font-size:8px;letter-spacing:1px}.pack-hero{padding:22px;gap:20px}.open-pack-zone{gap:24px;padding:28px 15px;min-height:260px}.display-pack{width:115px;height:165px;flex-shrink:0}.display-pack strong{font-size:17px}.drop-cta p{font-size:18px}.drop-cta .eyebrow{font-size:9px}.open-pack-btn{font-size:15px;padding:17px}.open-pack-btn .opb-count{font-size:14px;margin-left:5px}.display-pack .pack-symbol{font-size:40px}.reveal-head{font-size:25px}.reveal-eyebrow{font-size:9px}.reveal-row{gap:9px} } @media(max-width:420px) { .collection-banner{grid-template-columns:1fr}.banner-copy{position:relative}.banner-art{position:absolute;inset:0 0 0 45%;opacity:.3}.banner-copy h1{font-size:46px}.open-pack-zone{flex-direction:column;gap:28px}.drop-cta{text-align:center} } @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } } .rv-front { background:linear-gradient(155deg,var(--gc-tint),#0b131d); border:1px solid var(--gc-border); box-shadow:inset 0 0 25px var(--gc-glow); } .art-equipe::before { content:""; position:absolute; width:65%; aspect-ratio:1; left:17.5%; top:9%; border-radius:50%; background:radial-gradient(circle,#cdd8dfcc,#748b9f33 70%); } /* Pioche : une carte en vedette, les suivantes derrière. */ #pack-overlay { cursor:pointer; } #pack-overlay .reveal-pile { width:230px; height:326px; margin:15px auto 42px; } #pack-overlay .pile-slot { width:230px; height:326px; } #pack-overlay .reveal-pile.reveal-all-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:14px;width:min(100%,980px);height:auto;margin:15px auto 42px; } #pack-overlay .reveal-pile.reveal-all-grid .pile-slot { position:relative;top:auto;left:auto;width:100%;height:auto;aspect-ratio:230/326;transform:none!important;z-index:auto!important;animation:allRevealCardIn .42s cubic-bezier(.16,.88,.25,1.16) both;animation-delay:var(--all-reveal-delay,0ms); } #pack-overlay .reveal-pile.reveal-all-grid .rv-card { width:100%;height:100%; } #pack-overlay .reveal-stage { min-height:380px; justify-content:center; } #pack-overlay .pile-slot.draw-away { animation:drawAway .36s ease-in forwards; pointer-events:none; } #pack-overlay .rv-card:not(.flipped):hover .rv-card-inner { transform:none; } #pack-overlay .gc-name { font-size:24px; } #pack-overlay .gc-bottom { padding:0 18px 20px; } #pack-overlay .gc-rarity { font-size:12px; } @keyframes drawAway { to { opacity:0; transform:translate(170px,-60px) rotate(20deg) scale(.9); } } @keyframes allRevealCardIn { from { opacity:0;transform:translateY(22px) scale(.94); } to { opacity:1;transform:translateY(0) scale(1); } } @media(max-width:480px) { #pack-overlay .reveal-pile,#pack-overlay .pile-slot { width:200px;height:284px; } #pack-overlay .reveal-stage { min-height:330px; } } @media(prefers-reduced-motion:reduce) { #pack-overlay .pile-slot.draw-away { opacity:0; } } #pack-overlay .rv-back { position:absolute; inset:0; } /* Pack opening and card reveal choreography. */ #pack-overlay .sealed-pack { transform-origin:50% 65%; } #pack-overlay .sealed-pack::before { content:""; position:absolute; z-index:5; left:48%; top:-8%; width:2px; height:0; background:linear-gradient(180deg,#fff,#ff4655 45%,transparent); box-shadow:0 0 18px 5px #ff465577; transform:rotate(13deg); opacity:0; pointer-events:none; } #pack-overlay .sealed-pack.unsealing { animation:packTear 1.18s cubic-bezier(.16,.78,.2,1) forwards; } #pack-overlay .sealed-pack.unsealing::before { animation:tearSlash .54s .16s ease-out forwards; } #pack-overlay .sealed-pack.unsealing::after { animation:tearFrame .72s .22s ease-out forwards; } #pack-overlay .sealed-pack.unsealing .seal-top { animation:sealRip .55s .1s cubic-bezier(.2,.8,.2,1) forwards; transform-origin:8% 100%; } #pack-overlay .sealed-pack.unsealing strong,#pack-overlay .sealed-pack.unsealing .pack-symbol { animation:packShards .62s .48s ease-in forwards; } #pack-overlay .rv-card-inner { transition:transform .76s cubic-bezier(.2,.78,.18,1); } #pack-overlay .rv-card.flipped .rv-card-inner { transform:rotateY(180deg) rotateZ(-2deg) scale(1.035); } #pack-overlay .pile-slot[aria-hidden="false"] { animation:cardDrawIn .58s cubic-bezier(.16,.88,.25,1.16) both; } #pack-overlay .rv-front.flash { animation:revealFlash .7s ease-out both; } #pack-overlay .rv-front.shake { animation:rareReveal .62s cubic-bezier(.3,.8,.2,1) both; } #pack-overlay .draw-away { animation:drawAway .38s cubic-bezier(.55,.05,.85,.35) forwards; } #pack-overlay .reveal-actions { align-items:center; } @keyframes tearSlash { 0%{height:0;opacity:0}20%{opacity:1}100%{height:120%;opacity:0;transform:translate(16px,18px) rotate(13deg)} } @keyframes tearFrame { 0%{inset:6px;opacity:.35}45%{inset:-12px;opacity:1;filter:drop-shadow(0 0 22px #ff4655)}100%{inset:-40px;opacity:0} } @keyframes sealRip { 0%{transform:translate(0,0) rotate(0);opacity:1}35%{transform:translate(12px,-20px) rotate(9deg)}100%{transform:translate(90px,-110px) rotate(30deg);opacity:0} } @keyframes packShards { 0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translate(16px,-45px) rotate(12deg) scale(.7);filter:blur(3px)} } @keyframes packTear { 0%{transform:translateY(0) rotate(-5deg) scale(1)}12%{transform:translate(-7px,0) rotate(-9deg) scale(1.02)}25%{transform:translate(8px,-4px) rotate(5deg) scale(1.07)}37%{transform:translate(-9px,2px) rotate(-4deg) scale(1.09)}48%{transform:translate(6px,-8px) rotate(4deg) scale(1.11);filter:brightness(1.75)}65%{transform:translate(-4px,-15px) rotate(-2deg) scale(1.16);filter:brightness(2.1)}100%{transform:translateY(75px) rotate(9deg) scale(1.22);opacity:0;filter:brightness(2.7) blur(2px)} } @keyframes cardDrawIn { 0%{opacity:0;transform:translate(70px,85px) rotate(12deg) scale(.7)}65%{opacity:1;transform:translate(-5px,-8px) rotate(-2deg) scale(1.045)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)} } @keyframes revealFlash { 0%{filter:brightness(2.5)}35%{filter:brightness(1.4) drop-shadow(0 0 26px var(--flash-color))}100%{filter:none} } @keyframes rareReveal { 0%,100%{transform:translate(0,0) rotateY(180deg) scale(1)}25%{transform:translate(-5px,-8px) rotateY(180deg) rotateZ(-1deg) scale(1.05)}55%{transform:translate(5px,-4px) rotateY(180deg) rotateZ(1deg) scale(1.06)} } @media(prefers-reduced-motion:reduce) { #pack-overlay .sealed-pack.unsealing,#pack-overlay .sealed-pack.unsealing::before,#pack-overlay .sealed-pack.unsealing::after,#pack-overlay .sealed-pack.unsealing .seal-top,#pack-overlay .pile-slot[aria-hidden="false"],#pack-overlay .rv-front.flash,#pack-overlay .rv-front.shake { animation-duration:.01ms!important; } } #pack-overlay .rv-front.shake { animation:rareReveal .62s cubic-bezier(.3,.8,.2,1) both,revealFlash .7s ease-out both; } /* Opening sequence: impact, torn seal, card drawn from the deck, then a weighted flip. */ #pack-overlay .reveal-stage { position:relative; isolation:isolate; } #pack-overlay .reveal-stage::before, #pack-overlay .reveal-stage::after { content:""; position:absolute; z-index:0; left:50%; top:43%; width:24px; height:24px; border:1px solid #ff6575; border-radius:50%; opacity:0; pointer-events:none; transform:translate(-50%,-50%); } #pack-overlay .reveal-stage.pack-opening::before { animation:packShockwave .9s .26s cubic-bezier(.12,.7,.2,1) both; } #pack-overlay .reveal-stage.pack-opening::after { animation:packLightBurst .72s .18s ease-out both; } #pack-overlay .sealed-pack { z-index:1; box-shadow:12px 17px 35px #0008,0 0 0 1px #ff465533,0 0 38px #ff46551c; } #pack-overlay .sealed-pack.unsealing { animation:packTear 1.18s cubic-bezier(.16,.78,.2,1) forwards,packTearGlow 1.18s ease-out forwards; } #pack-overlay .sealed-pack.unsealing .pack-logo { animation:packShards .62s .48s ease-in forwards; } #pack-overlay .sealed-pack.unsealing small { animation:packShards .48s .54s ease-in forwards; } #pack-overlay .reveal-pile { z-index:1; } #pack-overlay .pile-slot.card-drawing { animation:drawCardFromDeck .72s cubic-bezier(.18,.82,.2,1) both; } @media(prefers-reduced-motion:reduce) { #pack-overlay .rv-card-inner { transition-duration:.01ms!important; } #pack-overlay .rv-card.flipped .rv-front::after { animation:none!important; } } #pack-overlay .rv-front { position:absolute; isolation:isolate; } #pack-overlay .rv-front::after { content:""; position:absolute; z-index:5; inset:-30% auto -30% -75%; width:45%; pointer-events:none; opacity:0; background:linear-gradient(100deg,transparent,#ffffffa8 45%,#ffccd488 55%,transparent); transform:skewX(-18deg); } #pack-overlay .rv-card.flipped .rv-front::after { animation:cardFlipSheen 1.5s .72s ease-out both; } @keyframes packShockwave { 0%{width:24px;height:24px;opacity:.9;box-shadow:0 0 25px #ff465599}100%{width:min(72vw,560px);height:min(72vw,560px);opacity:0;box-shadow:0 0 70px #ff465500} } @keyframes packLightBurst { 0%{opacity:0;box-shadow:0 0 0 0 #ff465500}28%{opacity:.85;box-shadow:0 0 110px 58px #ff465566}100%{opacity:0;box-shadow:0 0 170px 90px #ff465500} } @keyframes packTearGlow { 0%,20%{filter:drop-shadow(0 0 0 #ff465500)}48%{filter:drop-shadow(0 0 28px #ff4655)}75%{filter:drop-shadow(0 0 42px #ffb6bc)}100%{filter:drop-shadow(0 0 0 #ff465500)} } @keyframes drawCardFromDeck { 0%{opacity:0;transform:translate(30px,52px) rotate(7deg) scale(.84)}58%{opacity:1;transform:translate(-3px,-16px) rotate(-1.5deg) scale(1.055)}82%{transform:translate(1px,3px) rotate(.35deg) scale(.99)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)} } @keyframes cardFlipSheen { 0%{left:-75%;opacity:0}24%{opacity:.72}100%{left:145%;opacity:0} } @media(prefers-reduced-motion:reduce) { #pack-overlay .reveal-stage.pack-opening::before,#pack-overlay .reveal-stage.pack-opening::after,#pack-overlay .sealed-pack.unsealing,#pack-overlay .sealed-pack.unsealing .pack-logo,#pack-overlay .sealed-pack.unsealing small,#pack-overlay .pile-slot.card-drawing,#pack-overlay .rv-card.flipped .rv-front::after { animation-duration:.01ms!important;animation-delay:0ms!important; } #pack-overlay .rv-card-inner { transition-duration:.01ms!important; } } /* Large catalogue navigation */ .catalog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px 0; } .catalog-search-wrap { display:flex; align-items:center; gap:10px; width:min(440px,100%); color:var(--red); font-size:25px; } .catalog-search { width:100%; margin:0; } .catalog-count { color:var(--muted); font-size:13px; letter-spacing:1px; } .catalog-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin:26px 0 45px; color:var(--muted); } .catalog-pagination button:disabled { opacity:.4; cursor:not-allowed; } .game-card .art-capacite .gc-img,.rv-front .art-capacite .gc-img,.vp-item .art-capacite .gc-img { object-fit:contain; width:72%; height:72%; top:12%; left:14%; filter:drop-shadow(0 0 18px var(--gc-glow)); } #pack-overlay .rv-card-inner { will-change:transform; transition:transform .88s cubic-bezier(.2,.72,.16,1); } #pack-overlay .rv-card.flipped .rv-card-inner { transform:rotateY(180deg) scale(1.035); } @media(max-width:600px) { .catalog-toolbar { align-items:stretch; flex-direction:column; gap:5px; } .catalog-count { align-self:flex-end; } .catalog-pagination { gap:9px; } } /* VCT-inspired finishing pass: ambient depth, precise dividers, and responsive motion. */ :root { --line: #283845; --line-bright: #506271; --muted: #aab8c4; --red: #ff4655; --ease-out: cubic-bezier(.18,.78,.22,1); } body { background-color: #080e14; background-image: radial-gradient(ellipse at 50% -18%, #1d3444aa 0, transparent 48%), radial-gradient(ellipse at 100% 52%, #12202c88 0, transparent 38%), linear-gradient(180deg, #0a1118 0%, #080d13 65%, #0b1117 100%); background-attachment: fixed; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18; background-image: linear-gradient(#9bb0c009 1px, transparent 1px), linear-gradient(90deg,#9bb0c009 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000 0%, transparent 82%); } header { border-bottom-color: #394954; box-shadow: 0 12px 35px #0005, inset 0 -1px #ffffff05; backdrop-filter: blur(18px); } .logo .lg-main { text-shadow: 0 0 24px #ff465529; } .logo .lg-sub { color: #879aa8; } .tab { position: relative; transition: color .22s var(--ease-out), background .22s var(--ease-out), transform .22s var(--ease-out); } .tab:hover { transform: translateY(-1px); color: #fff; } .tab.active { color: #fff; } .tab.active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), #ff9b72, transparent); box-shadow: 0 0 12px #ff465577; } .collection-intro { position: relative; } .collection-intro::before { content: ""; width: 23px; height: 1px; background: var(--red); box-shadow: 0 0 12px #ff4655; } .collection-banner { isolation: isolate; border-color: #40515e; box-shadow: 0 24px 65px #0005, inset 0 0 55px #a7d1e507; background: radial-gradient(ellipse at 74% 80%,#667887 0,transparent 46%), radial-gradient(ellipse at 12% 10%,#294050 0,transparent 46%),linear-gradient(110deg,#172632,#0a121a 76%); } .collection-banner::after { content: ""; position: absolute; z-index: -1; width: 230px; height: 230px; right: 12%; top: 12%; border: 1px solid #ffffff0b; transform: rotate(45deg); box-shadow: 0 0 0 26px #ffffff03,0 0 0 52px #ffffff02; } .banner-copy h1 { text-shadow: 0 8px 32px #0008; } .banner-link { transition: color .2s, border-color .2s, gap .2s; } .banner-link:hover { color: #ff9da4; border-color: var(--red); gap: 43px; } .art-orbit { animation: orbitBreath 8s ease-in-out infinite; } .hero-agent { animation: heroDrift 7s ease-in-out infinite; } .hero-reyna { animation-delay: -3.5s; } .drop-heading { position: relative; } .drop-heading::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--red); transform: rotate(45deg); margin-right: 2px; } .drop-heading > span:last-child { display: inline-flex; align-items: center; gap: 8px; } .drop-heading > span:last-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #55d7a2; box-shadow: 0 0 10px #55d7a2; } .pack-hero, .open-pack-zone, .pack-card, .collection-stats .stat { box-shadow: inset 0 1px #ffffff08, 0 12px 34px #0002; } .pack-hero { position: relative; overflow: hidden; } .pack-hero::after { content: "VC // SUPPLY"; position: absolute; right: 19px; top: 12px; color: #71849366; font-size: 8px; letter-spacing: 2px; } .open-pack-zone::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .65; background: linear-gradient(90deg,transparent 49.9%,#ffffff08 50%,transparent 50.1%), radial-gradient(ellipse at 28% 55%,#ff46551a,transparent 30%); } .display-pack { transition: transform .6s var(--ease-out), filter .4s, box-shadow .4s; animation: packIdle 4.4s ease-in-out infinite, packAura 3.4s ease-in-out infinite; } .open-pack-zone:hover .display-pack { transform: translateY(-7px) rotate(-6deg) scale(1.035); filter: brightness(1.14); box-shadow: 15px 22px 45px #0009, 0 0 35px #ff465520; } .display-pack::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 20%,#ffffff16 42%,transparent 56%); transform: translateX(-110%); animation: packGlint 6s 1s ease-in-out infinite; } .display-pack,.sealed-pack { background:linear-gradient(142deg,#ff4655 0 7%,#111b25 7% 11%,#202d38 11% 13%,#0b121a 13% 87%,#202d38 87% 89%,#ff4655 89%); border-color:#71808c; } .display-pack::after,.sealed-pack::after { inset:7px; border:1px solid #ff465566; box-shadow:inset 0 0 28px #ff465510; } .display-pack .pack-serial,.sealed-pack .pack-serial { z-index:2; color:#dce4e9; } .pack-logo { position:relative; z-index:2; display:block; width:88%; max-height:116px; height:auto; object-fit:contain; filter:drop-shadow(0 4px 12px #000a) drop-shadow(0 0 12px #ff465544); } .display-pack .pack-logo { width:91%; } .display-pack small,.sealed-pack small { z-index:2; color:#d6dfe5; text-shadow:0 2px 8px #000; } .display-pack,.sealed-pack { box-shadow:12px 17px 35px #0008,0 0 22px #ff46552b; } .sealed-pack { animation:sealedFloat 3s ease-in-out infinite,packAura 3.4s ease-in-out infinite; } .sealed-pack.unsealing .pack-logo { animation:packShards .62s .48s ease-in forwards; } @keyframes packAura { 0%,100% { box-shadow:12px 17px 35px #0008,0 0 18px #ff465533,0 0 38px #ff465514; } 50% { box-shadow:12px 17px 35px #0008,0 0 28px #ff465577,0 0 66px #ff465533; } } .open-pack-btn { position: relative; overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .25s, filter .25s; } .open-pack-btn:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 12px 38px #ff465544; } .open-pack-btn:active { transform: translateY(0) scale(.98); } .section-title, .sub-title { text-wrap: balance; } .panel.active { animation: panelArrive .42s var(--ease-out) both; } .collection-stats .stat { border-color: #324451; background: linear-gradient(145deg,#14212b,#0d161f); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; } .collection-stats .stat:hover { transform: translateY(-3px); border-color: #607583; box-shadow: 0 12px 26px #0004, inset 0 1px #ffffff12; } .progress-bar { overflow: hidden; background: #263540; } .progress-bar span { box-shadow: 0 0 16px #ff465588; transition: width .55s var(--ease-out); } .filters { gap: 7px; } .filter { transition: transform .18s var(--ease-out), border-color .2s, background .2s, color .2s; } .filter:hover { transform: translateY(-1px); border-color: #607382; } .filter.active { box-shadow: inset 0 0 0 1px #ff465533, 0 4px 14px #ff46550e; } .catalog-toolbar { padding: 12px 14px; border: 1px solid #293945; background: #0d161eaa; } .catalog-search-wrap:focus-within { color: #ff7782; } .catalog-search { transition: border-color .2s, box-shadow .2s; } .catalog-search:focus { border-color: #ff6673; box-shadow: 0 0 0 3px #ff46551b; } .catalog-count { font-variant-numeric: tabular-nums; } .cards-grid { perspective: 1100px; } .game-card { overflow: hidden; isolation: isolate; transition: transform .32s var(--ease-out), box-shadow .32s, border-color .25s, filter .25s; box-shadow: 0 8px 20px #0004, inset 0 1px #ffffff0b; } .game-card:not(.locked):hover { transform: translateY(-7px) rotateX(1deg); box-shadow: 0 20px 38px #0008, 0 0 26px color-mix(in srgb,var(--gc-glow),transparent 66%); } .game-card:not(.locked)::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(118deg,transparent 27%,#ffffff12 42%,transparent 58%); transform:translateX(-130%); transition:transform .65s var(--ease-out); } .game-card:not(.locked):hover::after { transform:translateX(130%); } .gc-art { transition: transform .5s var(--ease-out), filter .5s; } .game-card:not(.locked):hover .gc-art { transform:scale(1.035); } .gc-rarity-bar { opacity: .9; } .game-card .gc-top { z-index: 5; } .game-card .gc-bottom { z-index: 5; } .pack-card { transition: transform .28s var(--ease-out), border-color .25s, box-shadow .25s; } .pack-card:hover { transform: translateY(-5px); border-color: #607583; box-shadow: 0 18px 35px #0006, 0 0 25px #ff465514; } .catalog-pagination #collection-page-label { padding: 8px 13px; border: 1px solid var(--line); background: #101b24; font-variant-numeric: tabular-nums; } .btn, .lb-tab, .admin-tab, .filter { transition: transform .18s var(--ease-out), color .2s, background .2s, border-color .2s, box-shadow .2s; } .btn:not(:disabled):hover, .lb-tab:hover, .admin-tab:hover { transform: translateY(-2px); } .overlay { background-image: radial-gradient(ellipse at 50% 42%,#263b4ce8 0,transparent 55%),linear-gradient(180deg,#050a10f7,#03070bf9); } #pack-overlay .reveal-head { text-shadow: 0 6px 30px #0009; } #pack-overlay .reveal-pile { filter: drop-shadow(0 26px 24px #0007); } #pack-overlay .pile-slot { border-radius: 5px; } #pack-overlay .rv-card-inner { transform-style: preserve-3d; } #pack-overlay .rv-back { box-shadow: inset 0 0 34px #0008, 0 0 20px #ff46551b; } #pack-overlay .rv-front { overflow: hidden; } #pack-overlay .rv-front::after { content:""; position:absolute; z-index:6; inset:10px; border:1px solid #ffffff20; pointer-events:none; } #pack-overlay .reveal-actions .btn { min-width:128px; } footer { border-color: #293944; color: #8293a0; } @keyframes orbitBreath { 0%,100%{transform:scale(.98);opacity:.62}50%{transform:scale(1.045);opacity:1} } @keyframes heroDrift { 0%,100%{translate:0 0}50%{translate:0 -9px} } @keyframes packIdle { 0%,100%{translate:0 0}50%{translate:0 -5px} } @keyframes packGlint { 0%,70%,100%{transform:translateX(-110%)}82%{transform:translateX(110%)} } @keyframes panelArrive { from{opacity:.45;translate:0 7px}to{opacity:1;translate:0 0} } @media(max-width:760px) { .catalog-toolbar { background: transparent; border: 0; padding: 8px 0; } .collection-stats .stat:hover, .game-card:not(.locked):hover, .pack-card:hover { transform: none; } } @media(prefers-reduced-motion:reduce) { .hero-agent,.art-orbit,.display-pack,.panel.active { animation:none!important; } .game-card:not(.locked):hover,.pack-card:hover,.open-pack-btn:hover { transform:none; } } /* Bonus reward wheel */ .bonus-wheel-section { position: relative; margin-top: 44px; padding: clamp(22px,4vw,38px); overflow: hidden; border: 1px solid #344653; background: radial-gradient(ellipse at 15% 8%,#1c3441aa,transparent 46%),linear-gradient(145deg,#111d27,#0b1219 72%); box-shadow: 0 22px 60px #0005,inset 0 1px #ffffff0a; } .bonus-wheel-section::before,.bonus-wheel-section::after { content:"";position:absolute;pointer-events:none; } .bonus-wheel-section::before { inset:0;opacity:.18;background:repeating-linear-gradient(135deg,transparent 0 38px,#dcebf008 39px 40px); } .bonus-wheel-section::after { width:260px;height:260px;right:-140px;top:-155px;border:1px solid #ff46551c;transform:rotate(45deg);box-shadow:0 0 0 24px #ffffff03,0 0 0 48px #ffffff02; } .wheel-heading,.bonus-wheel-layout { position:relative;z-index:1; } .wheel-heading { display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px; } .wheel-heading .sub-title { margin:10px 0 6px;font-size:25px; } .wheel-heading .section-sub { margin:0; } .wheel-odds { display:grid;grid-template-columns:repeat(2,max-content);gap:9px 18px;color:#acbbc6;font-size:11px;letter-spacing:.5px; } .wheel-odds span { display:flex;align-items:center;gap:7px;white-space:nowrap; } .wheel-odds i { width:9px;height:9px;border-radius:50%;box-shadow:0 0 10px currentColor; } .odds-one { background:#ef4859;color:#ef4859; }.odds-two { background:#3b9bb8;color:#3b9bb8; }.odds-three { background:#f4c34d;color:#f4c34d; }.odds-none { background:#637480;color:#637480; } .bonus-wheel-layout { display:grid;grid-template-columns:minmax(300px,1fr) minmax(230px,.72fr);align-items:center;gap:clamp(26px,6vw,80px); } .bonus-wheel-frame { position:relative;isolation:isolate;display:grid;place-items:center;width:min(100%,440px);aspect-ratio:1;margin:auto;filter:drop-shadow(0 22px 26px #0008) drop-shadow(0 0 16px #ff465526);transition:filter .45s ease; } .bonus-wheel-frame::before { content:"";position:absolute;inset:-9px;border:2px solid #9db4c77a;border-radius:50%;background:conic-gradient(from 0deg,#f5d879,#31434f 9%,#8297a2 17%,#111b23 28%,#f5d879 38%,#293b48 52%,#91a7b5 63%,#111b23 75%,#f5d879 88%,#31434f);box-shadow:inset 0 0 0 5px #101922,0 0 0 3px #24343e,0 0 0 7px #465965,0 0 34px #ff46552c,0 0 60px #ff465510; } .bonus-wheel-frame::after { content:"";position:absolute;inset:-19px;border:1px dashed #c4d4dc35;border-radius:50%;box-shadow:0 0 0 8px #ffffff03; } .bonus-wheel { position:absolute;inset:0;overflow:hidden;border:6px solid #17242e;border-radius:50%;background-color:#101a22;box-shadow:inset 0 0 0 2px #ffffff32,inset 0 0 38px #0009,0 0 0 1px #b2c4cb,0 0 24px #76c4dc18;transform:rotate(0deg);transition:none;will-change:transform; } .bonus-wheel::before,.bonus-wheel::after { content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none; } .bonus-wheel::before { background:linear-gradient(142deg,#ffffff30 0%,#ffffff0a 18%,transparent 38%,transparent 68%,#00000025 100%),radial-gradient(circle at 50% 50%,transparent 0 20%,#08101812 53%,#0810184a 100%);box-shadow:inset 0 0 0 1px #ffffff2b,inset 0 0 16px #fff2; } .bonus-wheel::after { inset:8px;border:1px solid #fff3;box-shadow:0 0 0 2px #07101950,inset 0 0 0 1px #07101935; } .wheel-label { position:absolute;left:50%;top:50%;z-index:1;display:block;width:72px;text-align:center;color:#fff;font-size:9px;font-weight:900;line-height:1;letter-spacing:.45px;text-shadow:0 2px 4px #000b;white-space:nowrap;transform:translate(-50%,-50%) rotate(var(--wheel-angle)) translateY(calc(-1 * min(145px, calc(36vw - 28.8px)))) rotate(calc(var(--wheel-angle) * -1)); } .wheel-label-one { color:#fff0ef; }.wheel-label-two { color:#e7faff; }.wheel-label-three { color:#fff3bd;font-size:10px;text-shadow:0 0 9px #fff2a8,0 2px 4px #000; }.wheel-label-none { color:#d0d9de;font-size:8px; } .wheel-pointer { position:absolute;z-index:5;top:-18px;left:50%;width:32px;height:42px;transform:translateX(-50%);transform-origin:50% 0;background:linear-gradient(135deg,#fff8cf,#f5ce55 45%,#aa711c 82%,#ffe99a);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 4px 6px #000b) drop-shadow(0 0 9px #f5ce5566); } .wheel-pointer::before { content:"";position:absolute;top:0;left:50%;width:8px;height:8px;transform:translateX(-50%);border-radius:50%;background:#fff6cf; } .bonus-wheel-hub { position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:22%;aspect-ratio:1;border:4px solid #17232c;border-radius:50%;background:radial-gradient(circle at 35% 25%,#415361,#101920 68%);box-shadow:0 0 0 1px #afc0c7,inset 0 3px 8px #ffffff24,0 5px 16px #0009; } .bonus-wheel-hub span { color:#ff5967;font-family:var(--font-title);font-size:clamp(24px,4vw,38px);font-weight:900;line-height:1;text-shadow:0 0 18px #ff465566; } .bonus-wheel-hub small { margin-top:3px;color:#a6b6c0;font-size:7px;letter-spacing:2px; } .wheel-controls { max-width:350px; } .wheel-controls .eyebrow { color:#ff7883;font-size:10px; } .wheel-prompt { margin:12px 0 24px;color:#e6edf1;font-family:var(--font-title);font-size:clamp(20px,2.5vw,27px);line-height:1.25; } .wheel-bonus-balance { display:inline-flex;align-items:center;gap:6px;margin:-12px 0 18px;padding:8px 11px;border:1px solid #8a713b66;background:linear-gradient(110deg,#d2a13b1c,#111c25);color:#c0cbd1;font-size:11px;letter-spacing:.35px; } .wheel-bonus-balance b { color:#f3c85b;font-size:13px;font-variant-numeric:tabular-nums;text-shadow:0 0 12px #f3c85b55; } .wheel-spin-btn { display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:225px;padding:16px 20px;font-size:15px;letter-spacing:1px;box-shadow:0 8px 28px #ff465527; } .wheel-spin-btn span { font-size:20px;transition:transform .2s; } .wheel-spin-btn:not(:disabled):hover span { transform:translate(3px,-3px); } .wheel-spin-btn:disabled { opacity:.56;cursor:not-allowed;filter:saturate(.6); } .wheel-button-orbit { animation:wheelOrbit .8s linear infinite; } .wheel-result { min-height:24px;margin:18px 0 5px;color:#fff;font-weight:700; } .wheel-countdown { display:block;min-height:18px;color:#93a5b0;font-size:12px;letter-spacing:.4px;font-variant-numeric:tabular-nums; } @keyframes wheelOrbit { to{transform:rotate(360deg)} } @keyframes wheelPointerTick { 0%{transform:translateX(-50%) rotate(0)} 42%{transform:translateX(-50%) rotate(-17deg)} 100%{transform:translateX(-50%) rotate(0)} } @keyframes wheelRingSpin { to{transform:rotate(360deg)} } @keyframes wheelFramePulse { 0%,100%{filter:drop-shadow(0 22px 26px #0008) drop-shadow(0 0 16px #ff465526)} 50%{filter:drop-shadow(0 22px 26px #0008) drop-shadow(0 0 30px #ff465566) drop-shadow(0 0 52px #f4c34d2b)} } @keyframes wheelHubPulse { 0%,100%{box-shadow:0 0 0 1px #afc0c7,inset 0 3px 8px #ffffff24,0 5px 16px #0009} 50%{box-shadow:0 0 0 1px #fff,inset 0 3px 8px #ffffff35,0 0 28px #ff465577,0 0 48px #f4c34d33} } .wheel-pointer.wheel-tick { animation:wheelPointerTick 90ms cubic-bezier(.2,.8,.25,1); } .wheel-spinning.bonus-wheel-frame { animation:wheelFramePulse 1.4s ease-in-out infinite; } .wheel-spinning.bonus-wheel-frame::after { border-color:#f4c34d8c;box-shadow:0 0 0 8px #f4c34d09,0 0 24px #f4c34d35;animation:wheelRingSpin 8s linear infinite; } .wheel-spinning.bonus-wheel-frame::before { box-shadow:inset 0 0 0 5px #101922,0 0 0 3px #24343e,0 0 0 7px #465965,0 0 36px #ff465566,0 0 70px #ff465522; } .wheel-spinning .bonus-wheel { filter:saturate(1.18) brightness(1.07); } .wheel-spinning .bonus-wheel-hub { animation:wheelHubPulse 1.2s ease-in-out infinite; } .wheel-landed.bonus-wheel-frame { filter:drop-shadow(0 22px 26px #0008) drop-shadow(0 0 34px #f4c34d66); } .wheel-landed .bonus-wheel-hub { box-shadow:0 0 0 2px #fff5c4,inset 0 3px 8px #ffffff3a,0 0 34px #f4c34d77,0 0 60px #f4c34d33; } @media(max-width:760px) { .wheel-heading { align-items:flex-start;flex-direction:column; } .bonus-wheel-layout { grid-template-columns:1fr;gap:30px; } .bonus-wheel-frame { width:min(82vw,380px); } .wheel-controls { max-width:none;text-align:center; } .wheel-bonus-balance { margin-left:auto;margin-right:auto; } .wheel-spin-btn { margin:auto; } } @media(max-width:420px) { .bonus-wheel-section { padding:20px 15px; } .wheel-odds { gap:8px 12px;font-size:10px; } .bonus-wheel-frame { width:min(84vw,320px); } .wheel-label { width:58px;font-size:8px; } .wheel-label { transform:translate(-50%,-50%) rotate(var(--wheel-angle)) translateY(calc(-1 * min(114px, calc(36vw - 21.6px)))) rotate(calc(var(--wheel-angle) * -1)); } .wheel-label-none { font-size:7px; } .wheel-label-three { font-size:8px; } } @media(prefers-reduced-motion:reduce) { .wheel-button-orbit,.wheel-spinning.bonus-wheel-frame,.wheel-spinning.bonus-wheel-frame::after,.wheel-spinning .bonus-wheel-hub,.wheel-pointer.wheel-tick { animation:none; } } /* Daily blurred-player guessing challenge */ .daily-guess-section { position:relative;z-index:0;margin-top:24px;padding:clamp(22px,4vw,38px);overflow:hidden; border:1px solid #344653;background:radial-gradient(ellipse at 90% 15%,#20405288,transparent 42%),linear-gradient(150deg,#111d27,#0b1219 75%); box-shadow:0 20px 50px #0004,inset 0 1px #ffffff08; } .daily-guess-section::before { content:"";position:absolute;z-index:-1;inset:0;opacity:.16;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,#ffffff12 50%,transparent 50.1%),repeating-linear-gradient(0deg,transparent 0 47px,#ffffff08 48px 49px); } .guess-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px; } .guess-heading .sub-title { margin:9px 0 5px;font-size:25px; } .guess-heading .section-sub { margin:0; } .guess-reset { flex:none;padding:9px 12px;border:1px solid #40535f;background:#0a141c;color:#c0cdd5;font-size:11px;letter-spacing:1px;font-variant-numeric:tabular-nums; } .daily-guess-layout { display:grid;grid-template-columns:minmax(250px,.9fr) minmax(280px,1fr);align-items:center;gap:clamp(28px,5vw,64px); } .guess-photo-frame { position:relative;min-height:285px;aspect-ratio:1.45;overflow:hidden;border:1px solid #506573;background:radial-gradient(ellipse at 50% 35%,#344754,#111a21 70%);box-shadow:0 20px 44px #0007,inset 0 0 40px #0007; } .guess-photo-frame::before { content:"";position:absolute;z-index:2;inset:9px;border:1px solid #ffffff24;pointer-events:none; } .guess-photo-frame::after { content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,#060b1644 0%,transparent 27%,transparent 58%,#070d16bb 100%),repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 4px); } .guess-photo { width:100%;height:100%;overflow:hidden; } .guess-photo img { display:block;width:100%;height:100%;min-height:285px;object-fit:cover;object-position:center 25%;filter:blur(8px) brightness(.76) saturate(.72);transform:scale(1.08);transition:filter .75s ease,transform .9s cubic-bezier(.18,.78,.22,1); } .guess-photo.guess-claimed img { filter:blur(0) brightness(1) saturate(1);transform:scale(1); } .guess-photo-tag,.guess-photo-corner { position:absolute;z-index:3;color:#ecf2f5;font-size:9px;font-weight:800;letter-spacing:2px; } .guess-photo-tag { left:22px;bottom:19px;padding:8px 10px;border:1px solid #d2e3ed55;background:#09121ab8; } .guess-photo-corner { right:21px;top:19px;color:#c0d1dcaa;font-size:8px; } .guess-play-area { max-width:470px; } .guess-play-area > .eyebrow { color:#60cbd4;font-size:10px; } .guess-prompt { margin:11px 0 19px;color:#f0f4f6;font-family:var(--font-title);font-size:clamp(19px,2vw,25px);line-height:1.3; } .guess-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; } .guess-option { display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;text-align:left;cursor:pointer;color:#dfe8ed;background:linear-gradient(135deg,#182630,#101820);border:1px solid #344752;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s,color .2s; } .guess-option:not(:disabled):hover { transform:translateY(-2px);border-color:#62cbd5;background:#192e38;box-shadow:0 8px 18px #0004; } .guess-option-index { color:#65ccd2;font-size:9px;font-weight:800;letter-spacing:1px; } .guess-option-name { flex:1;font-weight:700;letter-spacing:.4px; } .guess-option-mark { width:17px;text-align:center;color:transparent;font-size:15px; } .guess-option.guess-wrong { border-color:#a34c55;background:#351d25;color:#ffadb3; } .guess-option.guess-wrong .guess-option-mark { color:#ff7480; } .guess-option.guess-wrong .guess-option-mark::after { content:"×"; } .guess-option.guess-correct { border-color:#64d7a2;background:#163629;color:#b6f4d1;box-shadow:0 0 20px #43c98828; } .guess-option.guess-correct .guess-option-mark { color:#81e4b2; } .guess-option.guess-correct .guess-option-mark::after { content:"✓"; } .guess-option:disabled:not(.guess-wrong):not(.guess-correct) { opacity:.55;cursor:default; } .guess-result { min-height:22px;margin:16px 0 0;color:#a9bac4;font-size:13px; } @media(max-width:760px) { .guess-heading { align-items:flex-start;flex-direction:column; } .guess-reset { align-self:flex-start; } .daily-guess-layout { grid-template-columns:1fr;gap:24px; } .guess-photo-frame { width:min(100%,500px);min-height:230px;margin:auto; } .guess-photo img { min-height:230px; } .guess-play-area { max-width:none; } } @media(max-width:420px) { .daily-guess-section { padding:20px 15px; } .guess-options { grid-template-columns:1fr; } .guess-option { min-height:46px; } .guess-photo-frame { min-height:205px; } .guess-photo img { min-height:205px; } } /* Typography motion pass: expressive titles, crisp copy, and quick feedback. */ body,button,input,select,textarea { -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } .section-title,.sub-title,.reveal-head,.wheel-prompt,.guess-prompt { text-shadow:0 2px 18px #0008; } .section-title { letter-spacing:3.4px; } .sub-title { letter-spacing:2.3px; } .section-sub { color:#b3c0ca;line-height:1.55;letter-spacing:.15px; } .eyebrow { text-shadow:0 0 14px color-mix(in srgb,currentColor 22%,transparent); } .panel.active :is(.section-title,.sub-title,.reveal-head) { animation:textRiseIn .65s var(--ease-out) both,titleSheen 8s 1s ease-in-out infinite; } .panel.active :is(.eyebrow,.section-sub) { animation:textRiseIn .62s var(--ease-out) both; } .panel.active > .section-title { animation-delay:0s,1s; } .panel.active > .section-sub { animation-delay:.08s; } .collection-banner h1 { text-shadow:0 6px 34px #0009; } .collection-banner h1 em { text-shadow:0 0 24px #ff465566; } .banner-copy p,.drop-cta p { color:#c2cdd5;line-height:1.6; } .banner-link,.tab,.btn,.filter,.lb-tab,.admin-tab { text-shadow:0 1px 10px #0005; } .btn:not(:disabled):hover,.lb-tab:hover,.admin-tab:hover { text-shadow:0 0 15px #ffffff66; } .stat .st-num,.pack-pill .pp-num,.bonus-pack-pill .bpp-num,.vp-num { text-shadow:0 0 18px #ff465533; } .lb-podium-place { animation:podiumTextRise .75s var(--ease-out) both;animation-delay:var(--entry-delay,0ms); } .lb-podium-medal { animation:medalFloat 3.2s ease-in-out infinite; } .lb-podium-place.rank-1 .lb-podium-medal { animation-delay:.2s; } .lb-podium-place.rank-2 .lb-podium-medal { animation-delay:.6s; } .lb-podium-place.rank-3 .lb-podium-medal { animation-delay:1s; } .lb-podium-name,.lb-pseudo { text-shadow:0 1px 12px #ffffff16; } .lb-podium-score,.lb-points { text-shadow:0 0 15px color-mix(in srgb,currentColor 30%,transparent); } .lb-row { animation:rankTextEnter .48s var(--ease-out) both;animation-delay:var(--entry-delay,0ms); } .lb-row:nth-child(odd) { background:linear-gradient(100deg,#14212c,#111b24); } .wheel-heading .sub-title { color:#f0eee9; } .wheel-odds span { animation:textRiseIn .55s var(--ease-out) both; } .wheel-odds span:nth-child(1) { animation-delay:.12s; } .wheel-odds span:nth-child(2) { animation-delay:.2s; } .wheel-odds span:nth-child(3) { animation-delay:.28s; } .wheel-odds span:nth-child(4) { animation-delay:.36s; } .wheel-odds span:hover { color:#fff;filter:brightness(1.22); } .wheel-label { animation:wheelLabelGlow 4.5s ease-in-out infinite; } .wheel-label:nth-child(3n) { animation-delay:.8s; } .wheel-label:nth-child(3n + 1) { animation-delay:1.6s; } .wheel-prompt { color:#f5f1eb;text-shadow:0 0 22px #ff46551c; } .wheel-bonus-balance,.wheel-countdown,.guess-reset { font-variant-numeric:tabular-nums; } .wheel-countdown { line-height:1.6; } .wheel-result,.guess-result,.reveal-summary { color:#d5e0e6;line-height:1.55;text-wrap:balance; } .wheel-result.text-update,.guess-result.text-update,.reveal-summary.text-update { animation:resultTextPop .5s var(--ease-out) both; } .guess-option-name { transition:color .2s,text-shadow .2s; } .guess-option:not(:disabled):hover .guess-option-name { color:#fff;text-shadow:0 0 12px #65ccd255; } .guess-result { transition:color .25s; } .reveal-head { color:#f7f2ec;letter-spacing:3.6px; } #pack-overlay.open .reveal-eyebrow { animation:textRiseIn .55s .08s var(--ease-out) both; } #pack-overlay.open .reveal-head { animation:textRiseIn .65s .14s var(--ease-out) both,titleSheen 8s 1.2s ease-in-out infinite; } .reveal-summary b { color:#fff;text-shadow:0 0 12px #ffffff44; } .catalog-count,.catalog-pagination,.wheel-countdown,.guess-reset,.cr-exp { font-feature-settings:"tnum" 1; } @keyframes textRiseIn { from {opacity:0;transform:translateY(10px);filter:blur(3px)} to {opacity:1;transform:translateY(0);filter:blur(0)} } @keyframes titleSheen { 0%,72%,100% {text-shadow:0 2px 18px #0008} 84% {text-shadow:0 0 22px #ffffff35,0 2px 18px #0008} } @keyframes podiumTextRise { from {opacity:0;transform:translateY(22px) scale(.97);filter:blur(3px)} to {opacity:1;transform:translateY(0) scale(1);filter:blur(0)} } @keyframes rankTextEnter { from {opacity:0;translate:-12px 0} to {opacity:1;translate:0 0} } @keyframes medalFloat { 0%,100% {translate:0 0;filter:drop-shadow(0 3px 7px #0008)} 50% {translate:0 -4px;filter:drop-shadow(0 5px 10px #ffffff2b)} } @keyframes wheelLabelGlow { 0%,100% {filter:brightness(1);text-shadow:0 2px 4px #000b} 50% {filter:brightness(1.17);text-shadow:0 0 9px #ffffff55,0 2px 4px #000b} } @keyframes resultTextPop { from {opacity:.35;transform:translateY(7px) scale(.985);filter:blur(2px)} to {opacity:1;transform:translateY(0) scale(1);filter:blur(0)} } @media(prefers-reduced-motion:reduce) { .panel.active :is(.section-title,.sub-title,.reveal-head,.eyebrow,.section-sub),.lb-podium-place,.lb-podium-medal,.lb-row,.wheel-odds span,.wheel-label,.text-update { animation:none!important; } } /* Identité de marque — proposition 3 */ .logo { gap: 3px; flex: 0 0 auto; color: inherit; text-decoration: none; cursor: pointer; } .logo:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; border-radius: 3px; } .logo-image { display: block; width: clamp(150px, 16vw, 205px); height: 56px; object-fit: contain; object-position: left center; filter: drop-shadow(0 3px 12px #0008); } .logo .lg-sub { padding-left: 2px; } .banner-art { min-height: 100%; isolation: isolate; } .hero-logo { position: absolute; z-index: 1; top: 1%; right: -5%; width: 112%; height: 98%; object-fit: contain; filter: drop-shadow(0 16px 24px #0009) drop-shadow(0 0 22px #ff46551c); animation: brandHover 6s ease-in-out infinite; } .art-orbit { z-index: 0; left: 20%; top: 12%; } .art-caption { z-index: 2; } @keyframes brandHover { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-.5deg); } } @media(max-width: 760px) { .logo-image { width: 158px; height: 48px; } .hero-logo { width: 155%; height: 92%; right: -34%; top: 4%; } .art-orbit { left: 4%; top: 16%; width: 230px; height: 230px; } } @media(max-width: 420px) { .logo-image { width: 145px; height: 44px; } .hero-logo { width: 205%; height: 92%; right: -65%; top: 3%; } } @media(prefers-reduced-motion:reduce) { .hero-logo,.display-pack,.sealed-pack { animation: none!important; } } /* Keep the reveal sheen above the card artwork after the finishing-pass frame. */ #pack-overlay .rv-front::after { inset:-30% auto -30% -75%; width:45%; border:0; background:linear-gradient(100deg,transparent,#ffffffa8 45%,#ffccd488 55%,transparent); transform:skewX(-18deg); opacity:0; } #pack-overlay .rv-card.flipped .rv-front::after { animation:cardFlipSheen 1.5s .72s ease-out both; } #pack-overlay .rv-card-inner { transition:transform .35s cubic-bezier(.2,.8,.2,1); transform-origin:50% 50%; } #pack-overlay .rv-card.is-turning:not(.flipped) .rv-card-inner { transform:rotateY(9deg) rotateX(5deg) scale(1.035); } #pack-overlay .rv-card.flipped .rv-card-inner { animation:cardSlowTurn 1.5s cubic-bezier(.45,0,.55,1) both; } @keyframes cardSlowTurn { 0% { transform:rotateY(9deg) rotateX(5deg) rotateZ(0) scale(1.035); } 100% { transform:rotateY(180deg) rotateX(-1deg) rotateZ(-.5deg) scale(1.04); } } /* Community drop ribbon, site-wide totals, shop and profile cosmetics. */ .live-drops { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:center; min-width:0; margin:0 -20px 18px; padding:12px 20px; border:1px solid #31414e; border-top:0; background:linear-gradient(100deg,#121e28,#0b131b); box-shadow:inset 0 1px #ffffff08; } .live-drops-heading { display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap; color:#f4f1eb; font:700 11px var(--font-title); letter-spacing:1.6px; } .live-drops-heading small { flex:1 1 100%; min-width:0; margin-left:17px; color:var(--muted); font:600 9px/1.35 var(--font-body); letter-spacing:1px; overflow-wrap:anywhere; } .live-pulse { width:8px; height:8px; border-radius:50%; background:#ff4655; box-shadow:0 0 12px #ff4655; animation:livePulse 1.5s ease-in-out infinite; } .live-drops-track { display:flex; align-items:center; gap:9px; min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#425361 transparent; padding:2px 0 5px; } .live-drop-item { display:flex; flex:0 0 auto; align-items:center; gap:7px; min-height:34px; padding:6px 10px; border:1px solid #ffffff12; border-left:2px solid var(--drop-color,#b07cff); background:linear-gradient(100deg,#ffffff08,#ffffff02); animation:dropSlideIn .4s var(--ease-out) both; font-size:13px; white-space:nowrap; } .live-drop-rarity { color:var(--drop-color,#b07cff); font:700 9px var(--font-title); letter-spacing:.8px; } .live-drop-player { color:#f4f1eb; }.live-drop-action,.live-empty { color:var(--muted); }.live-drop-card { color:#fff; } .live-empty { padding:6px 0; font-size:13px; } .live-drops.twitch-live-active { margin-bottom:0; } #twitch-live-banner[hidden],#twitch-live-promo[hidden] { display:none!important; } .twitch-live-banner { position:relative; height:48px; margin:0 -20px 17px; overflow:hidden; border:1px solid #49396b; border-top:0; background:linear-gradient(90deg,#0b1018,#171225 48%,#0b1018); } .twitch-live-banner::before,.twitch-live-banner::after { position:absolute; z-index:2; top:0; bottom:0; width:38px; content:""; pointer-events:none; } .twitch-live-banner::before { left:0; background:linear-gradient(90deg,#0b1119,transparent); } .twitch-live-banner::after { right:0; background:linear-gradient(270deg,#0b1119,transparent); } .twitch-live-track { position:absolute; top:5px; left:0; width:max-content; animation:twitchBannerCross 20s linear infinite; will-change:transform; } .twitch-live-link { position:relative; display:flex; align-items:center; gap:10px; min-width:340px; height:36px; padding:4px 11px 4px 9px; overflow:hidden; clip-path:polygon(9px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); border:1px solid #b186ff99; background:linear-gradient(105deg,#171125f5,#251744f2 48%,#141c28f5); box-shadow:0 5px 17px #0009,0 0 16px #9147ff4a,inset 0 1px #ffffff20; color:#fff; text-decoration:none; } .twitch-live-link::before { position:absolute; inset:0; z-index:-1; content:""; background:linear-gradient(112deg,transparent 18%,#ffffff1c 48%,transparent 71%); transform:translateX(-100%); animation:twitchBannerSheen 4.2s ease-in-out infinite; } .twitch-live-icon { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; clip-path:polygon(12% 0,100% 0,100% 76%,72% 100%,53% 100%,39% 88%,22% 88%,22% 76%,0 76%,0 15%); background:linear-gradient(145deg,#b78aff,#7838df); box-shadow:0 0 15px #9147ff66; } .twitch-live-icon svg { width:14px; height:14px; fill:#fff; } .twitch-live-copy { display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap; } .twitch-live-label { display:flex; align-items:center; gap:6px; color:#ff8991; font:900 8px var(--font-title); letter-spacing:1.1px; } .twitch-live-label i,.twitch-promo-kicker i { width:6px; height:6px; flex:none; border-radius:50%; background:#ff4655; box-shadow:0 0 0 3px #ff465526,0 0 9px #ff4655; animation:twitchLivePulse 1.1s ease-in-out infinite; } .twitch-live-copy strong { color:#fff; font:800 13px var(--font-title); letter-spacing:.3px; text-transform:uppercase; } .twitch-live-game { max-width:220px; overflow:hidden; color:#b5a4d2; font-size:9px; text-overflow:ellipsis; } .twitch-live-cta { margin-left:auto; padding:6px 9px; border:1px solid #bd9aff80; background:#9147ff2a; color:#f1eaff; font:800 8px var(--font-title); letter-spacing:.7px; white-space:nowrap; text-transform:uppercase; } .twitch-live-link:hover { filter:brightness(1.15); } .twitch-live-link:hover .twitch-live-cta { background:#9147ff70; box-shadow:0 0 18px #9147ff55; } @keyframes twitchBannerCross { from { transform:translateX(-100%); } to { transform:translateX(calc(100vw + 100%)); } } @keyframes twitchBannerSheen { 0%,65%,100% { transform:translateX(-100%); } 85% { transform:translateX(100%); } } @keyframes twitchLivePulse { 50% { opacity:.45; box-shadow:0 0 0 6px #ff465512,0 0 18px #ff4655; } } .twitch-live-promo { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:22px; margin:0 0 22px; padding:20px 24px; overflow:hidden; border:1px solid #a873ff85; background:radial-gradient(ellipse at 0 50%,#9147ff39,transparent 47%),linear-gradient(105deg,#201637,#101720 78%); box-shadow:inset 0 1px #ffffff24,0 14px 38px #0005,0 0 30px #9147ff1e; } .twitch-live-promo::before { position:absolute; top:0; bottom:0; left:-45%; width:35%; content:""; background:linear-gradient(90deg,transparent,#ffffff12,transparent); transform:skewX(-22deg); animation:twitchPromoSheen 6s ease-in-out infinite; pointer-events:none; } .twitch-promo-kicker { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#d0b4ff; font:800 10px var(--font-title); letter-spacing:1.7px; text-transform:uppercase; } .twitch-promo-kicker i { width:7px; height:7px; background:#bb8cff; box-shadow:0 0 12px #b989ff; } .twitch-live-promo h2 { position:relative; margin:0; color:#fff; font:800 clamp(21px,3.4vw,36px)/1.15 var(--font-title); letter-spacing:.2px; } .twitch-live-promo h2 strong { color:#c09aff; text-shadow:0 0 22px #9147ff55; } .twitch-live-promo p { margin:7px 0 0; color:#b3bec8; font-size:13px; line-height:1.5; } .twitch-promo-button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; border:1px solid #c8aaff; background:linear-gradient(130deg,#9147ff,#6834c6); box-shadow:0 0 23px #9147ff42; color:#fff; font:800 10px var(--font-title); letter-spacing:.8px; text-decoration:none; text-transform:uppercase; white-space:nowrap; transition:transform .2s,box-shadow .2s; } .twitch-promo-button:hover { transform:translateY(-2px); box-shadow:0 0 32px #9147ff77; } @keyframes twitchPromoSheen { 0%,72%,100% { left:-45%; } 88% { left:120%; } } .global-stats { margin:46px 0 12px; padding:24px; border:1px solid #3a4b58; background:radial-gradient(ellipse at 50% 0,#ff465514,transparent 62%),linear-gradient(135deg,#172631,#0d151d); box-shadow:0 20px 44px #0003,inset 0 1px #ffffff0b; } .global-stats-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:20px; } .global-stats-heading .eyebrow { display:block; margin-bottom:7px; color:#ff7a85; } .global-stats-heading .sub-title { margin:0; } .stats-updated { color:var(--muted); font-size:12px; text-align:right; } .global-stats-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } .global-stat { position:relative; display:flex; flex-direction:column; gap:5px; min-height:112px; padding:16px 14px; overflow:hidden; border:1px solid #ffffff12; background:linear-gradient(145deg,#1a2935,#101922); } .global-stat::after { content:""; position:absolute; right:-25px; bottom:-48px; width:115px; height:115px; border:1px solid #ffffff0b; transform:rotate(45deg); } .global-stat-icon { color:#ff6876; font-size:17px; }.global-stat strong { color:#fff; font:700 clamp(22px,2.2vw,31px) var(--font-title); font-variant-numeric:tabular-nums; text-shadow:0 0 22px #ff46552b; } .global-stat > span:last-child { color:#aebcc6; font-size:12px; line-height:1.25; } .global-stat-legendary { border-color:#ffb34755; background:linear-gradient(145deg,#352b1e,#171a1d); }.global-stat-legendary .global-stat-icon,.global-stat-legendary strong { color:#ffca72; } .hourly-best { position:relative; margin:28px 0 10px; padding:22px 24px; overflow:hidden; border:1px solid #40525f; background:radial-gradient(ellipse at 80% 0,#ff46551b,transparent 45%),linear-gradient(120deg,#172630,#0b131a 76%); box-shadow:0 16px 36px #0003,inset 0 1px #ffffff0b; } .hourly-best::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background:linear-gradient(135deg,transparent 0 63%,#ffffff08 63.1% 63.25%,transparent 63.4%),repeating-linear-gradient(130deg,transparent 0 62px,#ffffff04 63px 64px); } .hourly-best-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; } .hourly-best-heading .eyebrow { display:block; margin-bottom:6px; color:#ff7a85; } .hourly-best-heading .sub-title { margin:0; } .hourly-best-clock { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:9px 12px; border:1px solid #ffffff16; background:#07101788; color:#aebcc6; font-size:11px; } .hourly-best-clock b { color:#fff; font:700 13px var(--font-title); font-variant-numeric:tabular-nums; letter-spacing:1px; } .hourly-best-pulse { width:7px; height:7px; border-radius:50%; background:#ff4655; box-shadow:0 0 12px #ff4655; animation:livePulse 1.5s ease-in-out infinite; } .hourly-best-content { position:relative; min-width:0; } .hourly-best-empty { display:flex; align-items:center; min-height:112px; margin:0; padding:18px; border:1px dashed #ffffff20; color:var(--muted); background:#07101755; font-size:13px; } .hourly-best-winner { display:grid; grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr); align-items:center; gap:18px; min-height:150px; padding:16px; border:1px solid color-mix(in srgb,var(--hourly-rarity,#ff4655) 46%,transparent); background:linear-gradient(100deg,color-mix(in srgb,var(--hourly-rarity,#ff4655) 10%,#101922),#0b131a 75%); box-shadow:inset 3px 0 var(--hourly-rarity,#ff4655),0 0 28px color-mix(in srgb,var(--hourly-rarity,#ff4655) 10%,transparent); animation:dropSlideIn .45s var(--ease-out) both; } .hourly-best-player { display:flex; align-items:center; gap:13px; min-width:0; } .hourly-best-avatar { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border:1px solid color-mix(in srgb,var(--hourly-rarity,#ff4655) 68%,#fff2); border-radius:50%; background:radial-gradient(circle,#ffffff14,#0a1118); color:#fff; font:700 21px var(--font-title); box-shadow:0 0 18px color-mix(in srgb,var(--hourly-rarity,#ff4655) 24%,transparent); } .hourly-best-avatar img { width:100%; height:100%; object-fit:cover; } .hourly-best-player-copy { min-width:0; } .hourly-best-kicker { display:block; margin-bottom:5px; color:#94a5b1; font:700 9px var(--font-title); letter-spacing:1.4px; } .hourly-best-pseudo { display:block; overflow:hidden; color:#f5f2ed; font:700 clamp(17px,2vw,23px) var(--font-title); text-overflow:ellipsis; white-space:nowrap; } .hourly-best-at { display:block; margin-top:5px; color:#84939e; font-size:11px; } .hourly-best-card { display:flex; align-items:center; gap:14px; min-width:0; } .hourly-best-card-art { position:relative; display:grid; place-items:center; flex:0 0 80px; width:80px; height:112px; overflow:hidden; border:1px solid color-mix(in srgb,var(--hourly-rarity,#ff4655) 68%,transparent); background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--hourly-rarity,#ff4655) 28%,transparent),transparent 67%),#0c141c; box-shadow:0 0 20px color-mix(in srgb,var(--hourly-rarity,#ff4655) 22%,transparent); } .hourly-best-card-art img { width:100%; height:100%; object-fit:cover; } .hourly-best-card-art span { color:var(--hourly-rarity,#ff4655); font:700 26px var(--font-title); } .hourly-best-card-copy { min-width:0; } .hourly-best-rarity { display:inline-flex; margin-bottom:7px; padding:5px 8px; border:1px solid color-mix(in srgb,var(--hourly-rarity,#ff4655) 48%,transparent); color:var(--hourly-rarity,#ff4655); background:color-mix(in srgb,var(--hourly-rarity,#ff4655) 10%,transparent); font:700 9px var(--font-title); letter-spacing:1.2px; } .hourly-best-card-name { display:block; overflow:hidden; color:#fff; font:700 clamp(15px,1.8vw,20px) var(--font-title); text-overflow:ellipsis; } .hourly-best-card-meta { display:block; margin-top:5px; color:#9aaab5; font-size:11px; } @media(max-width:760px) { .hourly-best { margin:22px 0 8px; padding:18px 14px; } .hourly-best-heading { align-items:flex-start; flex-direction:column; gap:10px; } .hourly-best-clock { align-self:flex-start; } .hourly-best-winner { grid-template-columns:1fr; gap:14px; padding:13px; } .hourly-best-player { padding-bottom:12px; border-bottom:1px solid #ffffff12; } .hourly-best-card-art { flex-basis:68px; width:68px; height:94px; } } .shop-hero { position:relative; margin:30px 0 35px; padding:clamp(24px,5vw,50px); overflow:hidden; border:1px solid #465663; background:radial-gradient(ellipse at 86% 28%,#ff46551d,transparent 42%),linear-gradient(115deg,#192832,#0c141b); } .shop-hero::after { content:"VC // ARMORY"; position:absolute; right:22px; bottom:18px; color:#ffffff30; font:700 10px var(--font-title); letter-spacing:3px; } .shop-hero .section-title { margin:9px 0; font-size:clamp(34px,5vw,55px); } .shop-hero .section-sub { max-width:620px; } .shop-balance { display:inline-flex; align-items:center; gap:10px; margin-top:17px; padding:9px 14px; border:1px solid #ffb34766; color:#ffd18c; background:#ffb34710; font:700 11px var(--font-title); letter-spacing:1.6px; } .shop-balance strong { font-size:19px; color:#fff; } #panel-boutique > .sub-title { margin-bottom:8px; } #panel-boutique .packs-grid { margin-top:19px; } .pack-card { min-height:300px; } .profile-cosmetics-line { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0; } .profile-team-tag:empty { display:none; } .profile-team-tag > .team-tag { padding:7px 12px; } .profile-editor { display:grid; grid-template-columns:1fr 1fr; gap:13px 18px; margin:15px 0 22px; padding:20px; border:1px solid #3b4c59; background:linear-gradient(145deg,#111e28,#0b131b); animation:dropSlideIn .3s var(--ease-out) both; } .profile-editor-title,.profile-editor-actions,.profile-editor-error { grid-column:1/-1; } .profile-editor-title p { margin-top:5px; color:var(--muted); font-size:14px; } .profile-editor .field { display:flex; flex-direction:column; gap:7px; color:#ced8de; font-weight:700; } .profile-editor-actions { display:flex; gap:10px; } .profile-editor-error { min-height:18px; color:#ff8089; font-size:13px; } .profile-pseudo-field { grid-column:1/-1; } .profile-password-section { grid-column:1/-1; margin-top:8px; padding-top:20px; border-top:1px solid #52657466; } .profile-password-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .profile-password-section .profile-editor-title { margin-bottom:14px; } .profile-editor .btn:disabled { opacity:.6; cursor:wait; } .admin-players-toolbar { display:flex; align-items:center; gap:14px; margin:18px 0 4px; } .admin-players-toolbar .code-input { flex:1; min-width:180px; } .admin-players-count { flex:0 0 auto; color:#ffb347; font:700 12px var(--font-title); letter-spacing:1px; } .admin-players-status { min-height:18px; margin:6px 0 12px; color:var(--muted-2); font-size:12px; } .admin-players-list { display:grid; gap:9px; } .admin-player-row { display:grid; grid-template-columns:minmax(170px,1fr) minmax(280px, min(58%,620px)); align-items:center; gap:12px; padding:12px; border:1px solid var(--line); background:linear-gradient(130deg,#111c25,#0b1117); } .admin-player-actions { display:grid; grid-template-columns:auto minmax(160px,1fr) auto auto; align-items:center; gap:8px; } .admin-player-view { border-color:#47c9ff55; color:#b9eaff; } .admin-player-delete { border-color:#ff465566; color:#ff9da5; } .admin-player-delete:hover { border-color:#ff4655; background:#ff46551a; } .admin-player-identity { display:grid; gap:4px; min-width:0; } .admin-player-identity strong { overflow-wrap:anywhere; color:var(--cream); } .admin-player-identity > span,.admin-player-identity small { color:var(--muted); font-size:12px; overflow-wrap:anywhere; } .admin-player-password { min-width:0; } .admin-player-protected { justify-self:end; color:var(--muted); font-size:12px; } .admin-players-empty { padding:18px; border:1px dashed var(--line-bright); } .team-tag { display:inline-flex; align-items:center; width:max-content; max-width:150px; margin-left:7px; padding:3px 7px; overflow:hidden; border:1px solid #ff465544; background:#ff465510; color:#ffc2c8; font:700 9px var(--font-title); letter-spacing:.8px; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; } .uc-team-tag { max-width:110px; overflow:hidden; color:#ffb5bd; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .uc-avatar img,.profile-avatar img,.lb-podium-avatar img,.lb-row-avatar img { display:block; width:100%; height:100%; object-fit:contain; padding:3px; } .profile-avatar { overflow:hidden; } .lb-row { display:grid; grid-template-columns:42px 38px minmax(0,1fr) auto; align-items:center; } .lb-row-avatar { display:grid; place-items:center; width:32px; height:32px; overflow:hidden; border:1px solid #526574; border-radius:50%; background:#172631; color:#fff; font:700 13px var(--font-title); } .lb-row-avatar img { padding:4px; } .lb-pseudo { display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; } .lb-podium-name { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; } @keyframes livePulse { 0%,100%{opacity:.65;transform:scale(.84);box-shadow:0 0 5px #ff4655} 50%{opacity:1;transform:scale(1.18);box-shadow:0 0 15px #ff4655} } @keyframes dropSlideIn { from{opacity:0;transform:translateY(9px);filter:blur(2px)} to{opacity:1;transform:translateY(0);filter:blur(0)} } @keyframes homePackFloat { 0%,100%{transform:translateY(0) rotate(-10deg) scale(1)} 38%{transform:translateY(-15px) rotate(-7deg) scale(1.025)} 49%{transform:translateY(1px) rotate(-11deg) scale(.985)} 62%{transform:translateY(-5px) rotate(-8deg) scale(1.01)} 75%{transform:translateY(0) rotate(-10deg) scale(1)} } @keyframes packSpinUp { 0%{transform:rotate(-5deg) rotateY(0) rotateX(0) scale(.94)} 28%{transform:rotate(5deg) rotateY(270deg) rotateX(16deg) scale(1.08)} 62%{transform:rotate(-5deg) rotateY(630deg) rotateX(-12deg) scale(1.15)} 100%{transform:rotate(0) rotateY(900deg) rotateX(0) scale(1.12)} } @keyframes packSpinBrake { 0%{transform:rotate(0) rotateY(900deg) scale(1.12)} 40%{transform:rotate(7deg) rotateY(990deg) rotateX(8deg) scale(1.17)} 72%{transform:rotate(-5deg) rotateY(1050deg) rotateX(-4deg) scale(1.13)} 100%{transform:rotate(-5deg) rotateY(1080deg) rotateX(0) scale(1.1)} } @keyframes packTear { 0%{transform:rotate(-5deg) scale(1.1);clip-path:inset(0 0 0 0)} 16%{transform:translateX(-8px) rotate(-9deg) scale(1.12)} 32%{transform:translateX(9px) rotate(6deg) scale(1.15);filter:brightness(1.45)} 48%{transform:translateY(-8px) rotate(-4deg) scale(1.19);filter:brightness(1.9)} 67%{transform:translate(4px,-16px) rotate(4deg) scale(1.22);filter:brightness(2.2)} 100%{transform:translateY(72px) rotate(10deg) scale(1.26);opacity:0;filter:brightness(3) blur(2px)} } #panel-packs .display-pack { animation:homePackFloat 3.4s ease-in-out infinite,packAura 3.4s ease-in-out infinite; } #pack-overlay .sealed-pack.spin-up { animation:packSpinUp .72s cubic-bezier(.35,.02,.65,.98) both!important; } #pack-overlay .sealed-pack.spin-brake { animation:packSpinBrake .98s cubic-bezier(.38,.04,.24,1) both!important; } #pack-overlay .sealed-pack.unsealing { animation:packTear 1.65s cubic-bezier(.32,.02,.18,1) forwards,packTearGlow 1.65s ease-out forwards; } #pack-overlay .sealed-pack.unsealing::before { animation:tearSlash 1.05s .18s ease-out forwards; } #pack-overlay .sealed-pack.unsealing::after { animation:tearFrame 1.2s .2s ease-out forwards; } #pack-overlay .sealed-pack.unsealing .seal-top { animation:sealRip .88s .1s cubic-bezier(.2,.8,.2,1) forwards; } @media(max-width:760px) { .live-drops { grid-template-columns:1fr; gap:6px; margin-left:-14px; margin-right:-14px; padding:10px 14px; } .live-drops-heading { gap:7px; }.live-drops-heading small { margin-left:15px; } .twitch-live-banner { height:45px; margin:0 -14px 14px; } .twitch-live-track { top:5px; } .twitch-live-link { min-width:325px; height:35px; gap:8px; padding:4px 9px; } .twitch-live-copy { gap:6px; } .twitch-live-copy strong { font-size:12px; } .twitch-live-game { max-width:140px; font-size:8px; } .twitch-live-cta { padding:6px 7px; font-size:7px; } .twitch-live-promo { grid-template-columns:1fr; gap:14px; margin-bottom:18px; padding:18px; } .twitch-promo-button { justify-self:start; } .global-stats { padding:18px 14px; margin-top:34px; }.global-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .global-stat { min-height:98px; padding:12px; }.global-stat:last-child { grid-column:1/-1; } .global-stats-heading { align-items:flex-start; flex-direction:column; }.stats-updated { text-align:left; } .profile-editor { grid-template-columns:1fr; padding:15px; }.profile-editor-title,.profile-editor-actions,.profile-editor-error { grid-column:auto; } .profile-pseudo-field,.profile-password-section { grid-column:auto; } .profile-password-grid { grid-template-columns:1fr; gap:0; } .admin-tabs { flex-wrap:wrap; } .admin-players-toolbar { align-items:stretch; flex-direction:column; } .admin-player-row { grid-template-columns:1fr; } .admin-player-actions { grid-template-columns:1fr; } .admin-player-row .btn { width:100%; } .admin-player-protected { justify-self:start; } .profile-best-pack { padding:15px; }.profile-best-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.profile-best-item { padding:7px; } .uc-team-tag { display:none; } } @media(max-width:420px) { .live-drop-item { min-height:32px; padding:5px 8px; font-size:12px; } .live-drop-rarity { font-size:8px; } .global-stat > span:last-child { font-size:11px; } .profile-cosmetics-line { align-items:flex-start; flex-direction:column; } .profile-cosmetics-line .btn { align-self:flex-end; } .profile-best-cards { grid-template-columns:1fr; }.profile-best-score { margin-left:0; }.profile-return { margin-left:0; } .shop-balance { margin-top:12px; } } @media(prefers-reduced-motion:reduce) { .live-pulse,.live-drop-item,#panel-packs .display-pack,#pack-overlay .sealed-pack.spin-up,#pack-overlay .sealed-pack.spin-brake { animation:none!important; } } /* Compact, touch-friendly header for narrow screens. */ @media(min-width:621px) and (max-width:1320px) { .header-inner { gap:12px; } .logo-image { width:clamp(135px,14vw,180px); height:50px; } .header-right { gap:8px; } .pack-pill,.vp-pill { gap:6px; padding:7px 10px; } nav.tabs { min-width:0; gap:2px; } nav.tabs .tab { min-width:0; padding:12px 7px; font-size:14px; letter-spacing:.7px; } } @media(max-width:620px) { .header-inner { gap:10px; } .header-right { display:grid; grid-template-columns:max-content max-content minmax(0,1fr); gap:6px; align-items:center; } .pack-pill,.vp-pill { min-width:0; justify-content:center; gap:5px; padding:6px 8px; font-size:14px; } .pack-pill .pp-num,.vp-pill .vp-num { font-size:17px; } .pack-pill .pp-ico { font-size:15px; } .pack-pill .pp-lbl,.vp-pill .vp-lbl { display:none; } .auth-zone,.user-menu { width:100%; min-width:0; } .auth-zone { justify-content:stretch; } .user-chip { width:100%; min-width:0; gap:6px; padding:5px 8px; font-size:13px; } .user-chip > span:nth-child(2) { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user-name-text { display:inline-flex; align-items:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user-chip .uc-avatar { flex:0 0 25px; width:25px; height:25px; } .user-chip .uc-badge { flex:0 0 auto; font-size:8px; letter-spacing:.5px; } .uc-caret { flex:0 0 auto; font-size:10px; } nav.tabs { scrollbar-width:none; scroll-snap-type:x proximity; overscroll-behavior-x:contain; } nav.tabs::-webkit-scrollbar { display:none; } nav.tabs .tab { scroll-snap-align:start; } } @media(max-width:480px) { nav.tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; overflow:visible; scroll-snap-type:none; } nav.tabs .tab { min-width:0; padding:10px 4px; font-size:11px; letter-spacing:.6px; text-align:center; } } /* Keep the requested pack and card reveals usable with OS reduced-motion on. */ @keyframes homePackFloatGentle { 0%,100%{transform:translateY(0) rotate(-10deg)} 50%{transform:translateY(-7px) rotate(-8deg)} } @keyframes packSpinUpGentle { 0%{transform:rotate(-5deg) rotateY(0) scale(.97)} 55%{transform:rotate(3deg) rotateY(250deg) scale(1.03)} 100%{transform:rotate(0) rotateY(360deg) scale(1.04)} } @keyframes packSpinBrakeGentle { 0%{transform:rotate(0) rotateY(360deg) scale(1.04)} 52%{transform:rotate(3deg) rotateY(408deg) scale(1.06)} 100%{transform:rotate(-3deg) rotateY(450deg) scale(1.03)} } @keyframes packTearGentle { 0%{transform:rotate(-5deg) scale(1.04);opacity:1} 24%{transform:translateX(-3px) rotate(-7deg) scale(1.05)} 48%{transform:translateX(3px) rotate(5deg) scale(1.06);filter:brightness(1.4)} 70%{transform:translateY(-5px) rotate(-2deg) scale(1.07)} 100%{transform:translateY(24px) rotate(4deg) scale(1.08);opacity:0;filter:brightness(1.7)} } @keyframes cardSlowTurnGentle { 0%{transform:rotateY(9deg) rotateX(5deg) rotateZ(0) scale(1.035)} 100%{transform:rotateY(180deg) rotateX(-1deg) rotateZ(-.5deg) scale(1.04)} } @media(prefers-reduced-motion:reduce) { #panel-packs .display-pack { animation:homePackFloatGentle 4.4s ease-in-out infinite!important; } #pack-overlay .sealed-pack.spin-up { animation:packSpinUpGentle .9s ease-in-out both!important; } #pack-overlay .sealed-pack.spin-brake { animation:packSpinBrakeGentle 1.05s ease-in-out both!important; } #pack-overlay .sealed-pack.unsealing { animation:packTearGentle 1.65s ease-in-out forwards!important; } #pack-overlay .sealed-pack.unsealing::before { animation:tearSlash .86s .12s ease-out both!important; } #pack-overlay .sealed-pack.unsealing::after { animation:tearFrame .95s .16s ease-out both!important; } #pack-overlay .sealed-pack.unsealing .seal-top { animation:sealRip .72s .1s ease-out forwards!important; } #pack-overlay .sealed-pack.unsealing .pack-logo,#pack-overlay .sealed-pack.unsealing small { animation:packShards .72s .48s ease-in forwards!important; } #pack-overlay .pile-slot.card-drawing { animation:drawCardFromDeck .6s ease-out both!important; } #pack-overlay .rv-card.flipped .rv-card-inner { animation:cardSlowTurnGentle 1.5s cubic-bezier(.45,0,.55,1) both!important; } } /* Retention features: collectible albums, login streak and shared challenge. */ .collection-sets-section { margin:28px 0 34px; padding:22px; border:1px solid #344652; background:radial-gradient(ellipse at 10% 0,#ff465510,transparent 52%),linear-gradient(135deg,#111c25,#0d141b); } .retention-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px; } .retention-heading .eyebrow { display:block; margin-bottom:6px; color:#ff7a85; } .retention-heading .sub-title { margin:0; } .collection-sets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .collection-set-card,.retention-card { min-width:0; border:1px solid #354551; background:linear-gradient(145deg,#182631,#101820); box-shadow:inset 0 1px #ffffff08,0 12px 26px #0003; } .collection-set-card { padding:16px; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .collection-set-card:hover { transform:translateY(-3px); border-color:#ff465577; box-shadow:0 14px 30px #0004,0 0 22px #ff46550c; } .collection-set-card.complete { border-color:#ffb34788; background:radial-gradient(ellipse at 100% 0,#ffb34712,transparent 54%),linear-gradient(145deg,#1c282d,#111820); } .collection-set-heading,.set-count,.set-actions,.retention-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; } .collection-set-heading h4 { margin:0; font-size:16px; letter-spacing:.04em; } .set-reward { color:#ffc15c; font-size:11px; font-weight:800; white-space:nowrap; } .set-count { margin:14px 0 8px; color:var(--muted); font-size:12px; } .set-count strong { color:#fff; font-size:18px; } .retention-progress { height:8px; overflow:hidden; border-radius:99px; background:#293640; box-shadow:inset 0 1px 3px #0008; } .retention-progress > span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff4655,#ff9d5b); box-shadow:0 0 14px #ff465566; transition:width .55s cubic-bezier(.2,.8,.2,1); } .set-progress { height:6px; } .set-missing { min-height:36px; margin:10px 0 14px; color:#aeb9c3; font-size:11px; line-height:1.55; } .set-actions { justify-content:flex-start; flex-wrap:wrap; } .set-claimed { color:#8ce0b5; font-size:11px; font-weight:800; } #panel-defis > .section-title { margin-top:8px; } .retention-card { display:grid; grid-template-columns:54px minmax(0,1fr); gap:18px; margin:22px 0; padding:24px; } .retention-card-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid #ff465566; color:#ff6673; background:radial-gradient(circle,#ff465522,#ff465508 72%); font-size:24px; box-shadow:0 0 24px #ff465516; } .community-icon { color:#5ed8ca; border-color:#5ed8ca55; background:radial-gradient(circle,#5ed8ca22,#5ed8ca08 72%); } .retention-card-main { min-width:0; } .retention-status { flex:0 0 auto; padding:7px 9px; border:1px solid #ffffff18; color:#d4dce2; font-size:9px; font-weight:850; letter-spacing:.12em; } .streak-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin:18px 0 10px; } .streak-day { display:grid; place-items:center; min-height:38px; border:1px solid #ffffff14; color:#778592; background:#0b1117; font-size:11px; font-weight:850; } .streak-day.reached { border-color:#ff465577; color:#fff; background:linear-gradient(145deg,#ff465533,#ff46550b); box-shadow:inset 0 0 16px #ff46550b; } .streak-day.milestone { color:#ffd67f; } .retention-foot { margin-top:12px; color:var(--muted); font-size:12px; } .retention-foot strong { color:#eef2f4; } .challenge-count { display:flex; align-items:baseline; gap:8px; margin:18px 0 10px; } .challenge-count strong { color:#fff; font-size:clamp(30px,5vw,44px); line-height:1; font-variant-numeric:tabular-nums; } .challenge-count span { color:#aeb9c3; font-size:13px; } .challenge-progress { height:12px; } .community-challenge-card .retention-progress > span { background:linear-gradient(90deg,#35bcae,#84edc5); box-shadow:0 0 14px #35bcae66; } @media(max-width:720px) { .collection-sets-section { margin-inline:-14px; padding:18px 14px; } .collection-sets { grid-template-columns:1fr; } .retention-card { grid-template-columns:40px minmax(0,1fr); gap:12px; margin:16px 0; padding:17px 14px; } .retention-card-icon { width:40px; height:40px; font-size:20px; } .retention-heading { align-items:flex-start; flex-direction:column; } .retention-status { align-self:flex-start; } .retention-foot { align-items:flex-start; flex-direction:column; } .streak-days { gap:4px; }.streak-day { min-height:34px; font-size:10px; } } #community-challenge-claim[hidden] { display:none; } /* A pack rests in a slow, continuous orbit until the player starts the reveal. */ @keyframes homePackOrbit { 0% { transform:translate3d(0,0,0) rotateY(-12deg) rotateZ(-8deg) rotateX(2deg); } 25% { transform:translate3d(0,-13px,0) rotateY(78deg) rotateZ(-4deg) rotateX(-2deg); } 50% { transform:translate3d(0,-20px,0) rotateY(168deg) rotateZ(1deg) rotateX(2deg); } 75% { transform:translate3d(0,-12px,0) rotateY(258deg) rotateZ(-4deg) rotateX(-2deg); } 100% { transform:translate3d(0,0,0) rotateY(348deg) rotateZ(-8deg) rotateX(2deg); } } @keyframes sealedPackOrbit { 0%,100% { transform:translate3d(0,0,0) rotateY(-10deg) rotateZ(-5deg) rotateX(2deg); } 25% { transform:translate3d(0,-13px,0) rotateY(80deg) rotateZ(-2deg) rotateX(-2deg); } 50% { transform:translate3d(0,-19px,0) rotateY(170deg) rotateZ(2deg) rotateX(2deg); } 75% { transform:translate3d(0,-11px,0) rotateY(260deg) rotateZ(-2deg) rotateX(-2deg); } } @keyframes packTearCinematic { 0% { transform:translate3d(0,0,0) rotate(-5deg) rotateY(0) scale(1); opacity:1; filter:brightness(1); clip-path:inset(0); } 12% { transform:translate3d(-5px,-2px,0) rotate(-8deg) rotateY(-10deg) scale(1.05); } 24% { transform:translate3d(7px,-7px,0) rotate(6deg) rotateY(18deg) scale(1.1); filter:brightness(1.35); } 38% { transform:translate3d(-5px,-12px,0) rotate(-5deg) rotateY(-15deg) scale(1.14); } 52% { transform:translate3d(4px,-19px,0) rotate(4deg) rotateY(10deg) scale(1.2); filter:brightness(1.85); clip-path:polygon(0 0,100% 0,100% 47%,57% 51%,100% 56%,100% 100%,0 100%); } 68% { transform:translate3d(-2px,-27px,0) rotate(-2deg) rotateY(-6deg) scale(1.24); filter:brightness(2.25); } 82% { transform:translate3d(0,-17px,0) rotate(2deg) rotateY(5deg) scale(1.26); opacity:.92; } 100% { transform:translate3d(0,76px,0) rotate(11deg) rotateY(22deg) scale(1.32); opacity:0; filter:brightness(3) blur(3px); clip-path:inset(100% 0 0); } } #panel-packs .display-pack { transform-style:preserve-3d; animation:homePackOrbit 18s cubic-bezier(.45,0,.55,1) infinite,packAura 5s ease-in-out infinite; will-change:transform,filter; } .open-pack-zone:hover .display-pack { transform-style:preserve-3d; filter:brightness(1.16); } #pack-overlay .sealed-pack { transform-style:preserve-3d; animation:sealedPackOrbit 17s cubic-bezier(.45,0,.55,1) infinite,packAura 4.8s ease-in-out infinite; will-change:transform,filter; } #pack-overlay .sealed-pack:hover { filter:brightness(1.18) drop-shadow(0 0 24px #ff465577); } #pack-overlay .sealed-pack.unsealing { animation:packTearCinematic 2.3s cubic-bezier(.16,.76,.18,1) forwards,packTearGlow 2.3s ease-out forwards!important; pointer-events:none; } #pack-overlay .sealed-pack.unsealing::before { animation:tearSlash 1.42s .36s cubic-bezier(.15,.8,.2,1) forwards!important; } #pack-overlay .sealed-pack.unsealing::after { animation:tearFrame 1.6s .28s ease-out forwards!important; } #pack-overlay .sealed-pack.unsealing .seal-top { animation:sealRip 1.15s .34s cubic-bezier(.12,.75,.2,1) forwards!important; } #pack-overlay .sealed-pack.spin-up { animation:packSpinUp 1.05s cubic-bezier(.35,.02,.65,.98) both!important; } #pack-overlay .sealed-pack.spin-brake { animation:packSpinBrake .82s cubic-bezier(.38,.04,.24,1) both!important; } #pack-overlay .reveal-stage.pack-opening::before { animation-duration:1.7s; animation-delay:.45s; } #pack-overlay .reveal-stage.pack-opening::after { animation-duration:1.25s; animation-delay:.3s; } #pack-overlay .sealed-pack:focus-visible { outline:2px solid #ff8991; outline-offset:8px; } @media(prefers-reduced-motion:reduce) { #panel-packs .display-pack { animation:homePackFloatGentle 4.4s ease-in-out infinite,packAura 4s ease-in-out infinite!important; } #pack-overlay .sealed-pack { animation:sealedFloat 4.4s ease-in-out infinite,packAura 4s ease-in-out infinite!important; } #pack-overlay .sealed-pack.spin-up { animation:packSpinUpGentle .3s ease-in-out both!important; } #pack-overlay .sealed-pack.spin-brake { animation:packSpinBrakeGentle .25s ease-in-out both!important; } #pack-overlay .sealed-pack.unsealing { animation:packTearGentle .5s ease-in forwards!important; } #pack-overlay .sealed-pack.unsealing::before,#pack-overlay .sealed-pack.unsealing::after,#pack-overlay .sealed-pack.unsealing .seal-top { animation-duration:.5s!important; animation-delay:0ms!important; } } /* Collection 01: unified tactical interface, rare-tier card frames and motion. */ :root { --bg-0:#080e14; --bg-1:#101a23; --panel:#111d27; --panel-2:#17242e; --line:#2a3b47; --line-bright:#526574; --cream:#f4f0e8; --muted:#9eacb7; --red:#ff4655; --red-dim:#b92f42; --orange:#ffad62; --ease-out:cubic-bezier(.2,.8,.2,1); } body { background:radial-gradient(ellipse at 50% -22%,#273c4b 0,transparent 52%),var(--bg-0); } body::before { opacity:.48; background-size:64px 64px; } body::after { opacity:.75; } .wrap { max-width:1380px; } header { background:linear-gradient(180deg,#080f16f5,#0b141ceF); border-bottom-color:#40515e; } .header-inner { gap:clamp(10px,1.5vw,22px); } .logo { transition:filter .25s ease,transform .25s var(--ease-out); } .logo:hover { filter:drop-shadow(0 0 14px #ff465544); transform:translateY(-1px); } .logo-image { filter:drop-shadow(0 0 14px #ff465530); } nav.tabs { gap:clamp(1px,.3vw,5px); } nav.tabs .tab { padding-inline:clamp(7px,1vw,16px); font-size:clamp(12px,1.1vw,15px); letter-spacing:clamp(.4px,.08vw,1.2px); } .tab.active { background:linear-gradient(180deg,#ff46550c,#ff46551a); } .tab.active::after { left:12%; right:12%; bottom:3px; height:2px; } .tab:focus-visible,.btn:focus-visible,.filter:focus-visible,.lb-tab:focus-visible,.admin-tab:focus-visible, .open-pack-btn:focus-visible,.guess-option:focus-visible,.wheel-spin-btn:focus-visible, input:focus-visible,select:focus-visible { outline:2px solid #ff9aa2; outline-offset:3px; } .panel.active { animation:valorantPanelIn .36s cubic-bezier(.16,.76,.2,1) both; } @keyframes valorantPanelIn { from{opacity:0;transform:translateY(12px) scale(.995);filter:blur(2px)} to{opacity:1;transform:none;filter:blur(0)} } .section-title { color:#f7f3ed; text-shadow:0 3px 18px #0008; } .section-title::before { width:4px; height:30px; box-shadow:0 0 14px #ff465588; } .sub-title::before { box-shadow:0 0 12px #ffad6244; } .collection-banner { min-height:440px; border-color:#51616c; background:radial-gradient(ellipse at 77% 90%,#e7e6e21b,transparent 43%),radial-gradient(ellipse at 14% 14%,#ff465522,transparent 48%),linear-gradient(115deg,#1b2c38,#0a1219 74%); } .collection-banner::before { opacity:.7; background:linear-gradient(135deg,transparent 0 48%,#f3f1e90a 48.1% 48.25%,transparent 48.35%),repeating-linear-gradient(135deg,transparent 0 76px,#ffffff06 77px 78px); } .banner-copy h1 { max-width:680px; font-size:clamp(46px,6.2vw,84px); } .banner-copy h1 em { color:#ff5968; text-shadow:0 0 32px #ff465577; } .art-orbit { border-color:#ff667755; box-shadow:0 0 0 35px #ff465507,0 0 0 70px #ffffff02,0 0 45px #ff46551a; } .pack-hero { background:linear-gradient(105deg,#172630,#0c151d); border-color:#354b59; } .pack-meter-ring { filter:drop-shadow(0 0 14px #ff465522); } .pack-meter-inner .pm-num { text-shadow:0 0 20px #ff465544; } .open-pack-zone { border-color:#344956; background:radial-gradient(ellipse at 24% 54%,#ff46551a,transparent 38%),radial-gradient(ellipse at 78% 100%,#5ea4c00d,transparent 43%),linear-gradient(115deg,#0f1921,#0a1118); } .display-pack { filter:drop-shadow(0 16px 24px #0009); } .drop-cta p { color:#f4f0e8; text-shadow:0 3px 18px #0008; } .open-pack-btn { border:1px solid #ff929a66; background:linear-gradient(115deg,#f13d50,#bd2b40); box-shadow:0 8px 28px #ff465533,inset 0 1px #ffffff32; } .open-pack-btn:hover { box-shadow:0 12px 38px #ff465555,inset 0 1px #ffffff42; } .global-stats { border-color:#344957; background:radial-gradient(ellipse at 50% 0,#ff465510,transparent 55%),linear-gradient(145deg,#101c25,#0a1117); } .global-stat { border-radius:3px; transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s; } .global-stat:hover { transform:translateY(-4px); border-color:#697c89; box-shadow:0 16px 34px #0005,0 0 22px #ff46550c; } .shop-hero,.bonus-wheel-section,.daily-guess-section,.collection-sets-section { border-color:#3b505d; box-shadow:0 20px 56px #0004,inset 0 1px #ffffff0c; } .shop-hero { background:radial-gradient(ellipse at 87% 30%,#ff465525,transparent 43%),linear-gradient(115deg,#1b2a34,#0b131a); } .collection-stats .stat,.pack-card,.retention-card,.profile-card,.admin-panel { border-radius:3px; } .pack-card { overflow:hidden; border-color:#344653; } .pack-card::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(135deg,#ffffff0b,transparent 40%,#ff46550b); transition:opacity .25s; } .pack-card:hover::before { opacity:1; } .pack-art { border:1px solid #ffffff0a; background:radial-gradient(circle at 50% 45%,#ff465528,transparent 70%),linear-gradient(145deg,#1b2a35,#0c141b); } .cards-grid,.vitrine-pick { gap:clamp(10px,1.4vw,18px); } .game-card,.profile-vitrine-card,.vitrine-slot.filled,.vp-item { border-radius:2px; isolation:isolate; background:linear-gradient(155deg,color-mix(in srgb,var(--gc-tint) 62%,#17232d),#0d151c 68%); box-shadow:inset 0 1px #ffffff12,0 10px 24px #0004; } .game-card::before { content:""; position:absolute; inset:5px; z-index:2; pointer-events:none; border:1px solid color-mix(in srgb,var(--gc-border) 58%,transparent); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); box-shadow:inset 0 0 16px color-mix(in srgb,var(--gc-glow) 12%,transparent); } .game-card:hover { transform:translateY(-5px) rotateX(1deg) scale(1.015); border-color:var(--gc-border); box-shadow:0 18px 32px #0008,0 0 24px color-mix(in srgb,var(--gc-glow) 72%,transparent),inset 0 0 22px color-mix(in srgb,var(--gc-glow) 12%,transparent); } .game-card .gc-art::after,.rv-front .gc-art::after,.vp-item .gc-art::after { background:linear-gradient(180deg,#08101905 8%,#08101905 34%,#08101988 65%,#080e14f5 100%); } .game-card .gc-art::before,.rv-front .gc-art::before,.vp-item .gc-art::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.21; mix-blend-mode:screen; background:linear-gradient(135deg,transparent 0 47%,color-mix(in srgb,var(--gc-border) 40%,transparent) 47.1% 47.25%,transparent 47.4%),repeating-linear-gradient(0deg,transparent 0 27px,#dbe7ef08 28px 29px); } .game-card .gc-top,.rv-front .gc-top { padding:11px 12px 0; } .game-card .gc-cat-ico,.rv-front .gc-cat-ico { display:grid; place-items:center; width:25px; height:25px; border:1px solid color-mix(in srgb,var(--gc-color) 54%,transparent); background:#081019aa; color:var(--gc-color); text-shadow:0 0 12px var(--gc-color); } .game-card .gc-count,.rv-front .gc-count { border:1px solid #ffffff25; color:#fff; backdrop-filter:blur(8px); } .game-card .gc-name,.rv-front .gc-name { text-shadow:0 2px 9px #000; } .game-card .gc-rarity,.rv-front .gc-rarity { border-color:color-mix(in srgb,var(--gc-border) 75%,#ffffff20); background:color-mix(in srgb,var(--gc-border) 15%,#080e14); box-shadow:0 0 13px color-mix(in srgb,var(--gc-glow) 34%,transparent); } .game-card .gc-rarity-bar,.vitrine-slot .gc-rarity-bar,.vp-item .gc-rarity-bar { height:3px; background:linear-gradient(90deg,transparent,var(--gc-border),#fff,var(--gc-border),transparent)!important; box-shadow:0 0 14px var(--gc-glow)!important; } .game-card.rarity-commun { --tier-accent:#b2bdc6; } .game-card.rarity-peu_commun { --tier-accent:#59df9a; } .game-card.rarity-rare { --tier-accent:#67b0ff; } .game-card.rarity-epique { --tier-accent:#bb91ff; } .game-card.rarity-ultra_rare { --tier-accent:#ff74d9; } .game-card.rarity-legendaire { --tier-accent:#ffc36c; } .game-card.rarity-goat { --tier-accent:#ff6677; } .game-card.rarity-ultra_rare::before,.game-card.rarity-legendaire::before,.game-card.rarity-goat::before { border-width:2px; box-shadow:inset 0 0 25px color-mix(in srgb,var(--gc-glow) 26%,transparent),0 0 16px color-mix(in srgb,var(--gc-glow) 55%,transparent); } .game-card.rarity-ultra_rare,.rv-card[data-rarity="ultra_rare"] { box-shadow:0 0 15px color-mix(in srgb,var(--gc-glow,#ff5fd0) 38%,transparent),inset 0 0 24px color-mix(in srgb,var(--gc-glow,#ff5fd0) 12%,transparent); } .game-card.rarity-legendaire { box-shadow:0 0 17px color-mix(in srgb,var(--gc-glow) 50%,transparent),inset 0 0 24px color-mix(in srgb,var(--gc-glow) 13%,transparent); } .game-card.rarity-goat { box-shadow:0 0 22px color-mix(in srgb,var(--gc-glow) 58%,transparent),inset 0 0 28px color-mix(in srgb,var(--gc-glow) 20%,transparent); } .game-card.rarity-ultra_rare,.game-card.rarity-legendaire,.game-card.rarity-goat { border-width:2px; } .vp-item.rarity-ultra_rare { box-shadow:0 0 15px color-mix(in srgb,var(--gc-glow) 42%,transparent),inset 0 0 22px color-mix(in srgb,var(--gc-glow) 15%,transparent); } .vp-item.rarity-legendaire { box-shadow:0 0 18px color-mix(in srgb,var(--gc-glow) 52%,transparent),inset 0 0 24px color-mix(in srgb,var(--gc-glow) 17%,transparent); } .vp-item.rarity-goat { box-shadow:0 0 22px color-mix(in srgb,var(--gc-glow) 62%,transparent),inset 0 0 30px color-mix(in srgb,var(--gc-glow) 22%,transparent); } .game-card.halo { animation:rareBorderPulse 4.2s ease-in-out infinite; } @keyframes rareBorderPulse { 0%,100%{border-color:color-mix(in srgb,var(--gc-border) 82%,#ffffff);box-shadow:0 0 10px color-mix(in srgb,var(--gc-glow) 34%,transparent),inset 0 0 14px color-mix(in srgb,var(--gc-glow) 8%,transparent)}50%{border-color:#fff;box-shadow:0 0 22px color-mix(in srgb,var(--gc-glow) 62%,transparent),inset 0 0 24px color-mix(in srgb,var(--gc-glow) 17%,transparent)} } .rv-card[data-rarity] .rv-back { border-color:var(--rv-rarity-color); box-shadow:inset 0 0 32px color-mix(in srgb,var(--rv-rarity-glow) 28%,transparent),0 0 18px color-mix(in srgb,var(--rv-rarity-glow) 44%,transparent); } .rv-card[data-rarity] .rv-back-reticle { border-color:color-mix(in srgb,var(--rv-rarity-color) 74%,#ffffff); background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rv-rarity-glow) 34%,transparent) 0deg 1deg,transparent 1deg 15deg); box-shadow:0 0 24px color-mix(in srgb,var(--rv-rarity-glow) 45%,transparent),inset 0 0 22px color-mix(in srgb,var(--rv-rarity-glow) 30%,transparent); } .rv-card[data-rarity="goat"] .rv-back { animation:goatBackPulse 2.2s ease-in-out infinite; } @keyframes goatBackPulse { 0%,100%{filter:brightness(.92)}50%{filter:brightness(1.18)} } .game-card.locked,.game-card.locked:hover { box-shadow:inset 0 1px #ffffff08,0 8px 18px #0003; } .game-card:focus-visible,.vitrine-slot:focus-visible,.vp-item:focus-visible { outline:2px solid var(--gc-border,var(--red)); outline-offset:4px; z-index:4; } .vitrine-slot:focus-visible { --gc-border:#ffad62; } .vp-item[aria-pressed="true"] { border-color:#ffc36b; box-shadow:0 0 0 1px #ffc36b55,0 0 20px #ffc36b33; } .vp-item[aria-pressed="true"] .vp-pin-badge { background:linear-gradient(135deg,#ffc36b,#d8873d); color:#1b1712; border-color:#ffe1a2; } .profile-card { position:relative; overflow:hidden; padding:clamp(18px,3vw,30px); background:radial-gradient(ellipse at 0 0,#ff465519,transparent 46%),radial-gradient(ellipse at 100% 100%,#d9914310,transparent 42%),linear-gradient(145deg,#172630,#0b131a 72%); border-color:#435763; box-shadow:0 20px 55px #0005,inset 0 1px #ffffff0d; } .profile-card::before { content:"PLAYER CARD // VC"; position:absolute; top:16px; right:19px; color:#9babb633; font:700 9px var(--font-title); letter-spacing:2px; pointer-events:none; } .profile-head { position:relative; padding:6px 0 18px; border-bottom:1px solid #ffffff13; } .profile-avatar { width:88px; height:88px; border:1px solid #ffffff55; box-shadow:0 0 0 5px #ff465511,0 0 28px #ff465544; background:radial-gradient(circle at 30% 25%,#ff929a,#d32e45 65%,#521d2a); } .profile-name { font-size:clamp(24px,4vw,34px); text-shadow:0 0 24px #ffffff16; } .profile-cosmetics-line { margin-top:14px; } .profile-editor { border-color:#536976; background:linear-gradient(145deg,#172630,#0b131a); box-shadow:inset 0 0 30px #ff465508; } .profile-vitrine { margin-top:22px; border-radius:4px; background:radial-gradient(ellipse at 10% 0,#ff465522,transparent 48%),radial-gradient(ellipse at 92% 100%,#ffc36b15,transparent 40%),linear-gradient(145deg,#172630,#0b1218 78%); box-shadow:0 20px 48px #0004,inset 0 1px #ffffff12; } .profile-vitrine-card { min-width:0; } .profile-vitrine-card .gc-name { font-size:clamp(11px,1.1vw,16px); } .lb-tabs { gap:8px; } .lb-tab { border-radius:2px; transition:transform .2s var(--ease-out),border-color .2s,background .2s,color .2s; } .lb-tab:hover:not(.active) { transform:translateY(-2px); background:#ffffff08; } .lb-podium-place.rank-1 .lb-podium-step { box-shadow:inset 0 1px #fff7,0 0 28px #eac75a17,0 12px 26px #0004; } .lb-row { border-radius:3px; transition:transform .2s var(--ease-out),border-color .2s,background .2s,box-shadow .2s; } .lb-row:hover { transform:translateX(4px); border-color:#5a6d7a; background:linear-gradient(100deg,#192832,#111d27); } .lb-row.me { box-shadow:0 0 20px #ff46551c,inset 2px 0 #ff4655; } .bonus-wheel-frame { filter:drop-shadow(0 20px 34px #0009) drop-shadow(0 0 16px #ff46551a); } .guess-photo-frame { border-radius:4px; } .guess-option { border-radius:2px; } .admin-panel { background:radial-gradient(ellipse at 0 0,#ff9e4912,transparent 50%),linear-gradient(145deg,#1b262d,#10171d); } .modal-box,.auth-box { clip-path:none; border-radius:5px; box-shadow:0 25px 90px #000c,inset 0 1px #ffffff14; } .modal-box { background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--m-tint) 54%,transparent),transparent 56%),linear-gradient(155deg,#192630,#0a1118 78%); } .auth-box { background:radial-gradient(ellipse at 50% 0,#ff46551c,transparent 54%),linear-gradient(155deg,#192630,#0a1118); } .toast { clip-path:none; border-radius:3px; box-shadow:0 12px 32px #0008; backdrop-filter:blur(14px); } .btn,.open-pack-btn,.filter,.tab,.guess-option,.wheel-spin-btn { -webkit-tap-highlight-color:transparent; } .btn { border-radius:2px; } footer { border-top-color:#344653; } @media(max-width:760px) { .wrap { padding-inline:14px; } .tab,.btn,.filter,.lb-tab,.admin-tab { min-height:42px; } .collection-banner { min-height:360px; } .banner-copy { padding:clamp(22px,6vw,36px) clamp(16px,4vw,25px); } .banner-copy h1 { font-size:clamp(38px,9vw,58px); } .game-card:hover,.profile-vitrine-card:hover,.lb-row:hover { transform:none; } .profile-card::before { display:none; } } @media(max-width:480px) { .collection-banner { min-height:330px; } .collection-intro { margin-top:20px; } .pack-hero { align-items:flex-start; } .pack-meter { width:100%; justify-content:space-between; } .pack-meter-ring { width:82px; height:82px; } .pack-meter-inner .pm-num { font-size:31px; } .bonus-pack-pill { margin-left:auto; } .open-pack-btn { max-width:100%; padding:16px 18px; font-size:clamp(14px,4vw,19px); letter-spacing:1.5px; } .profile-vitrine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .modal-box,.auth-box { padding:22px 17px; } } @media(prefers-reduced-motion:reduce) { .panel.active { animation:fadeUp .01ms linear both; } .twitch-live-track { left:50%; width:auto; transform:translateX(-50%); animation:none; } .twitch-live-link::before,.twitch-live-label i,.twitch-promo-kicker i,.twitch-live-promo::before { animation:none; } .twitch-live-promo::before { display:none; } .rv-card[data-rarity="goat"] .rv-back { animation:none!important; } .global-stat:hover,.lb-row:hover { transform:none; } } /* Final interaction polish: sharper states, a softer spring and clearer focus. */ :root { --ease-interaction:cubic-bezier(.2,.8,.2,1); } :is(.btn,.open-pack-btn,.tab,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn,.banner-link,.ud-item) { -webkit-tap-highlight-color:transparent; transition:transform .24s var(--ease-interaction),color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .24s ease,filter .22s ease; } :is(.btn,.open-pack-btn,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn,.banner-link):not(:disabled) { position:relative; } :is(.btn,.open-pack-btn,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn):not(:disabled):active { transform:translateY(1px) scale(.975); transition-duration:.08s; } :is(.btn,.open-pack-btn,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn):not(:disabled):focus-visible, .tab:focus-visible,.banner-link:focus-visible,.ud-item:focus-visible { outline:2px solid #ffd0d3; outline-offset:3px; box-shadow:0 0 0 5px #ff465522,0 0 22px #ff465555; z-index:3; } .btn:not(:disabled) { border-color:#ff7782; background-image:linear-gradient(112deg,#ff5968 0%,#e83e50 46%,#c82e42 100%); box-shadow:0 5px 16px #ff46551d,inset 0 1px #ffffff42,inset 0 -1px #801f3025; } .btn:not(:disabled):hover { transform:translateY(-2px); filter:brightness(1.1) saturate(1.06); box-shadow:0 9px 24px #ff46553a,0 0 0 1px #ff9aa34f,inset 0 1px #ffffff5c; } .btn.ghost:not(:disabled) { border-color:#536875; background:linear-gradient(135deg,#ffffff08,#ffffff02); box-shadow:inset 0 1px #ffffff10; } .btn.ghost:not(:disabled):hover { border-color:#ff6877; background:linear-gradient(110deg,#ff46551b,#ff465506); color:#fff; box-shadow:0 7px 20px #0003,0 0 18px #ff465516,inset 0 1px #ffffff14; } .btn:disabled,.open-pack-btn:disabled { opacity:.56; filter:saturate(.42); } .open-pack-btn:not(:disabled) { border-color:#ffabb1a6; background-size:180% 100%; background-position:0% 50%; box-shadow:0 9px 28px #ff46553a,0 0 0 1px #ff46551a,inset 0 1px #ffffff52,inset 0 -2px #7b182a42; transition:transform .32s var(--ease-interaction),background-position .6s ease,filter .25s,box-shadow .3s; } .open-pack-btn:not(:disabled):hover { transform:translateY(-4px) scale(1.015); background-position:100% 50%; filter:brightness(1.1) saturate(1.08); box-shadow:0 16px 42px #ff465557,0 0 34px #ff46552e,inset 0 1px #ffffff65; } .open-pack-btn:not(:disabled):active { transform:translateY(-1px) scale(.985); } .tab { border-radius:3px 3px 0 0; } .tab:hover:not(.active) { background:linear-gradient(180deg,#ffffff09,transparent); } .tab.active { background:linear-gradient(180deg,#ff46551a,#ff465506); box-shadow:inset 0 1px #ff9aa326; } .tab.active::after { height:3px; border-radius:3px 3px 0 0; } .filter,.lb-tab,.admin-tab { border-radius:3px; box-shadow:inset 0 1px #ffffff08; } .filter:hover:not(.active),.lb-tab:hover:not(.active),.admin-tab:hover:not(.active) { transform:translateY(-2px); border-color:#82929d; background-color:#ffffff0a; color:#fff; box-shadow:0 7px 18px #0003,inset 0 1px #ffffff14; } .filter.active,.lb-tab.active,.admin-tab.active { border-color:#ff7782; background:linear-gradient(120deg,#ff465526,#ff46550d); color:#fff; box-shadow:0 0 0 1px #ff46551a,0 5px 17px #ff465512,inset 0 1px #ffffff18; } .guess-option:not(:disabled),.wheel-spin-btn:not(:disabled) { box-shadow:0 5px 16px #0003,inset 0 1px #ffffff16; } .guess-option:not(:disabled):hover,.wheel-spin-btn:not(:disabled):hover { transform:translateY(-3px); border-color:#ff8490; box-shadow:0 11px 24px #0005,0 0 20px #ff465522,inset 0 1px #ffffff25; } .banner-link { border-bottom-color:#627783; } .banner-link:hover { transform:translateX(3px); text-shadow:0 0 18px #ff8e98a6; } .ud-item { border-radius:2px; } .ud-item:hover { transform:translateX(3px); background:linear-gradient(90deg,#ff46551a,transparent); } .code-input:focus,.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:#ff7782; box-shadow:0 0 0 3px #ff46551d,0 0 18px #ff465511; } .collection-set-card,.retention-card,.pack-card,.profile-card,.shop-hero,.bonus-wheel-section,.daily-guess-section { box-shadow:inset 0 1px #ffffff0d,0 14px 34px #0003; } .collection-set-card:hover,.retention-card:hover { box-shadow:inset 0 1px #ffffff14,0 18px 38px #0005,0 0 22px #ff465511; } @media(max-width:760px) { :is(.btn,.open-pack-btn,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn):not(:disabled):hover { transform:none; } .tab { border-radius:3px; } } @media(prefers-reduced-motion:reduce) { :is(.btn,.open-pack-btn,.tab,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn,.banner-link,.ud-item) { transition:none!important; } :is(.btn,.open-pack-btn,.filter,.lb-tab,.admin-tab,.guess-option,.wheel-spin-btn):not(:disabled):hover, .banner-link:hover,.ud-item:hover { transform:none!important; } } /* High-tier cards: animated prismatic foil, rarity halos and a full-size inspection view. */ .game-card.rarity-legendaire:not(.locked) .gc-aura, .game-card.rarity-goat:not(.locked) .gc-aura, .vp-item.rarity-legendaire .gc-aura, .vp-item.rarity-goat .gc-aura { inset:-32%; z-index:1; opacity:.64; mix-blend-mode:screen; filter:saturate(1.4); } .game-card.rarity-legendaire:not(.locked) .gc-aura, .vp-item.rarity-legendaire .gc-aura { background:conic-gradient(from 0deg,transparent 0 24%,#ffd47748 31%,transparent 39% 55%,#fff1bd38 63%,transparent 72% 100%); animation:legendaryAuraTurn 7s linear infinite,legendaryAuraBreathe 2.8s ease-in-out infinite; } .game-card.rarity-goat:not(.locked) .gc-aura, .vp-item.rarity-goat .gc-aura { background:conic-gradient(from 0deg,transparent 0 12%,#ff4655a8 20%,#ffc56b88 26%,transparent 34% 48%,#fff1ca78 57%,#ff46557a 64%,transparent 74% 100%); animation:goatAuraTurn 4s linear infinite,goatAuraBreathe 1.8s ease-in-out infinite; } .game-card.rarity-legendaire:not(.locked)::after, .game-card.rarity-goat:not(.locked)::after { content:""; position:absolute; inset:-60%; z-index:2; pointer-events:none; mix-blend-mode:screen; } .game-card.rarity-legendaire:not(.locked)::after { background:linear-gradient(112deg,transparent 40%,#fff2c022 47%,#fff4cd91 50%,#ffc96b45 53%,transparent 61%); animation:legendaryFoilSweep 4.8s cubic-bezier(.45,0,.25,1) infinite; } .game-card.rarity-goat:not(.locked)::after { background:conic-gradient(from 30deg at 50% 50%,transparent 0 18%,#ff465526 23%,transparent 31% 44%,#fff2d765 50%,#ffb45d42 55%,transparent 64% 78%,#ff465538 86%,transparent 94%); animation:goatPrismTurn 5.4s cubic-bezier(.42,0,.18,1) infinite; } .game-card.rarity-legendaire.halo:not(.locked) { animation:legendaryCardPulse 3.1s ease-in-out infinite; } .game-card.rarity-goat.halo:not(.locked) { animation:goatCardPulse 2s ease-in-out infinite; } .game-card.rarity-goat.goat-card:not(.locked)::before { animation:sparkle 1.35s linear infinite,goatFrameFlash 2.1s ease-in-out infinite; } @keyframes legendaryAuraTurn { to { transform:rotate(360deg); } } @keyframes legendaryAuraBreathe { 50% { opacity:.82; } } @keyframes goatAuraTurn { to { transform:rotate(-360deg); } } @keyframes goatAuraBreathe { 50% { opacity:.92; filter:saturate(1.8) brightness(1.22); } } @keyframes legendaryFoilSweep { 0%,18% { transform:translateX(-55%) rotate(10deg); opacity:0; } 38% { opacity:.9; } 72%,100% { transform:translateX(55%) rotate(10deg); opacity:0; } } @keyframes goatPrismTurn { 0% { transform:rotate(0) scale(.82); opacity:.18; } 50% { transform:rotate(180deg) scale(1.08); opacity:.72; } 100% { transform:rotate(360deg) scale(.82); opacity:.18; } } @keyframes legendaryCardPulse { 0%,100% { box-shadow:0 0 16px color-mix(in srgb,var(--gc-glow) 45%,transparent),inset 0 0 22px color-mix(in srgb,var(--gc-glow) 12%,transparent); } 50% { box-shadow:0 0 28px color-mix(in srgb,var(--gc-glow) 75%,transparent),0 0 58px color-mix(in srgb,var(--gc-glow) 28%,transparent),inset 0 0 32px color-mix(in srgb,var(--gc-glow) 22%,transparent); } } @keyframes goatCardPulse { 0%,100% { box-shadow:0 0 22px #ff46556b,0 0 38px #ff465526,inset 0 0 28px #ff46552b; } 50% { box-shadow:0 0 34px #ff4655c9,0 0 72px #ff46556b,0 0 110px #ffb34736,inset 0 0 44px #ffc56b55; } } @keyframes goatFrameFlash { 0%,100% { border-color:#ff4655b8; box-shadow:inset 0 0 24px #ff46554d,0 0 18px #ff465580; } 50% { border-color:#fff0c8; box-shadow:inset 0 0 32px #ffbf5b78,0 0 28px #ffbf5ba8; } } .profile-best-item { cursor:pointer; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; } .profile-best-item:hover,.profile-best-item:focus-visible { transform:translateY(-3px); border-color:var(--best-color); box-shadow:inset 0 0 20px color-mix(in srgb,var(--best-glow) 24%,transparent),0 0 20px color-mix(in srgb,var(--best-glow) 28%,transparent); outline:none; } .profile-best-item:focus-visible { outline:2px solid var(--best-color); outline-offset:3px; } .profile-best-hint { display:block; margin-top:10px; color:var(--muted); font-size:11px; } .modal-box { width:min(100%,760px); max-height:calc(100dvh - 32px); overflow:auto; border-color:var(--m-border); box-shadow:0 25px 90px #000c,0 0 48px color-mix(in srgb,var(--m-glow) 32%,transparent),inset 0 1px #ffffff14; } .modal-inspection { display:grid; grid-template-columns:minmax(148px,.72fr) minmax(0,1.28fr); align-items:center; gap:clamp(18px,4vw,38px); } .modal-card-preview { width:min(100%,210px); margin:auto; aspect-ratio:5/7; cursor:default; box-shadow:0 15px 40px #0008,0 0 32px color-mix(in srgb,var(--gc-glow) 48%,transparent); } .modal-card-preview .gc-img { animation:inspectArtRise .8s cubic-bezier(.18,.8,.25,1) both; } .modal-card-preview .gc-bottom { padding:0 13px 15px; } .modal-card-preview .gc-name { font-size:clamp(13px,2vw,18px); } .modal-inspection-info { min-width:0; animation:inspectInfoIn .52s cubic-bezier(.18,.8,.25,1) both; } .modal-kicker { margin-bottom:10px; color:var(--m-border); font:800 9px var(--font-title); letter-spacing:2px; } .modal-ownership { margin-top:15px; font-size:12px; } .modal-close { z-index:5; } @keyframes inspectArtRise { from { transform:scale(1.08); filter:brightness(1.5) saturate(1.3); } to { transform:scale(1); filter:brightness(1) saturate(1); } } @keyframes inspectInfoIn { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } } @media(max-width:600px) { .modal-box { padding:25px 18px 20px; } .modal-inspection { grid-template-columns:minmax(0,1fr); gap:17px; } .modal-card-preview { width:clamp(142px,42vw,182px); } .modal-inspection-info { text-align:center; } .modal-rarity { margin-top:12px; } .modal-actions { justify-content:center; } } @media(prefers-reduced-motion:reduce) { /* Ces effets de rareté sont des éléments de présentation demandés : ils restent actifs même si le système réduit les animations. */ .game-card.rarity-legendaire:not(.locked) .gc-aura,.vp-item.rarity-legendaire .gc-aura { animation:legendaryAuraTurn 7s linear infinite,legendaryAuraBreathe 2.8s ease-in-out infinite!important; } .game-card.rarity-goat:not(.locked) .gc-aura,.vp-item.rarity-goat .gc-aura { animation:goatAuraTurn 4s linear infinite,goatAuraBreathe 1.8s ease-in-out infinite!important; } .game-card.rarity-legendaire:not(.locked)::after { animation:legendaryFoilSweep 4.8s cubic-bezier(.45,0,.25,1) infinite!important; } .game-card.rarity-goat:not(.locked)::after { animation:goatPrismTurn 5.4s cubic-bezier(.42,0,.18,1) infinite!important; } .game-card.rarity-legendaire.halo:not(.locked) { animation:legendaryCardPulse 3.1s ease-in-out infinite!important; } .game-card.rarity-goat.halo:not(.locked) { animation:goatCardPulse 2s ease-in-out infinite!important; } .game-card.rarity-goat.goat-card:not(.locked)::before { animation:sparkle 1.35s linear infinite,goatFrameFlash 2.1s ease-in-out infinite!important; } .modal-card-preview .gc-img { animation:inspectArtRise .8s cubic-bezier(.18,.8,.25,1) both!important; } .modal-inspection-info { animation:inspectInfoIn .52s cubic-bezier(.18,.8,.25,1) both!important; } } /* Cadre néon des cartes premium, visible dans la collection et les vitrines. */ .game-card:not(.locked).rarity-ultra_rare::before, .game-card:not(.locked).rarity-legendaire::before, .game-card:not(.locked).rarity-goat::before, .vp-item.rarity-ultra_rare::before, .vp-item.rarity-legendaire::before, .vp-item.rarity-goat::before { content:""; position:absolute; z-index:2; inset:5px; pointer-events:none; border:2px solid color-mix(in srgb,var(--gc-border) 82%,#fff); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); box-shadow:inset 0 0 18px color-mix(in srgb,var(--gc-glow) 28%,transparent),0 0 12px color-mix(in srgb,var(--gc-glow) 72%,transparent); opacity:.96; } .game-card:not(.locked).rarity-ultra_rare::before, .vp-item.rarity-ultra_rare::before { animation:ultraRareFramePulse 2.8s ease-in-out infinite; } .game-card:not(.locked).rarity-legendaire::before, .vp-item.rarity-legendaire::before { animation:legendaryFramePulse 2.4s ease-in-out infinite; } .game-card:not(.locked).rarity-goat::before, .vp-item.rarity-goat::before { animation:goatFrameFlash 1.9s ease-in-out infinite; } .game-card:not(.locked).rarity-ultra_rare, .vitrine-slot.filled.rarity-ultra_rare, .profile-vitrine-card.rarity-ultra_rare, .vp-item.rarity-ultra_rare { box-shadow:0 0 18px color-mix(in srgb,var(--gc-glow) 52%,transparent),inset 0 0 28px color-mix(in srgb,var(--gc-glow) 17%,transparent); } .vitrine-slot.filled.rarity-legendaire, .profile-vitrine-card.rarity-legendaire, .vp-item.rarity-legendaire { box-shadow:0 0 22px color-mix(in srgb,var(--gc-glow) 62%,transparent),inset 0 0 30px color-mix(in srgb,var(--gc-glow) 19%,transparent); } .vitrine-slot.filled.rarity-goat, .profile-vitrine-card.rarity-goat, .vp-item.rarity-goat { box-shadow:0 0 28px color-mix(in srgb,var(--gc-glow) 72%,transparent),inset 0 0 34px color-mix(in srgb,var(--gc-glow) 23%,transparent); } @keyframes ultraRareFramePulse { 0%,100% { border-color:color-mix(in srgb,var(--gc-border) 80%,#fff); box-shadow:inset 0 0 16px color-mix(in srgb,var(--gc-glow) 24%,transparent),0 0 10px color-mix(in srgb,var(--gc-glow) 64%,transparent); } 50% { border-color:#fff; box-shadow:inset 0 0 24px color-mix(in srgb,var(--gc-glow) 42%,transparent),0 0 22px color-mix(in srgb,var(--gc-glow) 92%,transparent),0 0 38px color-mix(in srgb,var(--gc-glow) 34%,transparent); } } @keyframes legendaryFramePulse { 0%,100% { border-color:color-mix(in srgb,var(--gc-border) 78%,#fff); box-shadow:inset 0 0 20px color-mix(in srgb,var(--gc-glow) 34%,transparent),0 0 15px color-mix(in srgb,var(--gc-glow) 68%,transparent); } 50% { border-color:#fff4d0; box-shadow:inset 0 0 30px color-mix(in srgb,var(--gc-glow) 48%,transparent),0 0 28px color-mix(in srgb,var(--gc-glow) 96%,transparent),0 0 48px color-mix(in srgb,var(--gc-glow) 38%,transparent); } } /* Inspection libre : la carte reste seule à l’écran et peut être tournée en la faisant glisser. */ #card-modal { perspective:1400px; } #card-modal .modal-box { width:fit-content; max-width:100%; max-height:calc(100dvh - 36px); overflow:visible; padding:0; background:transparent; border:0; box-shadow:none; clip-path:none; } #card-modal .modal-inspection { display:flex; justify-content:center; align-items:center; gap:0; } #card-modal .modal-card-preview { width:min(74vw,340px); max-height:calc(100dvh - 48px); margin:0; aspect-ratio:5/7; cursor:grab; touch-action:none; user-select:none; transform:perspective(1200px) rotateX(0deg) rotateY(0deg); transform-style:preserve-3d; will-change:transform; } #card-modal .modal-card-preview.is-dragging { cursor:grabbing; } #card-modal .modal-card-preview .gc-img { -webkit-user-drag:none; } .modal-card-preview.inspect-holo { --inspect-light-x:50%; --inspect-light-y:32%; --inspect-light-angle:115deg; --inspect-light-power:.26; } #card-modal .modal-card-preview .inspect-foil { position:absolute; z-index:8; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; opacity:var(--inspect-light-power,.26); mix-blend-mode:screen; background: radial-gradient(ellipse at var(--inspect-light-x,50%) var(--inspect-light-y,32%),#fff9 0%,color-mix(in srgb,var(--gc-border) 62%,#fff) 5%,transparent 36%), linear-gradient(var(--inspect-light-angle,115deg),transparent 20%,#ffffff00 33%,#ffffff88 46%,color-mix(in srgb,var(--gc-border) 38%,transparent) 51%,#ffffff00 65%,transparent 78%); filter:saturate(1.2); transition:opacity .35s ease; } #card-modal .modal-card-preview.inspect-holo.is-dragging .inspect-foil { opacity:var(--inspect-light-power,.75); transition:opacity .08s linear; } #card-modal .modal-card-preview.inspect-holo.is-dragging { filter:drop-shadow(0 0 19px color-mix(in srgb,var(--gc-glow) 72%,transparent)); } #card-modal .modal-close { top:-14px; right:-14px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--m-border); border-radius:50%; color:#fff; background:#111b27; box-shadow:0 0 22px color-mix(in srgb,var(--m-glow) 55%,transparent); font-size:20px; } #card-modal .modal-close:hover { color:#fff; background:var(--m-border); } @media(max-width:600px) { #card-modal { padding:24px; } #card-modal .modal-box { padding:0; } #card-modal .modal-card-preview { width:min(78vw,300px); max-height:calc(100dvh - 64px); } } /* Le mode rapide garde les effets tout en ramenant chaque révélation sous la seconde. */ #pack-overlay.quick-pack-active .sealed-pack.spin-up { animation-duration:.42s!important; } #pack-overlay.quick-pack-active .sealed-pack.spin-brake { animation-duration:.4s!important; } #pack-overlay.quick-pack-active .sealed-pack.unsealing { animation-duration:.85s!important; } #pack-overlay.quick-pack-active .sealed-pack.unsealing::before, #pack-overlay.quick-pack-active .sealed-pack.unsealing::after { animation-duration:.68s!important; } #pack-overlay.quick-pack-active .sealed-pack.unsealing .seal-top { animation-duration:.62s!important; } #pack-overlay.quick-pack-active .rv-card.flipped .rv-card-inner { animation-duration:.34s!important; transition-duration:.34s!important; } /* Appareils peu puissants ou affichant moins de 42 images/s : on garde les animations utiles, mais on coupe les effets décoratifs continus et les filtres coûteux. */ html.performance-lite body::after { animation:none!important; inset:0; } html.performance-lite #bg-particles { display:none; } html.performance-lite header, html.performance-lite .overlay, html.performance-lite .modal, html.performance-lite .toast { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } html.performance-lite :is(.logo .lg-main span,.pack-pill.full,.progress-bar > span,.live-pulse,.hourly-best-pulse,.wheel-label,.lb-podium-medal,.profile-vitrine-empty-icon) { animation:none!important; } html.performance-lite :is(.display-pack,.sealed-pack:not(.spin-up):not(.spin-brake):not(.unsealing)) { animation:none!important; } html.performance-lite .game-card { transform-style:flat!important; will-change:auto!important; transition:transform .14s ease,border-color .14s ease!important; } html.performance-lite .game-card:hover, html.performance-lite .game-card:not(.locked):hover { transform:none!important; box-shadow:0 8px 16px #0005!important; } html.performance-lite .cards-grid { perspective:none; } html.performance-lite .game-card.stagger-in, html.performance-lite .panel.active, html.performance-lite .panel.active :is(.section-title,.sub-title,.reveal-head,.eyebrow,.section-sub), html.performance-lite .lb-row, html.performance-lite .lb-podium-place { animation:none!important; } html.performance-lite .game-card.shine::after, html.performance-lite .game-card:not(.locked)::after, html.performance-lite .game-card.goat-card::before, html.performance-lite .gc-aura, html.performance-lite .game-card.rarity-legendaire:not(.locked) .gc-aura, html.performance-lite .game-card.rarity-goat:not(.locked) .gc-aura, html.performance-lite .game-card.rarity-legendaire:not(.locked)::after, html.performance-lite .game-card.rarity-goat:not(.locked)::after { animation:none!important; } html.performance-lite .game-card.halo, html.performance-lite .game-card.rarity-legendaire.halo:not(.locked), html.performance-lite .game-card.rarity-goat.halo:not(.locked) { animation:none!important; box-shadow:0 0 8px color-mix(in srgb,var(--gc-glow) 45%,transparent); } html.performance-lite .rv-card:not(.flipped), html.performance-lite .rv-back-logo, html.performance-lite .bonus-wheel-frame, html.performance-lite .wheel-pointer { filter:none!important; } html.performance-lite .wheel-spinning.bonus-wheel-frame, html.performance-lite .wheel-spinning.bonus-wheel-frame::after, html.performance-lite .wheel-spinning .bonus-wheel-hub { animation:none!important; } html.performance-lite :is(.tab,.btn,.filter,.lb-tab,.admin-tab,.game-card,.pack-card) { transition-duration:.14s!important; } /* Le mode pack rapide conserve le retournement, en raccourcissant sa durée. */ #pack-overlay.quick-pack-active .rv-card.flipped .rv-card-inner { animation-duration:.34s!important; transition-duration:.34s!important; } /* Carte VCT : finition commune, avec une teinte et un cadre propres à chaque rareté. */ .game-card:not(.locked) { isolation:isolate; border-color:color-mix(in srgb,var(--gc-border) 72%,#d9e3f0 8%); background:linear-gradient(154deg,color-mix(in srgb,var(--gc-tint) 82%,#111a25),#0a1017 72%); box-shadow:0 9px 22px #0007,inset 0 1px #ffffff12,inset 0 -24px 36px #0004; } .game-card:not(.locked)::before { inset:5px; border-color:color-mix(in srgb,var(--gc-border) 68%,#f7f8ff 8%); box-shadow:inset 0 0 18px color-mix(in srgb,var(--gc-glow) 17%,transparent),0 0 7px color-mix(in srgb,var(--gc-glow) 22%,transparent); } .game-card:not(.locked) .gc-art { background:radial-gradient(ellipse at 50% 34%,color-mix(in srgb,var(--gc-color) 25%,transparent),transparent 64%),linear-gradient(145deg,color-mix(in srgb,var(--gc-tint) 76%,#18212c),#0b1118 78%); } .game-card:not(.locked) .gc-art::before { opacity:.28; background:linear-gradient(135deg,transparent 0 47%,color-mix(in srgb,var(--gc-border) 45%,transparent) 47.1% 47.28%,transparent 47.4%),repeating-linear-gradient(0deg,transparent 0 31px,#dbe7ef0a 32px 33px),linear-gradient(115deg,transparent 19%,#ffffff0b 19.2%,transparent 19.7% 75%,color-mix(in srgb,var(--gc-color) 10%,transparent) 75.3%,transparent 75.8%); } .game-card:not(.locked) .gc-img { filter:none; transition:transform .45s cubic-bezier(.18,.75,.25,1); } .game-card:not(.locked):hover .gc-img { transform:scale(1.045); } .game-card:not(.locked) .gc-bottom { padding:15px 13px 13px; background:linear-gradient(180deg,transparent,#080d13b5 18%,#080d13ed 100%); } .game-card:not(.locked) .gc-name { letter-spacing:.055em; text-shadow:0 2px 5px #000,0 0 18px color-mix(in srgb,var(--gc-glow) 16%,transparent); } .game-card:not(.locked) .gc-cat { color:#d9e1ea; opacity:.78; } .game-card:not(.locked) .gc-rarity { padding:4px 9px; border-color:color-mix(in srgb,var(--gc-border) 68%,#ffffff20); background:linear-gradient(100deg,color-mix(in srgb,var(--gc-border) 17%,#0a1018),#0a1018e8); text-shadow:0 0 12px color-mix(in srgb,var(--gc-glow) 54%,transparent); } .game-card:not(.locked) .gc-count { border:1px solid color-mix(in srgb,var(--gc-border) 48%,transparent); background:#091019d9; box-shadow:0 3px 10px #0006; } .game-card.rarity-ultra_rare:not(.locked)::before, .game-card.rarity-legendaire:not(.locked)::before, .game-card.rarity-goat:not(.locked)::before { border-width:2px; box-shadow:inset 0 0 22px color-mix(in srgb,var(--gc-glow) 24%,transparent),0 0 13px color-mix(in srgb,var(--gc-glow) 56%,transparent); } .gc-art.image-fallback { background:radial-gradient(ellipse at 50% 37%,color-mix(in srgb,var(--gc-color) 33%,transparent),transparent 61%),linear-gradient(145deg,#1a2836,#080d13 82%); } .gc-art.image-fallback .gc-img { opacity:.92; } @media(max-width:600px) { .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .game-card:not(.locked) .gc-bottom { padding:12px 10px 10px; } .game-card:not(.locked) .gc-name { font-size:clamp(11px,3.2vw,15px); letter-spacing:.035em; } .game-card:not(.locked) .gc-rarity { font-size:9px; letter-spacing:1.2px; } } /* Relief prismatique des tirages premium : biseau, profondeur et foil directionnel. */ .game-card.rarity-ultra_rare:not(.locked), .game-card.rarity-legendaire:not(.locked), .game-card.rarity-goat:not(.locked), .vp-item.rarity-ultra_rare, .vp-item.rarity-legendaire, .vp-item.rarity-goat { border-width:2px; transform-style:preserve-3d; box-shadow:inset 0 1px #ffffff3a,inset 0 -5px color-mix(in srgb,var(--gc-border) 34%,#070b11),0 2px 0 color-mix(in srgb,var(--gc-border) 64%,#080c12),0 8px 0 color-mix(in srgb,var(--gc-border) 21%,#080c12),0 16px 30px #0009,0 0 25px color-mix(in srgb,var(--gc-glow) 42%,transparent); } .game-card.rarity-ultra_rare:not(.locked)::before, .game-card.rarity-legendaire:not(.locked)::before, .game-card.rarity-goat:not(.locked)::before, .vp-item.rarity-ultra_rare::before, .vp-item.rarity-legendaire::before, .vp-item.rarity-goat::before { inset:6px; border-width:2px; box-shadow:inset 0 1px #ffffff44,inset 0 0 24px color-mix(in srgb,var(--gc-glow) 34%,transparent),0 0 5px #ffffff55,0 0 19px color-mix(in srgb,var(--gc-glow) 72%,transparent); } .game-card.rarity-ultra_rare:not(.locked):hover, .game-card.rarity-legendaire:not(.locked):hover, .game-card.rarity-goat:not(.locked):hover { transform:translateY(-8px) rotateX(4deg) scale(1.025); box-shadow:inset 0 1px #ffffff67,inset 0 -5px color-mix(in srgb,var(--gc-border) 45%,#070b11),0 2px 0 color-mix(in srgb,var(--gc-border) 80%,#080c12),0 10px 0 color-mix(in srgb,var(--gc-border) 32%,#080c12),0 24px 38px #000b,0 0 38px color-mix(in srgb,var(--gc-glow) 76%,transparent); } .game-card.rarity-ultra_rare:not(.locked) .gc-rarity, .game-card.rarity-legendaire:not(.locked) .gc-rarity, .game-card.rarity-goat:not(.locked) .gc-rarity { border-width:1px; box-shadow:inset 0 1px #ffffff35,inset 0 -2px color-mix(in srgb,var(--gc-border) 25%,#070b11),0 0 15px color-mix(in srgb,var(--gc-glow) 42%,transparent); } .rv-card[data-rarity="ultra_rare"] .rv-front, .rv-card[data-rarity="legendaire"] .rv-front, .rv-card[data-rarity="goat"] .rv-front { box-shadow:inset 0 1px #ffffff55,inset 0 -6px color-mix(in srgb,var(--rv-rarity-color) 30%,#080d13),0 3px 0 color-mix(in srgb,var(--rv-rarity-color) 55%,#080d13),0 15px 36px #000b,0 0 35px color-mix(in srgb,var(--rv-rarity-glow) 68%,transparent); } .rv-card[data-rarity="ultra_rare"] .rv-front::before, .rv-card[data-rarity="legendaire"] .rv-front::before, .rv-card[data-rarity="goat"] .rv-front::before { content:""; position:absolute; z-index:6; inset:7px; pointer-events:none; border:2px solid color-mix(in srgb,var(--rv-rarity-color) 82%,#fff); box-shadow:inset 0 1px #ffffff55,inset 0 0 25px color-mix(in srgb,var(--rv-rarity-glow) 36%,transparent),0 0 15px color-mix(in srgb,var(--rv-rarity-glow) 66%,transparent); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); } html.performance-lite .game-card.rarity-ultra_rare:not(.locked)::before, html.performance-lite .game-card.rarity-legendaire:not(.locked)::before, html.performance-lite .game-card.rarity-goat:not(.locked)::before, html.performance-lite .vp-item.rarity-ultra_rare::before, html.performance-lite .vp-item.rarity-legendaire::before, html.performance-lite .vp-item.rarity-goat::before { animation:none!important; } html.performance-lite .game-card.rarity-ultra_rare:not(.locked):hover, html.performance-lite .game-card.rarity-legendaire:not(.locked):hover, html.performance-lite .game-card.rarity-goat:not(.locked):hover { transform:none!important; }