*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0505;--accent:#ff3b3b;--accent2:#ef4444}
html,body{height:100%;background:var(--bg);color:#fff;font-family:Inter,sans-serif;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* background layers - original */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse 800px 600px at 50% 20%, rgba(120,20,20,0.22), transparent 60%), linear-gradient(180deg,#120707 0%, #070404 40%, #040404 100%)}
.bg-dots{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);background-size:32px 32px;opacity:0.5}
.bg-glow{position:absolute;left:50%;top:18%;width:700px;height:450px;transform:translateX(-50%);background:radial-gradient(ellipse at center, rgba(255,40,40,0.13) 0%, transparent 70%);filter:blur(22px)}
.bg-center-silhouette{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:620px;height:760px;background:url("FondWeb.png") center/contain no-repeat;opacity:0.13;pointer-events:none;filter:brightness(0.85) contrast(1.15) sepia(0.08) hue-rotate(-8deg) saturate(1.15)}
.bg-center-silhouette::after{content:"";position:absolute;inset:-40px;background:radial-gradient(ellipse 700px 600px at 50% 35%, transparent 45%, #060404 78%), linear-gradient(180deg, rgba(10,5,5,0.12), rgba(6,4,4,0.5))}
.bg-top-line{position:absolute;top:13%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,60,60,0.12) 20%,rgba(255,60,60,0.12) 80%,transparent)}

