/* ═══════════════════════════════════════════════════════════════════════ WHICH :root VALUE ACTUALLY APPLIES (generated for build 1097) 66 custom properties are declared across 12 separate :root blocks in this file, and 27 of them are declared more than once with DIFFERENT values. CSS takes the last one, so editing the first declaration of --bg (line 5) changes nothing — the block at line 7851 wins. That has cost real time before, so here is the resolved value for every conflicting token, verified against a real CSS resolver rather than read off the source. To change one of these, edit the line named below. Consolidating the blocks would be better still, but it moves colours on every page and needs eyes on the result. token effective value edit this line --------------- ----------------------- ------------------------ --accent #eeb351 style.css:5351 (of 3) --accent2 #f4cd84 style.css:5351 (of 3) --bg #151a2e style.css:7851 (of 4) --bg2 #1a2036 style.css:7851 (of 4) --card #1c2139 style.css:7851 (of 4) --card2 #242b46 style.css:7851 (of 4) --gold #eeb351 style.css:5351 (of 3) --gold2 #f4cd84 style.css:5351 (of 4) --ink #eef1f7 style.css:5351 (of 2) --line rgba(140,160,210,.09) style.css:7851 (of 3) --line2 rgba(140,160,210,.16) style.css:7851 (of 3) --ln rgba(140,160,210,.10) style.css:7851 (of 4) --ln2 rgba(140,160,210,.18) style.css:7851 (of 4) --p #eeb351 style.css:5351 (of 3) --p2 #f4cd84 style.css:5351 (of 3) --p4 #fde8b0 style.css:5351 (of 2) --pg rgba(182,170,146,.35) style.css:2231 (of 2) --rr-css-build 39 style.css:7954 (of 3) --rust-bg #151a2e style.css:7851 (of 3) --rust-bg2 #1a2036 style.css:7851 (of 3) --rust-card #1c2139 style.css:7851 (of 3) --rust-card2 #242b46 style.css:7851 (of 3) --rust-ln rgba(140,160,210,.10) style.css:7851 (of 3) --rust-ln2 rgba(140,160,210,.18) style.css:7851 (of 3) --topstrip-h 0px style.css:5770 (of 3) --vio-line rgba(238,179,81,.30) style.css:5351 (of 2) --vio-soft rgba(238,179,81,.13) style.css:5351 (of 2) ═══════════════════════════════════════════════════════════════════════ */ /* ============================================================= 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) */ /* All top-level :root declarations, merged into one block. They were spread across 11 blocks and 27 tokens were declared more than once with different values, so the file disagreed with itself and only the last declaration counted. Editing an earlier one did nothing — a trap that has cost time more than once, including a fix in this codebase written against a token that turned out to be defined further down. Every value below is the one that was ALREADY winning. Verified token by token against a CSS resolver before and after the merge: all 66 resolve identically, so this changes nothing the browser computes — it just makes the file say what it already meant. The single :root inside a media query is left where it is; that one is conditional. */ :root{ --bg: #151a2e; --bg2: #1a2036; --card: #1c2139; --card2: #242b46; --p: #eeb351; --p2: #f4cd84; --p3: #f4cd84; --p4: #fde8b0; --pg: rgba(182,170,146,.35); --pg2: rgba(182,170,146,.15); --gold: #eeb351; --gold2: #f4cd84; --red: #ef4444; --red2: #fca5a5; --grn: #22c55e; --grn2: #f4cd84; --t1: #e8eaf0; --t2: #a7adbe; --t3: #6b7283; --ln: rgba(140,160,210,.10); --ln2: rgba(140,160,210,.18); --fd: 'Bebas Neue', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; --fu: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; --fm: 'Share Tech Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, 'Noto Sans Mono', monospace; --font-display: 'Bebas Neue', sans-serif; --font-ui: 'Rajdhani', sans-serif; --font-mono: 'Share Tech Mono', monospace; --hp-green: #22c55e; --hp-yellow: #eab308; --hp-orange: #f97316; --hp-red: #ef4444; --line: rgba(140,160,210,.09); --line2: rgba(140,160,210,.16); --green2: #f4cd84; --pos: #4ade80; --pglow: rgba(182,170,146,.32); --pglow2: rgba(182,170,146,.15); --r: 18px; --r2: 12px; --topbar-h: 64px; --ink: #eef1f7; --accent: #eeb351; --accent2: #f4cd84; --radius: 14px; --rust: #eeb351; --rust2: #f5c451; --rust3: #f4cd84; --steel: #353a47; --steel2: #23272f; --rust-bg: #151a2e; --rust-bg2: #1a2036; --rust-card: #1c2139; --rust-card2: #242b46; --rust-ln: rgba(140,160,210,.10); --rust-ln2: rgba(140,160,210,.18); --topstrip-h: 0px; --vio: #eeb351; --vio2: #f5c451; --vio3: #f4cd84; --vio-soft: rgba(238,179,81,.13); --vio-line: rgba(238,179,81,.30); --rr-css-build: 39; --game-champion: #f6c85a; --game-rustpot: #ef4444; --game-rustflip: #f0912e; --game-quickgame: #f6c85a; } /* ── reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── No text selection + no image/element dragging site-wide ────────────────── Photos can't be dragged off the page and text can't be highlighted/copied with the mouse. Inputs, textareas and editable fields stay fully selectable so typing and editing still work (the deposit address etc. has a Copy button). */ html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"], [contenteditable="true"] * { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } img, svg, picture, video, canvas, a, .skin-img, .ss-th, .cps-th { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } img { -webkit-touch-callout: none; pointer-events: auto; } 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(182,170,146,.20) 0%, transparent 45%), radial-gradient(ellipse at 80% 0%, rgba(196,184,158,.12) 0%, transparent 42%), radial-gradient(ellipse at 50% 100%, rgba(122,45,18,.22) 0%, transparent 52%), linear-gradient(180deg, #0a0c15 0%, #0a0c15 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: 1000; background: rgba(6,6,26,.93); border-bottom: 1px solid var(--ln); backdrop-filter: blur(22px); } .topbar-inner { width: min(1340px,98vw); margin: auto; min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* equal side columns → nav sits dead-centre */ align-items: center; gap: 12px; } /* brand */ .brand { display: flex; align-items: center; gap: 10px; justify-self: start; } .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(182,170,146,.06); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { min-height: 32px; padding: 0 9px; border-radius: 999px; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--t3); white-space: nowrap; transition: background .16s, color .16s; } @media (min-width: 1100px) and (max-width: 1520px){ .nav a{ padding: 0 6px; font-size: 11px; gap: 3px; } .nav{ gap: 1px; } } .nav a:hover { background: rgba(238,179,81,.1); color: var(--t1); } .nav a.active { background: rgba(238,179,81,.16); color: #ffe0a0; border: 1px solid rgba(238,179,81,.34); box-shadow: inset 0 0 12px rgba(238,179,81,.08); } .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(238,179,81,.28); background: rgba(238,179,81,.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(182,170,146,.08); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; transition: background .16s; } .pill:hover { background: rgba(182,170,146,.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(182,170,146,.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(238,179,81,.22); border-radius: var(--r); background: rgba(238,179,81,.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(182,170,146,.28); background: radial-gradient(72% 52% at 50% 30%, rgba(170,142,255,.14), transparent 62%), radial-gradient(circle at 50% 40%, rgba(42,15,82,.98), rgba(7,7,18,1) 74%), linear-gradient(180deg, transparent 48%, rgba(3,3,10,.5)); box-shadow: 0 0 0 1px rgba(182,170,146,.08), 0 40px 100px rgba(0,0,0,.68), inset 0 0 130px rgba(4,2,14,.55), inset 0 0 80px rgba(182,170,146,.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(210px,1fr) minmax(170px,280px) minmax(210px,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(182,170,146,.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(20px,2.1vw,32px); letter-spacing: .04em; line-height: 1.1; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ── 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(182,170,146,.14); stroke-width: 10; } .timer-prog { fill: none; stroke: var(--p2); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; /* = 2·π·r (r=52) so strokeDashoffset reveals progress */ transition: stroke-dashoffset .45s linear, stroke .3s; 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() */ } /* ── HP ring around the avatar — the depleting coloured arc (replaces the bar) ── */ .hp-ring-fill { transition: stroke-dashoffset .45s cubic-bezier(.4,0,.2,1); stroke: #f5a623; } #leftAvatarDisplay .hp-ring-fill { stroke: #f5a623; filter: drop-shadow(0 0 5px rgba(245,166,35,.5)); } #rightAvatarDisplay .hp-ring-fill { stroke: #38bdf8; filter: drop-shadow(0 0 5px rgba(56,189,248,.5)); } .low-hp .hp-ring-fill { stroke: #ef4444 !important; filter: drop-shadow(0 0 6px rgba(239,68,68,.6)) !important; } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .hp-ring-fill { transition: none; } } /* ── Attack: the logo briefly disappears and a Rust weapon comes out to fire ── */ .pfp-pic { transition: opacity .14s ease; } .char-display.attacking .pfp-pic { opacity: .55; } /* keep the fighter visible holding the weapon (was .12 → looked like a gun floating with no man) */ .atk-weapon { position: absolute; left: 57%; top: 44%; width: 138px; opacity: 0; z-index: 6; pointer-events: none; filter: drop-shadow(0 7px 16px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(245,166,35,.28)); transform: translate(-50%,-50%) scale(.4); animation: atkWpn 1.5s cubic-bezier(.2,1.5,.3,1) forwards; } .atk-weapon.flip { left: 43%; animation: atkWpnFlip 1.5s cubic-bezier(.2,1.5,.3,1) forwards; } @keyframes atkWpn { 0% { opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-3deg); } 7% { opacity:1; transform:translate(-50%,-50%) scale(.92) rotate(-1deg); } /* gun snaps into view FAST — visible before the bullet flies */ 22% { opacity:1; transform:translate(-50%,-50%) scale(1.18) rotate(2deg); } /* punch in */ 38% { transform:translate(-50%,-50%) scale(1) rotate(0); } 52% { transform:translate(-60%,-50%) scale(1.05) rotate(-2deg); } /* recoil kick */ 66% { transform:translate(-50%,-50%) scale(1) rotate(0); } 90% { opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.92); } } @keyframes atkWpnFlip { 0% { opacity:0; transform:translate(-50%,-50%) scaleX(-1) scale(.5) rotate(3deg); } 7% { opacity:1; transform:translate(-50%,-50%) scaleX(-1) scale(.92) rotate(1deg); } 22% { opacity:1; transform:translate(-50%,-50%) scaleX(-1) scale(1.18) rotate(-2deg); } 38% { transform:translate(-50%,-50%) scaleX(-1) scale(1) rotate(0); } 52% { transform:translate(-40%,-50%) scaleX(-1) scale(1.05) rotate(2deg); } 66% { transform:translate(-50%,-50%) scaleX(-1) scale(1) rotate(0); } 90% { opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scaleX(-1) scale(.92); } } /* The weapon-fire animation runs FULLY for EVERYONE — including players with the OS "reduce motion" setting on. In a duel the weapon that appears on a HIT is core game feedback, not decoration, and it must look the same for every member with zero per-user setup. (This block used to hide the weapon (opacity:0) or play a reduced fade under reduce-motion, which is exactly why some players saw the shield/door on misses but never a weapon on hits.) */ /* ── Miss: the defender raises a metallic shield to block ── */ .block-shield { position: absolute; left: 50%; top: 46%; width: 54px; opacity: 0; z-index: 7; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); transform: translate(-50%,-50%) scale(.94); transition: transform .09s ease-out, opacity .07s ease-out; /* snap in ONCE — no bounce/overshoot, no rotate swing */ } .block-shield.in { opacity: 1; transform: translate(-50%,-50%) scale(1); } .block-shield::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 18px 4px rgba(203,213,225,.4); opacity: 0; animation: shieldSpark .55s ease; } @keyframes shieldSpark { 0%{ opacity:.85; transform:scale(.55);} 100%{ opacity:0; transform:scale(1.3);} } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .atk-weapon, .block-shield { transition: none; } } /* ── HP kit: a fighter heals, health rises (green med-cross + "+N HP") ── */ .char-display.healing { box-shadow: inset 0 0 30px rgba(55,214,122,.35), 0 0 22px rgba(55,214,122,.3); } /* #8 — winner crown: bounces onto the champion's profile pic with a one-shot golden glow, then is removed at the next duel reset. Sits on the top of the avatar (the display is overflow:hidden, so a scale-bounce reads cleaner than a drop from above). Total ~1.6s → done before the next game. */ .champ-crown{ position:absolute; top:4.5%; left:50%; width:42%; max-width:90px; transform:translate(-50%,0) scale(0); transform-origin:center bottom; z-index:7; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(255,205,90,.55)); animation:champCrownIn .42s cubic-bezier(.34,1.56,.64,1) forwards; } .champ-crown svg{ width:100%; height:auto; display:block; } .champ-crown::before{ content:""; position:absolute; inset:-34%; border-radius:50%; background:radial-gradient(circle, rgba(255,210,90,.55), rgba(255,210,90,0) 66%); opacity:0; z-index:-1; animation:champCrownGlow 1.1s ease-out .06s 1; } @keyframes champCrownIn{ 0%{ transform:translate(-50%,-22%) scale(0) rotate(-14deg); opacity:0; } 60%{ transform:translate(-50%,3%) scale(1.12) rotate(4deg); opacity:1; } 82%{ transform:translate(-50%,0) scale(.95) rotate(-2deg); opacity:1; } 100%{ transform:translate(-50%,0) scale(1) rotate(0); opacity:1; } } @keyframes champCrownGlow{ 0%{ opacity:0; transform:scale(.6); } 40%{ opacity:.9; } 100%{ opacity:0; transform:scale(1.35); } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .champ-crown{ animation-duration:.01s; } .champ-crown::before{ animation:none; } } .heal-kit { position: absolute; left: 50%; top: 30%; width: 38px; z-index: 7; pointer-events: none; filter: drop-shadow(0 0 8px rgba(55,214,122,.6)); transform: translate(-50%,-50%) scale(.4); opacity: 0; animation: healKitPop 1.9s ease forwards; } @keyframes healKitPop { 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4);} 16%{ opacity:1; transform:translate(-50%,-50%) scale(1.12);} 30%{ transform:translate(-50%,-50%) scale(1);} 78%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,-50%) scale(.92);} } .heal-num { position: absolute; left: 50%; top: 24%; z-index: 7; pointer-events: none; color: #37d67a; font-weight: 800; font-family: var(--fd, sans-serif); font-size: 18px; text-shadow: 0 2px 6px rgba(0,0,0,.6); opacity: 0; transform: translate(-50%,0); animation: healNum 1.9s ease forwards; } @keyframes healNum { 0%{ opacity:0; transform:translate(-50%,0) scale(.8);} 20%{ opacity:1; transform:translate(-50%,-10px) scale(1);} 78%{ opacity:1; transform:translate(-50%,-24px);} 100%{ opacity:0; transform:translate(-50%,-32px);} } /* The heal medkit + heal number run their full animation under reduce-motion too. Like the weapon on a HIT, the medkit on a HEAL is core game feedback (a fighter just restored HP), not decoration — the old rule forced opacity:0 and hid every heal for reduce-motion players. Both cues are one small GPU-composited element, so showing them costs nothing while making the fight readable for everyone. */ /* ── Real licensed weapon / skin photos: bigger + bolder than the vector art ── */ .atk-weapon.real { width: 192px; filter: drop-shadow(0 9px 20px rgba(0,0,0,.78)); } /* On phones the fighter card is far smaller (~130-156px wide), so the desktop 192px weapon overflowed it and got clipped by the card's overflow:hidden — the weapon looked like it shot off the edge and vanished ("mobilde silahlar arkaplana kaçıyor"). Shrink it and pull it toward centre so it sits inside the card. */ @media (max-width:720px){ .atk-weapon { width: 104px; left: 53%; } .atk-weapon.flip { left: 47%; } .atk-weapon.real { width: 120px; } } .wpn-real { width: 100%; height: auto; display: block; } /* The revolver sprite has a heavy down-left grip → its whole-gun axis sits ~22° low, which (after the right-fighter flip) reads as "pointing at the ground". Rotating the IMAGE up neutralises it; because the parent flips on scaleX(-1) for the right fighter, this one rotation lands the gun ~horizontal for BOTH fighters. */ .wpn-revolver, .atk-weapon img[src*="revolver"] { transform: rotate(-18deg); transform-origin: 50% 50%; } /* barrel forward-up, NOT down (works for both fighters via the .flip mirror) */ .block-shield.real { width: 104px; top: 50%; } /* covers the avatar — the hit zone */ .block-shield.real.bs-l { left: 66%; } /* left fighter blocks a shot coming from the RIGHT */ .block-shield.real.bs-r { left: 34%; } /* right fighter blocks a shot coming from the LEFT */ .shield-real { width: 100%; height: auto; display: block; filter: drop-shadow(0 5px 14px rgba(0,0,0,.65)); } .block-shield.clink .shield-real { animation: shieldHit .36s ease; } /* bright clink when a missed shot strikes the shield */ @keyframes shieldHit { 0%{ filter: brightness(2.3) drop-shadow(0 0 18px rgba(255,255,255,.95)); } 100%{ filter: drop-shadow(0 5px 14px rgba(0,0,0,.65)); } } .heal-kit.real { width: 98px; top: 40%; } .medkit-real { width: 100%; height: auto; display: block; } /* ── Classic AWP scope reticle over the targeted fighter (fires with the sniper) ── */ .awp-scope-tgt { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 46%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.9) 100%); animation: awpScope 1.4s ease forwards; } .awp-scope-tgt::before, .awp-scope-tgt::after { content:""; position:absolute; background: rgba(0,0,0,.78); } .awp-scope-tgt::before { left:6%; right:6%; top:50%; height:1.5px; transform: translateY(-50%); } .awp-scope-tgt::after { top:6%; bottom:6%; left:50%; width:1.5px; transform: translateX(-50%); } .awp-ring { position:absolute; left:50%; top:50%; width:60%; padding-bottom:60%; height:0; transform: translate(-50%,-50%); border:1.5px solid rgba(0,0,0,.72); border-radius:50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 14px rgba(0,0,0,.4); } .awp-ring::after { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform: translate(-50%,-50%); border:1.2px solid rgba(255,56,56,.92); border-radius:50%; box-shadow:0 0 5px rgba(255,56,56,.6); } @keyframes awpScope { 0%{opacity:0;} 7%{opacity:1;} 86%{opacity:1;} 100%{opacity:0;} } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .awp-scope-tgt { animation: none; opacity: 0; } } /* ── Panel states ── */ .player-panel.winner { border-color: rgba(238,179,81,.6) !important; box-shadow: 0 0 0 1px rgba(238,179,81,.28), 0 0 56px rgba(238,179,81,.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% { box-shadow: inset 0 0 0 0 rgba(239,68,68,0); } 30%,70% { box-shadow: inset 0 0 0 3px rgba(239,68,68,.9), 0 0 40px rgba(239,68,68,.42); } } .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(182,170,146,.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(238,179,81,.2); border-radius: var(--r2); background: rgba(238,179,81,.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(32px,4vw,52px); color: var(--gold2); letter-spacing: .04em; word-break: break-all; display: block; line-height: 1.18; padding-top: .04em; } .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(182,170,146,.38); color: var(--p3); background: rgba(182,170,146,.08); } .battle-status:empty{ display:none; } /* during a duel the status text is cleared — collapse the box instead of leaving an empty rounded rectangle above the timer */ /* 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(182,170,146,.1); font-size: 12px; font-weight: 700; color: var(--p3); transition: background .16s; } .qa:hover { background: rgba(182,170,146,.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; } /* Champion Join button — MORE prominent: larger, brighter, uppercase, with a gentle pulse once a skin is picked (the button is enabled) so it clearly invites the click. */ #joinBtn{ min-height:54px !important; font-size:17px !important; font-weight:900 !important; letter-spacing:.6px !important; text-transform:uppercase !important; border-radius:14px !important; box-shadow:0 6px 24px var(--pg), inset 0 0 0 1px rgba(255,255,255,.08) !important; } #joinBtn:not(:disabled){ background:linear-gradient(135deg,#ffd873,#f3a92f) !important; color:#231604 !important; animation:joinPulse 1.8s ease-in-out infinite; } #joinBtn:not(:disabled):hover{ transform:translateY(-2px) !important; filter:brightness(1.08) !important; } @keyframes joinPulse{ 0%,100%{ box-shadow:0 6px 24px var(--pg), inset 0 0 0 1px rgba(255,255,255,.1); } 50%{ box-shadow:0 8px 34px var(--pg), 0 0 24px -2px var(--accent,#f3b53f), inset 0 0 0 1px rgba(255,255,255,.16); } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ #joinBtn:not(:disabled){ animation:none; } } .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(182,170,146,.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(182,170,146,.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(182,170,146,.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(182,170,146,.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(182,170,146,.4); color: var(--p3); background: rgba(182,170,146,.08); } .vp-chall { border-color: rgba(238,179,81,.35); color: var(--gold2); background: rgba(238,179,81,.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(182,170,146,.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: 4px; width: 130px; border-radius: 999px; background: linear-gradient(90deg,transparent,rgba(255,220,100,.65)); } .bullet .bullet-head { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg,#fffde7,#f4cd84,#eeb351); box-shadow: 0 0 16px rgba(238,179,81,.95); } /* 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(238,179,81,.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: 52px; font-weight: 900; letter-spacing: .04em; color: #ef4444; text-shadow: 0 0 30px rgba(239,68,68,.95), 0 2px 11px rgba(0,0,0,.95); white-space: nowrap; z-index: 20; transform: translateX(-50%); } .dmg-popup.show { animation: dmgFloat 1.25s 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 { right: auto; left: 0; top: 0; width: 42%; height: 100%; background: linear-gradient(to right, rgba(239,68,68,.34), rgba(239,68,68,.30) 50%, rgba(239,68,68,0) 100%); } .hit-flash-right { left: auto; right: 0; top: 0; width: 42%; height: 100%; background: linear-gradient(to left, rgba(239,68,68,.34), rgba(239,68,68,.30) 50%, rgba(239,68,68,0) 100%); } .hit-flash.flash { animation: flashAnim .5s 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%,#f4cd84 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,#f4cd84,#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.12);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,#8a2e1c,#eeb351,#f5c451); border: 1px solid rgba(194,239,206,.4); font-family: var(--fd); font-size: clamp(22px,3.5vw,46px); letter-spacing: .08em; color: #fff; box-shadow: 0 0 60px rgba(182,170,146,.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); } } /* ── v127 victory polish: punchier win moment ── */ .player-panel.winner { box-shadow: 0 0 0 2px rgba(245,197,66,.55), 0 0 84px rgba(245,185,65,.42) !important; } .player-panel.winner-showcase { transform: translateY(-8px) scale(1.03); z-index: 5; } .player-panel.loser { opacity: .38 !important; filter: grayscale(.62) brightness(.66) !important; transform: translateY(5px) scale(.975); } .winner-banner { overflow: hidden; font-size: clamp(24px,3.9vw,52px); box-shadow: 0 0 84px rgba(245,185,65,.5), 0 22px 56px rgba(0,0,0,.55); } .winner-banner::after { content:""; position:absolute; top:0; left:-60%; width:55%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity:0; pointer-events:none; } .winner-banner.show::after { animation: bannerShine 1.6s ease-in-out .4s; } @keyframes bannerShine { 0%{ left:-60%; opacity:0; } 28%{ opacity:1; } 100%{ left:125%; opacity:0; } } /* weapon display cards */ .weapon-display { top: 14%; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(182,170,146,.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(182,170,146,.28); border-radius: 7px; padding: 3px 9px; background: rgba(182,170,146,.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(238,179,81,.28); background: rgba(238,179,81,.05); } .lb-row:first-child b { color: var(--gold2); } .empty-row { color: var(--t3); justify-content: center; } /* ═══════════════════════════════════════════ CHAT ═══════════════════════════════════════════ */ /* Chat positioning/layout is defined in the DESIGN REFRESH section at the end of this file. */ .chat-head { padding: 10px 13px; background: rgba(182,170,146,.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 #chatClose { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--t3); font-size: 15px; display: grid; place-items: center; flex:0 0 auto; } .chat-messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 9px; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; scrollbar-color: var(--p) transparent; } .chat-message { background: rgba(182,170,146,.08); border: 1px solid rgba(182,170,146,.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(182,170,146,.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); } .mini-row .tx-link { color: var(--gold2, #e6b800); text-decoration: none; font-weight: 600; white-space: nowrap; } .mini-row .tx-link:hover { text-decoration: underline; } .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(238,179,81,.22); border-radius: var(--r); background: rgba(238,179,81,.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(182,170,146,.18); color: var(--p3); border-color: rgba(182,170,146,.34); } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1150px) { /* Mobile header: hamburger + bell on the LEFT, logo CENTERED (flex:1 fills the middle so it can never overlap a side cluster), backpack + balance on the RIGHT. Quick-deposit "+" hidden (tap the balance to open the wallet) to save width. */ .topbar-inner { display:flex !important; grid-template-columns:none !important; align-items:center; gap:5px; position:relative; } .mobile-menu { display: flex; order:1; margin:0; flex:0 0 auto; } .account { display:contents; } .notif-wrap { order:2; flex:0 0 auto; margin:0; } .brand { order:3; flex:1 1 auto; display:flex; justify-content:center; align-items:center; min-width:64px; margin:0; overflow:hidden; } .brand-beta { display:none; } .canta-btn { order:4; flex:0 0 auto; } .balance-group{ order:5; flex:0 1 auto; gap:4px; min-width:0; max-width:120px; } .balance-pill { min-width:0; overflow:hidden; } .balance-pill-main{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bal-plus { display:none !important; } .balance-pill { padding:5px 8px !important; } .profile-avatar-btn { width:32px !important; height:32px !important; } .profile-wrap { order:6; flex:0 0 auto; margin:0; } .topbar .brand .brand-logo { height:34px !important; width:auto; max-width:100%; object-fit:contain; } .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; } /* Keep the two fighters SIDE-BY-SIDE on mobile so shots fire horizontally (left↔right), not top-to-bottom. The control/queue panel drops full-width below them. minmax(0,1fr) (NOT plain 1fr = minmax(auto,1fr)) forces the two seats to EQUAL halves — plain 1fr let the champion panel's content min-width balloon its column and squished the challenger seat to a sliver, clipping the challenger's avatar/ring (~47px cut on ~390px phones). min-width:0 lets the panel contents shrink to fit their half instead of overflowing under overflow:hidden. */ .arena-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:10px; } .arena-grid .left-panel, .arena-grid .right-panel { min-width: 0; } .arena-grid .left-panel { grid-column: 1; grid-row: 1; } .arena-grid .right-panel { grid-column: 2; grid-row: 1; } .arena-grid .control-panel { grid-column: 1 / -1; grid-row: 2; order: 0; 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; } /* Two seats share ~170px each on a phone; trim the generous 18px panel padding so the avatar/ring and the "Next challenger" placeholder fit their half instead of spilling under overflow:hidden. */ .player-panel { padding: 11px 8px; } .empty-seat { padding: 12px 4px; } .arena-header { flex-direction: column; align-items: flex-start; } .hero-pool-display { width: 100%; text-align: center; } } /* ═══════════════════════════════════════════ 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(238,179,81,.12); border: 1px solid rgba(238,179,81,.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(238,179,81,.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: 320px; 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(182,170,146,.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(182,170,146,.12) 0%,transparent 60%); pointer-events:none; } /* ════════════════════════════════════════════════ COINFLIP COIN — reliable 2D edge-flip (scaleX squash). The coin squashes horizontally to "edge-on" and back; at each edge-on point JS swaps the visible face. The swap interval lengthens as the toss decelerates, so the final face settles naturally on the winner — no snap, never blank, and renders identically in every browser. ════════════════════════════════════════════════ */ .cf-coin-wrap { position: relative; z-index: 2; transform-origin: 50% 50%; transform: translateY(0) scale(1); transform-style: preserve-3d; /* let the stage perspective flow through to the coin's depth layers */ will-change: transform; } /* Gentle toss arc, stays inside the stage (max ~58px lift). */ @keyframes coinThrow { 0% { transform: translateY(0) scale(1); } 22% { transform: translateY(-48px) scale(1.12); } 46% { transform: translateY(-58px) scale(1.16); } 64% { transform: translateY(-42px) scale(1.12); } 84% { transform: translateY(-12px) scale(1.04); } 100% { transform: translateY(0) scale(1); } } .cf-coin-wrap.flipping { animation: coinThrow var(--throw-dur,2.8s) cubic-bezier(.3,.02,.3,1) forwards; } .cf-coin { width: 150px; height: 150px; position: relative; box-shadow: 0 10px 28px rgba(0,0,0,.6); /* box-shadow (NOT filter) so preserve-3d keeps the edge thickness */ border-radius: 50%; will-change: transform; } .cf-face { position: absolute; inset: 0; border-radius: 50%; display: none; /* only the active face shows */ } .cf-face-inner { width: 100%; height: 100%; } .cf-face svg, .cf-face-inner svg { width: 100%; height: 100%; display: block; } .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 (no post-land bounce — coin settles flat and clean) */ .cf-coin.landed-red { filter: drop-shadow(0 0 28px rgba(234,179,8,.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)); } .cf-coin.settle { transform: scaleY(1); } /* ── 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: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(196,184,158,.04), rgba(0,0,0,.18)); border: 1px solid var(--rust-ln); } /* 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; width: 100%; max-width: 360px; align-items: stretch; } .cf-wager-section .cf-wager-input, .cf-wager-section input { text-align: center; font-size: 18px; } .cf-wager-label { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: .12em; text-align:center; } .cf-create-btn { max-width: 100%; width:100%; min-height:50px; font-size:16px; } .cf-side-picker { justify-content: center; } /* ── 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: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; font-family: var(--fd); letter-spacing: 0; /* letter-spacing offset the visual centre → removed */ text-align: center; line-height: 1; text-indent: 0; } .cf-mini-coin > * { line-height: 1; } .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; display: inline-flex; align-items: center; gap: 8px; } .cf-game-wager .cf-game-skin, .cf-game-wager .skin-stack .ss-th{ width:34px; height:34px; } /* 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(182,170,146,.1); border: 1px solid rgba(182,170,146,.25); color: var(--p3); font-size: 11px; font-weight: 600; transition: background .16s; cursor: pointer; } .cf-verify-btn:hover { background: rgba(182,170,146,.2); } .cf-verify-panel { display: none; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; border: 1px solid rgba(182,170,146,.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; } /* v149 — Safety net: lock page scroll whenever ANY modal overlay is open, so every modal is TRULY centred. A lingering scrollbar offsets a flex-centred modal by ~half its width (~7px) — this catches modals that don't set a JS lock class (daily / tip / wallet / mute, and the rustpot watch modal). :has() is supported in all current browsers; older ones simply fall back to the previous behaviour (no regression). */ body:has(.cf-modal.open), body:has(.app-modal.open){ overflow: hidden; } .cf-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 80px 16px 24px; /* clear the sticky top nav so the X is never under the menu */ opacity: 1; transition: opacity .2s ease; /* smooth close instead of an abrupt vanish (6c spectate→own-game hand-off) */ } .cf-modal.open { display: flex; } .cf-modal.cf-closing { opacity: 0 !important; pointer-events: none; } /* fade out; JS removes .open after the fade */ .cf-modal-overlay { position: absolute; inset: 0; /* Translucent + blurred so the SITE stays visible behind the flip (user asked for this repeatedly). The blur keeps the centred coin the clear focus without hiding the page. */ background: radial-gradient(120% 90% at 50% 34%, rgba(12,9,28,.30), rgba(6,6,14,.58) 72%); backdrop-filter: blur(13px) saturate(.85) brightness(.7); -webkit-backdrop-filter: blur(13px) saturate(.85) brightness(.7); animation: cfFadeIn .2s ease; } .cf-modal-card { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: calc(100vh - 112px); overflow-y: auto; border-radius: 22px; border: 1px solid var(--ln2); background: linear-gradient(180deg, rgba(26,16,54,.80), rgba(10,9,26,.86)); backdrop-filter: blur(22px) saturate(.92); -webkit-backdrop-filter: blur(22px) saturate(.92); box-shadow: 0 0 0 1px rgba(182,170,146,.14), 0 40px 120px rgba(0,0,0,.55); 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; } /* Shared copy-link icon for watch modals — sits just left of the close button. */ .watch-copy{ position:absolute; top:12px; right:54px; width:34px; height:34px; border-radius:10px; border:1px solid var(--ln); background:rgba(0,0,0,.35); color:var(--t2); cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; transition:background .16s,color .16s; } .watch-copy svg{ width:17px; height:17px; } .watch-copy:hover{ background:rgba(238,179,81,.18); color:#ffd166; } .watch-copy.ok{ background:rgba(74,222,128,.22); color:#86efac; border-color:rgba(74,222,128,.5); } /* RUSTPOT watch modal: roomy enough for the map, which is moved in for the replay. */ .cf-watch-card{ max-width:620px; } .cf-watch-stage{ display:flex; justify-content:center; padding:4px 2px 2px; } .cf-watch-stage .rp-map{ margin:0; } .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: grid; /* grid place-items = rock-solid dead-centre */ place-items: center; min-height: 356px; border-radius: 20px; border: 1px solid var(--ln2); background: radial-gradient(circle at 50% 36%, rgba(56,22,104,.55), rgba(8,8,24,.96) 70%), linear-gradient(180deg, rgba(16,12,34,.9), rgba(6,6,20,.98)); box-shadow: inset 0 0 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; margin: 10px 0 16px; } /* Soft glow halo behind the coin — purely decorative, centred, never shifts layout. */ .cf-modal-stage::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(238,179,81,.22), transparent 68%); filter: blur(8px); pointer-events: none; z-index: 0; } /* The coin always sits dead-centre in the grid cell. left/right/margin guards neutralise any stale positioning that older cached CSS may have applied. */ .cf-modal-stage .cf-coin-wrap { position: relative; z-index: 2; grid-area: 1 / 1; /* same cell as the result overlay, both centred */ margin: 0 auto; left: auto; right: auto; } .cf-modal-stage .cf-coin { width: 200px; height: 200px; } /* Bigger, higher toss for the (now larger) modal stage */ .cf-modal-stage .cf-coin-wrap.flipping{ animation: coinThrowBig var(--throw-dur,2.8s) linear forwards !important; } @keyframes coinThrowBig { 0% { transform: translateY(0) scale(1); } 22% { transform: translateY(-62px) scale(1.13); } 46% { transform: translateY(-78px) scale(1.17); } 64% { transform: translateY(-56px) scale(1.13); } 84% { transform: translateY(-18px) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .cf-modal-result { position: absolute !important; bottom: 16px; left: 50% !important; right: auto !important; transform: translateX(-50%) scale(.85) !important; opacity: 0; font-family: var(--fd); font-size: 27px; letter-spacing: .06em; padding: 8px 26px; border-radius: 999px; white-space: nowrap; transition: opacity .3s, transform .3s; z-index: 3; pointer-events: none; } .cf-modal-result.show-red { opacity: 1; transform: translateX(-50%) scale(1) !important; background: linear-gradient(180deg, rgba(239,68,68,.28), rgba(239,68,68,.14)); color: #fecaca; border: 1px solid rgba(239,68,68,.55); box-shadow: 0 6px 26px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.15); } .cf-modal-result.show-blue { opacity: 1; transform: translateX(-50%) scale(1) !important; background: linear-gradient(180deg, rgba(59,130,246,.28), rgba(59,130,246,.14)); color: #bfdbfe; border: 1px solid rgba(59,130,246,.55); box-shadow: 0 6px 26px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.15); } /* 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(182,170,146,.08); transform: translateY(-1px); } .cf-watch-btn { min-height: 30px; padding: 0 12px; border-radius: 8px; background: linear-gradient(135deg, rgba(182,170,146,.25), rgba(196,184,158,.18)); border: 1px solid rgba(196,184,158,.4); color: #f0e0bf; 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 */ /* ───────────────────────────────────── 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(182,170,146,.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(74,222,128,.12); color: var(--pos); border: 1px solid rgba(74,222,128,.28); } .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(--pos); } .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 { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; border: 1px solid rgba(238,179,81,.22); border-radius: var(--r); background: linear-gradient(135deg,rgba(238,179,81,.06),rgba(0,0,0,.3)); padding: 28px 24px; margin-bottom: 18px; } .lb-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(58% 120% at 24% 28%, rgba(238,179,81,.16), transparent 62%); animation:lbHeroGlow 5s ease-in-out infinite; } .lb-hero-prize{ position:relative; z-index:1; } .lb-hero-prize strong{ animation:lbPrizeGlow 3s ease-in-out infinite; } @keyframes lbHeroGlow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } } @keyframes lbPrizeGlow{ 0%,100%{ text-shadow:0 2px 10px rgba(238,179,81,.22); } 50%{ text-shadow:0 0 28px rgba(238,179,81,.6), 0 2px 10px rgba(238,179,81,.42); } } .lb-hero-prize { text-align: center; } .lb-hero-prize span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--t3); margin-bottom: 6px; } .lb-hero-prize strong { display: inline-flex; align-items: center; justify-content: center; gap: .12em; font-family: var(--fd); font-size: clamp(46px,7vw,82px); color: var(--gold2); letter-spacing: .02em; line-height: 1; white-space: nowrap; } .lb-hero-prize strong .coin-ico{ width:.6em; height:.6em; margin-right:0; vertical-align:baseline; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(120,80,20,.5)); } .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(238,179,81,.4); background: rgba(238,179,81,.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(238,179,81,.4) !important; background: rgba(238,179,81,.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(238,179,81,.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(182,170,146,.12); color: var(--p3); border: 1px solid rgba(182,170,146,.25); } .fair-event-badge.left_battle_win { background: rgba(34,197,94,.1); color: var(--pos); 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(238,179,81,.1); color: var(--gold2);border-color: rgba(238,179,81,.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(238,179,81,.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(196,184,158,.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(238,179,81,.6), 0 40px 100px rgba(0,0,0,.68), inset 0 0 100px rgba(238,179,81,.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); } } /* ═══════════════════════════════════════════════════════════════ 2025 DESIGN REFRESH — professional, modern, less "AI template". Appended last so these rules win the cascade. ═══════════════════════════════════════════════════════════════ */ /* Remove the gimmicky grain/scanline overlays that read as "template". */ .grain, .scanlines { display:none !important; } body{ background: radial-gradient(1100px 600px at 80% -10%, rgba(198,158,96,.09), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(170,150,120,.05), transparent 55%), var(--bg); color: var(--t1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Topbar: cleaner, tighter, glassy ── */ .topbar{ background: linear-gradient(180deg, rgba(15,16,25,.84), rgba(11,11,18,.72)); border-bottom: 1px solid rgba(238,179,81,.13); box-shadow: 0 4px 22px rgba(0,0,0,.36); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); } .topbar-inner{ min-height: var(--topbar-h); width:min(1320px,95vw); gap:18px; } .brand-icon{ background: linear-gradient(145deg, var(--accent2), var(--accent)); box-shadow: 0 6px 18px rgba(182,170,146,.28); border-radius: 12px; } .brand b{ color: var(--ink); letter-spacing:.06em; font-weight:400; } .brand small{ color: var(--t3); } /* Nav: flat, no pill-in-pill, clean underline on active */ .nav{ background: transparent; border: 0; padding: 0; gap: 2px; } .nav a{ color: var(--t2); font-weight: 600; font-size: 12.5px; border-radius: 10px; padding: 0 10px; min-height: 36px; border: 1px solid transparent; } @media (min-width: 1100px) and (max-width: 1540px){ .nav a{ font-size: 11px; padding: 0 7px; } } .nav a:hover{ background: rgba(255,255,255,.05); color: var(--ink); } .nav a.active{ background: rgba(182,170,146,.14); color: var(--accent2); border-color: rgba(182,170,146,.30); } .daily-free-nav{ color: var(--gold2) !important; } /* Account pills: subtle, modern */ .balance-pill{ border-radius: 10px; border:1px solid rgba(238,179,81,.30); background: rgba(238,179,81,.08); color: var(--gold2); } .pill{ border-radius: 10px; border:1px solid var(--ln2); background: rgba(255,255,255,.04); color: var(--t1); } .pill:hover{ background: rgba(255,255,255,.08); } .pill.hot{ background: linear-gradient(145deg, var(--accent2), var(--accent)); border-color: transparent; color:#fff; box-shadow: 0 6px 16px rgba(182,170,146,.30); } .pill.hot:hover{ filter: brightness(1.06); } /* Cards / sections: softer, flatter, less neon */ .section-block, .arena, .panel, .auth-card, .cf-card, .lb-card, .stat-card, .wallet-card{ background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--ln); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 18px 50px rgba(0,0,0,.35); } .eyebrow{ color: var(--accent2); letter-spacing:.16em; } /* Primary buttons everywhere → unified accent */ .btn-primary, .btn.primary, button.primary, .cta, .join-btn{ background: linear-gradient(145deg, var(--accent2), var(--accent)) !important; border: 0 !important; color:#fff !important; box-shadow: 0 8px 22px rgba(182,170,146,.28) !important; } .btn-primary:hover, .btn.primary:hover, .join-btn:hover{ filter: brightness(1.06); } /* Make the main content leave room for the fixed chat sidebar on wide screens */ @media (min-width: 1401px){ body.chat-open main.page{ padding-right: 0; } } /* ══════════════════════════════════════════ FULL-HEIGHT CHAT SIDEBAR (right side, under topbar) ══════════════════════════════════════════ */ .chat-drawer{ position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: 340px; max-width: 88vw; z-index: 150; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(180deg, rgba(20,20,31,.98), rgba(11,11,18,.99)); border-left: 1px solid var(--ln2); box-shadow: -16px 0 48px rgba(0,0,0,.4); transform: translateX(0); transition: transform .28s cubic-bezier(.4,0,.2,1); } /* Closed state slides it off-screen, leaving just the tab */ .chat-drawer.closed{ transform: translateX(100%); } /* Re-open tab sits on the left edge of the panel */ .chat-toggle{ position: absolute; left: -42px; top: 18px; width: 42px; min-height: 120px; padding: 0; flex-direction: column; gap: 8px; border-radius: 12px 0 0 12px; background: linear-gradient(145deg, var(--accent2), var(--accent)); border: 1px solid rgba(255,255,255,.12); border-right: 0; box-shadow: -6px 0 18px rgba(182,170,146,.3); writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; letter-spacing: .12em; color:#fff; } .chat-toggle .chat-icon{ writing-mode: horizontal-tb; font-size:16px; } /* The panel fills the whole drawer height now */ .chat-panel{ width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; overflow: hidden; } /* #12 — site logo pinned to the very top of the chat column, hard-left aligned */ .chat-drawer.closed .chat-panel{ display: flex; } /* keep mounted; drawer slides */ .chat-head{ padding: 14px 16px; background: rgba(182,170,146,.08); border-bottom: 1px solid var(--ln); } .chat-head strong{ color: var(--accent2); font-size: 14px; } .chat-messages{ padding: 12px; gap: 3px; } .chat-message{ background: rgba(255,255,255,.035); border: 1px solid var(--ln); border-radius: 10px; transition: background .16s ease, border-color .16s ease; } .chat-message:hover{ background: rgba(238,179,81,.06); border-color: rgba(238,179,81,.2); } .chat-message.chat-mentions-me{ background: rgba(238,179,81,.11) !important; border-color: rgba(238,179,81,.36) !important; box-shadow: inset 2px 0 0 var(--accent,#eeb351); } .chat-message b{ color: var(--accent2); } .chat-form{ padding: 12px; border-top: 1px solid var(--ln); } .chat-form input{ border-radius: 10px; background: rgba(0,0,0,.35); } .chat-form input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(238,179,81,.13); } .chat-form button{ border-radius: 10px; background: var(--accent); } .chat-form button:hover{ background: var(--accent2); } /* On narrow screens the chat overlays content full-height instead of reserving space */ @media (max-width: 1099px){ main.page{ padding-right: 0; } .chat-drawer{ width: 320px; } } /* ══════════════════════════════════════════ GENERIC MODAL (used by Daily claim + others) ══════════════════════════════════════════ */ .app-modal{ position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; } .app-modal.open{ display: flex; } /* The shared confirm dialog is opened FROM other modals (e.g. the withdraw sheet), so it must always sit above them — otherwise, being earlier in the DOM at the same z-index, it hides behind them. */ #confirmModal{ z-index: 2100 !important; } .app-modal__overlay{ position:absolute; inset:0; background: rgba(6,6,12,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: amFade .2s ease; } .app-modal__card{ position: relative; z-index:1; width:100%; max-width: 380px; border-radius: 18px; border:1px solid var(--ln2); background: linear-gradient(180deg, var(--card2), var(--card)); box-shadow: 0 30px 90px rgba(0,0,0,.6); padding: 28px 24px; text-align: center; animation: amPop .26s cubic-bezier(.2,1.1,.4,1); } @keyframes amFade{ from{opacity:0} to{opacity:1} } @keyframes amPop{ 0%{opacity:0; transform: translateY(14px) scale(.96)} 100%{opacity:1; transform:none} } .app-modal__close{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:9px; border:1px solid var(--ln); background: rgba(255,255,255,.04); color: var(--t2); cursor:pointer; } .app-modal__close:hover{ background: rgba(239,68,68,.16); color:#fca5a5; } .app-modal__icon{ font-size: 46px; line-height:1; margin-bottom: 10px; } .app-modal__title{ font-family: var(--fd); font-size: 26px; letter-spacing:.03em; color: var(--ink); margin-bottom: 6px; } .app-modal__amount{ font-family: var(--fd); font-size: 52px; color: var(--gold2); line-height:1; margin: 6px 0 4px; } .app-modal__text{ color: var(--t2); font-size: 14px; margin-bottom: 18px; } .app-modal__btn{ width:100%; min-height: 46px; border:0; border-radius: 12px; cursor:pointer; font-weight:700; font-size: 15px; color:#fff; background: linear-gradient(145deg, var(--accent2), var(--accent)); box-shadow: 0 8px 22px rgba(182,170,146,.3); } .app-modal__btn:hover{ filter: brightness(1.07); } .app-modal__btn:disabled{ opacity:.55; cursor:default; filter:none; } .app-modal__btn.gold{ background: linear-gradient(145deg, var(--gold2), var(--gold)); color:#231a02; box-shadow:0 8px 22px rgba(238,179,81,.3); } /* Empty fighter-seat character silhouette */ .empty-char{ width: 96px; height: 134px; opacity:.9; display:block; margin: 0 auto 8px; } .empty-seat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .empty-seat b{ color: var(--t2); font-size: 15px; } .empty-seat span{ color: var(--t3); font-size: 12px; } /* "Searching for a challenger" — the empty seat actively scans so the lobby never reads as frozen while a Champion waits for an opponent. Pure CSS, no JS timers. */ .es-ring{ /* rotation now handled by an SVG (reliable centre in every browser — the old CSS transform-box:fill-box could rotate around the wrong origin, the "slides down then fixes" glitch) */ }.es-pulse{ transform-box: fill-box; transform-origin: 50% 50%; animation: esPulse 2.2s ease-out infinite; } @keyframes esPulse{ 0%{ transform: scale(.55); opacity:.75; } 70%{ opacity:0; } 100%{ transform: scale(2.05); opacity:0; } } .es-q{ animation: esQ 2.2s ease-in-out infinite; } @keyframes esQ{ 0%,100%{ opacity:.45; } 50%{ opacity:.95; } } .es-label{ display:inline-flex; align-items:baseline; } /* static — no opacity pulse (waiting area must not blink) */.es-dots{ display:inline-block; width:1.05em; text-align:left; font-style:normal; } /* Static "…" — the cycling ellipsis was read as the panel flickering ("sometimes 3 dots, sometimes 2"). A waiting seat is already visually calm; animating the dots gave it a twitch with no information in it. */ .es-dots::after{ content:"..."; } @keyframes esDots{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } 100%{ content:""; } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .es-ring,.es-pulse,.es-q,.es-label,.es-dots::after{ animation: none; } .es-dots::after{ content:"..."; } } /* Lone Champion "holding the throne" — a calm golden pulse on their panel while they wait for a challenger, so the held seat reads as READY (paired with the scanning empty seat). Combat-safe: the class is only toggled on in the waiting state. */ .player-panel.champ-ready{ border-color: rgba(255,201,94,.42); animation: champReady 2.6s ease-in-out infinite; } @keyframes champReady{ 0%,100%{ box-shadow: 0 0 0 1px rgba(255,201,94,.10), 0 0 22px -8px rgba(255,190,80,.32); } 50% { box-shadow: 0 0 0 1px rgba(255,201,94,.30), 0 0 38px -4px rgba(255,190,80,.58); } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .player-panel.champ-ready{ animation:none; box-shadow: 0 0 0 1px rgba(255,201,94,.22); } } /* Guest CTA buttons — cleaner */ .guest-cta{ display:flex; flex-direction:column; gap:10px; align-items:stretch; text-align:center; } .guest-cta p{ color: var(--t2); font-size: 14px; margin-bottom: 4px; } .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height: 44px; border-radius: 12px; border:1px solid var(--ln2); background: rgba(255,255,255,.04); color: var(--t1); font-weight:700; font-size:14px; transition: background .16s, border-color .16s; } .btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: var(--accent); } /* Call Bot button (coinflip own game) */ /* ═══════════════════════════════════════════════════════════════ RUST THEME — industrial, weathered, survival aesthetic. Inspired by the Rust (Facepunch) game palette: burnt orange, gunmetal, rusted steel. Appended last to win the cascade. ═══════════════════════════════════════════════════════════════ */ body{ background: radial-gradient(1100px 600px at 80% -10%, rgba(182,170,146,.12), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(196,184,158,.06), transparent 55%), var(--rust-bg); } /* Topbar / brand */ .topbar{ background: rgba(15,13,24,.82); border-bottom:1px solid var(--rust-ln); } .brand-icon{ background: linear-gradient(145deg, var(--rust3), var(--rust)); box-shadow:0 6px 18px rgba(182,170,146,.34); } .brand b{ letter-spacing:.08em; } /* Nav active = purple */ .nav a.active{ background: rgba(182,170,146,.18); color: var(--rust3); border-color: rgba(196,184,158,.32); } .nav a:hover{ color:#fff; } /* Cards → weathered metal panels */ .section-block, .arena, .panel, .auth-card, .cf-card, .lb-card, .stat-card, .wallet-card, .player-panel, .cf-game-row, .app-modal__card, .chat-panel, .cf-modal-stage, .section, .stat-box{ background: linear-gradient(180deg, var(--rust-card2), var(--rust-card)); border: 1px solid var(--rust-ln); } .eyebrow{ color: var(--rust3); } /* Primary buttons → rust gradient */ .btn-primary, .btn.primary, button.primary, .cta, .join-btn, .cf-join-btn, .app-modal__btn, #joinBtn, .chat-form button{ background: linear-gradient(145deg, var(--rust3), var(--rust)) !important; border:0 !important; color:#fff !important; box-shadow: 0 8px 22px rgba(182,170,146,.32) !important; } .btn-primary:hover, .join-btn:hover, .cf-join-btn:hover{ filter:brightness(1.08); } /* Chat accents */ .chat-drawer{ background: linear-gradient(180deg, rgba(34,28,24,.98), rgba(20,17,15,.99)); border-left:1px solid var(--rust-ln2); } .chat-head{ background: rgba(182,170,146,.10); } .chat-head strong, .chat-message b{ color: var(--rust3); } .chat-toggle{ background: linear-gradient(145deg, var(--rust3), var(--rust)); box-shadow:-6px 0 18px rgba(182,170,146,.3); } /* Prize pool / hero accents stay warm */ .hero-pool-display, .prize-pool-box{ border-color: rgba(196,184,158,.25); } /* HP bar → rust health */ /* Old bottom-bar fills kept rust-tinted; the top HP bars use health colors (green→red) for clarity — see .health-section-top rules below. */ .hp-fill{ background: linear-gradient(90deg, var(--rust2), var(--rust3)) !important; } /* Duel "VS" + accents */ .cf-vs-text, .vs-text{ color: var(--rust3); } /* Section titles underline */ .section-title h3{ border-bottom-color: var(--rust-ln2); } /* Champion/Challenger seat labels + VS → rust palette */ .seat-badge b{ color: var(--rust3) !important; } .champion-badge .seat-badge b{ color: var(--gold2) !important; } .cf-modal-stage strong, .arena strong[style*="red2"], .vs-badge strong{ color: var(--rust3) !important; } /* ── Rust brand icon (SVG plate) ── */ .brand-icon-rust{ width: 42px; height: 42px; padding: 0; background: transparent !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 10px rgba(182,170,146,.4)); } .brand-icon-rust svg{ width: 100%; height: 100%; } /* ── Weathered metal texture on key panels (subtle, industrial) ── */ .arena, .section-block, .cf-card, .lb-card, .wallet-card, .auth-card{ position: relative; background-image: linear-gradient(180deg, var(--rust-card2), var(--rust-card)), repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px); background-blend-mode: normal, overlay; } /* corner rivets on the arena + section blocks for that bolted-plate look */ .arena::before, .arena::after{ content:""; position:absolute; width:7px; height:7px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #5a4a42, #1a120e); box-shadow: inset 0 0 2px rgba(0,0,0,.8); top: 12px; pointer-events:none; z-index:1; } .arena::before{ left: 12px; } .arena::after{ right: 12px; } /* Warmer, grittier scrollbar */ ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: var(--rust-bg2); } ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#5a352a,#3a201a); border-radius: 6px; border: 2px solid var(--rust-bg2); } ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg,#7a4636,#4a281f); } /* "LIVE ARENA" eyebrow → ember glow */ .eyebrow{ text-shadow: 0 0 12px rgba(196,184,158,.3); } /* Hero title — slightly more rugged */ .page-hero h1, .hero-title{ text-shadow: 0 2px 20px rgba(182,170,146,.18); } /* ── Modern brand wordmark ── */ .brand-text b{ font-family: var(--fd, 'Bebas Neue', sans-serif); font-size: 25px; letter-spacing: .06em; line-height: .95; color: #f4ece6; display:flex; gap:.18em; align-items:baseline; } .brand-text .brand-accent{ color: var(--rust3); } .brand-text small{ display:block; font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--t3); margin-top: 2px; } .brand-icon-rust{ filter: drop-shadow(0 3px 12px rgba(196,184,158,.45)); transition: transform .2s; } .brand:hover .brand-icon-rust{ transform: rotate(-6deg) scale(1.05); } /* ── Fix leftover purple in hero titles → rust gradient ── */ .arena-header h1, .page-hero h1, .hero-title, .auth-card h1{ background: linear-gradient(135deg, #fff 28%, var(--rust3)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Coinflip legend: keep dots + text vertically centered (fix shift) ── */ .cf-legend{ display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap; } .cf-legend-item{ display:inline-flex; align-items:center; gap:8px; line-height:1; } .cf-legend-dot{ flex:0 0 auto; width:11px; height:11px; border-radius:50%; display:inline-block; } /* ── Chat 'Login to chat' + messages: align tidy ── */ .chat-login-row, .chat-foot-note{ text-align:center; } /* Inline button icon (SVG) */ .btn-ico{ width:17px; height:17px; vertical-align:-3px; margin-right:6px; display:inline-block; } .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; } /* ═══════════════ LEVEL / XP ═══════════════ */ .level-card{ background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); border-radius:14px; padding:18px; margin-bottom:16px; } .level-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; } .level-badge{ flex:0 0 auto; width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:18px; color:#fff; background:linear-gradient(145deg,var(--rust3),var(--rust)); box-shadow:0 6px 16px rgba(182,170,146,.35); } .level-title{ font-weight:700; font-size:15px; color:var(--t1); } .level-xp{ font-size:12.5px; color:var(--t2); margin-top:2px; } .level-bar{ height:12px; border-radius:7px; background:rgba(0,0,0,.4); overflow:hidden; border:1px solid var(--rust-ln); } .level-fill{ height:100%; background:linear-gradient(90deg,var(--rust2),var(--rust3)); border-radius:7px; transition:width .5s ease; box-shadow:0 0 12px rgba(196,184,158,.5); } .level-hint{ font-size:11.5px; color:var(--t3); margin-top:8px; } /* ═══════════════ AFFILIATE ═══════════════ */ .aff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } @media(max-width:860px){ .aff-grid{ grid-template-columns:1fr; } } .aff-code-box{ text-align:center; padding:18px; border-radius:12px; background:rgba(182,170,146,.08); border:1px dashed var(--rust-ln2); margin-bottom:14px; } .aff-code-label{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--t3); margin-bottom:6px; } .aff-code{ font-family:var(--fd); font-size:34px; letter-spacing:.1em; color:var(--rust3); } .aff-link-row{ display:flex; gap:8px; } .aff-link-input{ flex:1; min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); font-size:13px; } .aff-link-row .btn-primary{ min-height:44px; padding:0 22px; border-radius:10px; } .aff-hint{ font-size:12px; color:var(--t3); margin-top:10px; } .aff-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .aff-stat{ text-align:center; padding:16px 8px; border-radius:12px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); } .aff-stat-num{ font-family:var(--fd); font-size:28px; color:var(--rust3); } .aff-stat-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); margin-top:4px; } .aff-list{ display:flex; flex-direction:column; gap:8px; } .aff-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); } .aff-row-name{ font-weight:700; color:var(--t1); flex:1; } .aff-row-lvl{ font-size:12px; color:var(--rust3); font-weight:700; } .aff-row-date{ font-size:12px; color:var(--t3); } /* ═══════════════ ADMIN ═══════════════ */ .admin-notice{ background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#f4cd84; padding:12px 16px; border-radius:10px; margin-bottom:16px; } .admin-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin-bottom:20px; } @media(max-width:520px){ .admin-stats{ grid-template-columns:repeat(2,1fr); } } /* Stat-group label (Overview / Games / Last 24h) on the Stats page */ .adm-stats-group{ font-family:var(--fu); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--gold2); margin:4px 0 11px; display:flex; align-items:center; gap:10px; } .adm-stats-group::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--rust-ln),transparent); } /* Admin page-by-page navigation (each section is its own page) */ .admin-nav{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:22px; padding:7px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.16)); border:1px solid var(--rust-ln); border-radius:14px; } .admin-nav-tab{ font-family:var(--fu); font-weight:700; font-size:13px; color:var(--t2); text-decoration:none; padding:8px 14px; border-radius:9px; background:transparent; border:1px solid transparent; transition:background .15s,border-color .15s,color .15s,transform .08s; } .admin-nav-tab:hover{ color:var(--t1); border-color:var(--rust-ln); background:rgba(255,255,255,.05); } .admin-nav-tab.active{ color:#1a1205; background:linear-gradient(180deg,#f4cd84,#eeb351); border-color:#eeb351; box-shadow:0 4px 14px rgba(238,179,81,.25); } .admin-nav-tab:active{ transform:translateY(1px); } @media(max-width:680px){ .admin-nav-tab{ flex:1 1 auto; text-align:center; padding:8px 8px; font-size:12px; } } .admin-stat{ position:relative; text-align:center; padding:18px 10px 15px; border-radius:14px; background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); overflow:hidden; transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease; } .admin-stat::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold2),transparent); opacity:.5; } .admin-stat:hover{ transform:translateY(-2px); border-color:var(--p); box-shadow:0 10px 24px rgba(0,0,0,.28); } .admin-stat-num{ font-family:var(--fd); font-size:25px; color:var(--rust3); display:inline-flex; align-items:center; gap:5px; justify-content:center; } .admin-stat-num .coin-ico{ width:17px; height:17px; } .admin-stat-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--t3); margin-top:5px; } .admin-search{ display:flex; gap:8px; margin-bottom:14px; } .admin-search input{ flex:1; min-height:42px; padding:0 14px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); } .admin-search .btn-primary{ min-height:42px; padding:0 20px; border-radius:10px; } .admin-users{ display:flex; flex-direction:column; gap:4px; } .admin-uhead, .admin-urow{ display:grid; grid-template-columns:54px 1.6fr 1fr .6fr .7fr 2.4fr; gap:10px; align-items:center; padding:10px 12px; } .admin-uhead{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); border-bottom:1px solid var(--rust-ln); } .admin-urow{ border-radius:9px; background:rgba(0,0,0,.2); border:1px solid var(--rust-ln); } .admin-urow.is-banned{ opacity:.6; border-color:rgba(239,68,68,.4); } .adm-id{ color:var(--t3); font-size:12px; } .adm-user{ font-weight:700; color:var(--t1); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .adm-bal{ color:var(--gold2); font-weight:700; } .adm-lvl{ color:var(--rust3); font-size:13px; } .adm-wl{ color:var(--t2); font-size:13px; } .adm-badge{ font-size:9px; font-style:normal; padding:2px 5px; border-radius:4px; letter-spacing:.05em; } .adm-badge.admin{ background:rgba(196,184,158,.2); color:var(--rust3); } .adm-badge.ban{ background:rgba(239,68,68,.2); color:#fca5a5; } .adm-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .adm-inline{ display:inline-flex; gap:4px; align-items:center; } .adm-amt{ width:64px; min-height:32px; padding:0 8px; border-radius:7px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.4); color:var(--t1); font-size:12px; } .adm-btn{ min-height:32px; padding:0 12px; border-radius:7px; border:0; cursor:pointer; font-size:12px; font-weight:700; color:#fff; background:var(--steel); } .adm-btn:hover{ filter:brightness(1.15); } .adm-ok{ background:linear-gradient(145deg,#16a34a,#15803d); } .adm-no{ background:linear-gradient(145deg,#dc2626,#b91c1c); } .admin-wreq{ display:flex; align-items:center; gap:16px; padding:12px 14px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); margin-bottom:6px; } .admin-wreq form{ margin-left:auto; } /* ═══════════════════════════════════════════════════════════════ LANDING PAGE — gritty Rust survival splash ═══════════════════════════════════════════════════════════════ */ .landing{ width:100%; } .landing .lp-section, .landing .lp-final{ width:min(1180px,92vw); margin:0 auto; } /* HERO */ .lp-hero{ position:relative; overflow:hidden; padding:80px 0 70px; margin-bottom:20px; } .lp-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 480px at 78% 8%, rgba(196,184,158,.18), transparent 62%), radial-gradient(700px 420px at 8% 90%, rgba(182,170,146,.14), transparent 60%), repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 3px, transparent 3px 7px); } .lp-hero-inner{ position:relative; z-index:1; width:min(1180px,92vw); margin:0 auto; text-align:center; } .lp-eyebrow{ display:inline-block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust3); background:rgba(182,170,146,.1); border:1px solid var(--rust-ln2); padding:7px 16px; border-radius:999px; margin-bottom:24px; text-shadow:0 0 12px rgba(196,184,158,.3); } .lp-title{ font-family:var(--fd,'Bebas Neue',sans-serif); font-size:clamp(54px,9vw,118px); line-height:.88; letter-spacing:.02em; margin:0 0 22px; color:#f4ece6; text-shadow:0 4px 30px rgba(0,0,0,.5); } .lp-title-accent{ background:linear-gradient(135deg,var(--rust3),var(--rust)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .lp-sub{ max-width:620px; margin:0 auto 32px; font-size:18px; line-height:1.6; color:var(--t2); } .lp-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:46px; } .lp-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 32px; border-radius:13px; font-weight:800; font-size:16px; letter-spacing:.02em; cursor:pointer; transition:transform .15s, filter .15s, box-shadow .15s; text-decoration:none; } .lp-btn-primary{ background:linear-gradient(145deg,var(--rust3),var(--rust)); color:#fff; box-shadow:0 12px 30px rgba(182,170,146,.4); } .lp-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 16px 38px rgba(182,170,146,.5); } .lp-btn-ghost{ background:rgba(255,255,255,.05); color:var(--t1); border:1px solid var(--rust-ln2); } .lp-btn-ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); } .lp-btn-lg{ min-height:60px; padding:0 44px; font-size:18px; } .lp-stats{ display:flex; gap:48px; justify-content:center; flex-wrap:wrap; } .lp-stat-n{ font-family:var(--fd); font-size:40px; color:var(--rust3); line-height:1; } .lp-stat-l{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin-top:6px; } /* SECTIONS */ .lp-section{ padding:54px 0; } .lp-section-alt{ background:rgba(0,0,0,.18); border-top:1px solid var(--rust-ln); border-bottom:1px solid var(--rust-ln); width:100%!important; } .lp-section-alt .lp-sec-head, .lp-section-alt .lp-features{ width:min(1180px,92vw); margin-left:auto; margin-right:auto; } .lp-sec-head{ text-align:center; margin-bottom:40px; } .lp-sec-eyebrow{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust3); margin-bottom:10px; } .lp-sec-head h2{ font-family:var(--fd); font-size:clamp(32px,5vw,52px); letter-spacing:.02em; color:#f4ece6; margin:0; } /* MODES */ .lp-modes{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } @media(max-width:760px){ .lp-modes{ grid-template-columns:1fr; } } .lp-mode{ display:block; padding:34px; border-radius:18px; text-decoration:none; background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); transition:transform .18s, border-color .18s, box-shadow .18s; position:relative; overflow:hidden; } .lp-mode::after{ content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 70% 0%,rgba(196,184,158,.08),transparent 70%); opacity:0; transition:opacity .2s; } .lp-mode:hover{ transform:translateY(-4px); border-color:var(--rust-ln2); box-shadow:0 20px 50px rgba(0,0,0,.4); } .lp-mode:hover::after{ opacity:1; } .lp-mode-icon{ font-size:46px; margin-bottom:16px; } .lp-mode h3{ font-family:var(--fd); font-size:30px; letter-spacing:.03em; color:#f4ece6; margin:0 0 10px; } .lp-mode p{ color:var(--t2); line-height:1.6; margin:0 0 18px; font-size:15px; } .lp-mode-link{ color:var(--rust3); font-weight:800; font-size:15px; } /* FEATURES */ .lp-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media(max-width:860px){ .lp-features{ grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .lp-features{ grid-template-columns:1fr; } } .lp-feature{ padding:24px; border-radius:14px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); } .lp-feat-ico{ font-size:30px; margin-bottom:12px; } .lp-feature h4{ font-size:17px; color:#f4ece6; margin:0 0 8px; } .lp-feature p{ color:var(--t3); font-size:14px; line-height:1.55; margin:0; } /* STEPS */ .lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media(max-width:760px){ .lp-steps{ grid-template-columns:1fr; } } .lp-step{ text-align:center; padding:28px 20px; border-radius:14px; background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); } .lp-step-n{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:24px; color:#fff; background:linear-gradient(145deg,var(--rust3),var(--rust)); box-shadow:0 8px 20px rgba(182,170,146,.35); } .lp-step h4{ font-size:18px; color:#f4ece6; margin:0 0 8px; } .lp-step p{ color:var(--t3); font-size:14px; line-height:1.55; margin:0; } /* FINAL CTA */ .lp-final{ text-align:center; padding:64px 30px; margin:30px auto 50px; border-radius:22px; background:radial-gradient(700px 300px at 50% 0%,rgba(182,170,146,.16),transparent 70%), linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln2); } .lp-final h2{ font-family:var(--fd); font-size:clamp(34px,5vw,56px); color:#f4ece6; margin:0 0 12px; letter-spacing:.02em; } .lp-final p{ color:var(--t2); font-size:17px; margin:0 0 28px; } /* Landing pages don't reserve chat space awkwardly — full width hero */ body.chat-open .landing .lp-section-alt{ } /* ── Affiliate custom code + tip modal fields ── */ .aff-custom{ margin-top:18px; padding-top:18px; border-top:1px solid var(--rust-ln); } .aff-custom-title{ font-weight:700; color:var(--t1); margin-bottom:10px; font-size:14px; } .aff-custom-row{ display:flex; gap:8px; } .aff-custom-row input{ flex:1; min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); font-family:var(--fd); font-size:18px; letter-spacing:.08em; text-transform:uppercase; } .aff-custom-row .btn-primary{ min-height:44px; padding:0 20px; border-radius:10px; white-space:nowrap; } .aff-msg{ padding:9px 12px; border-radius:9px; font-size:13px; margin-bottom:10px; } .aff-msg.ok{ background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#f4cd84; } .aff-msg.err{ background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#fca5a5; } /* Tip modal */ .chat-head-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; } .chat-tip-btn{ width:auto!important; height:auto!important; min-height:30px; padding:0 12px!important; border-radius:8px; border:0; cursor:pointer; font-weight:700; font-size:12px; color:#0c0c12; background:linear-gradient(145deg,var(--gold2),var(--gold))!important; display:inline-flex!important; align-items:center; white-space:nowrap; } .tip-field{ text-align:left; margin-bottom:12px; } .tip-field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); margin-bottom:5px; } .tip-field input{ width:100%; min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.4); color:var(--t1); font-size:15px; } .tip-field input:focus{ border-color:var(--rust3); outline:none; } .tip-msg{ min-height:18px; font-size:13px; margin-bottom:10px; } .tip-msg.ok{ color:#f4cd84; } .tip-msg.err{ color:#fca5a5; } /* Admin tools section */ .admin-tools{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:760px){ .admin-tools{ grid-template-columns:1fr; } } .admin-tool label{ display:block; font-size:13px; color:var(--t2); margin-bottom:8px; font-weight:600; } .admin-tool-row{ display:flex; gap:8px; } .admin-tool-row input{ flex:1; min-height:42px; padding:0 14px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); } .admin-tool-row .btn-primary{ min-height:42px; padding:0 18px; border-radius:10px; white-space:nowrap; } /* ═══════════════ NOTIFICATIONS BELL ═══════════════ */ .notif-wrap{ position:relative; z-index:1100; } .notif-bell{ position:relative; width:40px; height:40px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(255,255,255,.04); cursor:pointer; font-size:17px; display:inline-flex; align-items:center; justify-content:center; } .notif-bell:hover{ background:rgba(255,255,255,.08); } .notif-bell .notif-bell-ico{ display:inline-flex; align-items:center; justify-content:center; } .notif-bell .notif-bell-ico svg{ width:20px; height:20px; color:var(--t2); } .notif-bell:hover .notif-bell-ico svg{ color:var(--t1); } /* Just a small GREEN dot when there are unread notifications — no number, no movement. */ .notif-badge{ position:absolute; top:-2px; right:-2px; min-width:10px; width:10px; height:10px; padding:0; border-radius:50%; background:#22c55e; color:transparent; font-size:0; line-height:0; border:none; box-shadow:0 0 0 2px var(--rust-bg2,#16120d), 0 1px 5px rgba(34,197,94,.65); } .notif-panel{ position:absolute; top:50px; right:0; width:320px; max-height:420px; overflow-y:auto; background:linear-gradient(180deg,#1e1933,#10131e); border:1px solid var(--rust-ln2); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.6); z-index:1200; } /* The dropdown normally anchors to the bell's right edge and opens leftward — fine when the bell sits on the RIGHT of the topbar. But on the compact topbar (≤1150px, where the hamburger appears) the bell moves to the LEFT next to the menu button, so opening leftward runs the panel past the LEFT edge of the screen and clips it ("bildirim sol tarafta kaybolarak açılıyor"). There, flip it to open RIGHTWARD from the bell: align its LEFT edge to the bell and clamp the width so it also cannot spill off the right. position:absolute is kept, so it still hangs directly under the bell at any topbar height. */ .notif-panel{ max-width:calc(100vw - 20px); } @media (max-width:1150px){ .notif-panel{ left:0; right:auto; width:min(320px, calc(100vw - 130px)); max-width:none; } } .notif-head{ padding:14px 16px; font-weight:700; color:var(--t1); border-bottom:1px solid var(--rust-ln); font-size:14px; } .notif-list{ padding:6px; } .notif-item{ padding:11px 12px; border-radius:9px; display:flex; flex-direction:column; gap:3px; } .notif-item:hover{ background:rgba(255,255,255,.03); } .notif-msg{ font-size:13px; color:var(--t1); line-height:1.4; } .notif-time{ font-size:11px; color:var(--t3); } .notif-empty{ padding:24px; text-align:center; color:var(--t3); font-size:13px; } /* ═══════════════ REWARDS PAGE ═══════════════ */ .rw-level{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .rw-level-mid{ flex:1; min-width:200px; } .rw-level-mid .level-bar{ margin-top:8px; } .rw-level-claim{ flex:0 0 auto; } .rw-level-claim .app-modal__btn{ min-width:160px; } .rw-nothing{ color:var(--t3); font-size:13px; font-style:italic; } .rw-hint{ font-size:12.5px; color:var(--t3); margin-top:14px; } .rw-reset{ font-size:11px; color:var(--t3); font-weight:400; text-transform:none; letter-spacing:0; margin-left:8px; } .rw-tasks{ display:flex; flex-direction:column; gap:10px; } .rw-task{ display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:12px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); } .rw-task-info{ flex:1; } .rw-task-label{ font-weight:700; color:var(--t1); font-size:14px; margin-bottom:7px; } .rw-task-bar{ height:8px; border-radius:5px; background:rgba(0,0,0,.4); overflow:hidden; border:1px solid var(--rust-ln); } .rw-task-fill{ height:100%; background:linear-gradient(90deg,var(--rust2),var(--rust3)); border-radius:5px; transition:width .4s; } .rw-task-prog{ font-size:11.5px; color:var(--t3); margin-top:5px; } .rw-task-reward{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .rw-task-amt{ font-family:var(--fd); font-size:20px; color:var(--gold2); } .rw-claim-btn{ min-height:34px; padding:0 18px; border-radius:9px; border:0; cursor:pointer; font-weight:800; font-size:13px; color:#0c0c12; background:linear-gradient(145deg,var(--gold2),var(--gold)); } .rw-claim-btn:hover{ filter:brightness(1.08); } .rw-claimed{ font-size:12px; color:#f4cd84; font-weight:700; } .rw-locked{ font-size:12px; color:var(--t3); } .rw-achs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:860px){ .rw-achs{ grid-template-columns:repeat(2,1fr); } } @media(max-width:520px){ .rw-achs{ grid-template-columns:1fr 1fr; } } .rw-ach{ text-align:center; padding:20px 12px; border-radius:14px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); transition:transform .15s; } .rw-ach.unlocked{ border-color:var(--rust-ln2); background:linear-gradient(180deg,rgba(196,184,158,.08),rgba(0,0,0,.2)); } .rw-ach.unlocked:hover{ transform:translateY(-3px); } .rw-ach.locked{ opacity:.5; } .rw-ach-icon{ font-size:34px; margin-bottom:10px; } .rw-ach-name{ font-weight:700; color:var(--t1); font-size:14px; margin-bottom:5px; } .rw-ach-desc{ font-size:12px; color:var(--t3); line-height:1.4; } .rw-ach-count{ font-size:13px; color:var(--rust3); font-weight:700; } /* ═══════════════════════════════════════════════════════════════ MOBILE RESPONSIVENESS — fixes overflow + chat behavior ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1099px){ /* Chat must never push page content on tablet/mobile — it overlays instead */ body.chat-open main.page{ padding-right: 0 !important; } } @media (max-width: 820px){ /* Prevent any horizontal overflow site-wide (overflow-x on BODY ONLY — see body rule; html+body pair spawns a second vertical scrollbar) */ html, body{ max-width:100%; } /* Chat drawer becomes a full-screen overlay, closed unless toggled open */ .chat-drawer{ position:fixed; top:auto; bottom:0; right:0; left:0; width:100%; height:auto; z-index:300; } .chat-panel{ position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw); transform:translateX(100%); transition:transform .25s ease; box-shadow:-10px 0 40px rgba(0,0,0,.6); } body:not(.chat-closed) .chat-panel{ } /* default state handled by JS */ .chat-drawer:not(.closed) .chat-panel{ transform:translateX(0); } .chat-drawer.closed .chat-panel{ transform:translateX(100%); } /* Floating toggle button bottom-LEFT (raffle FAB is bottom-right — they must not overlap) */ .chat-toggle{ position:fixed; left:14px; right:auto; bottom:14px; top:auto; transform:none; flex-direction:row; gap:6px; width:auto; height:auto; padding:11px 16px; border-radius:999px; writing-mode:horizontal-tb; box-shadow:0 8px 24px rgba(182,170,146,.45); z-index:301; } .chat-toggle .chat-label{ writing-mode:horizontal-tb; } } @media (max-width: 820px){ /* On mobile the chat starts CLOSED so content uses full width */ body.chat-open main.page{ padding-right:0 !important; } } @media (max-width: 680px){ .lp-stats{ gap:26px; } .lp-title{ font-size:clamp(46px,15vw,70px); } .admin-uhead{ display:none; } /* table header hidden; rows stack */ .admin-urow{ grid-template-columns:1fr 1fr; gap:6px 10px; row-gap:6px; } .admin-urow .adm-actions{ grid-column:1 / -1; } .notif-panel{ position:fixed; top:calc(var(--rr-header-h,60px) + 4px); right:8px; left:auto; width:min(340px, calc(100vw - 16px)); max-height:70vh; } .rw-task{ flex-direction:column; align-items:stretch; gap:10px; } .rw-task-reward{ flex-direction:row; align-items:center; justify-content:space-between; } } /* Chat level badge + right-click-to-tip hint */ .chat-message{ cursor:default; } .chat-message b{ display:inline-flex; align-items:center; } .chat-tip-hint{ padding:7px 14px; font-size:11px; color:var(--t3); border-bottom:1px solid var(--rust-ln); background:rgba(0,0,0,.15); } /* ═══════════════ AFFILIATE (screenshot-style tiered) ═══════════════ */ .aff-top{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:18px; } @media(max-width:860px){ .aff-top{ grid-template-columns:1fr; } } .aff-panel{ background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); border-radius:16px; padding:22px; } .aff-panel h3{ margin:0 0 12px; font-size:17px; color:var(--t1); } .g{ color:#34d399; } .aff-part-text,.aff-collect-text{ font-size:13px; color:var(--t2); line-height:1.6; margin:0 0 16px; } .aff-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media(max-width:560px){ .aff-metrics{ grid-template-columns:1fr 1fr; } } .aff-metric{ background:rgba(0,0,0,.25); border:1px solid var(--rust-ln); border-radius:12px; padding:14px 10px; text-align:center; } .aff-metric-n{ font-size:22px; font-weight:800; color:var(--t1); } .aff-metric-n.g{ color:#34d399; } .pcttiny{ font-size:13px; } .aff-metric-l{ font-size:11px; color:var(--t3); margin-top:4px; } .aff-collect-btn{ width:100%; min-height:48px; border-radius:10px; border:0; cursor:pointer; font-weight:800; font-size:14px; letter-spacing:.04em; color:#fff; background:linear-gradient(145deg,#1f8a4c,#15663a); margin-bottom:14px; } .aff-collect-btn:hover{ filter:brightness(1.1); } .aff-collect-btn:disabled{ opacity:.6; cursor:default; } .aff-link-wrap{ display:flex; gap:8px; margin-bottom:10px; align-items:stretch; } .aff-link-input{ flex:1 1 auto; min-width:0; min-height:42px; padding:0 12px; border-radius:9px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); font-size:12px; } .aff-link-wrap .btn-primary{ width:auto; flex:0 0 auto; min-width:0; min-height:42px; padding:0 16px; border-radius:9px; font-size:13px; } .aff-custom-row{ display:flex; gap:8px; } .aff-custom-row input{ flex:1; min-height:38px; padding:0 12px; border-radius:9px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); font-size:13px; text-transform:uppercase; } .btn-ghost-sm{ min-height:38px; padding:0 16px; border-radius:9px; border:1px solid var(--rust-ln2); background:rgba(255,255,255,.05); color:var(--t1); cursor:pointer; font-weight:700; font-size:13px; } .btn-ghost-sm:hover{ background:rgba(255,255,255,.1); } .aff-levels-block{ background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); border-radius:16px; overflow:hidden; } .aff-levels-head{ display:grid; grid-template-columns:80px 1.4fr 1.6fr 1fr; gap:10px; padding:14px 20px; font-size:11px; letter-spacing:.1em; color:var(--t3); border-bottom:1px solid var(--rust-ln); text-transform:uppercase; } .aff-level-row{ display:grid; grid-template-columns:80px 1.4fr 1.6fr 1fr; gap:10px; align-items:center; padding:20px; border-bottom:1px solid var(--rust-ln); } .aff-level-row:last-child{ border-bottom:0; } .aff-level-row.final{ border-left:3px solid #34d399; background:rgba(52,211,153,.04); } .aff-lvl-shield{ width:48px; height:54px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:var(--t2); background:linear-gradient(180deg,var(--steel),var(--steel2)); clip-path:polygon(50% 0,100% 22%,100% 75%,50% 100%,0 75%,0 22%); text-transform:uppercase; } .aff-level-row.final .aff-lvl-shield{ color:#34d399; background:linear-gradient(180deg,#1f3a2c,#15261c); } .aff-level-prog{ font-size:15px; font-weight:700; } .aff-slash{ color:var(--t3); font-weight:400; } .aff-level-bonus{ font-size:14px; color:var(--t2); } .aff-level-earn{ font-size:18px; font-weight:800; text-align:center; color:var(--t1); } @media(max-width:680px){ .aff-levels-head{ display:none; } .aff-level-row{ grid-template-columns:48px 1fr; gap:8px 14px; } .aff-level-bonus,.aff-level-earn{ grid-column:2; text-align:left; } } /* ═══════════════ REWARDS RAKEBACK ═══════════════ */ .rb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media(max-width:760px){ .rb-grid{ grid-template-columns:1fr; } } .rb-card{ text-align:center; padding:24px 18px; border-radius:16px; background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln); } .rb-card.rb-weekly{ border-color:rgba(238,179,81,.28); } .rb-card.rb-monthly{ border-color:rgba(238,179,81,.3); } .rb-period{ font-family:var(--fd); font-size:24px; color:var(--t1); letter-spacing:.04em; } .rb-pct{ font-size:12px; color:var(--t3); margin-top:4px; } .rb-amount{ font-family:var(--fd); font-size:32px; color:var(--gold2); margin:14px 0; } .rb-claim{ min-width:140px; } .rb-note{ display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--t3); padding:9px 18px; min-width:140px; min-height:38px; box-sizing:border-box; border:1px dashed var(--rust-ln); border-radius:10px; background:rgba(255,255,255,.02); } .rw-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } @media(max-width:760px){ .rw-two{ grid-template-columns:1fr; } } .promo-row{ display:flex; gap:8px; } .promo-row input{ flex:1; min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.35); color:var(--t1); } .promo-row .btn-primary{ min-height:44px; padding:0 20px; border-radius:10px; } .promo-active{ background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.4); color:#f4cd84; padding:10px 14px; border-radius:10px; margin-bottom:12px; font-size:13px; } .wreq-amount{ font-family:var(--fd); font-size:30px; color:var(--gold2); margin-bottom:10px; } .wreq-amount span{ font-size:18px; color:var(--t3); } .wreq-met{ color:#f4cd84; font-size:13px; margin-top:10px; } .wreq-note{ color:var(--t2); font-size:13px; margin-top:10px; line-height:1.5; } /* Admin promo codes */ .admin-promos{ display:flex; flex-direction:column; gap:6px; } .admin-promo{ display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); } .admin-promo-code{ font-family:var(--fd); font-size:17px; color:var(--rust3); letter-spacing:.05em; } .admin-promo-pct{ color:#34d399; font-weight:700; } .admin-promo-uses{ font-size:12px; color:var(--t3); } .admin-promo-status{ font-size:11px; padding:2px 8px; border-radius:5px; font-weight:700; } .admin-promo-status.on{ background:rgba(52,211,153,.2); color:#f4cd84; } .admin-promo-status.off{ background:rgba(239,68,68,.2); color:#fca5a5; } /* Weapon card SVG icon */ .wd-icon{ display:flex; align-items:center; justify-content:center; height:38px; margin-bottom:4px; } .wd-icon svg{ width:96px; height:auto; max-height:38px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); } /* ═══════════════════════════════════════════════════════════════ RUST ARENA SCENE — industrial backdrop behind the fighters (ground, metal wall, barrels, supply crate). Pure CSS, sits behind the character; the char-display already clips overflow. ═══════════════════════════════════════════════════════════════ */ .char-display:not(:has(.empty-seat)){ background: /* warm haze */ radial-gradient(120% 80% at 50% 10%, rgba(196,184,158,.07), transparent 60%), /* hazard warning stripes along the top */ repeating-linear-gradient(45deg, rgba(196,184,158,.05) 0 10px, rgba(0,0,0,.06) 10px 20px), /* corrugated metal wall */ repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 6px, rgba(0,0,0,.06) 6px 12px), /* ground plane (lower band) */ linear-gradient(180deg, transparent 58%, rgba(40,28,20,.6) 58%, rgba(20,14,9,.85) 100%), rgba(0,0,0,.3); } /* bullet-hole / rust-pit pocking on the back wall */ .char-display:not(:has(.empty-seat))::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-repeat:no-repeat; background-image: radial-gradient(circle at 18% 22%, rgba(0,0,0,.5) 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 16%, rgba(0,0,0,.4) 0 1px, transparent 2px), radial-gradient(circle at 72% 26%, rgba(0,0,0,.5) 0 2px, transparent 3px), radial-gradient(circle at 84% 18%, rgba(0,0,0,.4) 0 1px, transparent 2px), radial-gradient(circle at 60% 12%, rgba(0,0,0,.35) 0 1px, transparent 2px), radial-gradient(circle at 45% 30%, rgba(0,0,0,.4) 0 1.5px, transparent 2.5px), /* rust streaks bleeding down the wall */ linear-gradient(180deg, rgba(168,52,31,.12) 0 1px, transparent 1px) ; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 3px 40%; background-position: 0 0,0 0,0 0,0 0,0 0,0 0, 22% 0; } /* scene props layer */ .char-display:not(:has(.empty-seat))::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:48%; z-index:0; pointer-events:none; background-repeat:no-repeat; background-position:left bottom, right bottom, 70% bottom, center bottom; background-size:auto 62%, auto 54%, auto 38%, 100% 3px; background-image: /* left red barrel */ url("data:image/svg+xml;utf8,"), /* right supply crate */ url("data:image/svg+xml;utf8,"), /* stacked sandbags (mid-right) */ url("data:image/svg+xml;utf8,"), /* ground line */ linear-gradient(90deg, transparent, rgba(196,184,158,.28), transparent); opacity:.55; } /* keep the fighter above the scene */ .char-display .rust-char-wrap{ position:relative; z-index:2; } .char-display .player-color-name{ position:relative; z-index:2; } /* ═══════════════ CHAT BADGES + ROLES + CONTEXT MENU ═══════════════ */ .chat-message b{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; } .chat-msg-head{ display:flex; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; } .chat-lvl{ display:inline-flex; align-items:center; justify-content:center; height:18px; padding:0 7px; flex:0 0 auto; font-size:11px; font-weight:800; line-height:1; border-radius:5px; color:#ffffff; background:linear-gradient(145deg,#eeb351,#8a2e1c); box-shadow:0 1px 3px rgba(0,0,0,.4); letter-spacing:.03em; white-space:nowrap; } .chat-lvl::before{ content:"LV "; font-size:8px; font-weight:900; opacity:.9; color:#ffffff; } .chat-role{ display:inline-flex; align-items:center; height:18px; padding:0 7px; flex:0 0 auto; font-size:9px; font-weight:900; line-height:1; border-radius:5px; letter-spacing:.06em; color:#ffffff; white-space:nowrap; } .chat-role-admin, .chat-role-mod{ background:none !important; padding:0 !important; } .chat-role-admin{ color:#f04545 !important; } /* crown (founder) = red */ .chat-role-mod{ color:#3db4f2 !important; } /* shield (mod) = blue */ .chat-role-admin svg{ width:15px !important; height:15px !important; display:block !important; filter:drop-shadow(0 0 3px rgba(240,69,69,.5)) !important; } .chat-role-mod svg{ width:14px !important; height:14px !important; display:block !important; filter:drop-shadow(0 0 3px rgba(61,180,242,.5)) !important; } .chat-msg-head .chat-role.chat-role-admin{ color:#f04545 !important; background:none !important; padding:0 !important; height:18px !important; } .chat-msg-head .chat-role.chat-role-mod{ color:#3db4f2 !important; background:none !important; padding:0 !important; height:18px !important; } /* custom hover tooltip — appears directly above the badge */ .chat-role[data-tip]{ position:relative; cursor:default; } /* Tooltip is rendered by JS as a position:fixed element on so it escapes the chat scroll container's overflow clipping (a CSS ::after tooltip got cut off). */ .chat-name{ font-weight:700; font-size:13px; color:var(--t1); } .chat-name.cn-admin{ color:#fca5a5; } .chat-name.cn-mod{ color:#7dd3fc; } .chat-msg-head .chat-ts{ margin-left:auto; font-size:10px; color:var(--t3); white-space:nowrap; } .chat-name.cn-mod{ color:#7dd3fc; } .chat-ts{ font-size:10px; color:var(--t3); } .chat-ctx{ position:fixed; z-index:400; min-width:170px; padding:6px; background:linear-gradient(180deg,var(--rust-card2),var(--rust-card)); border:1px solid var(--rust-ln2); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.55); } .chat-ctx-name{ font-size:12px; font-weight:700; color:var(--rust3); padding:6px 10px 8px; border-bottom:1px solid var(--rust-ln); margin-bottom:4px; } .chat-ctx-btn{ display:block; width:100%; text-align:left; padding:9px 10px; border-radius:8px; border:0; background:transparent; color:var(--t1); cursor:pointer; font-size:13px; font-weight:600; } .chat-ctx-btn:hover{ background:rgba(255,255,255,.06); } .chat-ctx-mod{ color:#fca5a5; } /* ═══════════════════════════════════════════════════════════════ CHAT ON LEFT SIDE + closed by default + pulsing re-open tab (consolidated — overrides all earlier positioning) ═══════════════════════════════════════════════════════════════ */ .chat-drawer{ right:auto !important; left:0 !important; top: var(--topbar-h) !important; bottom:0 !important; width:344px !important; max-width:88vw !important; border-left:0 !important; border-right:1px solid var(--rust-ln2) !important; box-shadow:16px 0 48px rgba(0,0,0,.45) !important; transform:translateX(0); transition: transform .32s cubic-bezier(.4,0,.2,1); overflow: visible !important; /* let the tab show outside */ } .chat-drawer.closed{ transform:translateX(-100%) !important; } /* Re-open tab: FIXED at the left screen edge, always at x:0. Independent of the drawer's slide transform so it can't drift off-screen. */ .chat-toggle{ position:fixed !important; left:0 !important; right:auto !important; top:96px !important; width:42px !important; min-height:120px !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:8px !important; align-items:center !important; justify-content:center !important; border-radius:0 12px 12px 0 !important; background:linear-gradient(145deg, var(--rust3), var(--rust)) !important; border:1px solid rgba(255,255,255,.14) !important; border-left:0 !important; box-shadow:6px 0 18px rgba(182,170,146,.45) !important; writing-mode:vertical-rl; text-orientation:mixed; font-size:12px; letter-spacing:.12em; color:#fff; cursor:pointer; z-index:160 !important; transition: box-shadow .25s, filter .2s, opacity .25s, transform .25s; } .chat-toggle .chat-icon{ writing-mode:horizontal-tb; font-size:16px; } .chat-toggle:hover{ filter:brightness(1.08); box-shadow:9px 0 26px rgba(196,184,158,.6) !important; } /* When chat is OPEN, slide the tab away (drawer's own close button takes over) */ body.chat-open .chat-toggle{ opacity:0 !important; pointer-events:none !important; transform:translateX(-100%) !important; } /* CHAT = PINNED LEFT SIDEBAR the page makes room for — it never overlays a game or page. On desktop it is always open and the content is shifted right by the chat width; the close button and re-open tab are hidden (can't be closed). On mobile it collapses to a toggle so it doesn't eat the screen. */ @media (min-width:1401px){ .chat-drawer{ transform:translateX(0) !important; z-index:90 !important; } .chat-drawer.closed{ transform:translateX(0) !important; } /* never hide on desktop */ main.page{ margin-left: 344px !important; width:auto !important; max-width:none !important; padding: 28px 20px 80px !important; /* left gap 20px = matches the raffle-side gap (padding-right 364 − raffle 344); right is overridden to 364 below */ } .chat-toggle, #chatClose{ display:none !important; } /* no closing on desktop */ } @media (max-width:1099px){ main.page{ margin-left:auto !important; margin-right:auto !important; } /* chat is a bottom drawer on mobile → centre the page, don't pin it left */ .chat-drawer{ z-index:300 !important; } } .chat-drawer:not(.closed){ box-shadow:10px 0 34px rgba(0,0,0,.4) !important; } /* Pulse the tab while the chat is CLOSED to invite opening */ body:not(.chat-open) .chat-toggle{ animation: chatPulse 3.4s ease-in-out infinite; } @keyframes chatPulse{ 0%, 86%, 100%{ box-shadow:6px 0 18px rgba(182,170,146,.45); } 91%{ box-shadow:11px 0 30px rgba(196,184,158,.8); } 95%{ box-shadow:7px 0 22px rgba(196,184,158,.6); } } /* Glow ring that flares with the pulse */ body:not(.chat-open) .chat-toggle::after{ content:""; position:absolute; inset:-3px; border-radius:0 14px 14px 0; border:2px solid rgba(196,184,158,.6); opacity:0; animation: chatRing 3.4s ease-in-out infinite; } @keyframes chatRing{ 0%,86%,100%{opacity:0;transform:scale(1);} 91%{opacity:.9;transform:scale(1.05);} } @media (max-width: 820px){ .chat-drawer{ top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; height:auto !important; max-height:80vh !important; z-index:300 !important; } .chat-drawer.closed{ transform:translateY(100%) !important; } .chat-toggle{ left:14px !important; right:auto !important; top:auto !important; bottom:14px !important; width:auto !important; min-height:0 !important; padding:7px 12px !important; gap:6px !important; flex-direction:row !important; border-radius:999px !important; writing-mode:horizontal-tb !important; border:1px solid rgba(255,255,255,.14) !important; font-size:12px !important; } .chat-toggle .chat-icon svg{ width:16px !important; height:16px !important; } .chat-toggle .chat-label{ font-size:12px !important; } .chat-toggle .chat-label{ writing-mode:horizontal-tb; } } /* Balance +/- group */ .balance-group{ display:inline-flex; align-items:center; gap:0; } .balance-group .balance-pill{ border-radius:0; } .bal-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:32px; font-size:20px; font-weight:800; text-decoration:none; cursor:pointer; line-height:1; border:1px solid var(--rust-ln2); color:#fff; user-select:none; } .bal-plus{ border-radius:0 9px 9px 0; border-left:0; background:linear-gradient(180deg,#f6c860 0%,#e6a83a 52%,#cf9328 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.16), 0 2px 7px rgba(0,0,0,.4), 0 0 13px rgba(230,168,58,.4) !important; color:#241a04 !important; font-weight:800 !important; } .bal-minus{ border-radius:9px 0 0 9px; border-right:0; background:linear-gradient(145deg,#b9442b,#8a2e1c); } .bal-btn:hover{ filter:brightness(1.15); } /* Admin mod/muted badges + buttons */ .adm-badge.mod{ background:rgba(56,189,248,.2); color:#7dd3fc; } .adm-badge.muted{ background:rgba(250,204,21,.2); color:#fde047; } .adm-btn.adm-mod{ background:linear-gradient(145deg,#38bdf8,#0369a1); } /* Deposit promo tag + tab focus highlight */ .promo-tag{ display:inline-block; font-size:10px; font-weight:800; padding:1px 7px; border-radius:5px; margin-left:6px; background:linear-gradient(145deg,#1f8a4c,#15663a); color:#fff; vertical-align:middle; } .wallet-grid form.tab-focus{ border-color:var(--rust3) !important; box-shadow:0 0 0 2px rgba(196,184,158,.25); } /* Profile default Rust avatar + activity feed */ .rust-default-av{ width:88px; height:88px; border-radius:14px; overflow:hidden; border:2px solid var(--rust3); box-shadow:0 0 16px rgba(196,184,158,.35); } .rust-default-av svg{ width:100%; height:100%; display:block; } .profile-activity{ display:flex; flex-direction:column; gap:6px; } .pa-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); } .pa-ico{ font-size:18px; flex:0 0 auto; } .pa-msg{ flex:1; font-size:13px; color:var(--t1); } .pa-time{ font-size:11px; color:var(--t3); flex:0 0 auto; } /* Affiliate level table — 3 columns (no cases) */ .aff-levels-head{ grid-template-columns:80px 1.4fr 1.4fr !important; } .aff-level-row{ grid-template-columns:80px 1.4fr 1.4fr !important; } .aff-level-row.reached{ background:rgba(52,211,153,.06); } .aff-level-row.reached .aff-lvl-shield{ color:#34d399; background:linear-gradient(180deg,#1f3a2c,#15261c); } @media(max-width:680px){ .aff-level-row{ grid-template-columns:48px 1fr !important; } .aff-level-earn{ grid-column:2; text-align:left; } } /* Deposit/withdraw modal select */ .modal-select{ width:100%; min-height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.4); color:var(--t1); font-size:14px; } /* Notification panel header + mark-all */ .notif-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .notif-mark-all{ font-size:11px; font-weight:600; color:var(--rust3); background:transparent; border:0; cursor:pointer; padding:2px 4px; white-space:nowrap; } .notif-mark-all:hover{ text-decoration:underline; } /* Rakeback countdown timer */ .rb-timer{ font-family:var(--fd); font-size:26px; color:var(--rust3); letter-spacing:.06em; margin:6px 0 2px; } .rb-timer.ready{ color:#34d399; } /* Referral activity table */ .ref-table{ display:flex; flex-direction:column; gap:4px; } .ref-head,.ref-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:10px; align-items:center; padding:11px 14px; } .ref-head{ font-size:11px; letter-spacing:.1em; color:var(--t3); text-transform:uppercase; border-bottom:1px solid var(--rust-ln); } .ref-row{ border-radius:9px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); font-size:14px; } .ref-name{ font-weight:700; color:var(--t1); } .ref-lvl{ font-style:normal; font-size:10px; color:var(--rust3); background:rgba(196,184,158,.15); padding:1px 6px; border-radius:5px; margin-left:4px; } .ref-wager{ color:var(--gold2); font-weight:700; } @media(max-width:640px){ .ref-head{ display:none; } .ref-row{ grid-template-columns:1fr 1fr; gap:6px 10px; } } /* Profile account info rows */ .acct-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--rust-ln); } .acct-row:last-of-type{ border-bottom:0; } .acct-k{ font-size:12px; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; } .acct-v{ font-weight:700; color:var(--t1); font-size:14px; } /* ───── Coinflip create card polish ───── */ .cf-create-grid .cf-side-picker{ width:100%; justify-content:center; } .cf-create-grid .cf-wager-section{ width:100%; max-width:340px; align-items:center; } .cf-create-grid .cf-wager-label{ align-self:center; font-size:13px; color:var(--t2); text-transform:uppercase; letter-spacing:.08em; } .cf-create-grid .stake-input-wrap{ width:100%; max-width:280px !important; } .cf-create-grid .quick-amounts{ width:100%; max-width:280px !important; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .cf-create-grid .quick-amounts .qa{ padding:9px 0; } .cf-create-grid .cf-create-btn{ width:100%; max-width:280px; min-height:48px; font-size:15px; } .cf-side-btn{ box-shadow:0 4px 14px rgba(0,0,0,.25); } .cf-side-btn.active{ box-shadow:0 6px 20px rgba(0,0,0,.4); } /* coinflip stage glow */ .cf-stage{ position:relative; } .cf-games-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; } /* ───── Coinflip top grid: coin stage + create card side by side ───── */ .cf-top-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:stretch; margin-bottom:16px; } .cf-top-grid .cf-stage{ margin-bottom:0; height:100%; } .cf-top-grid .cf-create-section{ margin-bottom:0; } @media (max-width: 980px){ .cf-top-grid{ grid-template-columns:1fr; } } /* Within the create card, keep side picker + wager stacked but tidy */ .cf-create-grid .cf-side-picker{ width:100%; justify-content:center; } .cf-create-grid .cf-wager-section{ width:100%; max-width:none; align-items:center; display:flex; flex-direction:column; gap:12px; } .cf-create-grid .stake-input-wrap{ width:100%; max-width:320px !important; } .cf-create-grid .quick-amounts{ width:100%; max-width:320px !important; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .cf-create-grid .cf-create-btn{ width:100%; max-width:320px; min-height:48px; font-size:15px; } /* ───── Coinflip: Open Games + Recent Games side by side ───── */ .cf-lists-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin-bottom:16px; } @media (max-width: 980px){ .cf-lists-grid{ grid-template-columns:1fr; } } /* Inside each list column, stack games in a single column so two columns fit nicely */ .cf-games-col{ grid-template-columns:1fr !important; display:grid; gap:10px; } /* Make the coin stage a bit more compact so the top row is balanced */ .cf-top-grid .cf-stage{ min-height:320px; } .cf-top-grid .cf-coin-wrap{ transform:scale(.9); } /* ───── Coinflip create card now stands alone (coin stage removed) ───── */ .cf-create-section{ max-width:560px; margin:0 auto 16px; } .cf-create-section .cf-create-grid{ max-width:none; } .cf-create-section .cf-side-picker{ justify-content:center; } /* ═══ Coinflip: Create (left) + Open Games (right) top row, Recent full width ═══ */ .cf-main-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:start; margin-bottom:16px; } @media (max-width: 980px){ .cf-main-grid{ grid-template-columns:1fr; } } /* Create card no longer centered/narrow — it fills its grid cell */ .cf-create-section{ max-width:none !important; margin:0 !important; } .cf-main-grid .cf-create-grid{ max-width:none; } /* Open Games column: each game stacks vertically inside the right cell */ .cf-main-grid #cfOpenGames.cf-games-col{ display:grid; grid-template-columns:1fr; gap:10px; } /* Recent Games full width → responsive multi-column grid of cards */ .cf-history-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; } /* Global guard: never allow horizontal page scroll from topbar/grids. overflow-x lives on BODY ONLY (see the body rule above) — putting it on html too breaks body→viewport overflow propagation and spawns a SECOND vertical scrollbar (html + body both scroll = two nested scrollbars on the right). Keep html out of it. */ html, body { max-width: 100%; } .account { gap: 7px; } /* ═══════════════════════════════════════════════════════ RUST THEME — ADVANCED TEXTURE & DEPTH PASS (v51+) Richer weathered-metal panels, rust streaks, bolted corners, ember vignette. Pure CSS, no images. ═══════════════════════════════════════════════════════ */ /* Deeper panel texture: brushed metal + faint rust mottling + top sheen */ .section-block, .arena, .cf-card, .lb-card, .wallet-card, .auth-card, .player-panel, .app-modal__card, .form-card, .stat-box{ background-image: /* top edge sheen */ linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 12%), /* diagonal brushed-metal grain */ repeating-linear-gradient(122deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px), /* rust mottle blooms */ radial-gradient(120px 80px at 88% 0%, rgba(182,170,146,.10), transparent 70%), radial-gradient(90px 60px at 6% 100%, rgba(122,45,18,.14), transparent 72%), /* base plate */ linear-gradient(180deg, var(--rust-card2), var(--rust-card)) !important; background-blend-mode: overlay, overlay, screen, screen, normal !important; } /* Bolted-plate rivets on the four corners of major panels */ .section-block, .arena{ position: relative; } .section-block::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: radial-gradient(circle at 10px 10px, rgba(90,74,66,.9) 0 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 10px) 10px, rgba(90,74,66,.9) 0 2px, transparent 2.6px), radial-gradient(circle at 10px calc(100% - 10px), rgba(90,74,66,.9) 0 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(90,74,66,.9) 0 2px, transparent 2.6px); opacity:.6; } /* Subtle ember vignette over the whole page for a darker, grittier mood */ body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(140% 100% at 50% -10%, transparent 55%, rgba(0,0,0,.34) 100%), radial-gradient(70% 60% at 50% 120%, rgba(122,45,18,.10), transparent 60%); mix-blend-mode: multiply; } .page-wrap, main, .landing{ position: relative; z-index: 1; } .topbar{ position: sticky; top:0; z-index: 1000; } .chat-drawer{ position: fixed; z-index: 300; } /* Buttons: add a faint metal scratch + stronger ember glow on hover */ .btn-primary, .join-btn, .cf-join-btn, .app-modal__btn, #joinBtn{ position: relative; overflow: hidden; } .btn-primary::after, .join-btn::after, .cf-join-btn::after, #joinBtn::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(118deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px); pointer-events:none; } /* Stat numbers + pot → hot ember gradient text */ .hero-stat b, .lp-stat b, .stat-box b, .prize-amount, #prizePool, .hero-pool-display strong{ background: linear-gradient(180deg, #ffd9a0, #f4cd84 60%, #eeb351); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Inputs: inset "stamped metal" look */ input, select, textarea{ box-shadow: inset 0 2px 5px rgba(0,0,0,.4); } input:focus, select:focus, textarea:focus{ border-color: var(--rust3) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 0 0 2px rgba(196,184,158,.18); } /* Nav active tab → stamped ember plate */ .nav a.active{ background: linear-gradient(180deg, rgba(196,184,158,.2), rgba(182,170,146,.14)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } /* Section title eyebrow gets a small ember bullet */ .section-title .eyebrow::before{ content:"▸ "; color: var(--rust2); } /* Card hover: faint lift + warmer border */ .section-block:hover, .cf-game-row:hover, .lb-row:hover{ border-color: rgba(196,184,158,.3) !important; } /* ═══════════════════════════════════════════════════════ ARENA ATMOSPHERE — drifting embers + battle smoke (CSS) Sits in the scene, behind fighters; no JS dependency. ═══════════════════════════════════════════════════════ */ .char-display{ position: relative; overflow: hidden; } /* Floating embers rising in the arena (only when occupied) */ .char-display:not(:has(.empty-seat)) .rust-char-wrap::before{ content:""; position:absolute; left:-40%; right:-40%; top:0; bottom:0; z-index:0; pointer-events:none; background-image: radial-gradient(circle, rgba(196,184,158,.9) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(196,184,158,.7) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(194,239,206,.8) 0 1.2px, transparent 1.8px); background-size: 90px 140px, 130px 120px, 70px 160px; background-position: 10px 120px, 50px 80px, 80px 150px; animation: emberRise 7s linear infinite; opacity:.55; } @keyframes emberRise{ 0%{ background-position: 10px 130%, 50px 130%, 80px 130%; } 100%{ background-position: 30px -30%, 20px -30%, 95px -30%; } } /* When a duel is live, a faint smoke layer drifts across the floor */ .arena[data-fighting="1"] .char-display::after, .char-display.is-fighting::after{ background-image: radial-gradient(60% 40% at 30% 90%, rgba(120,110,100,.16), transparent 70%), radial-gradient(50% 35% at 75% 95%, rgba(90,80,72,.14), transparent 70%); animation: smokeDrift 6s ease-in-out infinite alternate; } @keyframes smokeDrift{ 0%{ transform: translateX(-6px); } 100%{ transform: translateX(8px); } } /* ═══ Admin per-user Settings modal ═══ */ .us-card{ max-width: 620px; width: 94vw; } .us-badges{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 16px; align-items:center; } .us-stat{ font-size:12px; color:var(--t3); } .us-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .us-field{ display:flex; flex-direction:column; gap:5px; } .us-field.us-wide{ grid-column:1 / -1; } .us-field label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); } .us-field label .us-cur{ text-transform:none; letter-spacing:0; color:var(--gold2); font-weight:700; margin-left:4px; } .us-row{ display:flex; gap:6px; align-items:center; } .us-input{ flex:1; min-height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--rust-ln); background:rgba(0,0,0,.4); color:var(--t1); font-size:14px; min-width:0; } .us-toggles{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--rust-ln); } .us-toggles form{ margin:0; } .adm-settings{ background:linear-gradient(145deg,var(--rust3),var(--rust)) !important; color:#fff !important; font-weight:700; padding:0 16px !important; } @media (max-width:560px){ .us-grid{ grid-template-columns:1fr; } } .us-saveall{ margin-top:14px; display:flex; justify-content:flex-end; } .us-saveall-btn{ font-size:14px !important; font-weight:800 !important; padding:11px 30px !important; letter-spacing:.02em; } .us-grid-actions{ margin-top:14px; } /* ═══════════════════════════════════════════════════════ UX POLISH PASS (v60+) — micro-interactions, transitions, loading states, focus rings, entrance animations. ═══════════════════════════════════════════════════════ */ /* Smooth, consistent transitions on interactive elements */ .btn-primary, .btn-ghost, .nav a, .cf-side-btn, .qa, .section-block, .lb-row, .cf-game-row, .stat-box, .notif-item, .chat-toggle, .balance-btn, .quick-amounts button{ transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; } /* Buttons lift slightly + glow on hover, press down on click */ .btn-primary:hover, .cf-create-btn:hover, #joinBtn:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(182,170,146,.4), 0 0 0 1px rgba(196,184,158,.3); } .btn-primary:active, .cf-create-btn:active, #joinBtn:active{ transform: translateY(0) scale(.985); } /* Quick-amount + side buttons: tactile feedback */ .qa:hover, .quick-amounts button:hover{ transform: translateY(-1px); border-color: var(--rust3); } .qa:active, .quick-amounts button:active{ transform: scale(.94); } .cf-side-btn:hover{ transform: translateY(-2px); } /* Cards gently raise on hover */ .lb-row:hover, .cf-game-row:hover{ transform: translateX(3px); } /* Focus-visible rings for keyboard navigation (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 2px solid var(--rust3); outline-offset: 2px; border-radius: 6px; } /* Entrance animation: fade + rise for section blocks on load */ @keyframes rrFadeUp{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform: translateY(0); } } .section-block, .arena, .lb-card, .cf-main-grid, .cf-lists-grid, .two-col{ animation: rrFadeUp .4s ease both; } /* Stagger a touch so multiple blocks cascade */ .section-block:nth-child(2){ animation-delay:.05s; } .section-block:nth-child(3){ animation-delay:.1s; } .section-block:nth-child(4){ animation-delay:.15s; } /* Loading shimmer utility (for async lists before data arrives) */ @keyframes rrShimmer{ 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } } .rr-skeleton{ background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(196,184,158,.10) 50%, rgba(255,255,255,.03) 75%); background-size: 800px 100%; animation: rrShimmer 1.3s infinite linear; border-radius: 8px; min-height: 44px; } /* Empty-state rows: softer, with a subtle pulse so they read as "waiting" */ .empty-row{ animation: rrEmptyPulse 2.4s ease-in-out infinite; } @keyframes rrEmptyPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.85; } } /* Toast/message feedback slides in */ .arena-msg:not(:empty), #cfMsg:not(:empty){ animation: rrMsgIn .3s ease both; } @keyframes rrMsgIn{ from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform: translateY(0); } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) and (min-width:100000px){ /* NOTE: intentionally NO universal `*{ animation/transition-duration:.001ms }` freeze here. On a game site the outcome animations carry meaning — the weapon that fires on a HIT, the Rustpot ring closing in, the Quick Game reel spinning to its result. A blanket freeze made reduce-motion players see a spin-less reel, an instantly-jumping ring and no weapon on hits (only the shield/door on misses). Motion is reduced per-animation instead (glows, embers, parallax tilt, the recoil swing, etc. are switched off BY NAME below and throughout this file), matching the stated approach of disabling the DECORATIVE loops while the informative ones keep running. scroll-behavior is handled separately. */ } /* ═══════════════════════════════════════════════════════ COINFLIP EXPERIENCE POLISH (v61+) — spin glow, landing shockwave, punchier win reveal. Layers on the existing flip logic without changing the tumble math. ═══════════════════════════════════════════════════════ */ /* Motion glow while the coin is spinning (pulsing aura behind it) */ .cf-coin-wrap.flipping::before{ content:""; position:absolute; left:50%; top:50%; width:180px; height:180px; transform:translate(-50%,-50%); border-radius:50%; z-index:-1; pointer-events:none; background: radial-gradient(circle, rgba(196,184,158,.35), transparent 68%); animation: cfSpinGlow .5s ease-in-out infinite alternate; } @keyframes cfSpinGlow{ from{ opacity:.4; transform:translate(-50%,-50%) scale(.85);} to{ opacity:.85; transform:translate(-50%,-50%) scale(1.12);} } /* Landing shockwave ring — expands once when the coin settles */ .cf-coin.settle::after{ content:""; position:absolute; left:50%; top:50%; width:150px; height:150px; transform:translate(-50%,-50%) scale(.4); border-radius:50%; pointer-events:none; border:3px solid rgba(196,184,158,.7); animation: cfShock .55s ease-out forwards; } @keyframes cfShock{ 0%{ opacity:.9; transform:translate(-50%,-50%) scale(.4); border-width:4px; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.9); border-width:1px; } } .cf-coin.landed-red.settle::after { border-color: rgba(234,179,8,.75); } .cf-coin.landed-blue.settle::after { border-color: rgba(59,130,246,.75); } /* Punchier win badge: a celebratory pop + subtle float */ .cf-result-badge.show-red, .cf-result-badge.show-blue{ animation: cfWinPop .5s cubic-bezier(.34,1.56,.64,1) both; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.5); box-shadow: 0 8px 30px rgba(0,0,0,.4); } @keyframes cfWinPop{ 0%{ opacity:0; transform:translateX(-50%) scale(.5) translateY(8px); } 60%{ opacity:1; transform:translateX(-50%) scale(1.12) translateY(0); } 100%{ opacity:1; transform:translateX(-50%) scale(1) translateY(0); } } /* Coin lands with a slightly stronger, color-matched glow that lingers */ .cf-coin.landed-red { filter: drop-shadow(0 0 34px rgba(239,68,68,1)) drop-shadow(0 10px 28px rgba(0,0,0,.6)); } .cf-coin.landed-blue { filter: drop-shadow(0 0 34px rgba(59,130,246,1)) drop-shadow(0 10px 28px rgba(0,0,0,.6)); } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .cf-coin-wrap.flipping::before, .cf-coin.settle::after{ animation: none; opacity:0; } } /* ═══════════════════════════════════════════════════════ ARENA FIGHTER LIFE (v62+) — subtle idle breathing/sway during a duel so fighters feel alive and tense, plus a weapon-ready bob. Pauses cleanly while taking a hit. ═══════════════════════════════════════════════════════ */ /* Gentle breathing + micro-sway while a duel is active. Applied to the SVG so it composes with the wrap's hit transforms. */ .player-panel.duel-left .rust-char-wrap:not(.char-hit) svg, .player-panel.duel-right .rust-char-wrap:not(.char-hit) svg{ animation: fighterIdle 2.6s ease-in-out infinite; } @keyframes fighterIdle{ 0%,100% { transform: translateY(0) rotate(0deg) scale(1); } 25% { transform: translateY(-2px) rotate(-.6deg) scale(1.006); } 50% { transform: translateY(0) rotate(0deg) scale(1); } 75% { transform: translateY(-1px) rotate(.6deg) scale(1.004); } } /* Mirror the sway direction for the right fighter so they "face off" */ .player-panel.duel-right .rust-char-wrap:not(.char-hit) svg{ animation-name: fighterIdleR; } @keyframes fighterIdleR{ 0%,100% { transform: translateY(0) rotate(0deg) scale(1); } 25% { transform: translateY(-2px) rotate(.6deg) scale(1.006); } 50% { transform: translateY(0) rotate(0deg) scale(1); } 75% { transform: translateY(-1px) rotate(-.6deg) scale(1.004); } } /* A faint ground shadow that pulses with the breathing for grounding */ .player-panel.duel-left .rust-char-wrap::after, .player-panel.duel-right .rust-char-wrap::after{ content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:60px; height:10px; border-radius:50%; background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%); animation: fighterShadow 2.6s ease-in-out infinite; z-index:1; pointer-events:none; } @keyframes fighterShadow{ 0%,100%{ width:60px; opacity:.45; } 50%{ width:54px; opacity:.35; } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .player-panel.duel-left .rust-char-wrap svg, .player-panel.duel-right .rust-char-wrap svg, .player-panel.duel-left .rust-char-wrap::after, .player-panel.duel-right .rust-char-wrap::after{ animation: none; } } /* Leaderboard wager amount (replaces W/L record) */ .lb-record{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; } .lb-wager-amt{ font-family:var(--fd); font-size:18px; font-weight:800; background:linear-gradient(180deg,#ffd9a0,#f4cd84 60%,#eeb351); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lb-wager-lbl{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-weight:700; } /* ═══════════════════════════════════════════════════════ TYPOGRAPHY & RHYTHM REFINEMENT (v64+) Tighter hierarchy, better readability, consistent spacing. ═══════════════════════════════════════════════════════ */ /* Body copy: comfortable reading rhythm */ body{ line-height: 1.55; letter-spacing: .005em; } /* Paragraphs inside panels read a touch softer + roomier */ .section-block p, .lp-mode p, .level-hint, .arena-msg{ line-height: 1.6; } /* Eyebrow → title: tighten the gap so they read as one unit */ .eyebrow{ margin-bottom: 6px; opacity: .92; } .section-title{ margin-bottom: 16px; } .section-title h3{ line-height: 1.05; } /* Display headings: subtle text-shadow for depth on dark bg */ .section-title h3, .arena-header h1, .cf-modal-head h3{ text-shadow: 0 2px 14px rgba(0,0,0,.35); } /* Consistent vertical rhythm between stacked sections */ .section-block + .section-block{ margin-top: 16px; } /* Small print (labels, captions): clearer, slightly spaced */ small, .lb-wager-lbl, .hero-pool-display span, .stat-box .lbl{ letter-spacing: .04em; } /* Numbers/money use tabular figures so they don't jitter */ .lb-wager-amt, .prize-amount, #prizePool, #heroPool, .balance-pill, .hero-stat b, .lp-stat-n, .stat-box b, .timer-inner strong{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Links inside body copy: clear affordance */ .section-block a:not(.btn-primary):not(.btn-ghost){ color: var(--rust3); text-decoration: none; border-bottom: 1px solid rgba(196,184,158,.3); transition: border-color .15s, color .15s; } .section-block a:not(.btn-primary):not(.btn-ghost):hover{ color: var(--rust2); border-bottom-color: var(--rust2); } /* Slightly larger, more legible empty-state text */ .empty-row{ font-size: 13.5px; } /* ═══════════════════════════════════════════════════════ RICH EMPTY STATES (v65+) — thematic icon + headline + message + optional CTA. Replaces flat "No X yet" rows. ═══════════════════════════════════════════════════════ */ .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:34px 22px; border:1px dashed var(--rust-ln2); border-radius:14px; background: radial-gradient(120% 80% at 50% 0%, rgba(196,184,158,.05), transparent 70%), rgba(0,0,0,.16); } .empty-state-icon{ font-size:40px; line-height:1; filter: drop-shadow(0 4px 14px rgba(196,184,158,.35)); animation: emptyFloat 3.2s ease-in-out infinite; } @keyframes emptyFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } } .empty-state-title{ font-family:var(--fd); font-size:20px; letter-spacing:.04em; color:var(--t1); } .empty-state-msg{ font-size:13.5px; color:var(--t3); max-width:340px; line-height:1.5; } .empty-state-cta{ margin-top:8px; display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:999px; font-weight:700; font-size:13px; color:#fff; text-decoration:none; border:0; background:linear-gradient(180deg, var(--rust2), var(--rust)); box-shadow:0 6px 18px rgba(182,170,146,.35); transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; } .empty-state-cta:hover{ transform:translateY(-2px); box-shadow:0 9px 24px rgba(182,170,146,.45); } .empty-state-cta:active{ transform:translateY(0) scale(.97); } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .empty-state-icon{ animation:none; } } /* ═══════════════════════════════════════════════════════ TOAST NOTIFICATIONS (v66+) — floating feedback, bottom-right ═══════════════════════════════════════════════════════ */ .rr-toast-host{ position: fixed; right: 18px; bottom: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, 92vw); pointer-events: none; } /* desktop: the raffle drawer is docked on the right — shift the toasts clear of it so they never sit behind it */ @media (min-width:981px){ body.rfd-open .rr-toast-host{ right: 360px; } } .rr-toast{ pointer-events: auto; display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 13px; background: linear-gradient(180deg, var(--rust-card2), var(--rust-card)); border: 1px solid var(--rust-ln2); box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); color: var(--t1); font-size: 14px; font-weight: 600; line-height: 1.35; transform: translateX(120%); opacity: 0; transition: transform .34s cubic-bezier(.34,1.4,.64,1), opacity .3s; position: relative; overflow: hidden; } .rr-toast.show{ transform: translateX(0); opacity: 1; } .rr-toast.hide{ transform: translateX(120%); opacity: 0; } /* left accent bar by type */ .rr-toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--rust2); } .rr-toast-info::before { background: var(--rust3); } .rr-toast-success::before { background: #22c55e; } .rr-toast-money::before { background: #eeb351; } .rr-toast-error::before { background: #ef4444; } .rr-toast-win::before { background: linear-gradient(180deg,#f4cd84,#f4cd84); } .rr-toast-acquire::before { background: #22c55e; } .rr-toast-acquire .rr-toast-ico{ color:#22c55e; } .rr-toast-acquire{ box-shadow:0 12px 32px rgba(0,0,0,.42), 0 0 20px rgba(74,222,128,.22); } .rr-toast-ico{ font-size: 19px; flex: 0 0 auto; } .rr-toast-text{ flex: 1 1 auto; } .rr-toast-x{ flex: 0 0 auto; background: none; border: 0; color: var(--t3); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; transition: color .15s; } .rr-toast-x:hover{ color: var(--t1); } /* win toast gets a celebratory glow */ .rr-toast-win{ box-shadow: 0 12px 34px rgba(196,184,158,.4), 0 0 0 1px rgba(244,205,132,.3); } @media (max-width: 600px){ .rr-toast-host{ right: 10px; left: 10px; bottom: 10px; max-width: none; } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .rr-toast{ transition: opacity .2s; transform: none; } .rr-toast.show{ transform: none; } .rr-toast.hide{ transform: none; } } /* ═══════════════════════════════════════════════════════ GRAND ANIMATION PASS (v67+) — ambient background motion, button shine, nav effects, glows, entrances. Everywhere. ═══════════════════════════════════════════════════════ */ /* ── Animated ambient background: drifting ember field + slow hue pulse ── */ html::before{ content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none; background: radial-gradient(2px 2px at 12% 30%, rgba(196,184,158,.5), transparent), radial-gradient(2px 2px at 78% 60%, rgba(196,184,158,.45), transparent), radial-gradient(1.5px 1.5px at 45% 85%, rgba(194,239,206,.5), transparent), radial-gradient(2px 2px at 90% 18%, rgba(196,184,158,.4), transparent), radial-gradient(1.5px 1.5px at 30% 70%, rgba(182,170,146,.4), transparent), radial-gradient(2px 2px at 65% 40%, rgba(196,184,158,.35), transparent); background-size: 100% 100%; animation: bgEmberDrift 26s linear infinite, bgHue 18s ease-in-out infinite alternate; opacity:.6; } @keyframes bgEmberDrift{ 0%{ transform: translateY(0) translateX(0); } 100%{ transform: translateY(-8%) translateX(3%); } } @keyframes bgHue{ 0%{ filter: hue-rotate(0deg) brightness(1); } 100%{ filter: hue-rotate(-12deg) brightness(1.15); } } /* A slow rotating conic glow behind the whole page for depth */ html::after{ content:""; position:fixed; top:50%; left:50%; width:160vmax; height:160vmax; transform:translate(-50%,-50%); z-index:-3; pointer-events:none; opacity:.06; background: conic-gradient(from 0deg, transparent, rgba(196,184,158,.5), transparent 30%, transparent 60%, rgba(182,170,146,.4), transparent); animation: bgConicSpin 50s linear infinite; } @keyframes bgConicSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } } /* ── Buttons: shine sweep on hover + press ── */ .btn-primary, .cf-create-btn, #joinBtn, .empty-state-cta, .app-modal__btn, .join-btn{ position: relative; overflow: hidden; } .btn-primary::before, .cf-create-btn::before, #joinBtn::before, .empty-state-cta::before, .join-btn::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: none; pointer-events:none; } .btn-primary:hover::before, .cf-create-btn:hover::before, #joinBtn:hover::before, .empty-state-cta:hover::before, .join-btn:hover::before{ animation: btnShine .75s ease; } @keyframes btnShine{ to{ left:140%; } } /* Primary buttons get a subtle continuous pulse-glow to draw the eye */ .btn-primary, .cf-create-btn, #joinBtn{ animation: btnIdleGlow 2.8s ease-in-out infinite; } @keyframes btnIdleGlow{ 0%,100%{ box-shadow: 0 4px 16px rgba(182,170,146,.28); } 50%{ box-shadow: 0 6px 22px rgba(196,184,158,.45); } } /* ── Nav links: animated underline grow + lift ── */ .nav a{ position: relative; } .nav a::after{ content:""; position:absolute; left:50%; bottom:3px; width:0; height:2px; background: linear-gradient(90deg, var(--rust3), var(--rust2)); border-radius:2px; transform:translateX(-50%); transition: width .25s cubic-bezier(.4,0,.2,1); } .nav a:hover::after{ width:62%; } .nav a:hover{ transform: translateY(-1px); } .nav a.active::after{ width:62%; } /* ── Brand logo: gentle floating + glow throb ── */ .brand-logo, .brand img, .brand svg{ animation: none; } /* ── Cards: hover glow lift on all panels ── */ .section-block{ transition: transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .25s; } .section-block:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(196,184,158,.25); } /* ── Stat boxes / numbers: subtle count-up shimmer ── */ .stat-box, .hero-stat, .lp-stat, .admin-stat{ transition: transform .2s cubic-bezier(.34,1.56,.64,1); } .stat-box:hover, .hero-stat:hover, .lp-stat:hover{ transform: scale(1.04); } /* Money figures get a soft glow pulse */ .prize-amount, #prizePool, #heroPool, .lb-wager-amt{ animation: moneyGlow 3s ease-in-out infinite; } @keyframes moneyGlow{ 0%,100%{ filter: drop-shadow(0 0 0 transparent); } 50%{ filter: drop-shadow(0 0 8px rgba(196,184,158,.5)); } } /* ── Balance pill: pulse on the +/- buttons ── */ .bal-btn{ transition: transform .15s cubic-bezier(.34,1.6,.64,1), background .2s; } .bal-btn:hover{ transform: scale(1.15); } .bal-btn:active{ transform: scale(.9); } /* ── Eyebrow bullet: blinking ember ── */ .eyebrow::before{ animation: emberBlink 2s ease-in-out infinite; } @keyframes emberBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } } /* ── Page content entrance: fade-up cascade ── */ main.page > *{ animation: pageRise .5s ease both; } main.page > *:nth-child(1){ animation-delay:.02s; } main.page > *:nth-child(2){ animation-delay:.08s; } main.page > *:nth-child(3){ animation-delay:.14s; } main.page > *:nth-child(4){ animation-delay:.2s; } main.page > *:nth-child(5){ animation-delay:.26s; } @keyframes pageRise{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: translateY(0); } } /* ── Quick-amount chips: bouncy hover ── */ .qa, .quick-amounts button, .cf-side-btn{ transition: transform .18s cubic-bezier(.34,1.7,.5,1), border-color .2s, background .2s, box-shadow .2s; } .qa:hover, .quick-amounts button:hover{ transform: translateY(-2px) scale(1.03); box-shadow:0 6px 16px rgba(182,170,146,.25); } /* ── Notification bell: swing when it has unread ── */ .notif-bell.has-unread, #notifBell.has-unread{ animation: none; } /* ── Timer ring: pulse ── */ .timer-ring, .timer-circle{ animation: timerPulse 2s ease-in-out infinite; } @keyframes timerPulse{ 0%,100%{ filter: drop-shadow(0 0 0 transparent); } 50%{ filter: drop-shadow(0 0 10px rgba(196,184,158,.45)); } } /* Respect reduced motion: kill the ambient + continuous loops */ @media (prefers-reduced-motion: reduce) and (min-width:100000px){ html::before, html::after, .btn-primary, .cf-create-btn, #joinBtn, .brand-logo, .brand img, .brand svg, .prize-amount, #prizePool, #heroPool, .lb-wager-amt, .eyebrow::before, .notif-bell.has-unread, .timer-ring, .timer-circle, main.page > *{ animation: none !important; } } /* ═══════════════════════════════════════════════════════ ANIMATION PASS 2 (v68+) — inputs, modals, side panels, chat, winner banner, finishing micro-motions. ═══════════════════════════════════════════════════════ */ /* Inputs: focus glow ring that grows in */ input, select, textarea{ transition: border-color .2s, box-shadow .25s, background .2s; } input:focus, select:focus, textarea:focus{ box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 0 0 3px rgba(196,184,158,.18); animation: inputFocusPop .3s ease; } @keyframes inputFocusPop{ 0%{ box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 0 0 0 rgba(196,184,158,.4); } 100%{ box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 0 0 3px rgba(196,184,158,.18); } } /* Coinflip watch modal: scale-in entrance */ .cf-modal.open .cf-modal-card, .cf-modal.show .cf-modal-card{ animation: cfModalIn .35s cubic-bezier(.2,1.1,.4,1); } @keyframes cfModalIn{ 0%{ opacity:0; transform: translateY(20px) scale(.94); } 100%{ opacity:1; transform:none; } } /* Chat drawer: messages slide in as they arrive */ .chat-message{ animation: chatMsgIn .3s ease; } @keyframes chatMsgIn{ from{ opacity:0; transform: translateX(-12px); } to{ opacity:1; transform: translateX(0); } } /* Chat panel slides + fades content when opening */ .chat-drawer:not(.closed) .chat-head{ animation: chatHeadIn .4s ease; } @keyframes chatHeadIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform:none; } } /* Winner banner: dramatic entrance + glow throb */ .winner-banner:not(:empty), #winnerBanner:not(:empty){ animation: winnerIn .5s cubic-bezier(.2,1.3,.4,1), winnerGlow 1.6s ease-in-out infinite .5s; } @keyframes winnerIn{ 0%{ opacity:0; transform: translateX(-50%) scale(.6) translateY(10px); } 60%{ transform: translateX(-50%) scale(1.08); } 100%{ opacity:1; transform: translateX(-50%) scale(1); } } @keyframes winnerGlow{ 0%,100%{ filter: drop-shadow(0 0 6px rgba(196,184,158,.4)); } 50%{ filter: drop-shadow(0 0 18px rgba(196,184,158,.8)); } } /* (Side-panel rows re-render on each poll, so no per-row entrance animation here — it would re-fire constantly and flicker. Chat messages append, so they keep their slide-in below.) */ /* Achievement badges: pop + shimmer on hover */ .ach-badge, .achievement, .reward-badge{ transition: transform .2s cubic-bezier(.34,1.6,.5,1), box-shadow .25s; } .ach-badge:hover, .achievement:hover, .reward-badge:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 22px rgba(182,170,146,.35); } /* Avatar / fighter portrait: subtle glow ring breathing on profile */ .profile-avatar, .pf-avatar{ animation: avatarGlow 3.5s ease-in-out infinite; } @keyframes avatarGlow{ 0%,100%{ box-shadow: 0 0 0 2px rgba(196,184,158,.2); } 50%{ box-shadow: 0 0 18px 2px rgba(196,184,158,.4); } } /* Tab/pill toggles: smooth slide */ .tab, .pill-toggle, .seg-btn{ transition: background .2s, color .2s, transform .15s; } .tab:active, .seg-btn:active{ transform: scale(.96); } /* Prize medals on leaderboard: gentle bob, staggered */ .lb-medal, .prize-tier{ animation: medalBob 3s ease-in-out infinite; } .prize-tier:nth-child(2){ animation-delay:.3s; } .prize-tier:nth-child(3){ animation-delay:.6s; } @keyframes medalBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } } /* Links in nav already underline; add icon wiggle on hover for fun */ .nav a:hover{ } .nav a:hover::first-letter{ } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ input:focus, select:focus, textarea:focus, .cf-modal.open .cf-modal-card, .chat-message, .chat-drawer:not(.closed) .chat-head, .winner-banner:not(:empty), #winnerBanner:not(:empty), .log-row, .hist-row, .queue-row, .profile-avatar, .pf-avatar, .lb-medal, .prize-tier{ animation: none !important; } } /* Leaderboard: prevent long usernames from pushing wager off-screen */ .lb-player{ min-width: 0; } .lb-player b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .lb-record{ flex: 0 0 auto; white-space: nowrap; } @media (max-width: 600px){ .lb-player b{ max-width: 42vw; } .lb-wager-amt{ font-size: 16px; } } /* ═══════════════════════════════════════════════════════ RUSTFLIP SIDE PICKER + CHIP ANIMATIONS (v69+) ═══════════════════════════════════════════════════════ */ /* Active side coin gets a pulsing colored glow + the coin spins gently */ .cf-side-btn.active .cf-side-coin{ animation: sideCoinSpin 4s linear infinite; } @keyframes sideCoinSpin{ to{ transform: rotateY(360deg); } } .cf-side-btn.active.cf-side-red{ animation: sidePulseRed 2s ease-in-out infinite; } .cf-side-btn.active.cf-side-blue{ animation: sidePulseBlue 2s ease-in-out infinite; } @keyframes sidePulseRed{ 0%,100%{ box-shadow: 0 6px 20px rgba(239,68,68,.25); } 50%{ box-shadow: 0 6px 26px rgba(239,68,68,.55); } } @keyframes sidePulseBlue{ 0%,100%{ box-shadow: 0 6px 20px rgba(59,130,246,.25); } 50%{ box-shadow: 0 6px 26px rgba(59,130,246,.55); } } /* Pop transition when a side becomes active is handled by the existing .cf-side-btn transition (transform); the pulse glow below adds the rest. */ /* The "VS" between sides gets a subtle throb */ .cf-side-vs, .cf-vs{ animation: vsThrob 2.4s ease-in-out infinite; } @keyframes vsThrob{ 0%,100%{ opacity:.7; transform: scale(1); } 50%{ opacity:1; transform: scale(1.1); } } /* Quick-amount chip: a quick flash when clicked (active state) */ .qa:active, .quick-amounts button:active{ animation: chipFlash .3s ease; } @keyframes chipFlash{ 0%{ background: rgba(196,184,158,.4); } 100%{ background: rgba(182,170,146,.12); } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .cf-side-btn.active .cf-side-coin, .cf-side-btn.active.cf-side-red, .cf-side-btn.active.cf-side-blue, .cf-side-vs, .cf-vs{ animation: none !important; } } /* ═══════════════════════════════════════════════════════ HP BAR ABOVE THE FIGHTER (v70+) ═══════════════════════════════════════════════════════ */ .health-section-top{ margin: 4px 0 10px; padding: 0 4px; } .health-section-top .health-label{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; margin-bottom:4px; letter-spacing:.03em; } .health-section-top .health-label span{ color: var(--rust3); } .health-section-top .health-label b{ color: var(--t1); font-family:var(--fd); font-size:16px; } .health-section-top .health-track{ height: 14px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.45); border:1px solid var(--rust-ln2); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); } .health-section-top .health-fill{ height:100%; border-radius:999px; transition: width .45s cubic-bezier(.4,0,.2,1); background: linear-gradient(90deg, #22c55e, #4ade80) !important; } .health-section-top .health-fill-right{ background: linear-gradient(90deg, #22c55e, #4ade80) !important; } /* Color shifts as HP drops (driven by inline width; we tint via low-hp class on the card) */ .player-panel.low-hp .health-section-top .health-fill{ background: linear-gradient(90deg, #ef4444, #f87171) !important; animation: hpDangerPulse 1s ease-in-out infinite; } @keyframes hpDangerPulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.3); } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .player-panel.low-hp .health-section-top .health-fill{ animation:none; } } /* ── Notification panel: force on top + solid + clickable (v72 fix) ── */ .notif-wrap{ z-index: 1100 !important; } .notif-panel{ z-index: 1200 !important; background: #10131e !important; /* fully opaque so nothing shows through */ pointer-events: auto !important; } .notif-panel, .notif-panel *{ pointer-events: auto; } .notif-mark-all{ position: relative; z-index: 2; cursor: pointer; } .notif-item{ pointer-events: auto; } /* ═══════════════════════════════════════════════════════ LEADERBOARD REDESIGN (v72) — labeled stat blocks, clean rows ═══════════════════════════════════════════════════════ */ .lb-row{ display:flex !important; align-items:center; gap:14px; padding:14px 18px !important; border-radius:14px; margin-bottom:10px; background:linear-gradient(180deg,#221a15,#10131e) !important; border:1px solid var(--rust-ln2) !important; } .lb-row-gold{ border-color:rgba(238,179,81,.45) !important; background:linear-gradient(180deg,rgba(238,179,81,.08),#10131e) !important; } .lb-row-silver{ border-color:rgba(200,200,210,.35) !important; } .lb-row-bronze{ border-color:rgba(205,127,50,.35) !important; } .lb-rank-badge{ flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; color:var(--t2); font-family:var(--fd); } .lb-player{ flex:1 1 auto; min-width:0; } .lb-player b{ display:block; font-size:15px; font-weight:700; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .lb-player small{ display:block; font-size:11.5px; color:var(--t3); margin-top:2px; } /* labeled stat blocks */ .lb-stat-block{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; min-width:88px; line-height:1.15; } .lb-stat-val{ font-family:var(--fd); font-size:19px; font-weight:800; letter-spacing:.01em; background:linear-gradient(180deg,#ffd9a0,#f4cd84 60%,#eeb351); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lb-stat-lbl{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); font-weight:700; margin-top:1px; } .lb-stat-prize .lb-stat-val{ background:linear-gradient(180deg,#f4cd84,#22c55e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lb-stat-empty .lb-stat-val{ background:none; -webkit-text-fill-color:initial; color:var(--t3); } /* Leaderboard avatars (medal ring for top 3) */ .lb-av{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#1b212b; border:2px solid var(--rust-ln2); box-shadow:0 2px 8px rgba(0,0,0,.35); } .lb-av img{ width:100%; height:100%; object-fit:cover; display:block; } .lb-av-fallback{ font-family:var(--fu); font-size:18px; font-weight:800; color:var(--t2); } .lb-av.rank-gold{ border-color:#eeb351; box-shadow:0 0 0 2px rgba(238,179,81,.35), 0 4px 14px rgba(238,179,81,.4); } .lb-av.rank-silver{ border-color:#cdd2dc; box-shadow:0 0 0 2px rgba(205,210,220,.3); } .lb-av.rank-bronze{ border-color:#cd7f32; box-shadow:0 0 0 2px rgba(205,127,50,.3); } /* Prize-breakdown strip under the hero */ .lb-prizes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 20px; } .lb-prize-pill{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:120px; padding:12px 18px; border-radius:14px; background:linear-gradient(180deg,#1c2230,#12151f); border:1px solid var(--rust-ln2); } .lb-prize-pill.rank-gold{ border-color:rgba(238,179,81,.5); background:linear-gradient(180deg,rgba(238,179,81,.12),#12151f); box-shadow:0 8px 22px rgba(238,179,81,.12); } .lb-prize-pill.rank-silver{ border-color:rgba(205,210,220,.4); } .lb-prize-pill.rank-bronze{ border-color:rgba(205,127,50,.4); } .lb-prize-medal{ font-size:24px; line-height:1; } .lb-prize-amt{ display:flex; align-items:center; gap:.18em; font-family:var(--fd); font-size:21px; font-weight:800; color:var(--gold2); } .lb-prize-amt .coin-ico{ width:.62em; height:.62em; } .lb-prize-place{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-weight:700; } /* ════════ 3D PODIUM (top 3) + leaderboard animation ════════ */ .lb-podium-wrap{ position:relative; overflow:hidden; perspective:1100px; margin:6px 0 26px; } .lb-podium{ display:flex; align-items:flex-end; justify-content:center; gap:14px; transform-style:preserve-3d; transform:rotateX(11deg); perspective:1300px; } .lb-pod{ position:relative; flex:1 1 0; max-width:212px; min-width:0; display:flex; flex-direction:column; align-items:center; transform-style:preserve-3d; } .lb-pod-card{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:12px; width:100%; animation:lbPodRise .7s cubic-bezier(.2,1.1,.4,1) both; } .lb-pod-1 .lb-pod-card{ animation-delay:.05s; } .lb-pod-2 .lb-pod-card{ animation-delay:.16s; } .lb-pod-3 .lb-pod-card{ animation-delay:.26s; } .lb-pod-trophy{ position:relative; z-index:2; font-size:34px; line-height:1; margin-bottom:2px; filter:drop-shadow(0 5px 11px rgba(238,179,81,.75)); transform-style:preserve-3d; animation:lbTrophy 4s ease-in-out infinite; } .lb-pod-rays{ position:absolute; top:26px; left:50%; width:200px; height:200px; margin-left:-100px; pointer-events:none; z-index:0; opacity:.7; background:repeating-conic-gradient(from 0deg, rgba(255,213,110,.22) 0deg 7deg, transparent 7deg 19deg); -webkit-mask:radial-gradient(closest-side, #000 26%, transparent 70%); mask:radial-gradient(closest-side, #000 26%, transparent 70%); animation:lbRays 18s linear infinite; } .lb-pod-av{ position:relative; width:74px; height:74px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#1b212b; border:3px solid var(--rust-ln2); box-shadow:0 8px 22px rgba(0,0,0,.5); animation:lbFloat 3.6s ease-in-out infinite; } .lb-pod-1 .lb-pod-av{ width:94px; height:94px; animation-duration:3.9s; } .lb-pod-av img{ width:100%; height:100%; object-fit:cover; display:block; } .lb-pod-av span{ font-family:var(--fu); font-size:30px; font-weight:800; color:#cfd6dd; } .lb-pod-av.rank-gold{ border-color:#eeb351; box-shadow:0 0 0 3px rgba(238,179,81,.4), 0 10px 30px rgba(238,179,81,.5); } .lb-pod-av.rank-silver{ border-color:#cdd2dc; box-shadow:0 0 0 3px rgba(205,210,220,.35), 0 8px 22px rgba(0,0,0,.5); } .lb-pod-av.rank-bronze{ border-color:#cd7f32; box-shadow:0 0 0 3px rgba(205,127,50,.35), 0 8px 22px rgba(0,0,0,.5); } .lb-pod-1 .lb-pod-av::after{ content:""; position:absolute; inset:-9px; border-radius:50%; pointer-events:none; box-shadow:0 0 32px 7px rgba(238,179,81,.5); animation:lbPulse 2.4s ease-in-out infinite; } .lb-pod-medal{ position:absolute; bottom:-2px; right:-2px; font-size:20px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)); } .lb-pod-1 .lb-pod-medal{ font-size:26px; } .lb-pod-name{ font-weight:800; font-size:15px; color:var(--t1); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb-pod-1 .lb-pod-name{ font-size:17px; color:#ffd98a; } .lb-pod-sub{ font-size:11px; color:var(--t3); } .lb-pod-wager{ display:flex; align-items:center; gap:.2em; font-family:var(--fd); font-size:18px; font-weight:800; background:linear-gradient(180deg,#ffd9a0,#f4cd84 60%,#eeb351); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lb-pod-wager .coin-ico{ width:.62em; height:.62em; -webkit-text-fill-color:initial; } .lb-pod.is-empty .lb-pod-card{ opacity:.45; } /* the 3D pedestal block */ .lb-pod-base{ position:relative; width:100%; border-radius:12px 12px 5px 5px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:13px 8px 11px; color:#1b150a; overflow:visible; transform-origin:bottom; transform-style:preserve-3d; background:linear-gradient(180deg, var(--pod-top,#2a2f3a), var(--pod-bot,#161a22)); box-shadow:0 20px 32px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -12px 20px rgba(0,0,0,.4); animation:lbBaseGrow .85s cubic-bezier(.2,1,.3,1) both; } .lb-pod-base::before{ content:""; position:absolute; top:0; left:0; right:0; height:30px; border-radius:11px 11px 0 0; background:linear-gradient(180deg, var(--pod-top2,#fff), var(--pod-top,#ffe48a)); transform:rotateX(90deg); transform-origin:top center; box-shadow:inset 0 0 16px rgba(255,255,255,.25); } .lb-pod-1 .lb-pod-base{ height:124px; --pod-top:#ffe48a; --pod-top2:#fff4c6; --pod-bot:#d2941b; animation-delay:.05s; } .lb-pod-2 .lb-pod-base{ height:94px; --pod-top:#eef2f8; --pod-top2:#ffffff; --pod-bot:#9aa3b2; animation-delay:.16s; } .lb-pod-3 .lb-pod-base{ height:76px; --pod-top:#f3bd92; --pod-top2:#ffdcbb; --pod-bot:#ab6530; animation-delay:.26s; } .lb-pod-rank{ font-family:var(--fd); font-size:30px; font-weight:800; line-height:1; text-shadow:0 2px 4px rgba(255,255,255,.25); } .lb-pod-prize{ display:flex; align-items:center; gap:.22em; font-family:var(--fd); font-size:28px; font-weight:800; color:#fff6e2; background:rgba(0,0,0,.36); padding:5px 16px; border-radius:999px; letter-spacing:.01em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 7px rgba(0,0,0,.35); text-shadow:0 1px 2px rgba(0,0,0,.55); } .lb-pod-prize .coin-ico{ width:.8em; height:.8em; } .lb-pod-shine{ position:absolute; inset:0; pointer-events:none; transform:translateX(-130%); background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%); } .lb-pod-1 .lb-pod-shine{ animation:lbShine 3.4s ease-in-out 1.2s infinite; } /* staggered entrance + 3D hover for the table rows (4+) */ .lb-rows .lb-row{ animation:lbRowIn .5s ease both; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .lb-rows .lb-row:hover{ transform:translateY(-2px) scale(1.012) !important; box-shadow:0 14px 28px rgba(0,0,0,.42); border-color:rgba(238,179,81,.32) !important; } .lb-rank-badge{ transition:transform .18s ease; } .lb-rows .lb-row:hover .lb-rank-badge{ transform:scale(1.12); } @keyframes lbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } @keyframes lbPodRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } } @keyframes lbBaseGrow{ from{ transform:scaleY(.02); } to{ transform:scaleY(1); } } @keyframes lbShine{ 0%{ transform:translateX(-130%);} 55%,100%{ transform:translateX(130%);} } @keyframes lbPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } @keyframes lbRowIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } @keyframes lbTrophy{ 0%{ transform:translateY(0) rotateY(0deg); } 50%{ transform:translateY(-7px) rotateY(180deg); } 100%{ transform:translateY(0) rotateY(360deg); } } @keyframes lbRays{ to{ transform:rotate(360deg); } } @keyframes lbConfetti{ 0%{ transform:translateY(0) rotateZ(0deg); opacity:0; } 8%{ opacity:.95; } 100%{ transform:translateY(380px) rotateZ(560deg); opacity:.18; } } .lb-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3; } .lb-confetti i{ position:absolute; top:-16px; width:8px; height:13px; border-radius:1px; opacity:0; animation-name:lbConfetti; animation-timing-function:linear; animation-iteration-count:infinite; } @media (max-width:560px){ .lb-podium{ gap:7px; } .lb-pod-av{ width:58px; height:58px; } .lb-pod-1 .lb-pod-av{ width:72px; height:72px; } .lb-pod-av span{ font-size:23px; } .lb-pod-name{ font-size:13px; } .lb-pod-1 .lb-pod-name{ font-size:14px; } .lb-pod-sub{ font-size:10px; } .lb-pod-wager{ font-size:15px; } .lb-pod-1 .lb-pod-base{ height:104px; } .lb-pod-2 .lb-pod-base{ height:80px; } .lb-pod-3 .lb-pod-base{ height:66px; } .lb-pod-rank{ font-size:24px; } .lb-pod-crown{ font-size:24px; } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .lb-pod-card,.lb-pod-base,.lb-pod-av,.lb-pod-trophy,.lb-pod-rays,.lb-pod-shine,.lb-pod-1 .lb-pod-av::after,.lb-confetti i,.lb-rows .lb-row{ animation:none !important; } .lb-confetti{ display:none; } } /* prize breakdown slots get a Prize label */ .lb-prize-slot{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid var(--rust-ln); } .lb-prize-slot .lb-prize-rank{ font-size:15px; } .lb-prize-slot b{ font-family:var(--fd); font-size:15px; color:var(--rust3); } .lb-prize-slot em{ font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-style:normal; font-weight:700; } .lb-prize-slot.rank-1{ border-color:rgba(238,179,81,.4); background:rgba(238,179,81,.07); } .lb-prize-slot.rank-1 b{ color:#f4cd84; } @media (max-width:600px){ .lb-row{ gap:8px; padding:12px !important; } .lb-av{ width:36px; height:36px; } .lb-rank-badge{ width:26px; font-size:15px; } .lb-stat-block{ min-width:64px; } .lb-stat-val{ font-size:15px; } .lb-player b{ max-width:38vw; } } /* ── Transaction history pagination ── */ .tx-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; } .tx-pg-btn{ padding:8px 16px; border-radius:9px; border:1px solid var(--rust-ln2); background:rgba(255,255,255,.04); color:var(--t1); font-weight:700; font-size:13px; cursor:pointer; transition: background .18s, transform .12s, opacity .2s; } .tx-pg-btn:hover:not(:disabled){ background:rgba(196,184,158,.15); transform:translateY(-1px); } .tx-pg-btn:active:not(:disabled){ transform:translateY(0) scale(.97); } .tx-pg-btn:disabled{ opacity:.4; cursor:not-allowed; } .tx-pg-info{ font-size:13px; color:var(--t2); font-weight:600; font-variant-numeric:tabular-nums; } /* ═══════════════════════════════════════════════════════ ARENA — BOXING RING (v72 new game) ═══════════════════════════════════════════════════════ */ .page-sub{ color:var(--t3); font-size:14px; line-height:1.55; margin-top:6px; max-width:640px; } .bx-ring{ position:relative; height:420px; border-radius:18px; overflow:hidden; background: radial-gradient(120% 90% at 50% 10%, rgba(196,184,158,.10), transparent 60%), linear-gradient(180deg,#161226,#120d0a); border:1px solid var(--rust-ln2); display:flex; align-items:flex-end; justify-content:space-between; padding:0 6%; } /* canvas floor */ .bx-ring-floor{ position:absolute; left:0; right:0; bottom:0; height:46%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 40px), linear-gradient(180deg,#2a2740,#151926); border-top:3px solid rgba(196,184,158,.4); box-shadow:inset 0 18px 40px rgba(0,0,0,.5); } /* ropes */ .bx-rope{ position:absolute; left:0; right:0; height:4px; background:linear-gradient(90deg,#f5c451,#f4cd84); opacity:.55; z-index:1; } .bx-rope-top{ top:14%; } .bx-rope-mid{ top:26%; } .bx-ropes-back{ position:absolute; inset:0 0 46% 0; border:2px solid rgba(196,184,158,.12); border-bottom:0; pointer-events:none; } .bx-ring::before,.bx-ring::after{ /* corner posts */ content:""; position:absolute; top:8%; bottom:40%; width:7px; border-radius:4px; background:linear-gradient(180deg,#f4cd84,#8a2e1c); z-index:2; } .bx-ring::before{ left:3%; } .bx-ring::after{ right:3%; } .bx-fighter{ position:relative; z-index:3; width:160px; display:flex; flex-direction:column; align-items:center; transition:transform .2s; } .bx-char{ width:130px; } .bx-svg{ width:130px; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); transform-origin:50% 90%; } .bx-fighter-red{ } .bx-fighter-blue .bx-svg{ transform:scaleX(-1); } /* face each other */ /* idle bob */ .bx-fighter:not(.bx-win):not(.bx-lose) .bx-svg{ animation:bxBob 1.6s ease-in-out infinite; } @keyframes bxBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } .bx-fighter-blue:not(.bx-win):not(.bx-lose) .bx-svg{ animation:bxBobB 1.6s ease-in-out infinite; } @keyframes bxBobB{ 0%,100%{ transform:scaleX(-1) translateY(0); } 50%{ transform:scaleX(-1) translateY(-5px); } } /* punch lunge */ .bx-fighter-red.bx-punch{ transform:translateX(40px); } .bx-fighter-blue.bx-punch{ transform:translateX(-40px); } .bx-fighter.bx-punch .bx-arm{ animation:bxJab .36s ease; transform-origin:0 0; } @keyframes bxJab{ 0%{ transform:translateX(0) rotate(0); } 45%{ transform:translateX(8px) rotate(-12deg); } 100%{ transform:translateX(0) rotate(0); } } /* hit reaction */ .bx-fighter.bx-hit .bx-svg{ animation:bxHit .36s ease; filter:drop-shadow(0 0 14px rgba(239,68,68,.9)) saturate(1.6); } @keyframes bxHit{ 0%,100%{ transform:translateX(0) rotate(0);} 25%{ transform:translateX(-12px) rotate(-5deg);} 60%{ transform:translateX(6px) rotate(2deg);} } .bx-fighter-blue.bx-hit .bx-svg{ animation:bxHitB .36s ease; } @keyframes bxHitB{ 0%,100%{ transform:scaleX(-1) translateX(0) rotate(0);} 25%{ transform:scaleX(-1) translateX(12px) rotate(5deg);} 60%{ transform:scaleX(-1) translateX(-6px) rotate(-2deg);} } .bx-fighter.bx-dodge .bx-svg{ animation:bxDodge .3s ease; } @keyframes bxDodge{ 0%,100%{ opacity:1; } 50%{ opacity:.55; transform:translateY(-6px); } } /* win / lose */ .bx-fighter.bx-win .bx-svg{ animation:bxCheer .7s ease infinite alternate; filter:drop-shadow(0 0 20px rgba(196,184,158,.8)); } @keyframes bxCheer{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-10px);} } .bx-fighter.bx-lose .bx-svg{ transform:rotate(82deg) translateY(10px); opacity:.55; filter:grayscale(.6); transition:transform .6s, opacity .6s; } .bx-fighter-blue.bx-win .bx-svg{ animation:bxCheerB .7s ease infinite alternate; } @keyframes bxCheerB{ 0%{ transform:scaleX(-1) translateY(0);} 100%{ transform:scaleX(-1) translateY(-10px);} } .bx-fighter-blue.bx-lose .bx-svg{ transform:scaleX(-1) rotate(82deg) translateY(10px); } /* HP bars above fighters */ .bx-hp-wrap{ width:150px; margin-bottom:8px; z-index:4; } .bx-hp-label{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--t1); margin-bottom:3px; } .bx-hp-label b{ color:var(--rust3); font-weight:800; } .bx-hp-track{ height:13px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid var(--rust-ln2); overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.5); } .bx-hp-fill{ height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg,#22c55e,#4ade80); transition:width .4s cubic-bezier(.4,0,.2,1); } .bx-low .bx-hp-fill{ background:linear-gradient(90deg,#ef4444,#f87171); animation:bxHpDanger 1s ease-in-out infinite; } @keyframes bxHpDanger{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.35);} } /* corner tags */ .bx-corner-tag{ margin-top:6px; font-size:10px; font-weight:800; letter-spacing:.1em; padding:3px 9px; border-radius:6px; z-index:4; } .bx-tag-red{ background:rgba(239,68,68,.2); color:#fca5a5; } .bx-tag-blue{ background:rgba(59,130,246,.2); color:#93c5fd; } /* center VS / round */ .bx-center{ position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); text-align:center; z-index:3; } .bx-vs{ font-family:var(--fd); font-size:40px; color:var(--rust3); text-shadow:0 2px 12px rgba(0,0,0,.6); animation:bxVsPulse 2s ease-in-out infinite; } @keyframes bxVsPulse{ 0%,100%{ transform:scale(1); opacity:.85;} 50%{ transform:scale(1.12); opacity:1;} } /* floating damage / miss text */ .bx-float{ position:absolute; top:38%; left:50%; transform:translateX(-50%); font-family:var(--fd); font-size:26px; font-weight:800; pointer-events:none; z-index:6; animation:bxFloat .9s ease-out forwards; } .bx-float-dmg{ color:#fca5a5; text-shadow:0 2px 8px rgba(0,0,0,.7); } .bx-float-miss{ color:#cbd5e1; font-size:18px; } @keyframes bxFloat{ 0%{ opacity:0; transform:translateX(-50%) translateY(0) scale(.6);} 25%{ opacity:1; transform:translateX(-50%) translateY(-14px) scale(1.1);} 100%{ opacity:0; transform:translateX(-50%) translateY(-46px) scale(1);} } /* hit spark */ .bx-spark{ position:absolute; top:42%; left:50%; width:0; height:0; z-index:5; } .bx-spark i{ position:absolute; width:18px; height:3px; background:linear-gradient(90deg,#fff,#f4cd84); border-radius:2px; transform-origin:0 50%; animation:bxSpark .5s ease-out forwards; } @keyframes bxSpark{ 0%{ opacity:1; width:4px;} 100%{ opacity:0; width:26px; } } /* winner banner */ .bx-winner-banner{ position:absolute; left:50%; top:18%; transform:translateX(-50%) scale(.6); opacity:0; z-index:7; background:linear-gradient(180deg,#1e1933,#10131e); border:1px solid rgba(196,184,158,.5); padding:12px 24px; border-radius:14px; font-family:var(--fd); font-size:24px; color:#f4cd84; box-shadow:0 12px 40px rgba(196,184,158,.4); white-space:nowrap; } .bx-winner-banner.show{ animation:bxWinIn .5s cubic-bezier(.2,1.3,.4,1) forwards, bxWinGlow 1.6s ease-in-out infinite .5s; } @keyframes bxWinIn{ to{ opacity:1; transform:translateX(-50%) scale(1);} } @keyframes bxWinGlow{ 0%,100%{ box-shadow:0 12px 40px rgba(196,184,158,.4);} 50%{ box-shadow:0 12px 50px rgba(196,184,158,.7);} } /* idle overlay */ .bx-idle-overlay{ position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; background:rgba(10,7,5,.55); backdrop-filter:blur(2px); } .bx-idle-inner{ text-align:center; } .bx-idle-icon{ font-size:46px; animation:bxBob 2.4s ease-in-out infinite; } .bx-idle-title{ font-family:var(--fd); font-size:24px; color:var(--t1); margin-top:8px; } .bx-idle-msg{ font-size:13px; color:var(--t3); margin-top:4px; } .bx-fight-msg{ text-align:center; min-height:18px; font-size:13px; color:var(--rust3); margin-top:10px; } .bx-fight-msg.err{ color:#f87171; } /* layout grid */ .bx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; } @media (max-width:880px){ .bx-grid{ grid-template-columns:1fr; } .bx-ring{ height:360px; } .bx-fighter{ width:120px;} .bx-char,.bx-svg{ width:104px;} } /* corner picker */ .bx-corner-pick{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:14px; } .bx-corner-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px; border-radius:14px; background:rgba(255,255,255,.03); border:2px solid var(--rust-ln2); cursor:pointer; color:var(--t2); transition:transform .15s, border-color .2s, box-shadow .25s; } .bx-corner-btn .bx-glove{ font-size:24px; } .bx-corner-btn span{ font-family:var(--fd); font-size:18px; } .bx-corner-btn small{ font-size:10px; color:var(--t3); } .bx-corner-red.active{ border-color:#ef4444; box-shadow:0 6px 22px rgba(239,68,68,.35); color:#fff; } .bx-corner-blue.active{ border-color:#3b82f6; box-shadow:0 6px 22px rgba(59,130,246,.35); color:#fff; } .bx-corner-vs{ font-family:var(--fd); color:var(--t3); font-size:18px; } /* open list */ .bx-open-row,.bx-recent-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); margin-bottom:9px; } .bx-dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; } .bx-dot-red{ background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.6); } .bx-dot-blue{ background:#3b82f6; box-shadow:0 0 8px rgba(59,130,246,.6); } .bx-open-info,.bx-recent-info{ flex:1; min-width:0; } .bx-open-info b,.bx-recent-info b{ display:block; font-size:14px; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bx-open-info small,.bx-recent-info small{ font-size:11px; color:var(--t3); } .bx-open-wager{ font-family:var(--fd); font-size:17px; color:var(--rust3); } .bx-btn-join,.bx-btn-bot{ padding:8px 16px; border-radius:9px; border:0; font-weight:700; font-size:13px; cursor:pointer; color:#fff; background:linear-gradient(180deg,var(--rust2),var(--rust)); transition:transform .15s, box-shadow .2s; } .bx-btn-join:hover,.bx-btn-bot:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(182,170,146,.4); } .bx-btn-cancel{ width:32px; height:32px; border-radius:8px; border:1px solid var(--rust-ln2); background:rgba(255,255,255,.04); color:var(--t3); cursor:pointer; } .bx-btn-cancel:hover{ color:#f87171; border-color:rgba(239,68,68,.4); } /* recent */ .bx-res-corner{ font-size:10px; font-weight:800; letter-spacing:.08em; padding:4px 9px; border-radius:6px; flex:0 0 auto; } .bx-res-red{ background:rgba(239,68,68,.18); color:#fca5a5; } .bx-res-blue{ background:rgba(59,130,246,.18); color:#93c5fd; } .bx-recent-prize{ font-family:var(--fd); font-size:16px; color:#4ade80; } /* verify panel rows reuse */ .vf-row{ display:flex; flex-direction:column; gap:2px; padding:8px 0; border-bottom:1px solid var(--rust-ln); } .vf-row span{ font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; } .vf-row code{ font-size:12px; color:var(--rust3); word-break:break-all; } .vf-note{ font-size:12px; color:var(--t3); line-height:1.5; margin-top:8px; } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .bx-fighter .bx-svg, .bx-idle-icon, .bx-vs, .bx-winner-banner.show{ animation:none !important; } } /* ═══════════════════════════════════════════════════════ NAV REDESIGN (v75) — bigger animated icons, More dropdown, profile avatar dropdown. ═══════════════════════════════════════════════════════ */ .nav-ico{ font-size:17px; display:inline-block; transition:transform .25s cubic-bezier(.34,1.6,.5,1); } .nav-ico svg{ width:20px; height:20px; display:block; } .nav a:hover .nav-ico, .nav-more-btn:hover .nav-ico{ transform:scale(1.35) rotate(-8deg); } .nav-txt{ } @media (max-width:1200px){ .nav-txt{ display:none; } .nav-ico{ font-size:20px; } } /* More dropdown */ .nav-more{ position:relative; display:inline-flex; } .nav-more-btn{ display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 12px; border-radius:10px; background:none; border:1px solid transparent; color:var(--t2); font-weight:600; font-size:12.5px; cursor:pointer; font-family:inherit; transition:background .18s,color .18s; } .nav-more-btn:hover, .nav-more-btn.open{ background:rgba(182,170,146,.14); color:#fff; } .nav-caret{ font-size:9px; opacity:.7; transition:transform .2s; } .nav-more-btn.open .nav-caret{ transform:rotate(180deg); } .nav-more-menu{ position:absolute; top:46px; left:0; min-width:180px; z-index:1200; background:#151926; border:1px solid var(--rust-ln2); border-radius:14px; padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.6); animation:dropIn .2s ease; } @keyframes dropIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} } .nav-more-menu a{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px; color:var(--t2); text-decoration:none; font-size:13.5px; font-weight:600; transition:background .15s,color .15s; } .nav-more-menu a:hover{ background:rgba(182,170,146,.16); color:#fff; } .nav-more-menu a.active{ background:rgba(182,170,146,.22); color:var(--rust3); } /* Profile avatar dropdown */ .profile-wrap{ position:relative; } .profile-avatar-btn{ width:42px; height:42px; border-radius:50%; border:2px solid var(--rust-ln2); cursor:pointer; padding:0; overflow:hidden; background:linear-gradient(145deg,var(--rust2),var(--rust)); display:flex; align-items:center; justify-content:center; transition:transform .18s, box-shadow .2s; } .profile-avatar-btn:hover{ transform:scale(1.07); box-shadow:0 6px 18px rgba(182,170,146,.5); } .profile-avatar-btn img{ width:100%; height:100%; object-fit:cover; } .pa-fallback{ font-family:var(--fu); font-size:20px; color:#fff; } .profile-menu{ position:absolute; top:52px; right:0; min-width:190px; z-index:1200; background:#151926; border:1px solid var(--rust-ln2); border-radius:14px; padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.6); animation:dropIn .2s ease; } .pm-head{ padding:10px 12px 8px; border-bottom:1px solid var(--rust-ln); margin-bottom:4px; } .pm-head b{ display:block; color:var(--t1); font-size:14px; } .pm-head small{ color:var(--rust3); font-size:11px; } .profile-menu a{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px; color:var(--t2); text-decoration:none; font-size:13.5px; font-weight:600; transition:background .15s,color .15s; } .profile-menu a:hover{ background:rgba(182,170,146,.16); color:#fff; } .profile-menu a.pm-logout:hover{ background:rgba(239,68,68,.16); color:#fca5a5; } /* Landing: 3 game cards */ .lp-modes-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:900px){ .lp-modes-3{ grid-template-columns:1fr; } } /* Wager requirement banner in withdraw */ .wreq-banner{ padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:13px; } .wreq-banner-block{ background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); } .wreq-banner-ok{ background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.3); color:#f4cd84; font-weight:600; } .wreq-banner-head{ color:#fca5a5; font-weight:700; margin-bottom:8px; } .wreq-amount{ font-family:var(--fd); font-size:22px; color:var(--t1); margin-bottom:6px; } .wreq-amount span{ font-size:14px; color:var(--t3); } .wreq-note{ color:var(--t2); margin-top:6px; } /* ═══════════════════════════════════════════════════════ RUSTFLIP REDESIGN — weapons header + recent flips strip ═══════════════════════════════════════════════════════ */ .rf-header{ position:relative; text-align:center; padding-top:8px; } .rf-weapons{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:6px; opacity:.95; } .rf-weapon{ height:38px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .rf-gun{ width:150px; animation:rfGunFloat 4s ease-in-out infinite; } .rf-knife{ width:104px; animation:rfKnifeFloat 4s ease-in-out infinite .5s; } @keyframes rfGunFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-5px) rotate(2deg);} } @keyframes rfKnifeFloat{ 0%,100%{ transform:translateY(0) rotate(3deg);} 50%{ transform:translateY(-6px) rotate(-3deg);} } .rf-header .page-title{ margin:2px 0; } .rf-recent-strip{ display:flex; align-items:center; gap:12px; padding:10px 16px; margin-bottom:16px; background:rgba(0,0,0,.25); border:1px solid var(--rust-ln); border-radius:12px; overflow-x:auto; } .rf-strip-label{ font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--rust3); white-space:nowrap; flex:0 0 auto; } .rf-strip-items{ display:flex; gap:7px; } .rf-strip-chip{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex:0 0 auto; } .rf-chip-red{ background:linear-gradient(145deg,#ef4444,#991b1b); } .rf-chip-blue{ background:linear-gradient(145deg,#3b82f6,#1e40af); } .rf-strip-empty{ font-size:12px; color:var(--t3); } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .rf-gun,.rf-knife{ animation:none; } } /* ═══════════════════════════════════════════════════════ FAIRNESS — per-game formula cards ═══════════════════════════════════════════════════════ */ .fair-games{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; } @media (max-width:900px){ .fair-games{ grid-template-columns:1fr; } } .fair-game-card{ background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--rust-ln2); border-radius:16px; padding:20px; transition:transform .25s, box-shadow .3s, border-color .25s; } .fair-game-card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(196,184,158,.3); } .fair-game-ico{ font-size:30px; margin-bottom:8px; } .fair-game-card h4{ font-family:var(--fd); font-size:20px; letter-spacing:.04em; color:var(--t1); margin-bottom:8px; } .fair-game-card p{ font-size:13px; color:var(--t2); line-height:1.5; margin-bottom:8px; } .fair-game-card code{ display:block; background:rgba(0,0,0,.4); border:1px solid var(--rust-ln); border-radius:8px; padding:9px 11px; font-size:11.5px; color:var(--rust3); word-break:break-all; margin-bottom:8px; } .fg-note{ font-size:12px !important; color:var(--t3) !important; } .fg-note code{ display:inline; padding:1px 5px; background:rgba(182,170,146,.12); border:0; margin:0; } /* ═══════════════════════════════════════════════════════ NAV FIT (v76) — all items in the top bar, no More menu ═══════════════════════════════════════════════════════ */ @media (min-width:861px){ .nav{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; } } .nav a{ white-space:nowrap; } /* Hide labels on mid screens so every game/section icon still fits */ /* Was: .nav .nav-txt{display:none} across 861-1180. That never took effect — two later rules set display:inline !important, one for <=1099 and one for >=1100, which between them cover this entire range. The label-hiding it was written for has not happened at these widths for a long time; the sizing below is what actually applies. */ @media (min-width:861px) and (max-width:1180px){ .nav-ico{ font-size:19px; } .nav a{ padding:0 9px; } } @media (min-width:1181px) and (max-width:1480px){ .nav a{ padding:0 7px; font-size:11.5px; } .nav{ gap:1px; } } /* ═══════════════════════════════════════════════════════ RPS MODAL (v76) — forced result modal ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ STEAM LOGIN BUTTON ═══════════════════════════════════════════════════════ */ .auth-or{ display:flex; align-items:center; gap:12px; margin:4px 0; color:var(--t3); font-size:12px; } .auth-or::before, .auth-or::after{ content:""; flex:1; height:1px; background:var(--rust-ln2); } .steam-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px 18px; border-radius:12px; text-decoration:none; font-weight:700; font-size:14px; color:#fff; cursor:pointer; background:linear-gradient(135deg,#1b2838,#2a475e); border:1px solid #66c0f4; transition:transform .15s, box-shadow .25s, filter .2s; } .steam-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(102,192,244,.4); filter:brightness(1.08); } .steam-btn:active{ transform:translateY(0) scale(.98); } .steam-ico{ width:22px; height:22px; color:#66c0f4; flex:0 0 auto; } /* ═══════════════════════════════════════════════════════ MOBILE NAV DROPDOWN FIX (v77) — full-width rows with labels ═══════════════════════════════════════════════════════ */ @media (max-width:1099px){ .nav{ display:none !important; position:fixed; top:var(--rr-header-h,64px); left:0 !important; right:auto !important; width:100vw !important; max-width:100vw !important; min-width:100vw !important; margin:0 !important; box-sizing:border-box; flex-direction:column !important; gap:4px !important; flex-wrap:nowrap; background:#10131e; border:0; border-bottom:1px solid var(--rust-ln2); border-radius:0 0 18px 18px !important; padding:12px !important; z-index:1400; max-height:calc(100vh - var(--rr-header-h,64px)); overflow-y:auto; box-shadow:0 18px 50px rgba(0,0,0,.6); } .nav.open{ display:flex !important; animation:dropIn .2s ease; } .nav a{ display:flex !important; align-items:center; gap:12px; width:100%; padding:13px 16px !important; border-radius:11px; font-size:15px !important; justify-content:flex-start; } .nav .nav-txt{ display:inline !important; } .nav .nav-ico{ font-size:20px; width:26px; text-align:center; } .nav a.active{ background:rgba(182,170,146,.2); } /* Games row inside the panel: full-width, label + submenu inline beneath it */ .nav-games-btn .nav-txt{ display:inline !important; } .nav-games-btn{ font-size:15px !important; padding:13px 16px !important; } .nav-games-menu .ngm-item{ padding-left:22px; } /* Fill the drawer width so the game cards and rows don't sit narrow inside a wide panel. */ .nav-games-menu, #navGamesMenu{ width:100% !important; max-width:none !important; box-sizing:border-box; } #navGamesMenu .ngm-card{ width:100% !important; box-sizing:border-box; } } /* Tablet / wide-responsive: the full-width drawer read as empty and cheap — the links stretched across the whole screen while the game cards stayed narrow, leaving a big blank right side. Cap it to a proper left-hanging panel here; phones (≤560px) keep the natural full-width drawer. */ @media (min-width:561px) and (max-width:1099px){ .nav.open{ width:340px !important; max-width:340px !important; min-width:0 !important; border-radius:0 0 18px 18px !important; border-right:1px solid var(--rust-ln2); } } /* ═══════════════════════════════════════════════════════ CHAMPIONS — PROFILE-PICTURE FIGHTERS + WEAPON STRIKE (v78) No human body: just the avatar, struck by an animated weapon, vanishing on knockout. ═══════════════════════════════════════════════════════ */ .char-display{ position:relative; display:flex; align-items:center; justify-content:center; min-height:170px; } .pfp-svg{ width:150px; height:150px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); } .rust-char-wrap{ position:relative; transition:transform .2s; } /* idle breathing */ .rust-char-wrap:not(.pfp-ko) .pfp-svg{ animation:pfpFloat 2.6s ease-in-out infinite; } @keyframes pfpFloat{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-6px) scale(1.01);} } /* hit reaction — shake + red flash */ .rust-char-wrap.char-hit .pfp-svg{ animation:pfpHit .5s ease; } @keyframes pfpHit{ 0%{ transform:translateX(0) rotate(0) scale(1); opacity:1; } 16%{ transform:translateX(-11px) rotate(-7deg) scale(.92); opacity:0; filter:drop-shadow(0 0 20px rgba(239,68,68,.95)); } 36%{ opacity:0; } 50%{ transform:translateX(9px) rotate(4deg) scale(1.03); opacity:1; } 100%{ transform:translateX(0) rotate(0) scale(1); opacity:1; } } /* knockout — profile picture suddenly disappears */ .rust-char-wrap.pfp-ko{ animation:pfpKO .5s cubic-bezier(.5,0,.75,0) forwards; } @keyframes pfpKO{ 0%{ opacity:1; transform:scale(1) rotate(0);} 40%{ opacity:1; transform:scale(1.15) rotate(-4deg);} 100%{ opacity:0; transform:scale(.2) rotate(20deg);} } /* animated weapon that swings in to strike */ .pfp-strike{ position:absolute; top:50%; width:84px; height:84px; z-index:6; pointer-events:none; } .pfp-strike svg{ width:100%; height:100%; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); } .pfp-strike-left{ left:-10px; transform-origin:left center; animation:strikeL .5s ease; } .pfp-strike-right{ right:-10px; transform-origin:right center; animation:strikeR .5s ease; } @keyframes strikeL{ 0%{ transform:translateY(-50%) translateX(-60px) rotate(-60deg); opacity:0;} 35%{ transform:translateY(-50%) translateX(20px) rotate(10deg); opacity:1;} 60%{ transform:translateY(-50%) translateX(10px) rotate(-5deg);} 100%{ transform:translateY(-50%) translateX(-40px) rotate(-40deg); opacity:0;} } @keyframes strikeR{ 0%{ transform:translateY(-50%) translateX(60px) scaleX(-1) rotate(-60deg); opacity:0;} 35%{ transform:translateY(-50%) translateX(-20px) scaleX(-1) rotate(10deg); opacity:1;} 60%{ transform:translateY(-50%) translateX(-10px) scaleX(-1) rotate(-5deg);} 100%{ transform:translateY(-50%) translateX(40px) scaleX(-1) rotate(-40deg); opacity:0;} } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .rust-char-wrap .pfp-svg, .pfp-strike{ animation:none !important; } } /* Champions: centered waiting list + battle history */ .center-waiting{ margin-top:16px; border-top:1px solid var(--rust-ln); padding-top:14px; } .center-waiting-head{ font-size:14px; font-weight:700; color:var(--t1); margin-bottom:10px; } .center-waiting-head .eyebrow{ display:block; margin-bottom:2px; } .center-waiting .queue-list{ max-height:200px; overflow-y:auto; } .bh-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.22); border:1px solid var(--rust-ln); margin-bottom:9px; } .bh-ico{ font-size:20px; } .bh-info{ flex:1; min-width:0; } .bh-info b{ display:block; font-size:14px; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bh-info small{ font-size:11px; color:var(--t3); } .bh-prize{ font-family:var(--fd); font-size:16px; color:#4ade80; } /* ============================================================= v2 — Steam-only auth · bigger animated menu · pro homepage (appended last so these win over earlier duplicate rules) ============================================================= */ /* ---- Steam buttons ---- */ .steam-btn{ display:inline-flex; align-items:center; justify-content:center; gap:11px; width:100%; min-height:50px; padding:0 22px; border-radius:13px; font-family:var(--fu); font-weight:700; font-size:15px; letter-spacing:.02em; color:#fff; cursor:pointer; background:linear-gradient(135deg,#2a3f5f 0%,#1b2838 55%,#0f1722 100%); border:1px solid rgba(102,192,244,.35); box-shadow:0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07); transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease; } .steam-btn .steam-ico{ width:22px; height:22px; color:#66c0f4; flex:0 0 auto; transition:transform .3s cubic-bezier(.34,1.6,.5,1); } .steam-btn:hover{ transform:translateY(-2px); border-color:rgba(102,192,244,.7); box-shadow:0 16px 38px rgba(20,40,70,.55), 0 0 0 3px rgba(102,192,244,.12); } .steam-btn:hover .steam-ico{ transform:scale(1.12) rotate(-6deg); } .steam-btn:active{ transform:translateY(0); } .steam-btn-lg{ min-height:60px; font-size:17px; } .steam-btn-lg .steam-ico{ width:26px; height:26px; } /* nav Steam pill */ .pill-steam{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#2a475e,#1b2838); border:1px solid rgba(102,192,244,.4); color:#fff; font-weight:700; transition:transform .18s ease, box-shadow .25s ease, border-color .2s; } .pill-steam .pill-steam-ico{ width:18px; height:18px; color:#66c0f4; transition:transform .3s cubic-bezier(.34,1.6,.5,1); } .pill-steam:hover{ transform:translateY(-2px); border-color:rgba(102,192,244,.75); box-shadow:0 10px 24px rgba(20,40,70,.5); background:linear-gradient(135deg,#2a475e,#1b2838); } .pill-steam:hover .pill-steam-ico{ transform:scale(1.15) rotate(-6deg); } /* login page extras */ .auth-steam-card{ text-align:center; gap:16px; } .auth-steam-card .steam-btn{ margin-top:4px; } .steam-trust{ font-size:11px; color:var(--t3); letter-spacing:.02em; } .auth-spectate{ display:block; color:var(--p3) !important; font-size:12px; opacity:.85; } .auth-spectate:hover{ opacity:1; } /* ---- Bigger, livelier top menu ---- */ .topbar-inner{ min-height:74px; } .nav{ gap:4px; } .nav a{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; font-size:14.5px; font-weight:600; letter-spacing:.01em; transition:transform .2s cubic-bezier(.34,1.4,.5,1), background .2s, color .2s, box-shadow .25s; } .nav .nav-ico{ font-size:24px; line-height:1; display:inline-block; transition:transform .3s cubic-bezier(.34,1.8,.4,1), filter .25s; will-change:transform; } .nav a:hover{ transform:translateY(-2px); background:rgba(182,170,146,.16); color:var(--t1); box-shadow:0 8px 20px rgba(182,170,146,.2); } .nav a:hover .nav-ico{ animation:navIcoPop .5s cubic-bezier(.34,1.8,.4,1) forwards; filter:drop-shadow(0 6px 12px rgba(182,170,146,.6)); } @keyframes navIcoPop{ 0%{transform:scale(1) rotate(0);} 40%{transform:scale(1.55) rotate(-14deg) translateY(-4px);} 65%{transform:scale(1.32) rotate(7deg) translateY(-1px);} 82%{transform:scale(1.46) rotate(-4deg);} 100%{transform:scale(1.42) rotate(-8deg) translateY(-2px);} } .nav a.active{ background:rgba(182,170,146,.26); color:var(--p4); border:1px solid rgba(182,170,146,.4); } .nav a.active .nav-ico{ transform:scale(1.18); filter:drop-shadow(0 3px 8px rgba(182,170,146,.45)); } @media (max-width:980px){ .topbar-inner{ min-height:64px; } .nav a{ font-size:13px; padding:9px 12px; } .nav .nav-ico{ font-size:19px; } } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .nav a:hover, .nav a:hover .nav-ico, .steam-btn:hover, .pill-steam:hover{ transform:none; } } /* ============================================================= HOMEPAGE (.home) ============================================================= */ .home{ width:100%; max-width:1180px; margin:0 auto; padding:8px 0 60px; position:relative; z-index:1; } /* hero */ .hm-hero{ position:relative; padding:54px 0 40px; overflow:hidden; } .hm-hero-glow{ position:absolute; inset:-40% 0 auto 0; height:520px; pointer-events:none; background: radial-gradient(closest-side at 30% 20%, rgba(182,170,146,.28), transparent 70%), radial-gradient(closest-side at 75% 10%, rgba(196,184,158,.18), transparent 70%); filter:blur(6px); opacity:.9; animation:hmGlow 9s ease-in-out infinite alternate; } @keyframes hmGlow{ from{ transform:translateY(-8px) scale(1);} to{ transform:translateY(8px) scale(1.04);} } .hm-hero-inner{ position:relative; } .hm-eyebrow{ display:inline-block; font-family:var(--fm); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--p3); padding:7px 14px; border:1px solid var(--ln2); border-radius:999px; background:rgba(182,170,146,.08); } .hm-title{ font-family:var(--fd); font-weight:400; line-height:.94; margin:18px 0 14px; font-size:clamp(46px,8vw,104px); letter-spacing:.01em; color:var(--t1); text-shadow:0 6px 30px rgba(0,0,0,.5); } .hm-title-accent{ background:linear-gradient(100deg,var(--p2),var(--p3) 45%,var(--gold2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hm-sub{ max-width:620px; color:var(--t2); font-size:17px; line-height:1.55; } .hm-cta{ display:flex; flex-wrap:wrap; gap:13px; margin:26px 0 26px; } .hm-btn{ display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px; border-radius:13px; font-family:var(--fu); font-weight:700; font-size:15.5px; letter-spacing:.02em; cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, filter .2s; } .hm-btn-primary{ color:#fff; background:linear-gradient(135deg,var(--p2),var(--p)); box-shadow:0 12px 30px rgba(182,170,146,.4); } .hm-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 40px rgba(182,170,146,.5); } .hm-btn-ghost{ color:var(--t1); border:1px solid var(--ln2); background:rgba(255,255,255,.03); } .hm-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--p2); background:rgba(182,170,146,.1); } .hm-btn-steam{ color:#fff; background:linear-gradient(135deg,#2a475e,#1b2838); border:1px solid rgba(102,192,244,.4); } .hm-btn-steam svg{ width:22px; height:22px; color:#66c0f4; transition:transform .3s cubic-bezier(.34,1.6,.5,1); } .hm-btn-steam:hover{ transform:translateY(-2px); border-color:rgba(102,192,244,.75); box-shadow:0 16px 38px rgba(20,40,70,.5); } .hm-btn-steam:hover svg{ transform:scale(1.12) rotate(-6deg); } .hm-chips{ display:flex; flex-wrap:wrap; gap:10px; } .hm-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--t2); padding:9px 15px; border-radius:999px; border:1px solid var(--ln); background:rgba(0,0,0,.25); } .hm-chip b{ color:var(--t1); font-weight:700; } .hm-chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--grn); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:hmPulse 1.8s ease-out infinite; } @keyframes hmPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} } @media (max-width:880px){ .hm-hero{ padding:36px 0 26px; } .hm-sub{ font-size:15px; } } /* ---- Withdraw modal: wager requirement panel ---- */ .wd-wager{ margin:4px 0 14px; padding:13px 14px; border-radius:12px; border:1px solid var(--ln2); background:rgba(0,0,0,.28); } .wd-wager.locked{ border-color:rgba(238,179,81,.35); background:rgba(238,179,81,.06); } .wd-wager-head{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--t2); margin-bottom:9px; } .wd-wager-head b{ font-family:var(--fm); font-size:13px; color:var(--gold2); } .wd-wager-head b.ok{ color:var(--pos); } .wd-wager-bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; } .wd-wager-bar span{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .5s ease; } .wd-wager-bar span.met{ background:linear-gradient(90deg,var(--grn),var(--pos)); } .wd-wager-note{ margin-top:9px; font-size:12px; line-height:1.45; color:var(--t3); } .wd-wager.locked .wd-wager-note{ color:var(--gold2); } /* ---- Champions: waiting list as side-by-side profile pictures + count ---- */ .cw-count{ font-size:13px; color:var(--t2); margin-bottom:10px; } .cw-count b{ font-family:var(--fd); font-size:18px; color:var(--p3); margin-right:4px; } .cw-avatars{ display:flex; flex-wrap:wrap; gap:8px; } .cw-av{ width:42px; height:42px; border-radius:50%; overflow:hidden; flex:0 0 auto; border:2px solid var(--ln2); background:#10131e; display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .2s ease, border-color .2s; animation:cwIn .35s ease both; } .cw-av:hover{ transform:translateY(-3px) scale(1.06); border-color:var(--p2); } .cw-av img{ width:100%; height:100%; object-fit:cover; } .cw-av span{ font-family:var(--fu); font-size:18px; color:var(--p3); } .cw-empty{ font-size:13px; color:var(--t3); text-align:center; padding:14px 6px; } @keyframes cwIn{ from{ opacity:0; transform:scale(.6);} to{ opacity:1; transform:scale(1);} } /* ---- Rustflip: (rust emblem is now stamped directly on the coin face) ---- */ /* ============================================================= v2 — purge brown/rust tints → fully professional purple bg ============================================================= */ /* panel mottle: swap the rust corner bloom for purple */ .section-block, .arena, .cf-card, .lb-card, .wallet-card, .auth-card, .player-panel, .app-modal__card, .form-card, .stat-box{ background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 12%), repeating-linear-gradient(122deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px), radial-gradient(120px 80px at 88% 0%, rgba(182,170,146,.12), transparent 70%), radial-gradient(90px 60px at 6% 100%, rgba(196,184,158,.10), transparent 72%), linear-gradient(180deg, var(--card2), var(--card)) !important; } /* page vignette: purple instead of ember/orange */ body::after{ background: radial-gradient(140% 100% at 50% -10%, transparent 55%, rgba(0,0,0,.34) 100%), radial-gradient(70% 60% at 50% 120%, rgba(182,170,146,.12), transparent 60%) !important; } /* bolted-corner rivets: neutral purple-grey instead of brown */ .section-block::after{ background: radial-gradient(circle at 10px 10px, rgba(196,184,158,.45) 0 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 10px) 10px, rgba(196,184,158,.45) 0 2px, transparent 2.6px), radial-gradient(circle at 10px calc(100% - 10px), rgba(196,184,158,.45) 0 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(196,184,158,.45) 0 2px, transparent 2.6px) !important; opacity:.4 !important; } /* scrollbar → purple */ ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#eeb351,#a9772e) !important; border-radius:6px; } /* ============================================================= v2 — Fairness page: tidy, gap-free grids ============================================================= */ .fairness-explainer{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch; } .fairness-explainer .fe-step{ background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--ln); border-radius:14px; padding:16px; flex-direction:column; gap:10px; } .fairness-explainer .fe-num{ width:32px; height:32px; font-size:15px; } .fair-grid{ grid-template-columns:repeat(3,1fr); } .fair-grid > div{ min-width:0; } .fair-grid code{ display:block; word-break:break-all; font-size:11px; line-height:1.5; color:var(--p3); } .fair-card code{ display:block; word-break:break-all; } .fair-games{ margin:18px 0; } @media (max-width:900px){ .fairness-explainer{ grid-template-columns:1fr; } .fair-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .fair-grid{ grid-template-columns:1fr; } } /* Rustflip: respect the hidden attribute so the side picker only appears after the player presses Create Game (two-step create, no pre-screen). */ .cf-side-picker[hidden]{ display:none !important; } /* Mobile: chat toggle = clean bottom-right pill (beats the desktop left-tab !important rule) */ @media (max-width:820px){ .chat-toggle{ left:auto !important; right:14px !important; top:auto !important; bottom:16px !important; width:auto !important; min-height:0 !important; height:auto !important; padding:11px 16px !important; flex-direction:row !important; gap:7px !important; border-radius:999px !important; writing-mode:horizontal-tb !important; text-orientation:mixed !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:0 8px 24px rgba(182,170,146,.45) !important; z-index:301 !important; } .chat-toggle .chat-label{ writing-mode:horizontal-tb !important; } .chat-toggle .chat-icon{ writing-mode:horizontal-tb !important; } } /* ============================================================= v2 — FIX: nav breakpoint conflict (dropdown stuck open 681–1150px). Clean split at 1100px; tablet/mobile nav hidden until toggled. ============================================================= */ @media (max-width:1099px){ .nav:not(.open){ display:none !important; } .nav.open{ display:flex !important; } .mobile-menu{ display:flex !important; } } @media (min-width:1301px){ .nav{ display:flex !important; position:static !important; flex-direction:row !important; top:auto !important; left:auto !important; right:auto !important; background:transparent !important; border-bottom:0 !important; padding:0 !important; z-index:auto !important; } .mobile-menu{ display:none !important; } } /* ---- Rustflip: create-game modal (side + wager live in here) ---- */ .cf-create-cta{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0 4px; } .cf-create-open{ max-width:260px; width:100%; } .cf-create-blurb{ color:var(--t3); font-size:13px; text-align:center; max-width:440px; line-height:1.5; } .cf-create-card{ max-width:470px; } .cf-create-card .cf-modal-head{ text-align:center; margin-bottom:18px; } .cf-create-card .cf-side-picker{ justify-content:center; margin-bottom:20px; } .cf-create-card .cf-wager-section{ display:flex; flex-direction:column; align-items:center; gap:12px; } .cf-create-card .cf-wager-label{ align-self:flex-start; } .cf-create-card .stake-input-wrap{ max-width:260px; width:100%; } .cf-create-card .quick-amounts{ max-width:260px; width:100%; } .cf-create-card .cf-create-btn{ max-width:260px; width:100%; margin-top:4px; } /* ---- Creator tag (streamers / youtubers) — distinct pink/magenta ---- */ .chat-role-creator{ display:inline-flex; align-items:center; justify-content:center; padding:0 !important; background:none !important; box-shadow:none !important; color:#f0abfc !important; vertical-align:middle; } .chat-role-creator svg{ width:14px !important; height:14px !important; display:block !important; filter:drop-shadow(0 0 3px rgba(240,171,252,.55)) !important; } .chat-msg-head .chat-role.chat-role-creator{ color:#f0abfc !important; background:none !important; padding:0 !important; height:18px !important; } .cn-creator{ color:#f0abfc !important; font-weight:700; } .adm-badge.creator{ background:rgba(236,72,153,.16); color:#f0abfc; border:1px solid rgba(236,72,153,.4); } .adm-btn.adm-creator{ border-color:rgba(236,72,153,.4); color:#f0abfc; } .adm-btn.adm-creator:hover{ background:rgba(236,72,153,.14); } .adm-btn.adm-api{ border-color:rgba(45,212,191,.4); color:#5eead4; } .adm-btn.adm-api:hover{ background:rgba(45,212,191,.14); } .cf-create-card{ max-height:90vh; overflow-y:auto; } /* ── Chat: pinned message banner (admin pin / announcement) ── */ .chat-pinned{ display:flex; align-items:flex-start; gap:9px; margin:0 0 6px; padding:10px 12px; background:linear-gradient(180deg, rgba(224,168,58,.14), rgba(224,168,58,.06)); border:1px solid rgba(224,168,58,.34); border-radius:11px; } .chat-pinned-ico{ font-size:14px; line-height:1.3; flex:0 0 auto; } .chat-pinned-body{ flex:1 1 auto; min-width:0; font-size:12.5px; line-height:1.4; } .chat-pinned-author{ color:var(--gold); font-weight:800; } .chat-pinned-text{ color:var(--t1); word-break:break-word; } .chat-pinned-unpin{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid var(--ln2); color:var(--t2); font-size:11px; line-height:1; } .chat-pinned-unpin:hover{ background:rgba(239,68,68,.16); color:#fff; } /* per-message pin button (admins only) */ .chat-pin-btn{ background:transparent; border:0; cursor:pointer; opacity:0; font-size:12px; padding:0 4px; line-height:1; transition:opacity .15s; color:var(--t3); } .chat-message:hover .chat-pin-btn{ opacity:.7; } .chat-pin-btn:hover{ opacity:1 !important; transform:scale(1.15); } /* muted-user notice with live countdown */ .chat-mute-notice{ margin:0 0 6px; padding:9px 12px; border-radius:10px; font-size:12.5px; text-align:center; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.32); color:#fca5a5; } .chat-mute-notice b{ color:#fff; } .cmn-reason{ display:block; margin-top:2px; font-size:11px; color:var(--t3); } .chat-form.is-muted{ opacity:.6; } /* === Mobile chat: proper bottom sheet (fixes the h:0 collapse caused by an older rule that made .chat-panel position:fixed). Panel must stay in-flow so the drawer has height; the drawer itself slides up from the bottom. === */ @media (max-width:820px){ .chat-drawer{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; height:auto !important; max-height:80vh !important; transform:translateY(0); border-left:0 !important; border-top:1px solid var(--ln2); border-radius:16px 16px 0 0; z-index:300 !important; box-shadow:0 -16px 48px rgba(0,0,0,.55); } .chat-drawer.closed{ transform:translateY(100%) !important; } .chat-panel{ position:static !important; transform:none !important; width:100% !important; height:auto !important; max-height:80vh !important; } .chat-drawer:not(.closed) .chat-panel{ transform:none !important; } .chat-messages{ max-height:46vh; overflow-y:auto; } } /* Respect the hidden attribute on the pinned banner + mute notice (class display rules would otherwise override it and show an empty banner). */ .chat-pinned[hidden], .chat-mute-notice[hidden]{ display:none !important; } /* ── Fix: homepage hero overflowed/clipped when the chat sidebar is open on mid-size desktops (8vw was sized for the full viewport, not the narrower content area). Scale it down while the chat is open. ── */ @media (min-width:1301px){ body.chat-open .hm-title{ font-size:clamp(40px,6vw,80px); } } /* ── Top nav: ALL items are plain links with NAMES on desktop. The bar is widened and items are compact so all of them fit; if a very narrow desktop still can't fit them, the bar scrolls instead of clipping. <1100px → hamburger. ── */ @media (min-width:1100px){ .topbar-inner{ width:min(1600px,98vw) !important; gap:14px !important; } .nav{ gap:2px !important; overflow-x:auto; scrollbar-width:none; } .nav::-webkit-scrollbar{ display:none; } .nav .nav-txt{ display:inline !important; } .nav .nav-ico{ font-size:17px; } .nav a{ padding:0 10px !important; font-size:13.5px !important; gap:7px !important; white-space:nowrap; } } @media (min-width:1100px) and (max-width:1460px){ .nav a{ padding:0 5px !important; font-size:12px !important; gap:3px !important; } .nav .nav-ico{ font-size:15px; } .topbar-inner{ gap:8px !important; } .brand small{ display:none; } /* drop the "RAID ARENA" subline to free width */ } @media (max-width:1099px){ .nav.open .nav-txt{ display:inline !important; } /* hamburger shows labels */ } /* Chat is now a fixed OVERLAY that does not take layout space, so the arena keeps its normal 3-column layout whether the chat is open or closed — nothing reflows or shifts when the chat is toggled. */ /* ── Professional coin currency symbol (scales with surrounding font-size) ── */ .coin-ico{ display:inline-block; width:1em; height:1em; vertical-align:-0.14em; margin-right:.32em; background:url('/assets/coin-3d.svg?v=1532') center/contain no-repeat; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); /* transform:scale(1.1) is DELIBERATELY still here. The coin looked rough because coin-3d.svg was not really vector: its face was three stacked 256px PNGs, and this icon is painted at 13px in .qg-tile-amt, 16px in .qg-join-input-wrap and 34px in .hm-promo-coins. Downscaling a 256px bitmap by 20x is what broke up along the mark's diagonals. The SVG is now genuinely resolution-independent, which is the actual fix. Baking this 1.1 into width/height instead would be tidier, but ~137 rules across style.css and partials.php override .coin-ico's width/height (58 in px, 21 in em) and every one of them was authored expecting this multiplier on top. Changing it silently resizes the coin in dozens of places the day before a beta, so it is a separate change with its own pass, not a drive-by. */ transform:scale(1.1); /* a notch bigger everywhere (uniform — applies over every width/height variant) */ } .coin-ico.lg{ vertical-align:-0.12em; } .stake-prefix .coin-ico{ margin-right:0; } /* #10/#4 — prominent leading coin (like the balance) on the Tip amount + Quickgame fields, and the typed number itself takes the balance's gold tone (softer/dimmer than the stark white) so the amount reads "like the balance side" rather than a harsh white. */ .tip-amt-wrap .stake-prefix{ left:13px; z-index:2; } .tip-amt-wrap .stake-prefix .coin-ico{ width:17px; height:17px; } .tip-field .tip-amt-wrap input{ padding-left:36px !important; font-size:17px; font-weight:800; color:var(--gold2); } .qg-stake-input .coin-ico{ opacity:1; } .qg-stake-input input{ color:var(--gold2); } .qg-join-input-wrap .coin-ico{ opacity:1 !important; width:16px !important; height:16px !important; } .qg-join-input-wrap input{ color:var(--gold2); } /* Wallet coin↔USD conversion UI */ .wallet-rate-note{ margin:0 0 14px; padding:10px 14px; border-radius:12px; font-size:13.5px; color:var(--t2); background:rgba(182,170,146,.08); border:1px solid rgba(182,170,146,.22); } .wallet-rate-note b{ color:var(--p4); } .conv-hint{ margin:7px 0 4px; min-height:16px; font-size:12.5px; color:var(--t3); } .conv-hint b{ color:var(--gold2,#f5b740); } /* The hidden attribute must win over the badge's display:flex / panel display, otherwise 'Mark all as read' can't actually hide the unread badge. */ .notif-badge[hidden]{ display:none !important; } .notif-panel[hidden]{ display:none !important; } /* ════════════════════════════════════════════════════════════ GLOBAL: the HTML `hidden` attribute must always hide an element. Several components set display:flex/block on their base class, which silently overrides `hidden` and breaks JS show/hide (e.g. the unread badge, the mod-only Mute button, RPS verify/close). This guarantees every JS `el.hidden = true` actually hides — no page refresh needed. ════════════════════════════════════════════════════════════ */ [hidden]{ display:none !important; } /* Decorative weapon-name cards are hidden — the fight is shown via projectiles + impacts; these labels overlapped the fighters (background-weapon bug). */ .weapon-display, .wd-left, .wd-right{ display:none !important; } /* LIVE POT amount: keep the coin icon + number on ONE line (was wrapping). */ .hero-pool-amt{ display:inline-flex; align-items:center; justify-content:flex-end; white-space:nowrap; gap:.1em; } .hero-pool-amt .coin-ico{ width:.8em; height:.8em; margin-right:.12em; } /* Prize-pool amount likewise on one line */ .prize-amount{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; gap:.06em; } .prize-amount .coin-ico{ width:.74em; height:.74em; margin-right:.06em; } /* icon slightly smaller than the number so the amount reads big */ .bet-amt{ display:inline-flex; align-items:center; gap:.12em; white-space:nowrap; } /* .stat-box b{display:block} has higher specificity and was defeating the inline-flex above, so align-items:center never applied and the coin icon's negative vertical-align dropped the number — the "wager shifts down" bug. Re-assert flex centering with matching specificity. */ .stat-box b.bet-amt{ display:inline-flex; align-items:center; line-height:1; } .bet-amt .coin-ico{ vertical-align:0; } .bet-amt .coin-ico{ width:.85em; height:.85em; margin-right:0; } /* Amount NUMBERS now live in an inner (next to the coin icon). The gold gradient was applied to the parent, leaving the inner span transparent (invisible). Re-apply the fill directly to the number spans. */ #heroPool{ background: linear-gradient(180deg,#ffd9a0,#f4cd84 60%,#eeb351); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .bet-amt #leftBet, .bet-amt #rightBet{ -webkit-text-fill-color:#f5b740; color:#f5b740; } /* ── Weapon-fire projectiles ── These were forced into 44×44 squares for a half-finished "thrown weapon" idea (nothing ever populated .thrown-wpn), so they rendered as gold/grey blobs that looked like rocks. Restore the real shapes: a glowing AK tracer + a rocket. */ .projectile.bullet{ width:36px !important; height:9px !important; } .projectile.rocket{ width:56px !important; height:15px !important; } .thrown-wpn{ width:100%; height:100%; animation:wpnSpin .5s linear infinite; } .thrown-wpn svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 7px rgba(0,0,0,.6)); } @keyframes wpnSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ── FIX: chat rank/level badges were greyed + mis-aligned ── The old generic ".chat-message span { color:var(--t3); display:block; margin-top:3px; font-size:9px }" rule was more specific than the badge classes, so the LEVEL + ROLE badges rendered grey and pushed down (looking shifted). Force them white, inline and aligned. */ .chat-msg-head .chat-lvl, .chat-msg-head .chat-role{ color:#ffffff !important; display:inline-flex !important; align-items:center !important; margin-top:0 !important; height:18px !important; } .chat-msg-head .chat-lvl{ font-size:11px !important; } .chat-msg-head .chat-role{ font-size:9px !important; } .chat-msg-head .chat-lvl::before{ color:#ffffff !important; } .chat-msg-head .chat-name{ display:inline-flex !important; align-items:center !important; margin-top:0 !important; font-size:13px !important; } .chat-msg-head .chat-ts{ display:inline-flex !important; margin-top:0 !important; } /* ════════════════════════════════════════════════════════════ RANKS & LEVELS — always WHITE & readable across the whole site (chat badges, affiliate level shields + referral level tags, leaderboard rank numbers, prize-tier rank labels). Several of these were rendering in muted grey/green and looked hard to read / mis-aligned. Force pure white everywhere. ════════════════════════════════════════════════════════════ */ .aff-lvl-shield, .aff-level-row.reached .aff-lvl-shield, .aff-level-row.final .aff-lvl-shield{ color:#ffffff !important; } .ref-lvl{ color:#ffffff !important; } .lb-rank-badge{ color:#ffffff !important; } .lb-prize-rank{ color:#ffffff !important; } .level-badge{ color:#ffffff !important; } .chat-msg-head .chat-lvl, .chat-msg-head .chat-role, .chat-msg-head .chat-lvl::before{ color:#ffffff !important; } /* ── Mobile topbar fit: the right cluster (☰ + bell + balance + profile) was overflowing on phones, cutting off the balance + deposit/withdraw steppers. Hide the +/- steppers on small screens (the balance pill itself opens the deposit modal — see app.js) so the whole topbar fits cleanly. */ @media (max-width: 680px){ .bal-btn{ display:none !important; } .balance-pill{ cursor:pointer; } .balance-group{ gap:0 !important; } } @media (max-width: 680px){ .balance-pill:active{ transform:scale(.95); } } /* ── Mobile topbar: the brand (icon + "RUST ROYALE") was ~239px wide and ate the space the balance + profile needed, pushing them off-screen. Shrink the brand on phones so the whole right cluster fits within the viewport. */ @media (max-width: 680px){ .brand{ gap:7px !important; min-width:0 !important; } .brand-icon, .brand-icon-rust{ width:34px !important; height:34px !important; flex:0 0 auto !important; } .brand b, .brand-text b{ font-size:15px !important; letter-spacing:.02em !important; white-space:nowrap !important; } } @media (max-width: 430px){ .brand-icon, .brand-icon-rust{ width:30px !important; height:30px !important; } .brand b, .brand-text b{ font-size:13px !important; } .account{ gap:6px !important; } } /* ── Coinflip: ENLARGED coin-flip stage (user request "coin-flip section enlarge"). Placed at the very end so it wins over the earlier ".cf-coin {180px}" rule. Taller stage + bigger coin = a bigger, more dramatic toss. Sized so the higher jump (coinThrowBig peak -78px) clears the top without clipping the coin. */ .cf-modal-stage{ min-height:450px !important; } .cf-modal-stage .cf-coin{ width:158px !important; height:158px !important; } @media (max-width:540px){ .cf-modal-stage{ min-height:400px !important; } .cf-modal-stage .cf-coin{ width:124px !important; height:124px !important; } } /* ── Champions "Leave & Refund" button — shown only when the player can safely leave (waiting list, or lone champion with just their own stake). Muted/danger styling so it reads as secondary to the green "Join Fight" CTA. */ .btn-leave{ width:100%; margin-top:10px; padding:13px 18px; border-radius:12px; cursor:pointer; font-size:15px; font-weight:700; letter-spacing:.01em; color:#fecaca; background:linear-gradient(180deg, rgba(127,29,29,.55), rgba(80,18,18,.6)); border:1px solid rgba(239,68,68,.5); transition:transform .12s ease, box-shadow .2s ease, background .2s ease; } .btn-leave:hover{ background:linear-gradient(180deg, rgba(153,27,27,.7), rgba(100,20,20,.72)); box-shadow:0 8px 22px rgba(127,29,29,.4); } .btn-leave:active{ transform:scale(.98); } .btn-leave.loading{ opacity:.6; pointer-events:none; } /* ── RPS move buttons polish + "kept hidden" hint. The move is no longer pre-selected or left on screen after creating, so picking is optional and stays secret (chance-style). Cleaner gradient buttons + clearer active state. */ /* ── Coinflip: Create form + Open Games side-by-side grid ─────────────────── */ .cf-layout{ display:grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap:18px; align-items:start; margin-bottom:18px; } .cf-layout .section-block{ margin-bottom:0; height:100%; } .cf-create-section{ position:relative; } .cf-create-section .cf-side-picker{ margin-top:6px; } .cf-create-section .cf-wager-section{ margin-top:14px; } .cf-open-col .cf-games-list{ max-height:none; } /* stack on tablet/mobile */ @media (max-width: 980px){ .cf-layout{ grid-template-columns: 1fr; gap:14px; } } /* Latest-wins feed: gentle fade as it live-updates */ .hm-feed-row.hm-feed-new{ animation: hmFeedIn .4s ease; } @keyframes hmFeedIn{ from{ opacity:.25; transform:translateY(-3px); } to{ opacity:1; transform:none; } } /* ═══════════════════════════════════════════════════════════ HOMEPAGE — animated game art for a livelier landing ═══════════════════════════════════════════════════════════ */ .hm-hero{ min-height:380px; } .hm-hero-art{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .hm-float{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); display:block; opacity:.5; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); animation: hmFloat var(--dur,8s) ease-in-out var(--d,0s) infinite; will-change: transform; } .hm-float svg{ width:100%; height:100%; display:block; } .hm-float.hm-dice{ font-size:var(--s); line-height:1; opacity:.42; width:auto; height:auto; } @keyframes hmFloat{ 0%,100%{ transform:translateY(0) rotate(-8deg); } 50%{ transform:translateY(-26px) rotate(10deg); } } /* breathing glow behind the title */ .hm-hero-glow{ animation: hmGlow 7s ease-in-out infinite; } @keyframes hmGlow{ 0%,100%{ opacity:.9; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } } .hm-hero-inner{ z-index:2; } /* game cards: gently bobbing icons (hover scale rule takes over on hover) */ .hm-game-ico{ animation: hmIcoBob 4s ease-in-out infinite; } @keyframes hmIcoBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px) rotate(-4deg); } } .hm-game-champions .hm-game-ico{ animation-delay:0s; } .hm-game-flip .hm-game-ico{ animation-delay:.6s; } @media (prefers-reduced-motion: reduce) and (min-width:100000px){ .hm-float, .hm-hero-glow, .hm-game-ico{ animation:none !important; } } /* ════════════════════════════════════════════════════════════════════════ ✦ PREMIUM OVERRIDE LAYER (navy + indigo) — loaded last, wins specificity ════════════════════════════════════════════════════════════════════════ */ /* ── Slim icon-less top strip ─────────────────────────────────────────── */ .topstrip{ position: sticky; top: 0; z-index: 1001; height: var(--topstrip-h); background: linear-gradient(180deg, #0a0c17, #0b0d18); border-bottom: 1px solid rgba(255,255,255,.05); } .topstrip-inner{ width: min(1340px,98vw); margin: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 6px; } .topstrip-nav{ display: flex; align-items: center; gap: 4px; } .topstrip-nav a{ font-family: var(--fu); font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--t2); padding: 6px 12px; border-radius: 8px; position: relative; transition: color .18s ease, transform .18s ease; } .topstrip-nav a::after{ content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; background: linear-gradient(90deg, var(--vio2), var(--vio3)); transform: scaleX(0); transform-origin:left; border-radius:2px; transition: transform .22s cubic-bezier(.2,.9,.3,1); } .topstrip-nav a:hover{ color:#fff; transform: translateY(-1px); } .topstrip-nav a:hover::after{ transform: scaleX(1); } .topstrip-nav a.active{ color: var(--vio3); } .topstrip-nav a.active::after{ transform: scaleX(1); } .topstrip-free{ font-family: var(--fu); font-weight:700; font-size:13px; letter-spacing:.02em; color:#1a1206; background: linear-gradient(135deg, var(--gold2), #eeb351); padding:6px 14px; border-radius:999px; transition: transform .18s ease, box-shadow .18s ease; box-shadow:0 4px 14px rgba(238,179,81,.28); } .topstrip-free:hover{ transform: translateY(-1px) scale(1.03); box-shadow:0 7px 20px rgba(238,179,81,.42); } /* Stack the main bar beneath the strip + push fixed sidebars down */ .topbar{ top: var(--topstrip-h) !important; } .chat-drawer{ top: calc(var(--topstrip-h) + var(--topbar-h)) !important; } .control-panel{ top: calc(var(--topstrip-h) + 78px) !important; } .nav-mob-extra{ display:none !important; } /* desktop: these live in the top strip */ /* ── Bigger, animated main nav (games) ───────────────────────────────── */ .nav{ gap: 6px !important; } .nav a{ display:flex; align-items:center; gap:9px; font-family: var(--fu); font-weight:700; font-size:16px !important; letter-spacing:.02em; color: var(--t2) !important; padding: 0 16px !important; min-height: 46px !important; border-radius: 13px !important; border:1px solid transparent !important; position: relative; overflow: visible; transition: transform .2s cubic-bezier(.2,.9,.3,1), background .2s ease, color .2s ease, box-shadow .2s ease; } .nav .nav-ico{ font-size:22px; line-height:1; transition: transform .25s cubic-bezier(.2,1.4,.4,1), filter .2s ease; display:inline-block; } .nav .nav-txt{ transition: transform .2s ease; } .nav a::after{ content:""; position:absolute; left:16px; right:16px; bottom:6px; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--vio2), var(--vio3)); transform: scaleX(0); transform-origin:center; transition: transform .25s cubic-bezier(.2,.9,.3,1); } .nav a:hover{ color:#fff !important; transform: translateY(-3px); background: rgba(182,170,146,.10) !important; box-shadow: 0 10px 24px rgba(182,170,146,.20); } .nav a:hover .nav-ico{ transform: translateY(-2px) scale(1.22) rotate(-6deg); filter: drop-shadow(0 4px 10px rgba(182,170,146,.55)); } .nav a:hover::after{ transform: scaleX(1); } .nav a.active{ color:#fff !important; background: linear-gradient(180deg, rgba(182,170,146,.30), rgba(182,170,146,.16)) !important; border-color: var(--vio-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(182,170,146,.28); } .nav a.active .nav-ico{ filter: drop-shadow(0 3px 8px rgba(182,170,146,.6)); transform: scale(1.1); } .nav a.active::after{ transform: scaleX(1); } .daily-free-nav{ color: var(--gold2) !important; } .daily-free-nav:hover .nav-ico{ animation: navGiftWiggle .5s ease; } @keyframes navGiftWiggle{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-16deg) scale(1.2)} 75%{transform:rotate(16deg) scale(1.2)} } @media (min-width:1100px) and (max-width:1540px){ .nav a{ font-size:14px !important; padding:0 11px !important; min-height:42px !important; } .nav .nav-ico{ font-size:19px; } } /* ── Balance pill: coins + USD equivalent ────────────────────────────── */ .balance-group{ display:flex; align-items:center; gap:0; } .balance-pill{ display:flex; align-items:center; gap:8px; padding:7px 14px; background: linear-gradient(180deg,#171a2b,#12131f); border:1px solid var(--ln); border-top-color: rgba(255,255,255,.06); line-height:1.05; } .balance-pill-main{ font-family: var(--fu); font-weight:800; font-size:17px; color: var(--gold2); letter-spacing:.02em; } .balance-pill-usd{ font-size:11px; font-weight:700; color: var(--t3); letter-spacing:.02em; } .bal-btn{ width:34px; height:38px; display:grid; place-items:center; font-size:20px; font-weight:700; border:1px solid var(--ln); background:#13141f; color:var(--t2); cursor:pointer; transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; } .bal-minus{ border-radius:11px 0 0 11px; border-right:0; } .bal-plus{ border-radius:0 11px 11px 0; border-left:0; } .balance-pill{ border-radius:0; } .bal-plus:hover{ background: linear-gradient(135deg,#f4cd84,#e0a236); color:#231a02; transform: translateY(-1px); box-shadow:0 6px 16px rgba(238,179,81,.32); } .bal-minus:hover{ background: linear-gradient(135deg,#b23b3b,#e25555); color:#fff; transform: translateY(-1px); box-shadow:0 6px 16px rgba(226,85,85,.3); } @media (max-width: 1099px){ :root{ --topstrip-h: 0px; } .topstrip{ display:none; } .nav-mob-extra{ display:flex !important; } .balance-pill-usd{ display:none; } } /* ════════════════════════════════════════════════════════════════════════ ✦ PROFILE — flash, stats grid, unified history feed ════════════════════════════════════════════════════════════════════════ */ .profile-flash{ border:1px solid var(--vio-line); border-radius:12px; background: var(--vio-soft); padding:12px 16px; margin-bottom:16px; color:var(--vio3); font-weight:600; } .profile-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pstat{ border:1px solid var(--ln); border-radius:12px; padding:11px 12px; background:rgba(0,0,0,.22); } .pstat span{ display:block; font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; } .pstat b{ font-size:18px; color:var(--vio3); display:flex; align-items:center; gap:5px; } .pstat-balance{ grid-column:span 3; background:linear-gradient(135deg, rgba(182,170,146,.16), rgba(0,0,0,.25)); border-color:var(--vio-line); } .pstat-balance b{ color:var(--gold2); font-size:26px; font-family:var(--fu); } .pstat-balance em{ display:block; font-style:normal; font-size:12px; color:var(--t2); margin-top:2px; } .profile-av-img{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid var(--vio2); box-shadow:0 0 16px rgba(182,170,146,.4); } .hist-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .hist-tab{ font-family:var(--fu); font-weight:700; font-size:13px; color:var(--t2); background:#13141f; border:1px solid var(--ln); border-radius:999px; padding:7px 14px; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .hist-tab:hover{ color:#fff; transform:translateY(-1px); border-color:var(--vio-line); } .hist-tab.active{ color:#1c1408; background:linear-gradient(135deg, #f1c869, #e0a93b); border-color:transparent; box-shadow:0 6px 16px rgba(238,179,81,.30); } .hist-feed{ display:flex; flex-direction:column; gap:8px; } .hist-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:linear-gradient(180deg,#161926,#12131f); border:1px solid var(--ln); border-radius:13px; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .hist-item:hover{ transform:translateX(3px); border-color:var(--vio-line); box-shadow:0 6px 18px rgba(0,0,0,.3); } .hist-item-ico{ width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; font-size:20px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid var(--ln); } .hist-ico-champions{ background:rgba(182,170,146,.14); } .hist-ico-rustflip{ background:rgba(238,179,81,.13); } .hist-ico-deposit{ background:rgba(43,185,100,.13); } .hist-ico-withdraw{ background:rgba(226,85,85,.12); } .hist-item-body{ flex:1 1 auto; min-width:0; } .hist-item-top{ display:flex; align-items:center; gap:8px; } .hist-item-top b{ font-size:14px; color:var(--t1); font-weight:700; } .hist-item-tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:6px; } .hist-item-tag.pos{ color:#86efc0; background:rgba(43,185,100,.16); } .hist-item-tag.neg{ color:#ffb4b4; background:rgba(226,85,85,.16); } .hist-item-body small{ display:block; font-size:11px; color:var(--t3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hist-item-right{ flex:0 0 auto; text-align:right; } .hist-item-amt{ display:flex; align-items:center; justify-content:flex-end; gap:4px; font-family:var(--fu); font-weight:800; font-size:16px; } .hist-item-amt.pos{ color:#5fe39a; } .hist-item-amt.neg{ color:#ff8d8d; } .hist-item-amt.neu{ color:var(--t3); font-size:13px; } .hist-item-time{ display:block; font-size:10px; color:var(--t3); margin-top:2px; } @media (max-width:640px){ .profile-stats-grid{ grid-template-columns:repeat(2,1fr); } .pstat-balance{ grid-column:span 2; } } /* ════════════════════════════════════════════════════════════════════════ ✦ CHAT — avatar rows, tiered level badges, reply preview, hover actions ════════════════════════════════════════════════════════════════════════ */ .chat-online{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--t2); margin-right:6px; } .chat-online-dot{ width:8px; height:8px; border-radius:50%; background:#2bd47a; box-shadow:0 0 8px #2bd47a; animation:onlinePulse 2s ease-in-out infinite; } @keyframes onlinePulse{ 0%,100%{opacity:1} 50%{opacity:.5} } .chat-messages .chat-message{ display:flex; gap:10px; align-items:flex-start; padding:4px 12px 4px 10px; border:0; background:transparent; position:relative; } .chat-messages .chat-message:hover{ background:rgba(255,255,255,.03); } .chat-av{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,#2a2740,#1b1930); border:1px solid var(--ln); } .chat-av img{ width:100%; height:100%; object-fit:cover; } .chat-av span{ font-family:var(--fu); font-weight:800; font-size:13px; color:var(--vio3); } /* Outline icons for system broadcasters (announcement/mod/rain/races) — hollow line icons, no emoji */ .chat-sys-ico{ display:inline-flex; align-items:center; justify-content:center; color:var(--gold2); } .chat-av .chat-sys-ico svg{ width:18px; height:18px; } .chat-sys-ico-sm{ margin-right:4px; } .chat-sys-ico-sm svg{ width:14px; height:14px; } .chat-name.chat-name-system{ display:inline-flex !important; align-items:center; gap:1px; color:var(--gold2) !important; letter-spacing:.04em; } .chat-body{ flex:1 1 auto; min-width:0; } .chat-msg-head{ display:flex; align-items:center; gap:6px; } .chat-lvl{ font-family:var(--fm); font-weight:700; font-size:10px; color:#0c0d16; padding:1px 6px; border-radius:6px; line-height:1.5; min-width:20px; text-align:center; } .chat-lvl.lv-base{ background:#5b6072; color:#dfe3ee; } .chat-lvl.lv-teal{ background:linear-gradient(135deg,#2dd4bf,#22a99a); } .chat-lvl.lv-amber{ background:linear-gradient(135deg,#fbbf24,#eeb351); } .chat-lvl.lv-gold{ background:linear-gradient(135deg,#f4cd84,#eeb351); } .chat-lvl.lv-violet{ background:linear-gradient(135deg,#f5c451,#eeb351); color:#fff; } .chat-name{ font-size:13px !important; font-weight:700; color:var(--t1) !important; display:inline !important; margin:0 !important; } .chat-name.cn-admin{ color:#ff8d8d !important; } .chat-name.cn-mod{ color:#7fd0ff !important; } .chat-name.cn-creator{ color:#f0abfc !important; } .chat-actions{ margin-left:auto; display:flex; gap:3px; opacity:0; transition:opacity .15s ease; } .chat-message:hover .chat-actions{ opacity:1; } .chat-act{ width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid var(--ln); color:var(--t2); font-size:13px; cursor:pointer; transition:transform .12s ease, background .12s ease, color .12s ease; } .chat-act:hover{ transform:translateY(-1px); background:var(--vio-soft); color:#fff; border-color:var(--vio-line); } .chat-body p{ font-size:13px !important; color:var(--t1) !important; line-height:1.45; margin-top:2px; word-break:break-word; } .chat-message-system .chat-av{ background:linear-gradient(145deg,#3a2f12,#241d0b); } .chat-message-system .chat-body p{ color:var(--gold2) !important; font-weight:600; } .chat-message-system .chat-name{ color:var(--gold2) !important; } /* #2 — Rain + Tip (and other announcements) carry NO avatar; the WHOLE line — the title AND its text — now sits inside ONE compact soft site-gold panel (not just the title), at a reduced size so the announcements read as small system tags rather than full-height chat lines. */ .chat-message.chat-message-rain, .chat-message.chat-message-tip{ margin-top:8px !important; } /* (build 461) rain/tip now SHOW their hollow icon in the avatar slot, like announcement — no longer hidden. */ .chat-message.chat-message-rain .chat-body, .chat-message.chat-message-tip .chat-body{ background:none !important; border:0 !important; border-radius:0; padding:0; } .chat-message.chat-message-rain .chat-msg-head, .chat-message.chat-message-tip .chat-msg-head{ gap:4px; } .chat-message.chat-message-rain .chat-name, .chat-message.chat-message-tip .chat-name{ background:none !important; border:0 !important; padding:0 !important; text-shadow:none !important; color:var(--gold2) !important; filter:none !important; font-weight:800 !important; font-size:11px !important; letter-spacing:.04em; } .chat-message.chat-message-rain .chat-body p, .chat-message.chat-message-tip .chat-body p{ color:var(--gold2) !important; font-weight:600 !important; font-size:11px !important; line-height:1.35 !important; margin-top:1px !important; } /* Every announcement (system) line reads a touch smaller + tighter than a normal chat message. */ .chat-message-system{ padding-top:3px !important; padding-bottom:3px !important; } .chat-message-system .chat-name{ font-size:11.5px !important; } .chat-message-system .chat-body p{ font-size:11.5px !important; line-height:1.4 !important; } .chat-message-system .chat-av{ width:26px !important; height:26px !important; } .chat-message-system .chat-av .chat-sys-ico svg{ width:15px !important; height:15px !important; } .chat-reply-quote{ display:flex; align-items:center; gap:5px; margin:2px 0 1px; padding:2px 8px; border-left:2px solid var(--vio2); background:rgba(182,170,146,.08); border-radius:0 7px 7px 0; font-size:11px; color:var(--t3); max-width:100%; overflow:hidden; } .chat-reply-quote b{ color:var(--vio3); font-weight:700; flex:0 0 auto; } .chat-reply-quote span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-reply-q-ico{ color:var(--vio2); } /* reply context bar above the input */ .chat-reply-bar{ display:flex; align-items:center; gap:8px; margin:0 10px 6px; padding:8px 10px; background:rgba(182,170,146,.1); border:1px solid var(--vio-line); border-radius:11px; } .chat-reply-ico{ color:var(--vio2); font-size:16px; } .chat-reply-info{ flex:1 1 auto; min-width:0; line-height:1.2; } .chat-reply-info b{ display:block; font-size:11px; color:var(--vio3); } .chat-reply-info span{ display:block; font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-reply-cancel{ width:22px; height:22px; flex:0 0 auto; border-radius:6px; background:rgba(255,255,255,.07); border:0; color:var(--t2); cursor:pointer; } .chat-reply-cancel:hover{ color:#fff; background:rgba(255,255,255,.14); } /* ── RAIN BANNER ── */ .chat-rain{ position:relative; margin:10px 12px 6px; padding:13px 14px; overflow:hidden; border-radius:14px; border:1px solid rgba(238,179,81,.4); background:linear-gradient(135deg, rgba(60,46,12,.95), rgba(36,28,12,.97)); box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); animation:rainPop .4s cubic-bezier(.2,1.2,.4,1); } @keyframes rainPop{ from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } } .chat-rain-glow{ position:absolute; inset:-40% -10% auto -10%; height:140%; background:radial-gradient(closest-side, rgba(238,179,81,.22), transparent 70%); pointer-events:none; animation:rainGlow 3.5s ease-in-out infinite; } @keyframes rainGlow{ 0%,100%{transform:translateX(-12%)} 50%{transform:translateX(12%)} } .chat-rain-top{ display:flex; align-items:center; justify-content:space-between; position:relative; } .chat-rain-title{ font-family:var(--fu); font-weight:800; font-size:16px; letter-spacing:.04em; color:#ffe6a8; } .chat-rain-pot{ display:flex; align-items:center; gap:6px; font-family:var(--fu); font-weight:800; font-size:20px; color:var(--gold2); } .chat-rain-meta{ display:flex; align-items:center; gap:12px; margin:6px 0 10px; font-size:12px; color:#e9d6a8; position:relative; } .chat-rain-meta b{ color:#fff; } .chat-rain-timer b{ font-family:var(--fm); } .chat-rain-usd{ margin-left:auto; color:#c8b78a; } .chat-rain-actions{ display:flex; gap:8px; position:relative; } .chat-rain-join{ flex:1 1 auto; text-align:center; font-family:var(--fu); font-weight:800; font-size:15px; letter-spacing:.02em; color:#241704; background:linear-gradient(135deg,#ffd564,#eeb351); border:0; border-radius:11px; padding:11px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; box-shadow:0 6px 16px rgba(238,179,81,.4); } .chat-rain-join:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(238,179,81,.55); } .chat-rain-join.joined{ background:linear-gradient(135deg,#2bb964,#1f9a52); color:#fff; box-shadow:none; cursor:default; } .chat-rain-tip{ flex:0 0 auto; font-family:var(--fu); font-weight:800; font-size:15px; color:#ffe6a8; background:rgba(255,255,255,.06); border:1px solid rgba(238,179,81,.4); border-radius:11px; padding:11px 16px; cursor:pointer; transition:transform .15s ease, background .15s ease; } .chat-rain-tip:hover{ transform:translateY(-2px); background:rgba(238,179,81,.16); } /* ── admin rain tool ── */ .admin-tool-rain .rain-live-badge{ margin-left:8px; font-size:11px; font-weight:800; color:#241704; background:linear-gradient(135deg,#ffd564,#eeb351); padding:2px 9px; border-radius:999px; } .admin-tool-hint{ display:block; margin-top:7px; font-size:11px; color:var(--t3); line-height:1.4; } /* ════════════════════════════════════════════════════════════════════════ ✦ HOMEPAGE GAME CARDS — animated, lift + sheen + icon motion on hover ════════════════════════════════════════════════════════════════════════ */ .hm-game{ position:relative; overflow:hidden; transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease, border-color .28s ease; will-change:transform; } .hm-game::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; } .hm-game:hover{ transform:translateY(-8px) scale(1.015); border-color:var(--vio-line); box-shadow:0 22px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(182,170,146,.25); } .hm-game:hover::before{ left:130%; } .hm-game .hm-game-ico{ display:inline-block; transition:transform .3s cubic-bezier(.2,1.4,.4,1); } .hm-game:hover .hm-game-ico{ transform:scale(1.25) rotate(-8deg); filter:drop-shadow(0 6px 14px rgba(182,170,146,.5)); } .hm-game:hover h3{ color:#fff; } .hm-game .hm-game-go{ transition:transform .2s ease, color .2s ease; } .hm-game:hover .hm-game-go{ transform:translateX(6px); color:var(--vio3); } /* ════════════════════════════════════════════════════════════════════════ ✦ INPUTS & MONEY BUTTONS — premium polish, focus rings, hover lift ════════════════════════════════════════════════════════════════════════ */ .stake-input, .amount-input input, .modal-select, .tip-field input, .form-card input, .form-card select, #rpsWager, .admin-tool input, .us-input{ transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important; } .stake-input:focus, .amount-input input:focus, .modal-select:focus, .tip-field input:focus, .form-card input:focus, .form-card select:focus, #rpsWager:focus, .admin-tool input:focus, .us-input:focus, #chatInput:focus{ outline:none !important; border-color:var(--vio2) !important; box-shadow:0 0 0 3px rgba(182,170,146,.22) !important; background:rgba(182,170,146,.06) !important; } .qa{ transition:transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease !important; } .qa:hover{ transform:translateY(-2px); border-color:var(--vio-line) !important; color:#fff !important; background:var(--vio-soft) !important; } .qa:active{ transform:translateY(0) scale(.96); } .btn-primary, .app-modal__btn{ transition:transform .16s ease, box-shadow .16s ease, filter .16s ease !important; } .btn-primary:hover, .app-modal__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(182,170,146,.3); } .btn-primary:active, .app-modal__btn:active{ transform:translateY(0) scale(.985); } /* chat send button + input bar */ .chat-form{ gap:8px; } .chat-form input{ transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } .chat-form button[type=submit]{ transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; background:linear-gradient(135deg,var(--vio),var(--vio2)) !important; } .chat-form button[type=submit]:hover{ transform:translateY(-1px) scale(1.05); box-shadow:0 6px 16px rgba(182,170,146,.4); } /* ── CHAT REDESIGN FIXES: neutralize old generic span rule + tiered badges ── */ /* (0,2,1) beats the old non-important ".chat-message span" reset; !important badge rules still win) */ .chat-messages .chat-message span{ display:inline; font-size:inherit; margin-top:0; color:inherit; } .chat-av span{ margin:0; } .chat-reply-quote span{ font-size:11px; } /* Drop the "LV " prefix so badges show just the number, like the reference */ .chat-msg-head .chat-lvl::before{ content:"" !important; } .chat-msg-head .chat-lvl{ padding:1px 7px !important; height:auto !important; min-width:20px; border-radius:6px !important; font-family:var(--fm) !important; line-height:1.6 !important; } .chat-msg-head .chat-lvl.lv-base{ color:#dfe3ee !important; background:#5b6072 !important; } .chat-msg-head .chat-lvl.lv-teal{ color:#0c0d16 !important; background:linear-gradient(135deg,#2dd4bf,#22a99a) !important; } .chat-msg-head .chat-lvl.lv-amber{ color:#0c0d16 !important; background:linear-gradient(135deg,#fbbf24,#eeb351) !important; } .chat-msg-head .chat-lvl.lv-gold{ color:#0c0d16 !important; background:linear-gradient(135deg,#f4cd84,#eeb351) !important; } .chat-msg-head .chat-lvl.lv-violet{ color:#ffffff !important; background:linear-gradient(135deg,#f5c451,#eeb351) !important; } /* head spacing tidy */ .chat-msg-head{ gap:6px; flex-wrap:wrap; } .chat-body{ overflow:hidden; } /* ════════════════════════════════════════════════════════════════════════ ✦ FIXES PASS 2 — dropdown contrast, chat offset, select styling, polish ════════════════════════════════════════════════════════════════════════ */ /* (#6) Native can't split its digits into bright-dollars / dim-cents, so we make the input's own text transparent (caret stays visible) and paint a coin_html layer on top, perfectly aligned to the input's text start (padding-left:36px) and font. JS keeps it in sync as you type. */ .tip-amt-wrap.has-coinoverlay{ position:relative; } .tip-field .tip-amt-wrap.has-coinoverlay input{ color:transparent !important; caret-color:var(--gold2,#eeb351) !important; -webkit-text-fill-color:transparent !important; } .tip-field .tip-amt-wrap.has-coinoverlay input::placeholder{ color:rgba(150,160,180,.55) !important; -webkit-text-fill-color:rgba(150,160,180,.55) !important; } .tip-coin-overlay{ position:absolute; left:36px; right:12px; top:0; bottom:0; display:flex; align-items:center; pointer-events:none; z-index:3; font-size:17px; font-weight:800; line-height:1; letter-spacing:0; color:var(--gold2,#eeb351); white-space:nowrap; overflow:hidden; } .tip-coin-overlay:empty{ display:none; } .tip-coin-overlay .coin-amt{ display:inline-flex; align-items:baseline; } /* ══ Rain widget attention-glow — fired when the "Rain" bonus card is clicked (build 313) ══ */ @keyframes rainGlowPulse{ 0%{ box-shadow:0 0 0 0 rgba(246,200,90,0); filter:brightness(1); } 15%{ box-shadow:0 0 0 3px rgba(246,200,90,.85), 0 0 46px 10px rgba(246,200,90,.6); filter:brightness(1.4) saturate(1.25); } 50%{ filter:brightness(1.08); } 100%{ box-shadow:0 0 0 0 rgba(246,200,90,0); filter:brightness(1); } } #chatRain.rain-glow-pulse{ animation:rainGlowPulse 1.25s ease-in-out 3 !important; border-radius:14px; position:relative; z-index:20 !important; } /* ══ Custom skin-picker dropdown (admin raffle + races) — replaces the native so each skin's price renders as coin_html (a native