/* ====== RESET ====== */ *{ margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI",Tahoma,sans-serif; } /* ====== FONDO Y ESTRELLAS ====== */ body{ min-height:100vh; background:radial-gradient(circle at top,#200008 0%,#050005 55%,#000 100%); display:flex; align-items:center; justify-content:center; color:#ffd700; overflow:hidden; flex-direction:column; padding:20px; animation:fadeInBody 1s ease forwards; } @keyframes fadeInBody{ from{opacity:0;} to{opacity:1;} } .stars{ position:fixed; inset:0; background: radial-gradient(1px 1px at 10% 20%,#fff,transparent), radial-gradient(1px 1px at 80% 40%,#fff,transparent), radial-gradient(1px 1px at 30% 70%,#fff,transparent), radial-gradient(1px 1px at 60% 10%,#fff,transparent), radial-gradient(1px 1px at 90% 80%,#fff,transparent); animation:moveStars 60s linear infinite; z-index:0; } @keyframes moveStars{ from{background-position:0 0;} to{background-position:2000px 1000px;} } /* ====== HUD ====== */ .hud-line{ position:fixed; height:2px; width:100%; background:linear-gradient(90deg,transparent,#b3001b,transparent); animation:pulse 3s infinite; z-index:1; } .top{top:40px;} .bottom{bottom:40px;} @keyframes pulse{ 0%{opacity:.3;} 50%{opacity:1;} 100%{opacity:.3;} } /* ====== CONTENEDOR ====== */ .panel-container{ display:flex; gap:30px; flex-wrap:wrap; justify-content:center; align-items:flex-start; z-index:2; } /* ====== PANEL BASE ====== */ .panel, .panel-info{ background:linear-gradient(180deg,rgba(40,0,15,.85),rgba(5,0,5,.97)); border:3px solid #b3001b; box-shadow:0 0 30px rgba(179,0,27,.7), inset 0 0 40px rgba(255,215,120,.08); padding:40px; width:420px; border-radius:12px; position:relative; animation:panelEnter .8s ease forwards; } @keyframes panelEnter{ from{transform:translateY(-50px);opacity:0;} to{transform:translateY(0);opacity:1;} } /* ====== ESQUINAS ====== */ .panel:before,.panel:after{ content:""; position:absolute; width:80px; height:80px; border:2px solid #b3001b; } .panel:before{ top:-12px; left:-12px; border-right:none; border-bottom:none; } .panel:after{ bottom:-12px; right:-12px; border-left:none; border-top:none; } /* ====== EMBLEMA ====== */ .emblem{ font-size:50px; color:#ff3b3b; text-shadow:0 0 15px rgba(255,60,60,.8); margin-bottom:15px; animation:emblemPulse 2s infinite alternate; } @keyframes emblemPulse{ from{ text-shadow:0 0 15px rgba(255,60,60,.8);} to{ text-shadow:0 0 30px rgba(255,100,100,1);} } /* ====== TEXTOS ====== */ h1{ font-size:clamp(2.5rem,6vw,4rem); letter-spacing:5px; color:#ffd56a; text-shadow:0 0 10px rgba(255,210,100,.7), 0 0 20px rgba(179,0,27,.8); margin-bottom:15px; } h2{ font-size:1.2rem; margin-bottom:20px; color:#e6b85c; } /* ====== FORM ====== */ select,button{ width:100%; padding:12px; margin-top:15px; font-size:1rem; border:2px solid #b3001b; background:black; color:#ffd700; cursor:pointer; font-weight:bold; border-radius:6px; transition:.3s; animation:pulseGlow 2s infinite; } select:hover,button:hover{ background:linear-gradient(#ff0000,#800000); box-shadow:0 0 15px rgba(255,0,0,.8), 0 0 30px rgba(255,128,128,.5); } @keyframes pulseGlow{ 0%{box-shadow:0 0 5px rgba(255,200,80,.4);} 50%{box-shadow:0 0 15px rgba(255,200,80,.8);} 100%{box-shadow:0 0 5px rgba(255,200,80,.4);} } /* ====== PANEL INFO ====== */ .panel-info h3{ color:#ffb347; text-align:center; margin-bottom:15px; } .panel-info p, .panel-info li{ font-size:.95rem; line-height:1.5; margin-bottom:10px; } .panel-info ul{ margin-left:18px; } /* ====== ACERCA ====== */ .acerca{ margin-top:30px; text-align:center; font-size:.9rem; opacity:.85; z-index:2; } .sen-box{ position:fixed; top:10px; left:50%; transform:translateX(-50%); padding:12px 28px; border-radius:12px; font-weight:bold; letter-spacing:3px; z-index:10; text-align:center; } .sen-leve{background:#c9b200;color:black;} .sen-grave{background:#d15c00;} .sen-critico{background:#9e0000;} .sen-extremo{ background:#000; border:2px solid red; color:red; animation:blink 1s infinite; } @keyframes blink{50%{opacity:.6}} @media(max-width:768px){ .sen-box{ position:relative; top:0; left:0; transform:none; margin-bottom:20px; } } /* =============================== INPUTS & SELECTS ยท IMPERIAL UI =============================== */ .imperial-form input[type="text"], .imperial-form input[type="number"], .imperial-form select { width: 100%; padding: 12px 14px; margin-bottom: 14px; background: linear-gradient( 180deg, #0c0f14 0%, #07090d 100% ); color: #e6e6e6; font-size: 15px; font-weight: 500; border: 1px solid rgba(180, 30, 30, 0.65); border-radius: 6px; box-shadow: inset 0 0 6px rgba(0,0,0,0.9), 0 0 8px rgba(120,0,0,0.25); transition: all 0.25s ease; } /* Placeholder */ .imperial-form input::placeholder { color: rgba(200,200,200,0.45); } /* Hover */ .imperial-form input:hover, .imperial-form select:hover { border-color: rgba(220, 60, 60, 0.9); } /* Focus */ .imperial-form input:focus, .imperial-form select:focus { outline: none; border-color: #d4af37; /* dorado */ box-shadow: inset 0 0 6px rgba(0,0,0,1), 0 0 12px rgba(212,175,55,0.55); } /* Select arrow (modern browsers) */ .imperial-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #d4af37 50%), linear-gradient(135deg, #d4af37 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px; background-size: 6px 6px; background-repeat: no-repeat; } /* Disabled */ .imperial-form input:disabled, .imperial-form select:disabled { opacity: 0.45; cursor: not-allowed; } html, body { height: auto; overflow-y: auto !important; } .imperial-panel { max-height: none; overflow: visible; } @media (max-width: 768px) { .imperial-panel { width: 95%; padding: 16px; } .rankings { display: block; } .ranking-box { margin-bottom: 20px; } button { width: 100%; margin-bottom: 10px; } h1 { font-size: 20px; } } /* ====== PWA / MOBILE ====== */ body { min-height: 100vh; overflow-y: auto; } .container { max-width: 100%; padding: 12px; } input, select, button { width: 100%; min-height: 44px; font-size: 16px; } button { touch-action: manipulation; } @media (min-width: 768px) { .container { max-width: 900px; margin: auto; } }