/* container */
.container{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px}
.page{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:780px;animation:fadeIn 0.4s ease}
.page.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* home */
.home-inner{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.reveal{opacity:0;transform:translateY(18px);animation:reveal 0.7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

.logo-icon{margin-bottom:28px;filter:drop-shadow(0 0 12px rgba(255,40,40,0.65))}
.title{font-family:Inter,sans-serif;font-size:84px;font-weight:900;letter-spacing:-3px;line-height:1;color:#fff;text-shadow:0 0 30px rgba(255,40,40,0.35),0 0 60px rgba(255,0,0,0.2);margin-bottom:6px}
@media(max-width:600px){.title{font-size:56px}}
.subtitle-wrap{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.sub-line{width:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,60,60,0.6))}
.subtitle{font-size:10px;letter-spacing:4px;font-weight:600;color:#ff6b6b;opacity:0.9}
.badge-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(120,20,20,0.22);border:1px solid rgba(255,60,60,0.4);color:#ff6b6b;font-size:9px;letter-spacing:2px;font-weight:700;padding:7px 16px;border-radius:999px;box-shadow:0 0 16px rgba(255,40,40,0.18)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 6px #ff3b3b;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.versions{font-family:JetBrains Mono,monospace;font-size:9px;color:rgba(255,255,255,0.45)}
.versions .v-val{color:#ffb3b3}
.versions .v-val2{color:#ff6b6b}
.v-label{color:rgba(255,255,255,0.25)}

/* ===== BOUTONS - View Offsets moins IA mais même police ===== */
.actions{display:flex;gap:12px;margin-bottom:18px}
.btn{border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:12px 22px;border-radius:12px;transition:all 0.15s ease;font-family:Inter,sans-serif}
.btn-primary{background:#ff3b3b;color:#fff;border:1px solid #ff3b3b;box-shadow:none}
.btn-primary:hover{background:#e53131;border-color:#e53131;transform:none;box-shadow:none}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.75);border:1px solid rgba(255,60,60,0.12);backdrop-filter:blur(8px)}
.btn-secondary:hover{background:rgba(255,40,40,0.08);transform:none}
.btn-kicker{font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:1px;opacity:0.75;font-weight:700}
.btn-arrow{font-weight:700}
.btn-count{font-family:JetBrains Mono,monospace;font-size:10px;opacity:0.4;letter-spacing:0.5px}

.discord-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(30,10,10,0.55);border:1px solid rgba(255,60,60,0.15);backdrop-filter:blur(10px);padding:7px 14px;border-radius:999px;font-size:12px;color:#ff8f8f;cursor:pointer;transition:all 0.2s}
.discord-pill:hover{background:rgba(255,40,40,0.12);border-color:rgba(255,60,60,0.28);transform:translateY(-1px);box-shadow:0 4px 18px rgba(255,40,40,0.18)}
.discord-link{display:flex;align-items:center;gap:6px;color:#ff8f8f;font-weight:500}
.sep{width:1px;height:16px;background:rgba(255,255,255,0.08)}
.online{display:flex;align-items:center;gap:5px;font-size:11px;color:#fff;font-weight:600}
.dot-green{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}
.muted{color:rgba(255,255,255,0.35);font-weight:400}

/* offsets / games page - ORIGINAL STYLE RESTAURÉ */
.page-header{width:100%;max-width:680px;display:flex;align-items:center;gap:12px;margin-bottom:28px;text-align:left;align-self:center}
.back-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,40,40,0.06);border:1px solid rgba(255,60,60,0.15);color:#ff6b6b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s}
.back-btn:hover{background:rgba(255,40,40,0.12)}
.page-header h2{font-size:20px;font-weight:800;letter-spacing:-0.5px}
.page-header p{font-size:12px;color:rgba(255,255,255,0.4);margin-top:2px}
.game-badge{margin-left:auto;font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:1px;font-weight:700;color:#ff6b6b;background:rgba(255,60,60,0.08);border:1px solid rgba(255,60,60,0.2);padding:5px 9px;border-radius:999px;display:none}
.game-badge.visible{display:block}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:680px}
#games .cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.cards,#games .cards{grid-template-columns:1fr}}
.card{background:rgba(18,8,8,0.75);border:1px solid rgba(255,60,60,0.08);border-radius:16px;padding:18px 16px;backdrop-filter:blur(12px);position:relative;overflow:hidden;transition:transform 0.2s, border-color 0.2s;cursor:pointer}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:80px;opacity:0.14;pointer-events:none}
.card-external::before,.card-game-1::before{background:radial-gradient(ellipse at 20% 0%, #ff3b3b, transparent 70%)}
.card-fflags::before,.card-game-2::before{background:radial-gradient(ellipse at 20% 0%, #ff6b6b, transparent 70%)}
.card-internal::before,.card-game-3::before{background:radial-gradient(ellipse at 20% 0%, #ff1a1a, transparent 70%)}
.card:hover{transform:translateY(-3px);border-color:rgba(255,60,60,0.18)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,40,40,0.06);border:1px solid rgba(255,60,60,0.15)}
.icon-cyan{border-color:rgba(255,60,60,0.25)}
.icon-purple{border-color:rgba(255,100,100,0.2)}
.icon-pink{border-color:rgba(255,40,40,0.3)}
.tag{font-size:7px;letter-spacing:1.2px;font-weight:800;padding:4px 7px;border-radius:999px;border:1px solid}
.tag-stable{color:#ff6b6b;border-color:rgba(255,60,60,0.35);background:rgba(255,60,60,0.1)}
.tag-config{color:#ff8f8f;border-color:rgba(255,120,120,0.3);background:rgba(255,60,60,0.08)}
.tag-advanced{color:#ff3b3b;border-color:rgba(255,40,40,0.35);background:rgba(255,40,40,0.12)}
.card h3{font-size:14px;font-weight:700;margin-bottom:6px}
.card p{font-size:11px;color:rgba(255,255,255,0.38);line-height:1.5;margin-bottom:16px}
.open-link{font-size:11px;font-weight:600;color:#ff6b6b;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.link-purple{color:#ff8f8f}
.link-pink{color:#ff3b3b}

/* credits page */
.credits-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:440px}
.credit-card{display:flex;align-items:center;gap:14px;background:rgba(18,8,8,0.7);border:1px solid rgba(255,60,60,0.08);border-radius:12px;padding:14px 16px;backdrop-filter:blur(10px)}
.credit-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,60,60,0.08);border:1px solid rgba(255,60,60,0.2);display:flex;align-items:center;justify-content:center}
.credit-icon.cyan{background:rgba(255,40,40,0.1);border-color:rgba(255,60,60,0.25)}
.credit-card h4{font-size:12px;font-weight:700}
.credit-card span{font-size:11px;color:rgba(255,255,255,0.35)}

/* editor page */
#editor{max-width:900px;width:100%}
#monaco-editor{width:100%;height:520px;border:1px solid rgba(255,60,60,0.12);border-radius:12px;overflow:hidden;background:#0f0a0a}
.editor-actions{display:flex;gap:8px}
#editor .page-header{max-width:900px}

/* starfield */
body::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 20% 15%, rgba(255,60,60,0.7) 50%, transparent 50%), radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.25) 50%, transparent 50%), radial-gradient(1px 1px at 15% 80%, rgba(255,80,80,0.4) 50%, transparent 50%), radial-gradient(1px 1px at 90% 70%, rgba(255,40,40,0.3) 50%, transparent 50%);opacity:0.4}