/* ================================================================= coinflip.css -- CoinFlip PuffCase 2025 -- Redesign ================================================================= */ #panel-coinflip { --cf-blue: #3b82f6; --cf-blue2: #60a5fa; --cf-blue-dark: #1d4ed8; --cf-blue-glow: rgba(59,130,246,.5); --cf-blue-dim: rgba(59,130,246,.1); --cf-gold: #ffd740; --cf-gold-glow: rgba(255,215,64,.4); --cf-ct: #4a9eff; --cf-tt: #ff9a3c; --cf-border: rgba(59,130,246,.18); --cf-radius: 18px; max-width: none; margin: 0; padding: 0 0 56px; border-top: 2px solid rgba(30,60,140,.55); } /* ---- Animaciones ----------------------------------------------- */ @keyframes cf-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes cf-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cf-float { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-9px) rotate(8deg); } } #panel-coinflip .cf-hero { animation: cf-fade-in .45s ease both; } #panel-coinflip .cf-how { animation: cf-fade-up .4s ease .15s both; } #panel-coinflip .mj-layout { animation: cf-fade-up .5s cubic-bezier(.22,1,.36,1) .2s both; } /* ================================================ HERO ================================================ */ #panel-coinflip .cf-hero { position: relative; overflow: hidden; padding: 36px 28px 0; } #panel-coinflip .cf-hero-bg { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(30,60,180,.15) 0%, transparent 45%), linear-gradient(180deg, rgba(5,10,30,.65) 0%, transparent 100%); pointer-events: none; } #panel-coinflip .cf-hero-bg::after { content: ''; position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 160px; height: 160px; border-radius: 50%; background-image: url('/favicon-l.png'); background-size: 68%; background-repeat: no-repeat; background-position: center; background-color: rgba(59,130,246,.06); border: 1.5px solid rgba(74,158,255,.1); box-shadow: 0 0 40px rgba(59,130,246,.08), inset 0 0 30px rgba(59,130,246,.04); opacity: .18; pointer-events: none; filter: saturate(.4) brightness(1.4); } #panel-coinflip .cf-hero-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; margin-bottom: 26px; } #panel-coinflip .cf-hero-icon { font-size: 3.4rem; flex-shrink: 0; line-height: 1; filter: drop-shadow(0 0 22px var(--cf-blue-glow)) drop-shadow(0 0 8px rgba(59,130,246,.4)); animation: cf-float 4s ease-in-out infinite; } #panel-coinflip .cf-hero-text { display: flex; flex-direction: column; gap: 4px; } #panel-coinflip .cf-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-blue2); opacity: .85; } #panel-coinflip .cf-hero-eyebrow::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--cf-blue2); opacity: .7; } #panel-coinflip .cf-hero-title { font-family: 'Rajdhani', sans-serif; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; margin: 0; color: #fff; letter-spacing: .04em; line-height: 1; text-shadow: 0 0 40px rgba(59,130,246,.2), 0 2px 20px rgba(0,0,0,.6); } #panel-coinflip .cf-hero-title span { color: var(--cf-blue); text-shadow: 0 0 28px var(--cf-blue-glow); } #panel-coinflip .cf-hero-sub { font-size: .8rem; color: rgba(255,255,255,.38); margin: 0; letter-spacing: .05em; } /* Stats bar */ #panel-coinflip .cf-hero-stats { position: relative; z-index: 1; display: flex; align-items: stretch; background: rgba(0,0,0,.3); border-top: 1px solid rgba(59,130,246,.15); border-bottom: 1px solid rgba(0,0,0,.25); border-left: 1px solid rgba(59,130,246,.1); border-right: 1px solid rgba(59,130,246,.1); backdrop-filter: blur(6px); overflow-x: auto; scrollbar-width: none; animation: cf-fade-in .5s ease .2s both; } #panel-coinflip .cf-hero-stats::-webkit-scrollbar { display: none; } #panel-coinflip .cf-hstat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; min-width: 90px; padding: 14px 8px; transition: background .2s; } #panel-coinflip .cf-hstat:hover { background: rgba(59,130,246,.05); } #panel-coinflip .cf-hstat-val { font-family: 'Rajdhani', sans-serif; font-size: 1.45rem; font-weight: 900; color: var(--cf-blue); line-height: 1; text-shadow: 0 0 12px var(--cf-blue-glow); white-space: nowrap; } #panel-coinflip .cf-hstat-lbl { font-size: .56rem; color: rgba(255,255,255,.32); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; } #panel-coinflip .cf-hstat-div { width: 1px; align-self: stretch; background: rgba(255,255,255,.07); flex-shrink: 0; margin: 10px 0; } /* ================================================ COMO FUNCIONA ================================================ */ #panel-coinflip .cf-how { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 28px 32px 24px; background: rgba(0,0,0,.15); border-bottom: 1px solid rgba(59,130,246,.07); } #panel-coinflip .cf-how-step { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 130px; text-align: center; padding: 16px 10px 14px; background: rgba(59,130,246,.04); border: 1px solid rgba(59,130,246,.12); border-radius: 16px; cursor: default; transition: background .25s, border-color .25s, transform .22s, box-shadow .25s; animation: cf-fade-up .35s ease both; } #panel-coinflip .cf-how-step:nth-child(1) { animation-delay: .06s; } #panel-coinflip .cf-how-step:nth-child(3) { animation-delay: .12s; } #panel-coinflip .cf-how-step:nth-child(5) { animation-delay: .18s; } #panel-coinflip .cf-how-step:nth-child(7) { animation-delay: .24s; } #panel-coinflip .cf-how-step:hover { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35); transform: translateY(-4px); box-shadow: 0 10px 28px rgba(59,130,246,.1); } #panel-coinflip .cf-how-num { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(15,40,100,.15)); border: 1.5px solid rgba(59,130,246,.5); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; box-shadow: 0 0 16px rgba(59,130,246,.2), 0 3px 8px rgba(0,0,0,.3); transition: box-shadow .25s, border-color .25s; } #panel-coinflip .cf-how-step:hover .cf-how-num { box-shadow: 0 0 26px rgba(59,130,246,.4); border-color: rgba(59,130,246,.8); } #panel-coinflip .cf-how-num--gold { background: linear-gradient(135deg, rgba(255,215,64,.28), rgba(100,70,0,.15)); border-color: rgba(255,215,64,.5); box-shadow: 0 0 16px rgba(255,215,64,.2), 0 3px 8px rgba(0,0,0,.3); } #panel-coinflip .cf-how-step:hover .cf-how-num--gold { box-shadow: 0 0 26px rgba(255,215,64,.42); border-color: rgba(255,215,64,.8); } #panel-coinflip .cf-how-info { display: flex; flex-direction: column; gap: 3px; align-items: center; } #panel-coinflip .cf-how-info strong { font-size: .82rem; color: rgba(255,255,255,.88); font-weight: 700; line-height: 1.2; } #panel-coinflip .cf-how-info span { font-size: .68rem; color: rgba(255,255,255,.35); } #panel-coinflip .cf-how-arrow { flex-shrink: 0; align-self: center; margin-top: -10px; color: rgba(59,130,246,.35); font-size: .8rem; letter-spacing: 1px; } /* ================================================ LAYOUT OVERRIDE ================================================ */ #panel-coinflip .mj-layout { padding-top: 28px; padding-left: 20px; padding-right: 20px; } #panel-coinflip .cf-hero, #panel-coinflip .cf-how { padding-left: 44px; padding-right: 44px; }