@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: #0a0c15;
    font-family: 'Press Start 2P', monospace;
    overflow: hidden;
    touch-action: none;
}

/* Notificaciones toast */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid #ffae00;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 10px;
    color: #ffae00;
    z-index: 20000;
    text-align: center;
    white-space: nowrap;
    font-family: 'Press Start 2P', monospace;
    animation: toastFade 2s ease forwards;
    pointer-events: none;
}
@keyframes toastFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.pixel-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
    border-radius: 60px;
    box-shadow: 0 6px 0 var(--shadow), 0 0 12px var(--glow);
    transition: all 0.08s linear;
    letter-spacing: 1px;
    gap: 8px;
}
.pixel-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--shadow), 0 0 18px var(--glow);
}
.btn-blue { --bg-start: #0057af; --bg-end: #0088ff; --shadow: #003d7a; --glow: #0088ff; }
.btn-orange { --bg-start: #d87000; --bg-end: #ffaa33; --shadow: #8a4800; --glow: #ffaa33; }
.btn-green { --bg-start: #008751; --bg-end: #00cc77; --shadow: #005a36; --glow: #00cc77; }
.btn-red { --bg-start: #a00000; --bg-end: #ff3333; --shadow: #6b0000; --glow: #ff3333; }
.btn-purple { --bg-start: #6a0dad; --bg-end: #aa44ff; --shadow: #3a005f; --glow: #aa44ff; }
.btn-pink { --bg-start: #b83b5e; --bg-end: #ff6699; --shadow: #7a2a40; --glow: #ff6699; }
.btn-yellow { --bg-start: #cc8800; --bg-end: #ffcc44; --shadow: #8a5a00; --glow: #ffcc44; }
.btn-cyan { --bg-start: #009999; --bg-end: #33cccc; --shadow: #006666; --glow: #33cccc; }
.btn-gold { --bg-start: #a07000; --bg-end: #ffd700; --shadow: #6a4a00; --glow: #ffd700; }
/* ===== GRIDS & CARDS ===== */
.upgrades-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin:14px 0; }
.backgrounds-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin:14px 0; }
.missions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:14px 0; }
.btn-small { font-size:8px !important; padding:6px 14px !important; margin-top:10px; }

/* ===== BASE SCREEN ===== */
.screen {
    position:fixed; top:0; left:0;
    width:100%; height:100%;
    display:none; flex-direction:column;
    background-size:cover; background-position:center;
}

/* ===== NUEVO SPLASH CON DISEÑO MEJORADO ===== */
#splash {
    background: radial-gradient(ellipse at 30% 40%, #0a0f1a, #020408);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh;
    overflow: hidden;
}
.splash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: cover;
    background-position: center;
    opacity: 0.85;
    filter: brightness(1.1) saturate(1.2) contrast(1.1);
    z-index: 0;
}
/* Efecto CRT + scanlines sobre la imagen */
.splash-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 2px, transparent 2px, transparent 4px);
    pointer-events: none;
    z-index: 1;
}
#splash-bg { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 30% 60%,#0a3a6a,#020810) center/cover no-repeat; }
/* Viñeta suave en los bordes (para que se lea el botón sin tapar la imagen) */
.splash-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 55%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
}
.splash-content {
    text-align: center;
    animation: fadeInUp 1s ease;
    position: relative;
    z-index: 3;
    background: rgba(0,0,0,0.55);
    padding: clamp(16px, 4vw, 30px) clamp(20px, 6vw, 50px);
    border-radius: 40px;
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255,174,0,0.6);
    box-shadow: 0 0 40px rgba(255,174,0,0.3);
    max-width: min(90vw, 520px);
    width: 100%;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.splash-title { 
    font-size: clamp(22px, 9vw, 54px); 
    color: #ffc107; 
    text-shadow: 0 0 10px #ffae00, 0 0 20px #ffae00; 
    margin-bottom: clamp(10px, 3vw, 20px); 
    letter-spacing: clamp(1px, 1.5vw, 4px);
    line-height: 1.2;
}
.splash-sub { 
    font-size: clamp(10px, 3.5vw, 16px); 
    color: #ffdd99; 
    margin-bottom: clamp(20px, 5vw, 40px);
    text-shadow: 0 0 5px #000;
}
.splash-btn {
    font-size: clamp(16px, 4vw, 22px) !important;
    padding: clamp(14px, 3vw, 20px) clamp(40px, 10vw, 80px) !important;
    background: linear-gradient(135deg, #d87000, #ffaa33) !important;
    box-shadow: 0 8px 0 #8a4800, 0 0 30px #ffaa33, 0 0 60px rgba(255,170,51,0.4) !important;
    transition: transform 0.1s, box-shadow 0.1s;
    letter-spacing: 3px;
}
.splash-btn:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0 #8a4800, 0 0 20px #ffaa33 !important;
}

/* ===== LOBBY (menú principal) ===== */
/* Referencias: jerarquía por tamaño/color/posición, una acción principal destacada,
   pocas opciones agrupadas y estilo consistente para todos los botones secundarios. */
#lobby { overflow-y:auto; overflow-x:hidden; background:#070b1c; }

.lobby-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    background:
        radial-gradient(ellipse 80% 45% at 50% 100%, rgba(255,140,40,0.32), transparent 70%),
        linear-gradient(180deg,#070b1c 0%,#101a3c 55%,#2a1d4f 100%); }
.lobby-stars { position:absolute; inset:0 0 35% 0; opacity:0.55; animation:starTwinkle 4s ease-in-out infinite alternate;
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),
        radial-gradient(1.5px 1.5px at 90px 80px,rgba(255,255,255,0.7),transparent),
        radial-gradient(2px 2px at 160px 20px,#ffe9a8,transparent),
        radial-gradient(1.5px 1.5px at 130px 100px,rgba(255,255,255,0.6),transparent);
    background-size:200px 130px; }
@keyframes starTwinkle { from{opacity:0.35} to{opacity:0.7} }
.lobby-stars::after { content:''; position:absolute; inset:0; opacity:0.8;
    background-image:
        radial-gradient(1.5px 1.5px at 60px 150px,#fff,transparent),
        radial-gradient(2px 2px at 210px 60px,rgba(255,226,160,0.9),transparent),
        radial-gradient(1.5px 1.5px at 120px 20px,rgba(255,255,255,0.7),transparent),
        radial-gradient(1px 1px at 260px 170px,#fff,transparent);
    background-size:311px 223px; }
.lobby-road { position:absolute; left:0; right:0; bottom:0; height:13%; min-height:50px;
    background:linear-gradient(180deg,#171c34,#0a0d1b); border-top:3px solid #2c3158; }
.lobby-road::after { content:''; position:absolute; left:0; right:0; top:50%; height:4px; opacity:0.65;
    background-image:linear-gradient(90deg,#ffb21a 50%,transparent 50%); background-size:80px 4px;
    animation:roadMove 1.1s linear infinite; }
@keyframes roadMove { to { background-position:-80px 0; } }

.lobby-container { position:relative; z-index:1; max-width:1280px; zoom:var(--ui-zoom,1); margin:0 auto; padding:clamp(12px,2.5vw,24px);
    width:100%; display:flex; flex-direction:column; min-height:100%; gap:clamp(12px,2.5vh,22px); }

/* Barra superior: compacta, solo datos del jugador */
.lobby-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    background:rgba(8,12,28,0.72); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.09); border-radius:16px; padding:10px 16px; }
.logo-area { display:flex; align-items:center; gap:10px; }
.logo-icon { font-size:22px; }
.logo-text { font-size:clamp(9px,1.6vw,12px); color:#ffb21a; letter-spacing:2px; }
.player-stats { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.stat-item { display:flex; align-items:center; gap:6px; font-size:clamp(7px,1.3vw,9px); color:#b9c3e6;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:7px 11px; }
.stat-item.stat-bread { color:#ffdd99; border-color:rgba(255,178,26,0.55); background:rgba(255,178,26,0.1); }
.stat-value { color:#fff; }

/* Cuerpo: logo + van a la izquierda, menú a la derecha */
.lobby-main { flex:1; display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:clamp(16px,3vw,32px); align-items:center; }

.game-logo { text-align:center; margin-bottom:clamp(10px,2vh,18px); }
.game-logo-sub { font-size:clamp(7px,1.1vw,10px); letter-spacing:6px; color:#ffdd99; opacity:0.85; margin-bottom:10px; }
.game-logo-title { font-size:clamp(26px,5vw,46px); line-height:1.08; color:#ffc23a; letter-spacing:2px;
    text-shadow:0 3px 0 #b85a00, 0 6px 0 #5c2a00, 0 0 26px rgba(255,170,40,0.45); }

.van-showcase { width:100%; }
.van-card { background:rgba(10,14,32,0.72); backdrop-filter:blur(10px); border:2px solid rgba(255,178,26,0.45);
    border-radius:22px; padding:16px 14px 14px; text-align:center;
    box-shadow:0 0 0 4px rgba(0,0,0,0.25), 0 16px 40px rgba(0,0,0,0.4); }
.van-stage { position:relative; height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.van-stage::before { content:''; position:absolute; width:75%; height:75%; background:radial-gradient(closest-side,rgba(255,178,26,0.28),transparent); }
.van-img { position:relative; max-width:90%; max-height:100%; object-fit:contain; image-rendering:pixelated;
    animation:vanBounce 2.5s ease-in-out infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.van-shadow { position:absolute; bottom:0; width:48%; height:8px; background:radial-gradient(closest-side,rgba(0,0,0,0.55),transparent); }
.van-name { color:#ffb21a; font-size:clamp(9px,1.6vw,11px); margin-bottom:12px; letter-spacing:2px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-badge { background:rgba(255,174,0,0.08); border:1px solid rgba(255,174,0,0.3); border-radius:12px; padding:8px 6px; font-size:8px;
    display:flex; align-items:center; justify-content:center; gap:4px; color:#ffdd99; }
.stat-badge span { color:#fff; font-size:10px; }

/* Panel de menú */
.menu-panel { display:flex; flex-direction:column; gap:clamp(12px,2vh,18px); min-width:0; }

/* Acciones principales: lo más grande y llamativo de la pantalla */
.play-row { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
.play-btn { flex-direction:row; justify-content:flex-start; text-align:left; gap:14px;
    padding:clamp(14px,2.6vh,22px) clamp(14px,2vw,22px); border-radius:20px; text-shadow:0 2px 0 rgba(0,0,0,0.35); }
.play-ico { font-size:clamp(24px,3.6vw,34px); line-height:1; }
.play-btn b { display:block; font-weight:normal; font-size:clamp(11px,1.9vw,17px); letter-spacing:2px; }
.play-btn small { display:block; margin-top:7px; font-size:clamp(6px,0.9vw,8px); letter-spacing:0.5px; opacity:0.9; line-height:1.5; }
.play-endless { background:linear-gradient(135deg,#d96a00,#ffb21a); box-shadow:0 8px 0 #7f3f00, 0 0 30px rgba(255,170,30,0.4);
    animation:playPulse 1.8s ease-in-out infinite alternate; }
.play-story { background:linear-gradient(135deg,#5a1aa8,#9a44ff); box-shadow:0 8px 0 #310a62, 0 0 22px rgba(154,68,255,0.3); }
.play-btn:active { transform:translateY(5px); }
@keyframes playPulse { from{box-shadow:0 8px 0 #7f3f00,0 0 18px rgba(255,170,30,0.3)} to{box-shadow:0 8px 0 #7f3f00,0 0 44px rgba(255,170,30,0.6)} }

/* Accesos secundarios: 3 grupos con el mismo estilo y un color de acento por grupo */
.menu-group { --accent:#ffb21a; --accent-soft:rgba(255,178,26,0.3);
    background:rgba(8,12,28,0.62); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:12px; }
.menu-group.g-collect { --accent:#b98aff; --accent-soft:rgba(185,138,255,0.3); }
.menu-group.g-account { --accent:#43d3e6; --accent-soft:rgba(67,211,230,0.3); }
.group-title { display:flex; align-items:center; gap:10px; font-size:8px; letter-spacing:3px; color:var(--accent); margin:0 0 10px 2px; }
.group-title::after { content:''; flex:1; height:2px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0.4; }
.group-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.menu-tile { position:relative; display:flex; align-items:center; gap:10px; min-width:0;
    padding:8px 10px; font-family:inherit; font-size:clamp(7px,1.05vw,9px); letter-spacing:1px; color:#fff; text-align:left; cursor:pointer;
    background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));
    border:2px solid var(--accent-soft); border-radius:14px; box-shadow:0 4px 0 rgba(0,0,0,0.35);
    transition:transform 0.08s, border-color 0.15s, box-shadow 0.15s; }
.menu-tile:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,0.35), 0 0 16px var(--accent-soft); }
.menu-tile:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.35); }
.tile-ico { flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; font-size:20px; background:var(--accent-soft); border-radius:10px; }
.tile-label { min-width:0; overflow-wrap:anywhere; line-height:1.3; }
.daily-badge { position:absolute; top:-7px; right:-7px; background:#ff4444; color:#fff; font-size:8px; border-radius:50%; width:20px; height:20px;
    display:flex; align-items:center; justify-content:center; border:2px solid #0a1020; animation:badgePulse 1s ease-in-out infinite alternate; }
@keyframes badgePulse { from{box-shadow:0 0 0 rgba(255,68,68,0.0)} to{box-shadow:0 0 12px rgba(255,68,68,0.9)} }

/* Pantallas angostas / celular */
@media(max-width:860px){
    .lobby-main { display:flex; flex-direction:column; align-items:stretch; gap:14px; }
    .van-showcase, .menu-panel { display:contents; }
    .game-logo { order:1; margin:0; }
    .play-row { order:2; }
    .van-card { order:3; width:100%; max-width:420px; align-self:center; }
    .menu-group { order:4; }
}
@media(max-width:560px){
    .play-row { grid-template-columns:1fr; gap:10px; }
    .game-logo-title br { display:none; }
    .van-stage { height:80px; margin-bottom:6px; }
    .van-card { padding:12px 12px 10px; }
    .stats-grid { grid-template-columns:repeat(4,1fr); gap:5px; }
    .stat-badge { flex-direction:column; gap:2px; padding:6px 2px; font-size:6px; }
    .menu-tile { flex-direction:column; text-align:center; gap:6px; padding:10px 4px 8px; }
    .tile-label { font-size:6.5px; letter-spacing:0; }
    .group-grid { gap:6px; }
    .logo-text { display:none; }
}
@media(prefers-reduced-motion:reduce){
    .van-img, .play-endless, .lobby-road::after, .lobby-stars, .daily-badge { animation:none !important; }
}

/* ===== MODAL ===== */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.88); backdrop-filter:blur(16px);
    z-index:1000; display:none; justify-content:center; align-items:center; padding:16px;
}
.modal-box {
    background: linear-gradient(160deg, rgba(12,16,32,0.99), rgba(8,12,24,0.99));
    border:2px solid rgba(255,174,0,0.5);
    border-radius:28px; width:100%; max-width:940px;
    padding:0; max-height:88vh; overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 0 60px rgba(255,174,0,0.2);
}
.modal-header {
    padding:20px 24px 16px;
    background: linear-gradient(90deg, rgba(255,174,0,0.12), transparent);
    border-bottom:1px solid rgba(255,174,0,0.2);
    display:flex; align-items:center; gap:14px; flex-shrink:0;
}
.modal-header-icon { font-size:28px; filter:drop-shadow(0 0 8px currentColor); }
.modal-header-title { font-size:clamp(12px,2.5vw,18px); color:#ffae00; letter-spacing:2px; }
.modal-body { padding:20px 24px; overflow-y:auto; flex:1; }
.modal-body::-webkit-scrollbar { width:5px; }
.modal-body::-webkit-scrollbar-thumb { background:rgba(255,174,0,0.4); border-radius:5px; }
.modal-footer { padding:16px 24px; border-top:1px solid rgba(255,174,0,0.15); flex-shrink:0; }

/* ===== CARD SYSTEM ===== */
.game-card {
    background:rgba(0,0,0,0.5); border:1px solid rgba(255,174,0,0.25);
    border-radius:20px; padding:14px; text-align:center;
    transition:transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display:flex; flex-direction:column; gap:8px;
}
.game-card:hover { transform:translateY(-3px); border-color:rgba(255,174,0,0.6); box-shadow:0 8px 24px rgba(255,174,0,0.15); }
.game-card .card-img {
    width:72px; height:72px; margin:0 auto;
    background-size:contain; background-repeat:no-repeat; background-position:center;
    filter:drop-shadow(0 0 8px rgba(255,174,0,0.4));
}
.game-card .card-title { font-size:9px; color:#ffae00; margin-top:4px; }
.game-card .card-sub { font-size:7px; color:#888; line-height:1.6; }
.card-divider { height:1px; background:rgba(255,174,0,0.15); margin:6px 0; }

/* Upgrade card variant */
.upgrade-card { background:rgba(0,0,0,0.5); border:1px solid rgba(255,174,0,0.25); border-radius:20px; padding:16px; text-align:center; display:flex; flex-direction:column; gap:8px; transition:transform 0.15s,border-color 0.15s; }
.upgrade-card:hover { transform:translateY(-2px); border-color:rgba(255,174,0,0.6); }
.upgrade-card .card-icon { font-size:32px; }
.upgrade-card .card-name { font-size:9px; color:#ffae00; }
.upgrade-card .card-desc { font-size:7px; color:#777; line-height:1.6; }

/* Bg card */
.bg-card { background:rgba(0,0,0,0.5); border:2px solid rgba(255,174,0,0.2); border-radius:18px; padding:10px; text-align:center; transition:transform 0.15s,border-color 0.15s; }
.bg-card:hover { transform:scale(1.03); border-color:rgba(255,174,0,0.6); }
.bg-preview { width:100%; height:85px; background-size:cover; background-position:center; border-radius:12px; margin-bottom:10px; border:1px solid rgba(255,174,0,0.2); }
.bg-card .card-name { font-size:7px; color:#ffae00; margin-bottom:8px; }

/* Mission card */
.mission-card { background:rgba(0,0,0,0.45); border:1px solid rgba(255,174,0,0.2); border-radius:18px; padding:14px; font-size:8px; color:#ccc; display:flex; flex-direction:column; gap:8px; }
.mission-prog-bg { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.mission-prog-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#00cc77,#00ff99); transition:width 0.4s; }

/* Achievement card */
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:14px 0; }
.ach-card { background:rgba(0,0,0,0.5); border-radius:20px; padding:16px 12px; text-align:center; border:2px solid; transition:transform 0.15s,box-shadow 0.15s; display:flex; flex-direction:column; gap:6px; align-items:center; }
.ach-card:hover { transform:translateY(-3px); }
.ach-card.unlocked { border-color:#ffd700; background:rgba(255,215,0,0.07); box-shadow:0 4px 20px rgba(255,215,0,0.15); }
.ach-card.locked { border-color:#2a2a3a; opacity:0.55; filter:grayscale(0.9); }
.ach-card .ach-icon { font-size:34px; }
.ach-card .ach-name { font-size:8px; color:#ffae00; }
.ach-card .ach-desc { font-size:7px; color:#666; line-height:1.5; }
.ach-card .ach-status { font-size:7px; margin-top:2px; }
.ach-card.unlocked .ach-status { color:#ffd700; }
.ach-card.locked .ach-status { color:#333; }

/* Crew card */
.crew-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin:14px 0; }
.crew-card {
    border-radius:24px; padding:20px 14px; text-align:center;
    border:2px solid; display:flex; flex-direction:column; gap:10px; align-items:center;
    position:relative; overflow:hidden;
    transition:transform 0.15s,box-shadow 0.15s;
}
.crew-card::before { content:''; position:absolute; inset:0; opacity:0.06; background:var(--c); }
.crew-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px var(--glow-c); }
.crew-card .crew-img { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--c); box-shadow:0 0 20px var(--glow-c); filter:drop-shadow(0 4px 12px var(--glow-c)); }
.crew-card .crew-name { font-size:11px; color:var(--c); text-shadow:0 0 8px var(--glow-c); }
.crew-card .crew-role { font-size:7px; color:var(--c); opacity:0.7; letter-spacing:2px; }
.crew-card .crew-desc { font-size:7px; color:#999; line-height:1.6; }

/* ===== TABS ===== */
.encyclopedia-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid rgba(255,174,0,0.2); padding-bottom:12px; }
.tab-btn { background:rgba(0,0,0,0.3); border:1px solid rgba(255,174,0,0.2); font-family:'Press Start 2P',monospace; font-size:9px; color:#888; cursor:pointer; padding:8px 16px; border-radius:40px; transition:all 0.15s; }
.tab-btn.active { background:rgba(255,174,0,0.15); color:#ffae00; border-color:rgba(255,174,0,0.5); box-shadow:0 0 12px rgba(255,174,0,0.2); }
.tab-btn:hover { color:#ffdd99; border-color:rgba(255,174,0,0.4); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.encyclopedia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin:16px 0; }
.enemy-card,.bread-card,.vehicle-card { background:rgba(0,0,0,0.55); border:1px solid rgba(255,174,0,0.3); border-radius:22px; padding:16px; text-align:center; transition:transform 0.15s,box-shadow 0.15s; }
.enemy-card:hover,.bread-card:hover,.vehicle-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,174,0,0.2); }
.enemy-img,.bread-img,.vehicle-img { width:80px; height:80px; background-size:contain; background-repeat:no-repeat; background-position:center; margin:0 auto 12px; filter:drop-shadow(0 0 8px rgba(255,174,0,0.5)); }
.enemy-stats,.bread-stats,.vehicle-stats { font-size:8px; color:#aaa; text-align:left; margin-top:10px; border-top:1px solid rgba(255,174,0,0.15); padding-top:10px; display:flex; flex-direction:column; gap:4px; }

/* ===== HUD ===== */
.hud { position:absolute; top:12px; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:0 14px; pointer-events:none; z-index:30; gap:8px; }
.hud-panel {
    background:rgba(0,0,0,0.8); backdrop-filter:blur(10px);
    border-radius:50px; padding:6px 14px;
    border:1.5px solid rgba(255,174,0,0.7);
    display:flex; gap:12px; align-items:center;
    box-shadow:0 0 12px rgba(255,174,0,0.15);
}
.hud-stat { display:flex; align-items:center; gap:5px; font-size:9px; white-space:nowrap; }
.hud-stat span { font-size:11px; color:#fff; }
.lives { display:flex; gap:4px; }
.pause-btn { pointer-events:auto; cursor:pointer; background:rgba(106,13,173,0.8); border:1.5px solid #9b4dff; padding:5px 10px; border-radius:40px; font-size:11px; transition:background 0.1s; }
.pause-btn:active { background:rgba(106,13,173,1); }
.hud-level { font-size:8px; color:#ffd700; white-space:nowrap; }
#record-score { color:#ffd700; text-shadow:0 0 6px #ffd700; }

/* Pause / Game Over */
.pause-overlay,.game-over-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background: linear-gradient(160deg,rgba(8,12,28,0.97),rgba(4,8,20,0.97));
    backdrop-filter:blur(20px);
    border:2px solid rgba(255,174,0,0.5); border-radius:32px;
    padding:28px 24px; text-align:center;
    width:min(92%,360px); z-index:200;
    display:none; flex-direction:column; gap:14px;
    box-shadow:0 0 60px rgba(255,174,0,0.2);
}
.game-over-panel { width:min(92%,440px) !important; }
.go-title { font-size:clamp(16px,5vw,26px); color:#ff4444; text-shadow:0 0 20px #ff4444; animation:goShake 0.4s ease; }
@keyframes goShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.go-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0; }
.go-stat { background:rgba(255,174,0,0.07); border:1px solid rgba(255,174,0,0.25); border-radius:16px; padding:12px 8px; text-align:center; }
.go-stat-value { font-size:clamp(14px,3.5vw,22px); color:#ffae00; display:block; margin-bottom:4px; }
.go-stat-label { font-size:7px; color:#666; }
.go-record { font-size:9px; color:#ffd700; text-shadow:0 0 10px #ffd700; padding:8px; border:1px solid rgba(255,215,0,0.4); border-radius:40px; background:rgba(255,215,0,0.08); }

/* Power-up HUD */
.powerup-hud { position:absolute; bottom:20px; left:130px; right:130px; display:flex; gap:6px; flex-wrap:wrap; pointer-events:none; z-index:40; justify-content:center; }
.powerup-card { background:rgba(0,0,0,0.88); backdrop-filter:blur(8px); border-left:3px solid; border-radius:40px; padding:4px 10px; font-size:7px; display:flex; align-items:center; gap:8px; }
.powerup-timer { width:60px; height:5px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.powerup-timer-fill { height:100%; background:#ffaa44; border-radius:3px; transition:width 0.2s; }

/* Boss health */
.boss-health-bar { position:absolute; top:72px; left:50%; transform:translateX(-50%); width:min(360px,80%); height:16px; background:rgba(0,0,0,0.8); border:2px solid #ffae00; border-radius:40px; z-index:50; display:none; overflow:hidden; }
.boss-health-fill { height:100%; background:linear-gradient(90deg,#ff2222,#ff6666); width:100%; transition:width 0.2s; }

/* Special bar */
.special-bar-container { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); width:min(260px,60%); z-index:40; text-align:center; }
.special-label { font-size:7px; color:#aa66ff; margin-bottom:4px; font-family:'Press Start 2P',monospace; }
.special-track { background:rgba(0,0,0,0.6); border:1px solid rgba(170,102,255,0.4); border-radius:40px; height:8px; overflow:hidden; margin-bottom:8px; }
.special-track #specialFill { height:100%; background:linear-gradient(90deg,#6a0dad,#aa44ff); width:0%; transition:width 0.2s; border-radius:40px; }
#specialBtn.ready { animation:specialPulse 0.7s ease-in-out infinite alternate; }
@keyframes specialPulse { from{box-shadow:0 6px 0 #3a005f,0 0 12px #aa44ff} to{box-shadow:0 6px 0 #3a005f,0 0 30px #cc88ff,0 0 55px #aa44ff} }

/* Difficulty & boost */
.difficulty-badge { position:absolute; top:12px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.8); border:1.5px solid #ff6600; border-radius:40px; padding:3px 14px; font-size:7px; color:#ff6600; z-index:30; pointer-events:none; backdrop-filter:blur(8px); white-space:nowrap; }
.boost-bar { position:absolute; bottom:20px; left:14px; width:100px; background:rgba(0,0,0,0.75); border-radius:20px; padding:5px 8px; text-align:center; font-size:7px; color:#00ccff; border:1px solid rgba(0,204,255,0.5); backdrop-filter:blur(6px); }
.boost-fill { height:4px; background:linear-gradient(90deg,#00ccff,#aa66ff); width:0%; transition:width 0.1s; margin-top:4px; border-radius:2px; }
#boostReady { position:absolute; bottom:54px; left:14px; font-size:7px; color:#00ccff; text-shadow:0 0 8px #00ccff; opacity:0; transition:opacity 0.3s; pointer-events:none; white-space:nowrap; }
.frenzy-bar { position:absolute; bottom:20px; right:14px; width:100px; background:rgba(0,0,0,0.75); border-radius:20px; padding:5px 8px; text-align:center; font-size:7px; color:#ff6600; border:1px solid rgba(255,102,0,0.5); backdrop-filter:blur(6px); }
.frenzy-fill { height:4px; background:linear-gradient(90deg,#ff6600,#ffaa00); width:0%; transition:width 0.1s; margin-top:4px; border-radius:2px; }

canvas { display:block; width:100%; height:100%; object-fit:cover; }

/* Misc improvements */
.van-card .card-name { color:#ffae00; font-size:clamp(9px,2vw,11px); margin-bottom:12px; letter-spacing:2px; }
.screen-fade { animation:screenFadeIn 0.35s ease; }
@keyframes screenFadeIn { from{opacity:0} to{opacity:1} }
@keyframes vanBounce { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }

/* Profile XP bar */
.xp-bar-bg { height:8px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden; margin-top:6px; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg,#ffd700,#ffaa00); border-radius:4px; transition:width 0.4s; }

/* Section title in modals */
.section-title { font-size:9px; color:#ffae00; letter-spacing:2px; margin:16px 0 10px; padding-bottom:8px; border-bottom:1px solid rgba(255,174,0,0.2); }

/* ===== V7: STORY MODE ===== */
#story-screen, #char-select, #difficulty-screen, #chapter-intro {
    position:fixed; inset:0; display:none; flex-direction:column;
    justify-content:center; align-items:center;
    background: linear-gradient(160deg,#05080f,#0a1020);
    z-index:500; padding:20px; overflow-y:auto;
}
#story-screen { background: radial-gradient(ellipse at 30% 40%, #0a1a2a, #050810); }
#story-screen::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.82); z-index:0; }
.story-container { position:relative; z-index:1; width:100%; max-width:900px; }
.story-title { font-size:clamp(14px,3vw,22px); color:#ffae00; text-align:center; margin-bottom:6px; text-shadow:0 0 20px rgba(255,174,0,0.6); }
.story-subtitle { font-size:8px; color:#888; text-align:center; margin-bottom:24px; letter-spacing:2px; }
.chapters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:24px; }
.chapter-card {
    background:rgba(0,0,0,0.6); border:2px solid; border-radius:20px;
    padding:16px; text-align:center; cursor:pointer;
    transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;
    display:flex; flex-direction:column; gap:8px;
}
.chapter-card.unlocked:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(255,174,0,0.2); }
.chapter-card.locked { border-color:#222; opacity:0.5; cursor:not-allowed; filter:grayscale(1); }
.chapter-card.unlocked { border-color:rgba(255,174,0,0.4); }
.chapter-card.completed { border-color:#00cc77; background:rgba(0,204,119,0.07); }
.chapter-num { font-size:8px; color:#666; }
.chapter-name { font-size:9px; color:#ffae00; }
.chapter-villain { font-size:7px; color:#ff4444; }
.chapter-zone { font-size:7px; color:#888; }
.chapter-stars { font-size:12px; }
.chapter-type-badge { font-size:6px; padding:2px 8px; border-radius:20px; background:rgba(255,174,0,0.15); color:#ffae00; border:1px solid rgba(255,174,0,0.3); align-self:center; }

/* Chapter intro cutscene */
#chapter-intro { background:rgba(0,0,0,0.97); z-index:600; }
.intro-box { max-width:600px; width:100%; text-align:center; display:flex; flex-direction:column; gap:16px; }
.intro-chapter-num { font-size:9px; color:#666; letter-spacing:4px; }
.intro-title { font-size:clamp(16px,4vw,24px); color:#ffae00; text-shadow:0 0 20px rgba(255,174,0,0.5); }
.intro-story { font-size:8px; color:#ccc; line-height:2.2; background:rgba(0,0,0,0.4); border:1px solid rgba(255,174,0,0.2); border-radius:16px; padding:16px; }
.intro-villain-box { background:rgba(255,68,68,0.08); border:1px solid rgba(255,68,68,0.3); border-radius:16px; padding:12px; }
.intro-villain-label { font-size:7px; color:#ff4444; margin-bottom:4px; }
.intro-villain-name { font-size:13px; color:#ff6666; }
.intro-objective { font-size:8px; color:#00cc77; background:rgba(0,204,119,0.08); border:1px solid rgba(0,204,119,0.25); border-radius:12px; padding:10px; }

/* Character select */
#char-select { background: linear-gradient(160deg,#05080f,#0a1020); }
.char-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; width:100%; max-width:700px; margin:16px 0; }
.char-card {
    background:rgba(0,0,0,0.6); border:2px solid; border-radius:24px;
    padding:20px 14px; text-align:center; cursor:pointer;
    transition:transform 0.15s,box-shadow 0.15s;
    display:flex; flex-direction:column; gap:10px; align-items:center;
}
.char-card:hover { transform:translateY(-5px); }
.char-card.selected { box-shadow:0 0 30px var(--gc); }
.char-avatar { font-size:52px; filter:drop-shadow(0 4px 12px var(--gc)); display:flex; justify-content:center; }
.char-name { font-size:10px; color:var(--c); }
.char-role { font-size:7px; color:var(--c); opacity:0.7; letter-spacing:2px; }
.char-stats { width:100%; display:flex; flex-direction:column; gap:5px; }
.char-stat-row { display:flex; align-items:center; gap:6px; font-size:6px; color:#888; }
.char-stat-bar { flex:1; height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.char-stat-fill { height:100%; border-radius:3px; }
.char-ability { font-size:7px; color:#aaa; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:6px; line-height:1.6; }

/* Difficulty select */
#difficulty-screen { background:linear-gradient(160deg,#05080f,#0a1020); }
.diff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; width:100%; max-width:800px; margin:16px 0; }
.diff-card {
    background:rgba(0,0,0,0.6); border:2px solid; border-radius:22px;
    padding:20px 16px; text-align:center; cursor:pointer;
    transition:transform 0.15s,box-shadow 0.15s;
    display:flex; flex-direction:column; gap:8px;
}
.diff-card:hover { transform:translateY(-4px); }
.diff-icon { font-size:36px; }
.diff-name { font-size:12px; }
.diff-desc { font-size:7px; color:#888; line-height:1.8; }
.diff-bonus { font-size:7px; color:#00cc77; }

/* Ranking screen */
#ranking-screen { position:fixed; inset:0; display:none; flex-direction:column; background:rgba(0,0,0,0.95); backdrop-filter:blur(20px); z-index:1100; justify-content:center; align-items:center; padding:20px; }
.rank-box { width:100%; max-width:600px; background:rgba(8,12,28,0.98); border:2px solid rgba(255,174,0,0.4); border-radius:28px; padding:0; overflow:hidden; }
.rank-header { background:linear-gradient(90deg,rgba(255,174,0,0.15),transparent); padding:20px 24px; border-bottom:1px solid rgba(255,174,0,0.2); display:flex; align-items:center; gap:12px; }
.rank-list { padding:16px 24px; max-height:60vh; overflow-y:auto; }
.rank-entry { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.rank-pos { font-size:11px; color:#666; width:28px; text-align:center; flex-shrink:0; }
.rank-pos.gold { color:#ffd700; text-shadow:0 0 8px #ffd700; }
.rank-pos.silver { color:#c0c0c0; }
.rank-pos.bronze { color:#cd7f32; }
.rank-avatar { font-size:20px; flex-shrink:0; }
.rank-name { flex:1; font-size:9px; color:#ffdd99; }
.rank-score { font-size:10px; color:#ffae00; }
.rank-char { font-size:7px; color:#666; }

/* Daily missions badge on lobby */

/* Story mode button on lobby */
.mode-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mode-btn-story { background:linear-gradient(135deg,#6a0dad,#aa44ff) !important; box-shadow:0 8px 0 #3a005f,0 0 30px rgba(170,68,255,0.4) !important; }
.mode-btn-endless { background:linear-gradient(135deg,#008751,#00e676) !important; box-shadow:0 8px 0 #005a36,0 0 30px rgba(0,230,118,0.35) !important; }

/* Chapter complete screen */
#chapter-complete { position:fixed; inset:0; display:none; background:rgba(0,0,0,0.95); z-index:700; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:20px; }
.complete-title { font-size:clamp(18px,5vw,28px); color:#ffd700; text-shadow:0 0 20px #ffd700; animation:goShake 0.5s ease; }
.complete-stars { font-size:36px; letter-spacing:8px; }
.complete-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:380px; margin:8px 0; }

@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.slide-up { animation:slideUp 0.4s ease; }

/* ===== V8: DIALOGUE SYSTEM ===== */
#dialogue-screen {
    position:fixed; inset:0; z-index:800; display:none;
    background:rgba(0,0,0,0.93); flex-direction:column;
    justify-content:flex-end; align-items:center; padding:20px;
}
#dialogue-bg {
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0.25; z-index:0;
}
.dialogue-scene { position:relative; z-index:1; width:100%; max-width:700px; display:flex; flex-direction:column; gap:16px; }
.dialogue-chars { display:flex; justify-content:space-around; align-items:flex-end; height:160px; margin-bottom:8px; }
.dialogue-char { display:flex; flex-direction:column; align-items:center; gap:6px; transition:filter 0.3s, transform 0.3s; }
.dialogue-char.inactive { filter:grayscale(0.8) brightness(0.5); transform:scale(0.9); }
.dialogue-char.active { filter:none; transform:scale(1.05); }
.dialogue-char-emoji { font-size:clamp(40px,10vw,72px); filter:drop-shadow(0 6px 16px var(--gc,rgba(255,174,0,0.5))); }
.dialogue-char-name { font-size:7px; color:var(--c,#ffae00); letter-spacing:2px; }
.dialogue-box {
    background:rgba(4,8,20,0.97); border:2px solid var(--speak-color,#ffae00);
    border-radius:20px; padding:16px 20px;
    box-shadow:0 0 30px var(--speak-glow,rgba(255,174,0,0.2));
    transition:border-color 0.3s, box-shadow 0.3s;
}
.dialogue-speaker { font-size:8px; color:var(--speak-color,#ffae00); margin-bottom:8px; letter-spacing:2px; }
.dialogue-text { font-size:clamp(8px,2vw,11px); color:#ddd; line-height:2.2; min-height:44px; }
.dialogue-continue { font-size:7px; color:#555; text-align:right; margin-top:8px; animation:blink 1s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.dialogue-progress { display:flex; gap:6px; justify-content:center; }
.dialogue-dot { width:8px; height:8px; border-radius:50%; background:#333; transition:background 0.2s; }
.dialogue-dot.active { background:var(--speak-color,#ffae00); }

/* ===== V8: MINIGAME ===== */
#minigame-screen {
    position:fixed; inset:0; z-index:750; display:none;
    background:rgba(0,0,0,0.96); flex-direction:column;
    justify-content:center; align-items:center; gap:16px; padding:20px;
}
.minigame-title { font-size:clamp(14px,3vw,20px); color:#ffae00; text-align:center; }
.minigame-sub { font-size:8px; color:#666; text-align:center; }
#minigame-canvas { border:2px solid rgba(255,174,0,0.4); border-radius:16px; cursor:pointer; touch-action:none; }
.minigame-hud { display:flex; gap:20px; justify-content:center; }
.minigame-hud-stat { font-size:10px; color:#ffae00; }

/* ===== V8: SKINS SHOP ===== */
.skins-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin:14px 0; }
.skin-card {
    background:rgba(0,0,0,0.5); border:2px solid; border-radius:20px;
    padding:14px 10px; text-align:center; cursor:pointer;
    transition:transform 0.15s, box-shadow 0.15s;
    display:flex; flex-direction:column; gap:6px; align-items:center;
}
.skin-card:hover { transform:translateY(-3px); }
.skin-card.owned { border-color:#00cc77; }
.skin-card.active { border-color:#ffd700; box-shadow:0 0 20px rgba(255,215,0,0.3); }
.skin-card.locked { border-color:#222; opacity:0.6; }
.skin-preview { font-size:42px; }
.skin-name { font-size:8px; color:#ffae00; }
.skin-rarity { font-size:6px; padding:2px 8px; border-radius:20px; }
.rarity-common { background:rgba(150,150,150,0.2); color:#aaa; border:1px solid #555; }
.rarity-rare { background:rgba(68,136,255,0.15); color:#4488ff; border:1px solid #4488ff; }
.rarity-epic { background:rgba(170,68,255,0.15); color:#aa44ff; border:1px solid #aa44ff; }
.rarity-legendary { background:rgba(255,215,0,0.15); color:#ffd700; border:1px solid #ffd700; }

/* ===== V8: IMPROVED HUD ===== */
.hud-wave { font-size:8px; color:#aa44ff; white-space:nowrap; background:rgba(170,68,255,0.15); padding:3px 10px; border-radius:20px; border:1px solid rgba(170,68,255,0.3); }
.hud-char { font-size:14px; }
.hud-diff { font-size:7px; padding:2px 8px; border-radius:20px; white-space:nowrap; }

/* ===== V8: COMBO POPUP ===== */
#comboDisplay {
    position:absolute; top:80px; left:50%; transform:translateX(-50%);
    font-size:0px; color:#ffd700; text-shadow:0 0 20px #ffd700;
    z-index:50; pointer-events:none; transition:font-size 0.1s, opacity 0.3s;
    text-align:center; white-space:nowrap;
}

/* ===== V8: SCREEN TRANSITIONS ===== */
.screen-wipe { animation:wipeIn 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
@keyframes wipeIn { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)} }

/* ===== V8: WAVE BANNER ===== */
#waveBanner {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:0px; color:#ffd700; text-shadow:0 0 30px #ffd700, 0 0 60px rgba(255,215,0,0.4);
    z-index:60; pointer-events:none;
    transition:font-size 0.15s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
    text-align:center; white-space:nowrap;
    background: linear-gradient(135deg, rgba(255,215,0,0.15), transparent);
    padding:8px 20px; border-radius:40px;
}
#waveBanner.show { font-size:clamp(20px,5vw,36px); }

/* ===== V8: PARTICLE ANIMATIONS ===== */
@keyframes starBurst { 0%{transform:scale(0) rotate(0deg);opacity:1} 100%{transform:scale(2) rotate(180deg);opacity:0} }
.star-burst { animation:starBurst 0.5s ease-out forwards; }

/* ===== V8: POWER-UP ANIMATIONS ===== */
@keyframes powerupFloat { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(5deg)} }
@keyframes shieldPulse { 0%,100%{box-shadow:0 0 10px #44ffaa} 50%{box-shadow:0 0 25px #44ffaa, 0 0 50px rgba(68,255,170,0.3)} }

/* ===== V8: CHAPTER OBJECTIVE HUD ===== */
#objectiveHUD {
    position:absolute; top:72px; right:14px;
    background:rgba(0,0,0,0.8); backdrop-filter:blur(8px);
    border:1px solid rgba(255,174,0,0.3); border-radius:16px;
    padding:8px 12px; font-size:7px; color:#ffae00; z-index:30;
    pointer-events:none; display:none; min-width:130px;
}
.obj-item { display:flex; justify-content:space-between; gap:10px; margin:3px 0; }
.obj-done { color:#00cc77; }
.obj-fail { color:#ff4444; }

/* ===== V8: CHAPTER PROGRESS BAR ===== */
#chapterProgress {
    position:absolute; bottom:160px; left:50%; transform:translateX(-50%);
    width:min(280px,70%); display:none; z-index:40;
}
.ch-prog-label { font-size:7px; color:#aa44ff; text-align:center; margin-bottom:4px; }
.ch-prog-bg { height:6px; background:rgba(0,0,0,0.5); border-radius:3px; border:1px solid rgba(170,68,255,0.3); overflow:hidden; }
.ch-prog-fill { height:100%; background:linear-gradient(90deg,#6a0dad,#aa44ff); width:0%; transition:width 0.3s; border-radius:3px; }

/* ===== V8: SKIN GLOW ON VAN ===== */
@keyframes vanGlowPulse { 0%,100%{filter:drop-shadow(0 0 8px var(--skin-glow,rgba(255,174,0,0.4)))} 50%{filter:drop-shadow(0 0 20px var(--skin-glow,rgba(255,174,0,0.6)))} }

@media(max-width:600px){
    .crew-grid{grid-template-columns:repeat(2,1fr);}
    .char-grid{grid-template-columns:repeat(2,1fr);}
    .diff-grid{grid-template-columns:repeat(2,1fr);}
}

/* Íconos de personaje (retratos cuadrados, no sprites) */
.char-img { width:84px; height:84px; object-fit:cover; border-radius:18px; border:3px solid var(--c,#ffae00);
    box-shadow:0 0 16px var(--gc,rgba(255,174,0,0.4)); display:block; }
.skin-img { width:72px; height:48px; object-fit:contain; image-rendering:pixelated; }
#hud-char-avatar .char-img { width:26px; height:26px; border-radius:50%; border-width:2px; box-shadow:none; }

/* ===== ZONAS (aviso al cambiar de zona en endless) ===== */
#zoneBanner { position:absolute; top:26%; left:50%; transform:translate(-50%,-50%) scale(0.6); z-index:61; pointer-events:none;
    text-align:center; white-space:nowrap; opacity:0; padding:14px 48px;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,0.78) 15%,rgba(0,0,0,0.78) 85%,transparent);
    border-top:2px solid var(--zc,#fff); border-bottom:2px solid var(--zc,#fff); }
#zoneBanner .zb-sub { font-size:clamp(7px,1.6vw,11px); letter-spacing:5px; color:#fff; opacity:0.85; margin-bottom:10px; }
#zoneBanner .zb-name { font-size:clamp(16px,4.2vw,32px); color:var(--zc,#fff); letter-spacing:3px; text-shadow:0 0 24px var(--zc,#fff), 0 3px 0 rgba(0,0,0,0.6); }
#zoneBanner.show { animation:zoneBannerIn 3.2s ease-out forwards; }
@keyframes zoneBannerIn {
    0%   { opacity:0; transform:translate(-50%,-50%) scale(0.6); }
    12%  { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
    20%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
    80%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}