/* ============================================================= CHAMPIONS — Premium Rust Arena Single clean stylesheet, no duplicates ============================================================= */ /* --- Google Fonts loaded via in partials.php --- Bebas Neue (display), Rajdhani (UI), Share Tech Mono (code) */ :root { /* Backgrounds */ --bg: #06061a; --bg2: #0a0a20; --card: #0f0e27; --card2:#141330; /* Purple accent */ --p: #6d28d9; --p2: #8b5cf6; --p3: #a78bfa; --p4: #c4b5fd; --pg: rgba(109,40,217,.30); --pg2: rgba(109,40,217,.14); /* Gold (money) */ --gold: #f59e0b; --gold2:#fcd34d; /* Status */ --red: #ef4444; --red2: #fca5a5; --grn: #22c55e; --grn2: #86efac; /* Text */ --t1: #eeeaff; --t2: #b8b4d8; --t3: #6b668e; /* Borders */ --ln: rgba(139,92,246,.14); --ln2: rgba(139,92,246,.28); /* Fonts */ --fd: 'Bebas Neue', sans-serif; --fu: 'Rajdhani', sans-serif; --fm: 'Share Tech Mono', monospace; /* Aliases for backward compat */ --font-display: 'Bebas Neue', sans-serif; --font-ui: 'Rajdhani', sans-serif; --font-mono: 'Share Tech Mono', monospace; /* HP bar colors */ --hp-green: #22c55e; --hp-yellow: #eab308; --hp-orange: #f97316; --hp-red: #ef4444; /* Legacy var aliases */ --line: rgba(139,92,246,.14); --line2: rgba(139,92,246,.28); --green2: #86efac; --pglow: rgba(124,58,237,.32); --pglow2: rgba(124,58,237,.15); --r: 18px; --r2: 12px; } /* ── reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } a { text-decoration: none; color: inherit; } button, input, select { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; } img { display: block; max-width: 100%; } body { font-family: var(--fu); font-size: 16px; font-weight: 500; color: var(--t1); background: radial-gradient(ellipse at 20% 0%, rgba(109,40,217,.22) 0%, transparent 45%), radial-gradient(ellipse at 80% 0%, rgba(76,29,149,.16) 0%, transparent 42%), radial-gradient(ellipse at 50% 100%, rgba(46,6,79,.20) 0%, transparent 52%), linear-gradient(180deg, #06061a 0%, #0a0a20 100%); min-height: 100vh; overflow-x: hidden; } /* ── decorative overlays ── */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } .scanlines { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px); } /* ═══════════════════════════════════════════ TOP BAR ═══════════════════════════════════════════ */ .topbar { position: sticky; top: 0; z-index: 200; background: rgba(6,6,26,.93); border-bottom: 1px solid var(--ln); backdrop-filter: blur(22px); } .topbar-inner { width: min(1300px,96vw); margin: auto; min-height: 68px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } /* brand */ .brand { display: flex; align-items: center; gap: 10px; } .brand-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--p2), var(--p)); display: grid; place-items: center; font-size: 18px; box-shadow: 0 0 20px var(--pg); } .brand b { display: block; font-family: var(--fd); font-size: 22px; letter-spacing: .08em; color: var(--p4); } .brand small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); } /* nav */ .nav { justify-self: center; display: flex; gap: 3px; padding: 4px; border: 1px solid var(--ln); border-radius: 999px; background: rgba(109,40,217,.06); } .nav a { min-height: 32px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--t3); white-space: nowrap; transition: background .16s, color .16s; } .nav a:hover { background: rgba(109,40,217,.18); color: var(--t1); } .nav a.active { background: rgba(109,40,217,.28); color: var(--p4); border: 1px solid rgba(109,40,217,.35); } .daily-free-nav { color: var(--gold) !important; } .daily-free-nav.claimed { opacity: .4 !important; pointer-events: none !important; } /* account */ .account { justify-self: end; display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .balance-pill { padding: 0 14px; min-height: 34px; border-radius: 999px; border: 1px solid rgba(245,158,11,.28); background: rgba(245,158,11,.09); color: var(--gold2); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; white-space: nowrap; transition: border-color .2s; } .pill { padding: 0 14px; min-height: 34px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(109,40,217,.08); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; transition: background .16s; } .pill:hover { background: rgba(109,40,217,.22); } .pill.hot { background: linear-gradient(135deg,var(--p2),var(--p)); border: 0; color: #fff; font-weight: 700; } /* mobile toggle */ .mobile-menu { display: none; flex-direction: column; gap: 5px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ln); background: rgba(109,40,217,.08); align-items: center; justify-content: center; } .mobile-menu span { display: block; width: 17px; height: 2px; background: var(--t2); border-radius: 2px; transition: .2s; } /* ═══════════════════════════════════════════ PAGE LAYOUT ═══════════════════════════════════════════ */ .page { width: min(1300px,96vw); margin: auto; padding: 28px 0 80px; position: relative; z-index: 1; } .eyebrow { display: inline-block; color: var(--p3); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; margin-bottom: 8px; } /* ═══════════════════════════════════════════ ARENA HEADER ═══════════════════════════════════════════ */ .arena-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; gap: 20px; flex-wrap: wrap; } .arena-header h1 { font-family: var(--fd); font-size: clamp(46px,7vw,88px); letter-spacing: .04em; line-height: .92; background: linear-gradient(135deg,#fff 30%,var(--p3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-pool-display { text-align: right; border: 1px solid rgba(245,158,11,.22); border-radius: var(--r); background: rgba(245,158,11,.06); padding: 14px 18px; min-width: 170px; } .hero-pool-display span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; } .hero-pool-display strong { font-family: var(--fd); font-size: clamp(30px,4vw,50px); color: var(--gold2); letter-spacing: .04em; } /* ═══════════════════════════════════════════ ARENA SHELL ═══════════════════════════════════════════ */ .arena { position: relative; border-radius: 26px; border: 1px solid rgba(109,40,217,.28); background: radial-gradient(circle at 50% 38%,rgba(36,12,72,.97),rgba(8,8,20,.99) 72%); box-shadow: 0 0 0 1px rgba(109,40,217,.08), 0 40px 100px rgba(0,0,0,.68), inset 0 0 80px rgba(109,40,217,.04); padding: 18px; overflow: hidden; transition: box-shadow .2s; } .arena.arena-flash { box-shadow: 0 0 0 2px rgba(249,115,22,.5), 0 40px 100px rgba(0,0,0,.68), inset 0 0 120px rgba(249,115,22,.10); } .arena-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(260px,1fr) minmax(240px,300px) minmax(260px,1fr); gap: 14px; align-items: start; } /* ═══════════════════════════════════════════ PLAYER PANELS ═══════════════════════════════════════════ */ .player-panel { border-radius: var(--r); border: 1px solid var(--ln); background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); padding: 18px; min-height: 540px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .4s, opacity .4s, filter .4s; } .player-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,var(--ln2),transparent); } .left-panel { border-color: rgba(109,40,217,.24); } .right-panel { border-color: rgba(239,68,68,.18); } .right-panel::before { background: linear-gradient(90deg,transparent,rgba(239,68,68,.35),transparent); } /* seat badge */ .seat-badge { display: flex; align-items: center; gap: 10px; } .seat-icon { font-size: 20px; } .seat-badge b { display: block; font-size: 15px; font-weight: 700; color: var(--p3); } .seat-badge small { display: block; font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; } .challenger-badge .seat-badge b { color: var(--red2); } /* player name */ .player-name { font-family: var(--fd); font-size: clamp(26px,3.5vw,48px); letter-spacing: .04em; line-height: 1; overflow-wrap: anywhere; color: var(--t1); } /* ── Rust character ── */ .char-display { min-height: 170px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.22); padding: 14px; position: relative; overflow: hidden; } .empty-seat { text-align: center; padding: 16px; } .empty-icon { font-size: 34px; opacity: .25; margin-bottom: 6px; } .empty-seat b { display: block; font-size: 15px; color: var(--t2); } .empty-seat span { display: block; font-size: 12px; color: var(--t3); margin-top: 3px; } .rust-char-wrap { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 85%; transition: transform .22s ease-out; } .rust-char-wrap svg { width: 96px; height: 134px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); transform-origin: 50% 85%; } .rust-char-wrap.char-hit svg { animation: charHit .44s ease-out forwards; filter: drop-shadow(0 0 16px rgba(239,68,68,.9)) saturate(1.9) hue-rotate(-16deg); } @keyframes charHit { 0%,100% { transform: translate(0,0) rotate(0) scale(1) } 14% { transform: translate(-9px,-3px) rotate(-5deg) scale(.97) } 30% { transform: translate(7px,2px) rotate(4deg) scale(1.03) } 46% { transform: translate(-5px,0) rotate(-2deg) } 60% { transform: translate(4px,1px) rotate(1deg) } } .rust-char-name { font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--p3); letter-spacing: .05em; text-align: center; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; } /* ── Timer ── */ .timer-section { display: flex; justify-content: center; } .timer-wrap { position: relative; width: 130px; height: 130px; } .timer-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .timer-track { fill: none; stroke: rgba(109,40,217,.14); stroke-width: 10; } .timer-prog { fill: none; stroke: var(--p2); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .45s linear; filter: drop-shadow(0 0 7px var(--pg)); } .timer-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .timer-inner strong { font-family: var(--fd); font-size: 42px; letter-spacing: .02em; color: var(--p3); line-height: 1; } .timer-inner small { font-size: 10px; color: var(--t3); letter-spacing: .12em; text-transform: uppercase; } /* ── Stats ── */ .player-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat-box { border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.22); padding: 10px 12px; } .stat-box span { display: block; font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; } .stat-box b { display: block; font-size: 18px; font-weight: 700; color: var(--gold2); margin-top: 2px; } /* ── Health bar ── */ .health-section { display: flex; flex-direction: column; gap: 5px; } .health-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; } .health-label b { color: var(--grn2); } .health-track { height: 13px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(34,197,94,.18); overflow: hidden; position: relative; } .health-fill { height: 100%; border-radius: 999px; width: 100%; background: linear-gradient(90deg, var(--hp-green), rgba(34,197,94,.75)); transition: width .28s ease, background .5s ease, box-shadow .5s ease; box-shadow: 0 0 12px rgba(34,197,94,.38); position: relative; will-change: width, background; } .health-fill::after { content: ""; position: absolute; top: 2px; left: 4px; right: 4px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.22); } .health-fill-right { /* Color managed dynamically by JS hpColor() */ } /* ── Panel states ── */ .player-panel.winner { border-color: rgba(245,158,11,.6) !important; box-shadow: 0 0 0 1px rgba(245,158,11,.28), 0 0 56px rgba(245,158,11,.14) !important; } .player-panel.loser { opacity: .46; filter: grayscale(.45) brightness(.85); } .player-panel.winner-showcase{ transform: translateY(-6px); } .player-panel.damage-pulse { animation: dmgPulse .44s ease; } @keyframes dmgPulse { 0%,100% { border-color: inherit; } 30%,70% { border-color: rgba(239,68,68,.8); box-shadow: 0 0 36px rgba(239,68,68,.28); } } .player-panel.move-left { animation: moveLeft 1.1s cubic-bezier(.4,0,.2,1) forwards; } @keyframes moveLeft { 0% { transform: translateX(0) scale(1) } 45% { transform: translateX(-26%) scale(1.04) } 100% { transform: translateX(0) scale(1) } } /* ═══════════════════════════════════════════ CONTROL PANEL (centre) ═══════════════════════════════════════════ */ .control-panel { border-radius: var(--r); border: 1px solid var(--ln); background: linear-gradient(180deg,rgba(109,40,217,.09),rgba(0,0,0,.32)); padding: 16px; display: flex; flex-direction: column; gap: 11px; align-self: start; position: sticky; top: 80px; } .prize-display { text-align: center; border: 1px solid rgba(245,158,11,.2); border-radius: var(--r2); background: rgba(245,158,11,.06); padding: 12px 14px; } .prize-label { display: block; font-size: 10px; letter-spacing: .16em; color: var(--t3); text-transform: uppercase; margin-bottom: 5px; } .prize-amount { font-family: var(--fd); font-size: clamp(26px,3vw,42px); color: var(--gold2); letter-spacing: .04em; word-break: break-all; display: block; line-height: 1; } .battle-status { min-height: 40px; border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.22); display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 600; color: var(--t3); padding: 8px; } .battle-status.hot { border-color: rgba(109,40,217,.38); color: var(--p3); background: rgba(109,40,217,.08); } /* stake */ .stake-box { border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.22); padding: 11px; display: flex; flex-direction: column; gap: 8px; } .stake-box label { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .12em; } .stake-input-wrap { position: relative; } .stake-prefix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--gold2); font-weight: 700; font-size: 15px; } .stake-input { width: 100%; min-height: 40px; border: 1px solid var(--ln); border-radius: 10px; background: rgba(0,0,0,.3); color: var(--t1); padding: 0 11px 0 26px; font-size: 16px; font-weight: 700; outline: none; transition: border-color .2s; -moz-appearance: textfield; } .stake-input:focus { border-color: var(--p); } .stake-input::-webkit-inner-spin-button, .stake-input::-webkit-outer-spin-button { -webkit-appearance: none; } .quick-amounts { display: flex; gap: 5px; flex-wrap: wrap; } .qa { flex: 1; min-width: 40px; min-height: 28px; border-radius: 7px; border: 1px solid var(--ln); background: rgba(109,40,217,.1); font-size: 12px; font-weight: 700; color: var(--p3); transition: background .16s; } .qa:hover { background: rgba(109,40,217,.26); } /* buttons */ .btn-primary { width: 100%; min-height: 46px; border-radius: var(--r2); background: linear-gradient(135deg,var(--p2),var(--p)); color: #fff; font-weight: 700; font-size: 15px; border: 0; box-shadow: 0 4px 18px var(--pg); transition: transform .16s, filter .16s, opacity .18s; display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); } .btn-primary:disabled { opacity: .44; cursor: not-allowed; } .btn-ghost { width: 100%; min-height: 42px; border-radius: var(--r2); background: rgba(255,255,255,.04); border: 1px solid var(--ln); color: var(--t2); font-weight: 600; font-size: 13px; transition: background .16s; display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-ghost:hover:not(:disabled) { background: rgba(109,40,217,.14); } .btn-ghost:disabled { opacity: .44; cursor: not-allowed; } .btn-verify { width: 100%; min-height: 36px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(109,40,217,.28); color: var(--p3); font-weight: 600; font-size: 12px; transition: background .16s; display: flex; align-items: center; justify-content: center; gap: 5px; } .btn-verify:hover { background: rgba(109,40,217,.12); } .btn-sm { min-height: 32px; font-size: 12px; border-radius: 8px; } /* verify panel */ .verify-panel { display: none; flex-direction: column; gap: 10px; border: 1px solid rgba(109,40,217,.22); border-radius: var(--r2); background: rgba(0,0,0,.38); padding: 14px; } .verify-panel.open { display: flex; } .vp-title { font-size: 14px; font-weight: 700; color: var(--p3); } .vp-desc { font-size: 11px; color: var(--t3); line-height: 1.5; } .vp-steps { display: flex; flex-direction: column; gap: 9px; } .vp-step { display: flex; align-items: flex-start; gap: 9px; } .vp-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--p); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; } .vp-step-body { flex: 1; font-size: 11px; color: var(--t2); line-height: 1.5; } .vp-step-body b { color: var(--p3); } .vp-step-body code { display: block; font-family: var(--fm); font-size: 9px; color: var(--gold2); background: rgba(0,0,0,.4); border: 1px solid var(--ln); border-radius: 6px; padding: 5px 7px; margin-top: 4px; word-break: break-all; white-space: pre-wrap; max-height: 52px; overflow-y: auto; } .vp-result { margin-top: 6px; padding: 7px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.22); color: var(--t3); } .vp-champ { border-color: rgba(109,40,217,.4); color: var(--p3); background: rgba(109,40,217,.08); } .vp-chall { border-color: rgba(245,158,11,.35); color: var(--gold2); background: rgba(245,158,11,.07); } .vp-odds { display: flex; flex-direction: column; gap: 4px; } .vp-odds-bar { height: 16px; border-radius: 999px; overflow: hidden; display: flex; border: 1px solid var(--ln); } .vp-odds-left { height: 100%; background: linear-gradient(90deg,var(--p2),var(--p)); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; min-width: 24px; transition: width .6s ease; } .vp-odds-right { height: 100%; background: linear-gradient(90deg,#f97316,#ef4444); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; min-width: 24px; transition: width .6s ease; } .vp-odds-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--t3); } .arena-msg { min-height: 18px; font-size: 12px; color: var(--p3); text-align: center; line-height: 1.4; } .arena-msg.error { color: var(--red2); } /* challenger wait */ .challenger-wait-zone { flex: 1; display: grid; place-items: center; border: 1px dashed rgba(109,40,217,.14); border-radius: var(--r2); background: rgba(0,0,0,.1); padding: 14px; text-align: center; color: var(--t3); font-size: 12px; line-height: 1.5; } /* ═══════════════════════════════════════════ BATTLE FX OVERLAY ═══════════════════════════════════════════ */ .battle-fx { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; border-radius: 24px; } .projectile, .impact-fx, .explosion-fx, .hit-flash, .winner-banner, .weapon-display, .dmg-popup { position: absolute; opacity: 0; pointer-events: none; } /* bullet */ .bullet { width: 20px; height: 6px; border-radius: 999px; } .bullet .bullet-trail { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); height: 3px; width: 88px; border-radius: 999px; background: linear-gradient(90deg,transparent,rgba(255,220,100,.4)); } .bullet .bullet-head { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg,#fffde7,#fcd34d,#f59e0b); box-shadow: 0 0 9px rgba(245,158,11,.85); } /* rocket */ .rocket { width: 54px; height: 14px; } .rocket .rocket-flame { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); width: 28px; height: 14px; background: radial-gradient(circle at right,#fff 0%,#f97316 30%,#ef4444 60%,transparent 100%); border-radius: 999px 0 0 999px; filter: blur(1px); } .rocket .rocket-body { position: absolute; inset: 0; background: linear-gradient(180deg,#d1d5db,#6b7280 50%,#374151); border-radius: 4px 8px 8px 4px; } .rocket .rocket-tip { position: absolute; right: -11px; top: 1px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid #ef4444; } /* satchel */ .satchel { width: 40px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,#92400e,#78350f); border: 2px solid rgba(255,200,100,.2); display: grid; place-items: center; } .satchel span { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.85); animation: satBlink .38s ease infinite; } @keyframes satBlink { 0%,100%{opacity:1} 50%{opacity:.2} } /* c4 */ .c4 { width: 44px; height: 28px; border-radius: 6px; background: linear-gradient(135deg,#1e3a5f,#1e3a8a); border: 2px solid rgba(59,130,246,.38); display: grid; place-items: center; } .c4 b { font-family: var(--fm); font-size: 10px; font-weight: 900; color: #93c5fd; letter-spacing: .1em; } /* impact rings */ .impact-fx { width: 80px; height: 80px; margin: -40px 0 0 -40px; z-index: 11; } .impact-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(245,158,11,.72); transform: scale(.1); opacity: 0; } .impact-spark { position: absolute; width: 4px; height: 13px; border-radius: 999px; background: linear-gradient(180deg,#fff,#f97316); transform-origin: bottom center; top: 50%; left: 50%; margin: -6px 0 0 -2px; opacity: 0; } .blood-splat { position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle,rgba(239,68,68,.82) 0%,rgba(239,68,68,.28) 55%,transparent 75%); transform: scale(0); opacity: 0; } .impact-fx.pop .impact-ring.r1 { animation: rPop .52s ease-out forwards; } .impact-fx.pop .impact-ring.r2 { animation: rPop .52s ease-out .08s forwards; } .impact-fx.pop .impact-ring.r3 { animation: rPop .52s ease-out .16s forwards; } .impact-fx.pop .impact-spark { animation: sFly .56s ease-out forwards; } .impact-fx.pop .blood-splat { animation: bPop .42s ease-out forwards; } @keyframes rPop { 0%{transform:scale(.1);opacity:.95} 60%{opacity:.5} 100%{transform:scale(2.6);opacity:0} } @keyframes sFly { 0%{opacity:1;transform:rotate(var(--a,0deg)) translateY(-6px) scale(1)} 100%{opacity:0;transform:rotate(var(--a,0deg)) translateY(-38px) scale(.25)} } @keyframes bPop { 0%{transform:scale(0);opacity:.9} 55%{transform:scale(1.4);opacity:.55} 100%{transform:scale(1.7);opacity:0} } /* damage popup */ .dmg-popup { font-family: var(--fd); font-size: 36px; letter-spacing: .04em; color: #ef4444; text-shadow: 0 0 22px rgba(239,68,68,.82), 0 2px 8px rgba(0,0,0,.88); white-space: nowrap; z-index: 20; transform: translateX(-50%); } .dmg-popup.show { animation: dmgFloat .95s ease-out forwards; } @keyframes dmgFloat { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(.84); } 12% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.12); } 78% { opacity: .7; transform: translateX(-50%) translateY(-42px) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(.9); } } /* hit flash */ .hit-flash { inset: 0; border-radius: inherit; } .hit-flash-left { left: 0; top: 0; width: 50%; height: 100%; background: rgba(239,68,68,.2); } .hit-flash-right { right: 0; top: 0; width: 50%; height: 100%; background: rgba(239,68,68,.2); } .hit-flash.flash { animation: flashAnim .38s ease-out; } @keyframes flashAnim { 0%{opacity:1} 100%{opacity:0} } /* explosion */ .explosion-fx { width: 20px; height: 20px; margin: -10px 0 0 -10px; z-index: 12; } .exp-core { position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle,#fff 0%,#fcd34d 22%,#f97316 48%,#ef4444 68%,transparent 100%); transform: scale(0); opacity: 0; } .exp-ring { position: absolute; border-radius: 50%; border: 6px solid rgba(249,115,22,.62); transform: scale(0); opacity: 0; } .exp-ring.r1 { inset: -30px; } .exp-ring.r2 { inset: -50px; border-width: 4px; } .exp-ring.r3 { inset: -72px; border-width: 2px; } .exp-debris { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg,#fcd34d,#f97316); top: 50%; left: 50%; margin: -4px; transform: scale(0); opacity: 0; } .exp-shockwave{ position: absolute; inset: -65px; border-radius: 50%; border: 3px solid rgba(249,115,22,.42); transform: scale(0); opacity: 0; } .explosion-fx.explode .exp-core { animation: exCore .6s ease-out forwards; } .explosion-fx.explode .exp-ring.r1 { animation: exRing .82s ease-out .04s forwards; } .explosion-fx.explode .exp-ring.r2 { animation: exRing .92s ease-out .12s forwards; } .explosion-fx.explode .exp-ring.r3 { animation: exRing 1s ease-out .2s forwards; } .explosion-fx.explode .exp-debris.d1 { animation: exDebris .8s ease-out forwards; --dx:64px;--dy:-54px; } .explosion-fx.explode .exp-debris.d2 { animation: exDebris .9s ease-out .05s forwards; --dx:-70px;--dy:-60px; } .explosion-fx.explode .exp-debris.d3 { animation: exDebris .85s ease-out .1s forwards; --dx:52px;--dy:56px; } .explosion-fx.explode .exp-debris.d4 { animation: exDebris .75s ease-out .08s forwards; --dx:-56px;--dy:42px; } .explosion-fx.explode .exp-shockwave { animation: exShock .72s ease-out forwards; } @keyframes exCore { 0%{transform:scale(0);opacity:1} 40%{transform:scale(1.1);opacity:.9} 100%{transform:scale(1.7);opacity:0} } @keyframes exRing { 0%{transform:scale(0);opacity:.85} 70%{opacity:.45} 100%{transform:scale(1.55);opacity:0} } @keyframes exDebris { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--dx,50px),var(--dy,-50px)) scale(.18);opacity:0} } @keyframes exShock { 0%{transform:scale(0);opacity:.62} 100%{transform:scale(2.2);opacity:0} } /* screen shake */ .screen-shock { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; } .screen-shock.shake { animation: scrShake .32s ease; } @keyframes scrShake { 0%,100% { transform: translate(0) } 20% { transform: translate(-5px,2px) } 40% { transform: translate(5px,-2px) } 60% { transform: translate(-3px,3px) } 80% { transform: translate(3px,-1px) } } /* winner banner */ .winner-banner { left: 50%; top: 11%; transform: translateX(-50%); min-width: min(500px,78vw); text-align: center; padding: 16px 26px; border-radius: 16px; background: linear-gradient(135deg,#312e81,#4c1d95,#5b21b6); border: 1px solid rgba(196,181,253,.28); font-family: var(--fd); font-size: clamp(22px,3.5vw,46px); letter-spacing: .08em; color: #e9d5ff; box-shadow: 0 0 60px rgba(109,40,217,.52), 0 22px 56px rgba(0,0,0,.52); z-index: 16; } .winner-banner.show { animation: bannerPop 5.5s ease forwards; } @keyframes bannerPop { 0% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.86); } 10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); } 18%,88%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.96); } } /* weapon display cards */ .weapon-display { top: 14%; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(109,40,217,.28); display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--p3); backdrop-filter: blur(10px); z-index: 14; opacity: 0; transition: opacity .4s; } .wd-left { left: 4%; } .wd-right { right: 4%; } /* ═══════════════════════════════════════════ SECTION BLOCKS ═══════════════════════════════════════════ */ .section-block { margin-top: 18px; border: 1px solid var(--ln); border-radius: var(--r); background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.014)); padding: 20px; } .section-title { margin-bottom: 14px; } .section-title h3 { font-family: var(--fd); font-size: clamp(24px,3vw,38px); letter-spacing: .04em; color: var(--t1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lb-timer { font-family: var(--fm); font-size: 15px; color: var(--p3); border: 1px solid rgba(109,40,217,.28); border-radius: 7px; padding: 3px 9px; background: rgba(109,40,217,.08); } .two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* rows */ .queue-list, .log-list, .leaderboard-list, .history-list { display: flex; flex-direction: column; gap: 7px; } .queue-row, .log-row, .lb-row, .hist-row, .empty-row { border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.18); padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; } .queue-row b, .log-row b, .lb-row b, .hist-row b { color: var(--p3); font-weight: 700; } .queue-row span, .log-row span, .lb-row span, .hist-row span { color: var(--t3); } .lb-row:first-child { border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.05); } .lb-row:first-child b { color: var(--gold2); } .empty-row { color: var(--t3); justify-content: center; } /* ═══════════════════════════════════════════ CHAT ═══════════════════════════════════════════ */ .chat-drawer { position: fixed; bottom: 0; right: 22px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; } .chat-toggle { min-height: 40px; padding: 0 15px; border-radius: 10px 10px 0 0; background: linear-gradient(135deg,var(--p),var(--p2)); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; box-shadow: 0 -4px 18px var(--pg); border: 1px solid rgba(196,181,253,.18); border-bottom: 0; } .chat-panel { width: min(330px,94vw); height: 400px; border: 1px solid rgba(109,40,217,.28); border-radius: 14px 0 0 0; background: rgba(8,8,26,.97); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 36px rgba(0,0,0,.48); } .chat-drawer.closed .chat-panel { display: none; } .chat-head { padding: 10px 13px; background: rgba(109,40,217,.12); border-bottom: 1px solid var(--ln); display: flex; align-items: center; justify-content: space-between; } .chat-head strong { font-size: 13px; color: var(--p3); } .chat-head button { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--t3); font-size: 15px; display: grid; place-items: center; } .chat-messages { flex: 1; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; scrollbar-color: var(--p) transparent; } .chat-message { background: rgba(109,40,217,.08); border: 1px solid rgba(109,40,217,.14); border-radius: 9px; padding: 7px 9px; } .chat-message b { display: block; font-size: 11px; color: var(--p3); margin-bottom: 2px; } .chat-message p { font-size: 12px; color: var(--t1); line-height: 1.4; } .chat-message span { font-size: 9px; color: var(--t3); display: block; margin-top: 3px; } .chat-empty, .chat-login { text-align: center; color: var(--t3); font-size: 12px; padding: 18px; } .chat-login a { color: var(--p3); } .chat-form { padding: 9px; border-top: 1px solid var(--ln); display: flex; gap: 7px; } .chat-form input { flex: 1; min-height: 34px; border: 1px solid var(--ln); border-radius: 7px; background: rgba(0,0,0,.4); padding: 0 9px; font-size: 12px; outline: none; color: var(--t1); transition: border-color .2s; } .chat-form input:focus { border-color: var(--p); } .chat-form button { min-height: 34px; width: 34px; border-radius: 7px; background: var(--p); color: #fff; font-weight: 900; font-size: 15px; display: grid; place-items: center; transition: background .16s; flex-shrink: 0; } .chat-form button:hover { background: var(--p2); } /* ═══════════════════════════════════════════ AUTH PAGES ═══════════════════════════════════════════ */ .auth-page { display: grid; place-items: center; min-height: 100vh; padding: 22px; } .auth-card { width: min(400px,96vw); border: 1px solid var(--ln); border-radius: 22px; background: linear-gradient(180deg,rgba(109,40,217,.09),rgba(0,0,0,.42)); padding: 30px; box-shadow: 0 24px 80px rgba(0,0,0,.72); display: flex; flex-direction: column; gap: 13px; } .auth-card h1 { font-family: var(--fd); font-size: 46px; letter-spacing: .04em; background: linear-gradient(135deg,#fff,var(--p3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-card p { color: var(--t3); font-size: 13px; } .auth-card input { width: 100%; min-height: 42px; border: 1px solid var(--ln); border-radius: 11px; background: rgba(0,0,0,.4); color: var(--t1); padding: 0 13px; font-size: 14px; outline: none; transition: border-color .2s; } .auth-card input:focus { border-color: var(--p); } .auth-card label { font-size: 12px; color: var(--t3); display: flex; flex-direction: column; gap: 5px; } .auth-card a { text-align: center; color: var(--p3); font-size: 12px; } .auth-card .error { color: var(--red2); font-size: 12px; } /* ═══════════════════════════════════════════ INNER PAGES (wallet, profile, etc.) ═══════════════════════════════════════════ */ .form-card { border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.2); padding: 16px; display: flex; flex-direction: column; gap: 11px; } .form-card h4 { font-size: 17px; color: var(--p3); } .form-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--t3); } .form-card input, .form-card select { min-height: 40px; border: 1px solid var(--ln); border-radius: 9px; background: rgba(0,0,0,.35); color: var(--t1); padding: 0 11px; font-size: 13px; outline: none; transition: border-color .2s; } .form-card input:focus, .form-card select:focus { border-color: var(--p); } .wallet-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; } code { display: block; font-family: var(--fm); font-size: 11px; color: var(--gold2); background: rgba(0,0,0,.35); border: 1px solid var(--ln); border-radius: 7px; padding: 9px; white-space: pre-wrap; word-break: break-all; } .fair-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 11px; } .fair-grid > div { border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.18); padding: 13px; } .fair-grid span { display: block; font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; } .mini-list { display: flex; flex-direction: column; gap: 7px; } .mini-row { border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.18); padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; } .mini-row b { color: var(--p3); font-size: 14px; } .mini-row span { font-size: 12px; color: var(--t3); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .msg { color: var(--p3); font-size: 12px; text-align: center; } .error-text, .error { color: var(--red2); } /* leaderboard page */ .leaderboard-prize-pool { border: 1px solid rgba(245,158,11,.22); border-radius: var(--r); background: rgba(245,158,11,.06); padding: 18px; margin-bottom: 18px; text-align: center; } .leaderboard-prize-pool span { display: block; color: var(--t3); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; margin-bottom: 7px; } .leaderboard-prize-pool strong { font-family: var(--fd); font-size: clamp(38px,5vw,68px); color: var(--gold2); letter-spacing: .04em; } /* filter buttons (activity) */ .activity-filters { display: flex; gap: 7px; margin-bottom: 13px; flex-wrap: wrap; } .filter-btn { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(0,0,0,.2); font-size: 12px; font-weight: 600; color: var(--t3); transition: background .16s, color .16s; } .filter-btn:hover, .filter-btn.active { background: rgba(109,40,217,.18); color: var(--p3); border-color: rgba(109,40,217,.34); } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1150px) { .topbar-inner { grid-template-columns: auto auto 1fr; } .mobile-menu { display: flex; } .nav { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(6,6,26,.98); border-bottom: 1px solid var(--ln); padding: 10px; flex-direction: column; z-index: 190; } .nav.open { display: flex; } .nav a { border-radius: 9px; padding: 10px 13px; } .account { justify-self: end; } .arena-grid { grid-template-columns: 1fr; } .control-panel { order: -1; position: static; } .player-panel { min-height: auto; } .two-col-grid, .two-col { grid-template-columns: 1fr; } } @media (max-width: 680px) { .topbar-inner { width: calc(100% - 20px); min-height: 58px; } .brand b { font-size: 18px; } .brand small { display: none; } .page { width: calc(100% - 18px); padding-top: 18px; } .arena { padding: 10px; border-radius: 18px; } .arena-header { flex-direction: column; align-items: flex-start; } .hero-pool-display { width: 100%; text-align: center; } .chat-drawer { right: 10px; } .chat-panel { width: calc(100vw - 20px); } } /* ═══════════════════════════════════════════ DUEL STANCE CLASSES (added by JS during fight) ═══════════════════════════════════════════ */ .player-panel.duel-left .rust-char-wrap { transform-origin: 50% 85%; } .player-panel.duel-right .rust-char-wrap { transform-origin: 50% 85%; } /* "show" state for weapon display cards (JS sets opacity directly now) */ .weapon-display.show { opacity: 1 !important; } /* Spark rotation vars set inline in arena.php */ .impact-spark.s0 { --a: 0deg; transform: rotate(0deg) translateY(-20px) scale(.1); } .impact-spark.s1 { --a: 72deg; transform: rotate(72deg) translateY(-20px) scale(.1); } .impact-spark.s2 { --a: 144deg; transform: rotate(144deg) translateY(-20px) scale(.1); } .impact-spark.s3 { --a: 216deg; transform: rotate(216deg) translateY(-20px) scale(.1); } .impact-spark.s4 { --a: 288deg; transform: rotate(288deg) translateY(-20px) scale(.1); } /* ── Daily reward button ── */ .btn-daily { width: 100%; min-height: 38px; border-radius: var(--r2); background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.28); color: var(--gold2); font-weight: 700; font-size: 13px; transition: background .18s; display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-daily:hover { background: rgba(245,158,11,.22); } .btn-daily.claimed { opacity: .4; cursor: not-allowed; } /* ── Challenger timer ring (red) ── */ .timer-prog-red { fill: none; stroke: var(--red); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; filter: drop-shadow(0 0 6px rgba(239,68,68,.5)); } /* ── Guest CTA in control panel ── */ .guest-cta { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.18); padding: 14px; text-align: center; } .guest-cta p { font-size: 12px; color: var(--t3); line-height: 1.5; } /* ── Arena grid symmetry fix ── */ .right-panel .timer-section { opacity: .55; } .right-panel .timer-section .timer-inner small { color: var(--red2); } /* ═══════════════════════════════════════════ COINFLIP PAGE ═══════════════════════════════════════════ */ /* ── Stage ── */ .cf-stage { position: relative; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border-radius: 26px; border: 1px solid var(--ln2); background: radial-gradient(circle at 50% 40%,rgba(36,12,72,.98),rgba(6,6,26,.99) 72%); overflow: hidden; padding: 32px 20px; margin-bottom: 20px; box-shadow: 0 0 0 1px rgba(109,40,217,.08), 0 40px 100px rgba(0,0,0,.68); } .cf-stage::before { content:"";position:absolute;inset:0; background: radial-gradient(circle at 50% 0%, rgba(109,40,217,.12) 0%,transparent 60%); pointer-events:none; } /* ════════════════════════════════════════════════ COINFLIP COIN — contained, polished, never escapes ════════════════════════════════════════════════ */ .cf-coin-wrap { position: relative; z-index: 2; transform-origin: 50% 50%; transform: translateY(0) scale(1); will-change: transform; } /* Gentle arc that stays well within the stage (max ~55px lift). */ @keyframes coinThrow { 0% { transform: translateY(0) scale(1); } 20% { transform: translateY(-44px) scale(1.12); } 45% { transform: translateY(-58px) scale(1.18); } 62% { transform: translateY(-44px) scale(1.14); } 82% { transform: translateY(-12px) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .cf-coin-wrap.flipping { animation: coinThrow 3.0s cubic-bezier(.34,.02,.3,1) forwards; } /* The coin flips by squashing horizontally (scaleX). JS swaps the visible face at each edge-on point, so it never goes blank and lands on the winner. */ .cf-coin { width: 150px; height: 150px; position: relative; filter: drop-shadow(0 10px 28px rgba(0,0,0,.6)); will-change: transform; } .cf-coin.spinning { animation: coinSpinFlat .42s cubic-bezier(.45,0,.55,1) infinite; } @keyframes coinSpinFlat { 0% { transform: scaleX(1); } 50% { transform: scaleX(.06); } /* edge-on */ 100% { transform: scaleX(1); } } /* soft landing settle */ .cf-coin.settle { animation: coinSettle .4s cubic-bezier(.2,1.3,.4,1); } @keyframes coinSettle { 0% { transform: scaleX(.5) scaleY(1.05); } 55% { transform: scaleX(1.06) scaleY(.97); } 100% { transform: scaleX(1) scaleY(1); } } .cf-face { position: absolute; inset: 0; border-radius: 50%; display: none; /* only the active face is shown */ } .cf-face-inner { width: 100%; height: 100%; } .cf-face svg, .cf-face-inner svg { width: 100%; height: 100%; display: block; } /* Active face controlled by show-red / show-blue on .cf-coin */ .cf-coin.show-red .cf-face-red { display: block; } .cf-coin.show-blue .cf-face-blue { display: block; } .cf-coin:not(.show-red):not(.show-blue) .cf-face-red { display: block; } /* Winner glow */ .cf-coin.landed-red { filter: drop-shadow(0 0 28px rgba(239,68,68,.9)) drop-shadow(0 10px 28px rgba(0,0,0,.6)); } .cf-coin.landed-blue { filter: drop-shadow(0 0 28px rgba(59,130,246,.9)) drop-shadow(0 10px 28px rgba(0,0,0,.6)); } /* ── Stage message ── */ .cf-stage-msg { font-size: 15px; font-weight: 600; color: var(--t3); text-align: center; z-index: 2; } /* ── Result badge ── */ .cf-result-badge { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) scale(.8); opacity: 0; font-family: var(--fd); font-size: 32px; letter-spacing: .06em; padding: 10px 28px; border-radius: 999px; white-space: nowrap; transition: opacity .3s, transform .3s; z-index: 3; } .cf-result-badge.show-red { opacity: 1; transform: translateX(-50%) scale(1); background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; } .cf-result-badge.show-blue { opacity: 1; transform: translateX(-50%) scale(1); background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.4); color: #93c5fd; } /* ── Create section ── */ .cf-create-section { margin-bottom: 18px; } .cf-create-grid { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } /* Side picker */ .cf-side-picker { display: flex; align-items: center; gap: 14px; } .cf-side-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px; border-radius: var(--r); border: 2px solid var(--ln); background: rgba(0,0,0,.2); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; min-width: 100px; } .cf-side-btn:hover { transform: translateY(-2px); } .cf-side-btn.active.cf-side-red { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.1); } .cf-side-btn.active.cf-side-blue { border-color: rgba(59,130,246,.6); background: rgba(59,130,246,.1); } .cf-side-btn span { font-family: var(--fd); font-size: 22px; letter-spacing: .08em; } .cf-side-red span { color: #fca5a5; } .cf-side-blue span { color: #93c5fd; } .cf-side-btn small { font-size: 11px; color: var(--t3); } .cf-side-coin { width: 56px; height: 56px; } .cf-side-coin svg { width: 100%; height: 100%; } .cf-vs-divider { font-family: var(--fd); font-size: 28px; letter-spacing: .1em; color: var(--t3); } /* Wager section */ .cf-wager-section { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .cf-wager-label { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: .12em; } .cf-create-btn { max-width: 220px; } /* ── Games list ── */ .cf-games-list { display: flex; flex-direction: column; gap: 10px; } .cf-game-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--ln); border-radius: var(--r2); background: rgba(0,0,0,.18); padding: 14px 16px; transition: border-color .18s; flex-wrap: wrap; } .cf-game-row:hover { border-color: var(--ln2); } /* Creator info */ .cf-game-creator { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 140px; } .cf-mini-coin { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 10px; font-weight: 900; font-family: var(--fd); letter-spacing: .08em; } .cf-mini-coin.red { background: linear-gradient(135deg,#991b1b,#ef4444); color: #fca5a5; border: 1px solid rgba(239,68,68,.35); box-shadow: 0 0 12px rgba(239,68,68,.25); } .cf-mini-coin.blue { background: linear-gradient(135deg,#1e3a8a,#3b82f6); color: #93c5fd; border: 1px solid rgba(59,130,246,.35); box-shadow: 0 0 12px rgba(59,130,246,.25); } .cf-game-name { font-weight: 700; color: var(--t1); font-size: 14px; } .cf-game-sub { font-size: 11px; color: var(--t3); } /* VS slot */ .cf-game-vs { display: flex; align-items: center; gap: 10px; } .cf-vs-text { font-family: var(--fd); font-size: 18px; color: var(--t3); letter-spacing: .1em; } .cf-empty-slot { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--ln2); display: grid; place-items: center; font-size: 16px; color: var(--t3); } /* Wager */ .cf-game-wager { font-family: var(--fd); font-size: 26px; letter-spacing: .04em; color: var(--gold2); white-space: nowrap; } /* Actions */ .cf-game-actions { display: flex; gap: 8px; margin-left: auto; } .cf-join-btn { min-height: 38px; padding: 0 18px; border-radius: 10px; background: linear-gradient(135deg,var(--p2),var(--p)); color: #fff; font-weight: 700; font-size: 13px; border: 0; transition: filter .16s, transform .16s; white-space: nowrap; } .cf-join-btn:hover { filter: brightness(1.12); transform: translateY(-1px); } .cf-join-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } .cf-cancel-btn { min-height: 38px; padding: 0 14px; border-radius: 10px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: var(--red2); font-size: 12px; font-weight: 600; transition: background .16s; } .cf-cancel-btn:hover { background: rgba(239,68,68,.2); } /* ── History rows ── */ .cf-history-list .cf-game-row { opacity: .85; } .cf-history-row-result { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t3); flex-wrap: wrap; } .cf-winner-badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .cf-winner-red { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); } .cf-winner-blue { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); } /* Verify inline */ .cf-verify-btn { min-height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(109,40,217,.1); border: 1px solid rgba(109,40,217,.25); color: var(--p3); font-size: 11px; font-weight: 600; transition: background .16s; cursor: pointer; } .cf-verify-btn:hover { background: rgba(109,40,217,.2); } .cf-verify-panel { display: none; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; border: 1px solid rgba(109,40,217,.2); border-radius: 10px; background: rgba(0,0,0,.3); padding: 12px; font-size: 11px; } .cf-verify-panel.open { display: flex; } .cf-verify-panel b { color: var(--p3); } .cf-verify-panel code { font-family: var(--fm); font-size: 10px; color: var(--gold2); background: rgba(0,0,0,.4); border: 1px solid var(--ln); border-radius: 5px; padding: 5px 7px; word-break: break-all; } .cf-verify-result { padding: 6px 10px; border-radius: 7px; font-weight: 600; font-size: 12px; } .cf-verify-result.red { background: rgba(239,68,68,.1); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); } .cf-verify-result.blue { background: rgba(59,130,246,.1); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); } /* ───────────────────────────────────── WATCH MODAL (auto-spectate + replay) ───────────────────────────────────── */ body.cf-modal-lock { overflow: hidden; } .cf-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 20px; } .cf-modal.open { display: flex; } .cf-modal-overlay { position: absolute; inset: 0; background: rgba(4,4,16,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cfFadeIn .2s ease; } .cf-modal-card { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 22px; border: 1px solid var(--ln2); background: linear-gradient(180deg, rgba(28,12,58,.98), rgba(8,8,26,.99)); box-shadow: 0 0 0 1px rgba(109,40,217,.14), 0 40px 120px rgba(0,0,0,.7); padding: 26px 24px 22px; animation: cfPop .28s cubic-bezier(.2,1.1,.4,1); } @keyframes cfFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cfPop { 0% { opacity: 0; transform: translateY(16px) scale(.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .cf-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ln); background: rgba(0,0,0,.35); color: var(--t2); font-size: 15px; cursor: pointer; transition: background .16s, color .16s; z-index: 2; } .cf-modal-close:hover { background: rgba(239,68,68,.18); color: #fca5a5; } .cf-modal-head { text-align: center; margin-bottom: 14px; } .cf-modal-head .eyebrow { display: inline-block; } .cf-modal-head h3 { font-family: var(--fd); font-size: 22px; letter-spacing: .03em; color: var(--t1); margin-top: 4px; word-break: break-word; } /* Players row */ .cf-modal-players { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; } .cf-modal-player { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 150px; padding: 10px 8px; border-radius: 14px; border: 1px solid transparent; transition: border-color .25s, background .25s, transform .25s; } .cf-modal-player.winner { border-color: rgba(245,197,66,.5); background: rgba(245,197,66,.08); transform: translateY(-2px); box-shadow: 0 0 22px rgba(245,197,66,.18); } .cf-modal-pname { font-weight: 700; font-size: 14px; color: var(--t1); text-align: center; word-break: break-word; max-width: 130px; } .cf-modal-vs { font-family: var(--fd); font-size: 16px; color: var(--t3); letter-spacing: .08em; } /* Coin stage inside modal */ .cf-modal-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: 18px; border: 1px solid var(--ln); background: radial-gradient(circle at 50% 38%, rgba(40,14,80,.9), rgba(6,6,22,.95) 72%); overflow: hidden; margin: 8px 0 14px; } .cf-modal-stage .cf-coin-wrap { z-index: 2; } .cf-modal-stage .cf-coin { width: 150px; height: 150px; } .cf-modal-result { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%) scale(.8); opacity: 0; font-family: var(--fd); font-size: 26px; letter-spacing: .05em; padding: 7px 22px; border-radius: 999px; white-space: nowrap; transition: opacity .3s, transform .3s; z-index: 3; } .cf-modal-result.show-red { opacity: 1; transform: translateX(-50%) scale(1); background: rgba(239,68,68,.16); color: #fca5a5; border: 1px solid rgba(239,68,68,.4); } .cf-modal-result.show-blue { opacity: 1; transform: translateX(-50%) scale(1); background: rgba(59,130,246,.16); color: #93c5fd; border: 1px solid rgba(59,130,246,.4); } /* Outcome line */ .cf-modal-outcome { text-align: center; font-size: 15px; font-weight: 700; color: var(--t2); min-height: 22px; margin-bottom: 12px; } .cf-modal-outcome.red { color: #fca5a5; } .cf-modal-outcome.blue { color: #93c5fd; } .cf-modal-outcome.mine { color: var(--gold2); } /* Fair block inside modal */ .cf-modal-fair { display: flex; flex-direction: column; gap: 8px; } .cf-modal-fair .cf-verify-btn { align-self: center; } @media (max-width: 540px) { .cf-modal-card { padding: 22px 16px 18px; } .cf-modal-head h3 { font-size: 19px; } .cf-modal-stage .cf-coin { width: 124px; height: 124px; } .cf-modal-players { gap: 8px; } } /* Clickable history rows */ .cf-history-clickable { cursor: pointer; transition: border-color .16s, background .16s, transform .12s; } .cf-history-clickable:hover { border-color: var(--p3); background: rgba(109,40,217,.08); transform: translateY(-1px); } .cf-watch-btn { min-height: 30px; padding: 0 12px; border-radius: 8px; background: linear-gradient(135deg, rgba(109,40,217,.25), rgba(139,92,246,.18)); border: 1px solid rgba(139,92,246,.4); color: #d6c2ff; font-size: 11px; font-weight: 700; cursor: pointer; transition: filter .16s; } .cf-watch-btn:hover { filter: brightness(1.2); } /* ── Responsive ── */ @media (max-width: 700px) { .cf-create-grid { grid-template-columns: 1fr; } .cf-side-picker { flex-wrap: wrap; justify-content: center; } .cf-game-row { flex-wrap: wrap; } .cf-game-actions { width: 100%; } .cf-join-btn { flex: 1; } } /* Coin landing wobble */ @keyframes coinLand { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-12px) scale(1.06); } 55% { transform: translateY(0) scale(.97); } 75% { transform: translateY(-5px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } /* ───────────────────────────────────── Coinflip stage enhancements ───────────────────────────────────── */ .cf-stage-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; z-index: 2; } .cf-stage-info { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Floating particles */ .cf-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .cf-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; opacity: 0; animation: cfParticle 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.5s); } .cf-particle:nth-child(odd) { background: rgba(239,68,68,.5); left: calc(10% + var(--i)*7%); top: 80%; } .cf-particle:nth-child(even) { background: rgba(59,130,246,.5); left: calc(5% + var(--i)*7%); top: 85%; } @keyframes cfParticle { 0% { opacity: 0; transform: translateY(0) scale(1); } 20% { opacity: .8; } 80% { opacity: .3; } 100% { opacity: 0; transform: translateY(-180px) scale(.3); } } /* Legend */ .cf-legend { display: flex; gap: 20px; z-index: 2; position: relative; } .cf-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; } .cf-legend-item.red { color: #fca5a5; } .cf-legend-item.blue { color: #93c5fd; } .cf-legend-dot { width: 10px; height: 10px; border-radius: 50%; } .cf-legend-item.red .cf-legend-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.7); } .cf-legend-item.blue .cf-legend-dot { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.7); } /* Coin size upgrade */ .cf-coin { width: 180px; height: 180px; } /* ═══════════════════════════════════════════ INNER PAGE COMPONENTS ═══════════════════════════════════════════ */ /* ── Page header ── */ .page-head { margin-bottom: 24px; } .page-title { font-family: var(--fd); letter-spacing: .04em; line-height: .92; font-size: clamp(38px,6vw,72px); background: linear-gradient(135deg,#fff 30%,var(--p3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Wallet balance overview ── */ .balance-overview { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(135deg,rgba(109,40,217,.08),rgba(0,0,0,.3)); padding: 22px 24px; margin-bottom: 18px; } .balance-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--t3); margin-bottom: 5px; } .balance-val { font-family: var(--fd); font-size: clamp(32px,4vw,52px); color: var(--gold2); letter-spacing: .04em; } .balance-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; } .bstat { border: 1px solid var(--line); border-radius: 11px; padding: 10px 16px; background: rgba(0,0,0,.2); text-align: center; } .bstat span { display: block; font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; } .bstat b { display: block; font-size: 20px; font-weight: 700; color: var(--p3); } .bstat.green b { color: var(--grn2); } .bstat.red b { color: var(--red2); } /* Form messages */ .form-msg { font-size: 13px; margin-top: 4px; color: var(--p3); min-height: 18px; } .form-msg.error { color: var(--red2); } /* Transaction rows */ .tx-type { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 6px; } .tx-type.deposit { background: rgba(34,197,94,.12); color: var(--grn2); border: 1px solid rgba(34,197,94,.25); } .tx-type.withdraw{ background: rgba(239,68,68,.12); color: var(--red2); border: 1px solid rgba(239,68,68,.22); } .tx-status { font-size: 12px; color: var(--t3); } .tx-status.pending { color: var(--gold2); } .tx-status.completed { color: var(--grn2); } .tx-status.rejected { color: var(--red2); } .tx-method { font-size: 12px; color: var(--t3); } .tx-date { font-size: 11px; color: var(--t3); margin-left: auto; } /* ── Leaderboard hero ── */ .lb-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid rgba(245,158,11,.22); border-radius: var(--r); background: linear-gradient(135deg,rgba(245,158,11,.06),rgba(0,0,0,.3)); padding: 24px; margin-bottom: 18px; } .lb-hero-prize { text-align: left; } .lb-hero-prize span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--t3); margin-bottom: 6px; } .lb-hero-prize strong { display: block; font-family: var(--fd); font-size: clamp(40px,5vw,68px); color: var(--gold2); letter-spacing: .04em; } .lb-hero-prize small { display: block; font-size: 13px; color: var(--t3); margin-top: 6px; } .lb-hero-prize small span { display: inline; font-family: var(--fm); color: var(--p3); font-size: 14px; letter-spacing: .04em; } .lb-prize-breakdown { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .lb-prize-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.2); } .lb-prize-slot span { font-size: 18px; } .lb-prize-slot b { font-size: 13px; font-weight: 700; color: var(--gold2); } .lb-prize-slot.rank-1 { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); } .lb-prize-slot.rank-2 { border-color: rgba(192,192,192,.3); } .lb-prize-slot.rank-3 { border-color: rgba(205,127,50,.3); } .lb-row-gold { border-color: rgba(245,158,11,.4) !important; background: rgba(245,158,11,.06) !important; } .lb-row-silver { border-color: rgba(192,192,192,.28) !important; } .lb-row-bronze { border-color: rgba(205,127,50,.28) !important; } .lb-rank-badge { font-size: 22px; flex-shrink: 0; } .lb-rank-badge.rank-gold { filter: drop-shadow(0 0 8px rgba(245,158,11,.7)); } .lb-player { flex: 1; } .lb-player b { display: block; font-size: 15px; font-weight: 700; color: var(--t1); } .lb-player small { font-size: 11px; color: var(--t3); } .lb-record { display: flex; align-items: center; gap: 4px; font-size: 14px; } .lb-wins { color: var(--grn2); font-weight: 700; } .lb-losses { color: var(--red2); font-weight: 700; } .lb-sep { color: var(--t3); } .lb-prize { color: var(--gold2); font-weight: 700; font-size: 15px; white-space: nowrap; } /* ── Fairness page ── */ .fairness-explainer { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.18); padding: 20px; margin-bottom: 18px; } .fe-step { display: flex; align-items: flex-start; gap: 12px; } .fe-num { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--p); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; } .fe-body { font-size: 13px; color: var(--t2); line-height: 1.6; } .fe-body b { color: var(--p3); } .fe-body code { font-family: var(--fm); font-size: 12px; color: var(--gold2); background: rgba(0,0,0,.35); border-radius: 5px; padding: 1px 6px; } .fair-card { border: 1px solid var(--line); border-radius: var(--r2); background: rgba(0,0,0,.18); padding: 14px; } .fair-card span { display: block; font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; } .fair-row-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .fair-event-badge { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(109,40,217,.12); color: var(--p3); border: 1px solid rgba(109,40,217,.25); } .fair-event-badge.left_battle_win { background: rgba(34,197,94,.1); color: var(--grn2); border-color: rgba(34,197,94,.25); } .fair-event-badge.right_battle_win { background: rgba(239,68,68,.1); color: var(--red2); border-color: rgba(239,68,68,.25); } .fair-event-badge.timer_jackpot { background: rgba(245,158,11,.1); color: var(--gold2);border-color: rgba(245,158,11,.25); } .fair-date { font-size: 11px; color: var(--t3); margin-left: auto; } .fair-hash { font-size: 10px; word-break: break-all; } /* ── Activity page ── */ .act-row { align-items: flex-start; flex-direction: column; gap: 3px; } .act-row b { font-size: 14px; } .act-row span { font-size: 12px; color: var(--t2); } .act-row small { font-size: 10px; color: var(--t3); } .act-def { color: var(--t3); font-weight: 400; margin: 0 4px; } .act-prize { color: var(--gold2); font-weight: 700; font-size: 14px; } .form-hint { font-size:11px; color:var(--t3); margin-top:-4px; } /* ═══════════════════════════════════════════ ENHANCED VISUAL EFFECTS ═══════════════════════════════════════════ */ /* Prize pool pulse when updated */ @keyframes prizeUpdate { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); color: var(--gold2); filter: brightness(1.3); } } .prize-amount.updated { animation: prizeUpdate .4s ease; } /* Timer turns red when < 30s */ .timer-inner strong.danger { color: var(--red2) !important; animation: timerDanger .8s ease infinite; } .timer-prog.danger { stroke: var(--red) !important; filter: drop-shadow(0 0 10px rgba(239,68,68,.7)); } @keyframes timerDanger { 0%,100% { opacity: 1; } 50% { opacity: .6; } } /* Frozen timer while a lone Champion waits for a Challenger */ .timer-inner strong.waiting { color: var(--t3) !important; animation: timerWaiting 1.8s ease infinite; } @keyframes timerWaiting { 0%,100% { opacity: .55; } 50% { opacity: .85; } } /* Balance pill flash on update */ @keyframes balUpdate { 0% { background: rgba(34,197,94,.35); color: var(--grn2); } 100% { background: rgba(245,158,11,.09); color: var(--gold2); } } .balance-pill.updated { animation: balUpdate .8s ease forwards; } /* Join button loading */ .btn-primary.loading { pointer-events: none; opacity: .75; } .btn-primary.loading::after { content: ""; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; margin-left: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* HP bar label pulse on damage */ .health-label b.damaged { animation: hpDamage .5s ease; } @keyframes hpDamage { 0%,100% { transform: scale(1); } 40% { transform: scale(1.3); } } /* Better empty seat glow */ .char-display:has(.empty-seat) { background: rgba(0,0,0,.15); border-style: dashed; border-color: rgba(139,92,246,.18); } /* Waiting status pulse */ .battle-status.waiting-pulse { animation: statusPulse 2s ease infinite; } @keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } } /* Score counter (W/L badge) */ .score-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .score-badge.win { background: rgba(34,197,94,.12); color: var(--grn2); border: 1px solid rgba(34,197,94,.25); } .score-badge.loss { background: rgba(239,68,68,.12); color: var(--red2); border: 1px solid rgba(239,68,68,.22); } /* Weapon display enhanced */ .weapon-display { transition: opacity .4s ease; } .wd-icon { font-size: 16px; } .wd-name { font-size: 12px; font-weight: 700; color: var(--p3); } /* Pulsing "online" dot */ .online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); animation: onlinePulse 2s ease infinite; flex-shrink: 0; } @keyframes onlinePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } } /* Queue count badge */ .queue-count-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--p); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; } /* Smooth balance transition */ .balance-pill { transition: background .3s, color .3s, border-color .3s; } /* Low HP warning state */ .player-panel.low-hp .health-track { border-color: rgba(239,68,68,.4); animation: lowHpBorder 1s ease infinite; } @keyframes lowHpBorder { 0%,100% { border-color: rgba(239,68,68,.4); } 50% { border-color: rgba(239,68,68,.8); } } /* Round result flash */ .arena.result-flash-win { animation: resultFlashWin .5s ease; } .arena.result-flash-loss { animation: resultFlashLoss .5s ease; } @keyframes resultFlashWin { 0%,100%{} 30%{ box-shadow: 0 0 0 2px rgba(245,158,11,.6), 0 40px 100px rgba(0,0,0,.68), inset 0 0 100px rgba(245,158,11,.12); } } @keyframes resultFlashLoss { 0%,100%{} 30%{ box-shadow: 0 0 0 2px rgba(239,68,68,.5), 0 40px 100px rgba(0,0,0,.68), inset 0 0 100px rgba(239,68,68,.1); } }