/* ============================================================ LE JEU DES DIEUX — V2 — DESIGN « AURORA » Second design complet, refait de zéro : nuit boréale, verre dépoli, dégradés violet→cyan, typographie Space Grotesk/Manrope, micro-interactions fluides. Activé via . ============================================================ */ [data-theme="aurora"] { --au-bg: #07080f; --au-bg-2: #0b0d19; --au-glass: rgba(255, 255, 255, 0.045); --au-glass-2: rgba(255, 255, 255, 0.08); --au-line: rgba(255, 255, 255, 0.10); --au-line-strong: rgba(255, 255, 255, 0.22); --au-text: #eef0ff; --au-text-dim: #9aa1c0; --au-violet: #7c5cff; --au-cyan: #22d3ee; --au-mint: #2dd4a8; --au-rose: #ff5470; --au-amber: #ffc555; --au-grad: linear-gradient(120deg, #7c5cff 0%, #4f7dff 50%, #22d3ee 100%); --au-grad-soft: linear-gradient(120deg, rgba(124,92,255,0.18), rgba(34,211,238,0.12)); --au-radius: 20px; --au-shadow: 0 16px 48px rgba(3, 5, 16, 0.7); --au-glow: 0 6px 28px rgba(96, 116, 255, 0.35); } [data-theme="aurora"] body { font-family: 'Manrope', 'Inter', -apple-system, sans-serif; background: var(--au-bg); color: var(--au-text); background-image: radial-gradient(56% 38% at 12% -4%, rgba(124, 92, 255, 0.20) 0%, transparent 70%), radial-gradient(48% 34% at 92% 8%, rgba(34, 211, 238, 0.13) 0%, transparent 70%), radial-gradient(60% 42% at 50% 110%, rgba(45, 212, 168, 0.10) 0%, transparent 70%), linear-gradient(180deg, #07080f 0%, #0a0c17 100%); background-attachment: fixed; } [data-theme="aurora"] h1, [data-theme="aurora"] h2, [data-theme="aurora"] h3 { font-family: 'Space Grotesk', 'Manrope', sans-serif; letter-spacing: -0.015em; font-weight: 700; } /* ---------- topbar / chips ---------- */ [data-theme="aurora"] .topbar .brand { font-family: 'Space Grotesk', sans-serif; color: var(--au-text); letter-spacing: 0.02em; font-weight: 700; } [data-theme="aurora"] .chip { background: var(--au-glass); border: 1px solid var(--au-line); color: var(--au-text-dim); border-radius: 999px; backdrop-filter: blur(10px); letter-spacing: 0.04em; text-transform: none; font-weight: 700; } [data-theme="aurora"] .chip.gold { color: #cdb6ff; border-color: rgba(124, 92, 255, 0.5); background: rgba(124, 92, 255, 0.12); } [data-theme="aurora"] .chip.live { color: var(--au-mint); border-color: rgba(45, 212, 168, 0.45); } [data-theme="aurora"] .chip.warn { color: var(--au-rose); border-color: rgba(255, 84, 112, 0.45); } /* ---------- hero ---------- */ [data-theme="aurora"] .hero .eyebrow { font-family: 'Space Grotesk', sans-serif; color: var(--au-cyan); letter-spacing: 0.34em; } [data-theme="aurora"] .hero h1 { background: var(--au-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; filter: drop-shadow(0 6px 30px rgba(96, 116, 255, 0.25)); } [data-theme="aurora"] .hero .tagline { color: var(--au-text-dim); font-style: normal; font-weight: 500; } /* ---------- cards ---------- */ [data-theme="aurora"] .card { background: var(--au-glass); border: 1px solid var(--au-line); border-radius: var(--au-radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--au-shadow); } [data-theme="aurora"] .card h2 { color: var(--au-text); font-weight: 700; } [data-theme="aurora"] .card .sub { color: var(--au-text-dim); } /* ---------- boutons ---------- */ [data-theme="aurora"] .btn { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.02em; text-transform: none; font-size: 15px; border-radius: 999px; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, filter 0.2s; } [data-theme="aurora"] .btn:active { transform: scale(0.965); } [data-theme="aurora"] .btn-primary { background: var(--au-grad); color: #fff; box-shadow: var(--au-glow); } [data-theme="aurora"] .btn-primary:hover { filter: brightness(1.08); } [data-theme="aurora"] .btn-ghost { background: var(--au-glass); border: 1px solid var(--au-line-strong); color: var(--au-text); backdrop-filter: blur(10px); } [data-theme="aurora"] .btn-danger { background: linear-gradient(120deg, #ff5470, #ff7a59); color: #fff; box-shadow: 0 6px 24px rgba(255, 84, 112, 0.3); } [data-theme="aurora"] .btn-dark { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--au-line); color: var(--au-text-dim); } /* ---------- formulaires ---------- */ [data-theme="aurora"] .field label { color: var(--au-cyan); font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.18em; } [data-theme="aurora"] .field input, [data-theme="aurora"] .field select { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--au-line); border-radius: 14px; color: var(--au-text); transition: border-color 0.2s, box-shadow 0.2s; } [data-theme="aurora"] .field input:focus { border-color: var(--au-violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22); } [data-theme="aurora"] .field input.code { font-family: 'Space Grotesk', sans-serif; color: var(--au-cyan); } [data-theme="aurora"] .seg { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--au-line); border-radius: 999px; padding: 4px; gap: 4px; } [data-theme="aurora"] .seg button { border-radius: 999px; color: var(--au-text-dim); font-weight: 700; } [data-theme="aurora"] .seg button.active { background: var(--au-grad); color: #fff; box-shadow: 0 2px 12px rgba(96, 116, 255, 0.4); } [data-theme="aurora"] .switch .track { background: rgba(255, 255, 255, 0.08); border-color: var(--au-line); } [data-theme="aurora"] .switch .track::after { background: var(--au-text-dim); } [data-theme="aurora"] .switch input:checked + .track { background: rgba(124, 92, 255, 0.45); border-color: var(--au-violet); } [data-theme="aurora"] .switch input:checked + .track::after { background: #fff; } [data-theme="aurora"] .toggle-row { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="aurora"] .toggle-row .lbl small { color: var(--au-text-dim); } /* ---------- listes joueurs / cibles ---------- */ [data-theme="aurora"] .prow { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; } [data-theme="aurora"] .prow .seat { background: var(--au-grad-soft); border: 1px solid rgba(124, 92, 255, 0.4); color: #cdb6ff; font-family: 'Space Grotesk', sans-serif; } [data-theme="aurora"] .prow .tag { color: var(--au-text-dim); } [data-theme="aurora"] .prow.offline .name::after { color: var(--au-rose); } [data-theme="aurora"] .tbtn { background: rgba(255, 255, 255, 0.045); border: 1.5px solid rgba(255, 255, 255, 0.09); border-radius: 16px; color: var(--au-text); transition: all 0.16s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="aurora"] .tbtn small { color: var(--au-text-dim); } [data-theme="aurora"] .tbtn.sel { border-color: transparent; background: linear-gradient(rgba(13, 15, 28, 0.92), rgba(13, 15, 28, 0.92)) padding-box, var(--au-grad) border-box; color: #fff; box-shadow: 0 0 22px rgba(96, 116, 255, 0.35); } [data-theme="aurora"] .tbtn:active { transform: scale(0.95); } /* ---------- carte de rôle ---------- */ [data-theme="aurora"] .role-card { background: radial-gradient(80% 50% at 50% 0%, rgba(124, 92, 255, 0.16) 0%, transparent 70%), rgba(255, 255, 255, 0.05); border: 1px solid var(--au-line-strong); border-radius: 26px; backdrop-filter: blur(20px); box-shadow: var(--au-shadow); } [data-theme="aurora"] .role-card h2 { font-size: 32px; color: var(--au-text); } [data-theme="aurora"] .role-card .title { color: var(--au-cyan); font-style: normal; font-weight: 600; } [data-theme="aurora"] .role-card .desc, [data-theme="aurora"] .role-card ul { color: var(--au-text-dim); } [data-theme="aurora"] .role-card .team-badge { font-family: 'Space Grotesk', sans-serif; border-radius: 999px; letter-spacing: 0.14em; } [data-theme="aurora"] .role-card .team-badge.mal { background: rgba(255, 84, 112, 0.13); color: var(--au-rose); border-color: rgba(255, 84, 112, 0.45); } [data-theme="aurora"] .role-card .team-badge.bien { background: rgba(45, 212, 168, 0.12); color: var(--au-mint); border-color: rgba(45, 212, 168, 0.4); } /* ---------- cover (écran masqué) ---------- */ [data-theme="aurora"] .cover { background: radial-gradient(60% 40% at 50% 30%, rgba(124, 92, 255, 0.08) 0%, transparent 65%), linear-gradient(180deg, #05060c 0%, #090b14 100%); } [data-theme="aurora"] .cover .label { font-family: 'Space Grotesk', sans-serif; color: rgba(154, 161, 192, 0.6); letter-spacing: 0.32em; } [data-theme="aurora"] .cover .hint { color: rgba(154, 161, 192, 0.4); } [data-theme="aurora"] .cover.my-turn .label { color: var(--au-cyan); } [data-theme="aurora"] .cover.my-turn .shield { animation: auroraPulse 1.5s ease-in-out infinite; } @keyframes auroraPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.45)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 38px rgba(124, 92, 255, 0.8)); } } /* ---------- panneaux d'action / infos ---------- */ [data-theme="aurora"] .action-head h2 { color: var(--au-text); } [data-theme="aurora"] .action-head p { color: var(--au-text-dim); } [data-theme="aurora"] .info-banner { background: var(--au-grad-soft); border: 1px solid rgba(124, 92, 255, 0.4); border-radius: 18px; backdrop-filter: blur(12px); } [data-theme="aurora"] .private-log .msg { background: rgba(255, 255, 255, 0.045); border-left: 3px solid var(--au-violet); border-radius: 0 14px 14px 0; } [data-theme="aurora"] .private-log .msg .n { color: var(--au-cyan); } /* ---------- console de nuit (MJ) ---------- */ [data-theme="aurora"] .now-card { background: radial-gradient(80% 60% at 50% 0%, rgba(34, 211, 238, 0.09) 0%, transparent 70%), rgba(255, 255, 255, 0.05); border: 1px solid var(--au-line-strong); border-radius: 22px; backdrop-filter: blur(16px); } [data-theme="aurora"] .now-card .kind { color: var(--au-cyan); letter-spacing: 0.22em; } [data-theme="aurora"] .now-card .txt { color: var(--au-text); font-style: normal; font-weight: 500; } [data-theme="aurora"] .now-card .who { color: #cdb6ff; } [data-theme="aurora"] .step-row { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; } [data-theme="aurora"] .step-row.current { border-color: rgba(124, 92, 255, 0.55); background: rgba(124, 92, 255, 0.10); box-shadow: 0 0 18px rgba(124, 92, 255, 0.18); } [data-theme="aurora"] .step-row .s { color: var(--au-text-dim); } [data-theme="aurora"] .step-row .s.waiting { color: var(--au-cyan); } [data-theme="aurora"] .step-row .s.ok { color: var(--au-mint); } [data-theme="aurora"] .mj-log .l { background: rgba(255, 255, 255, 0.035); border-radius: 12px; color: var(--au-text-dim); } [data-theme="aurora"] .mj-log .l b { color: var(--au-cyan); } /* ---------- jour / annonces / votes ---------- */ [data-theme="aurora"] .announce { background: linear-gradient(120deg, rgba(255, 84, 112, 0.14), rgba(255, 84, 112, 0.04)); border: 1px solid rgba(255, 84, 112, 0.35); border-radius: 16px; } [data-theme="aurora"] .announce.good { background: linear-gradient(120deg, rgba(45, 212, 168, 0.13), rgba(34, 211, 238, 0.05)); border-color: rgba(45, 212, 168, 0.4); } [data-theme="aurora"] .vote-count { color: var(--au-text-dim); } /* ---------- divers ---------- */ [data-theme="aurora"] .divider { color: var(--au-text-dim); letter-spacing: 0.24em; } [data-theme="aurora"] .divider::before, [data-theme="aurora"] .divider::after { background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.5), transparent); } [data-theme="aurora"] .toast { background: rgba(16, 18, 32, 0.92); border: 1px solid var(--au-line-strong); border-radius: 16px; backdrop-filter: blur(16px); } [data-theme="aurora"] .toast.error { border-color: var(--au-rose); color: #ffb9c5; } [data-theme="aurora"] .pulse-dot { background: var(--au-cyan); } [data-theme="aurora"] .countdown { font-family: 'Space Grotesk', sans-serif; color: var(--au-text-dim); } [data-theme="aurora"] .code-display { font-family: 'Space Grotesk', sans-serif; background: var(--au-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; filter: drop-shadow(0 4px 22px rgba(96, 116, 255, 0.4)); } [data-theme="aurora"] .end-banner.bien h2 { color: var(--au-mint); } [data-theme="aurora"] .end-banner.mal h2 { color: var(--au-rose); } [data-theme="aurora"] ::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, 0.5); } [data-theme="aurora"] ::-webkit-scrollbar-thumb:hover { background: var(--au-violet); } /* ---------- sélecteur de design (les 2 thèmes) ---------- */ .theme-pick { display: flex; gap: 10px; } .theme-opt { flex: 1; cursor: pointer; border-radius: 16px; padding: 14px 12px; border: 1.5px solid var(--border, rgba(255,255,255,0.15)); text-align: center; transition: all 0.15s; background: rgba(0, 0, 0, 0.25); } .theme-opt .swatch { height: 44px; border-radius: 10px; margin-bottom: 9px; border: 1px solid rgba(255, 255, 255, 0.12); } .theme-opt[data-theme-pick="olympe"] .swatch { background: linear-gradient(120deg, #1c140c 0%, #2a1e12 45%, #d4af37 130%); } .theme-opt[data-theme-pick="aurora"] .swatch { background: linear-gradient(120deg, #0b0d19 0%, #7c5cff 70%, #22d3ee 130%); } .theme-opt .t-name { font-weight: 700; font-size: 13.5px; } .theme-opt .t-sub { font-size: 11px; opacity: 0.65; margin-top: 2px; } .theme-opt.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 6px 22px rgba(0, 0, 0, 0.4); } [data-theme="aurora"] .theme-opt.sel { border-color: var(--au-cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3), 0 6px 22px rgba(0, 0, 0, 0.4); } /* ---------- overlay des règles (commun aux 2 designs) ---------- */ .rules-overlay { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(5, 5, 10, 0.88); backdrop-filter: blur(8px); overflow-y: auto; padding: calc(16px + var(--safe-top, 0px)) 14px calc(30px + var(--safe-bottom, 0px)); } .rules-overlay.active { display: block; } .rules-overlay .inner { max-width: 640px; margin: 0 auto; } .rules-overlay .rules-close { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; margin-bottom: 8px; } .rules-section-title { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; margin: 22px 4px 10px; font-weight: 700; } .rule-block { border-radius: 14px; padding: 13px 15px; margin-bottom: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); } .rule-block h4 { font-size: 14px; margin-bottom: 5px; } .rule-block p, .rule-block li { font-size: 13px; opacity: 0.85; line-height: 1.55; } .rule-block ul { padding-left: 17px; margin-top: 5px; } .rule-block li { margin-bottom: 4px; } .rule-role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .rule-role-head .e { font-size: 24px; } .rule-role-head .badge-team { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; font-weight: 700; } .rule-role-head .badge-team.mal { background: rgba(224,69,69,0.15); color: #ff7b7b; border: 1px solid rgba(224,69,69,0.4); } .rule-role-head .badge-team.bien { background: rgba(111,179,210,0.13); color: #7cc4e8; border: 1px solid rgba(111,179,210,0.4); } .night-order-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); margin-bottom: 6px; } .night-order-row .n { font-weight: 800; opacity: 0.6; min-width: 22px; font-size: 13px; } .night-order-row .r { font-weight: 700; font-size: 14px; } .night-order-row .a { font-size: 12px; opacity: 0.7; flex: 1; }