@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box;font-family:'Unbounded',sans-serif;}
body{background:#0a0a0a;color:#fff;overflow:hidden;height:100vh;width:100vw;}

/* Top bar */
.top-bar{position:fixed;top:0;left:0;right:0;height:48px;background:rgba(0,0,0,0.6);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:100;border-bottom:1px solid rgba(255,255,255,0.05);}
.back-link{display:flex;align-items:center;gap:6px;font-size:12px;color:#888;transition:0.2s;}
.back-link:hover{color:#fff;}
.project-name{font-size:12px;color:#555;}

/* Game BG */
.game-bg{position:fixed;inset:0;background:linear-gradient(135deg,#0a0e1a 0%,#0f1628 30%,#131b35 60%,#0a0e1a 100%);overflow:hidden;}
.game-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(30,50,100,0.15) 0%,transparent 60%);}

/* HUD */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none;}

/* Minimap */
.minimap{position:fixed;bottom:20px;left:20px;width:200px;z-index:20;pointer-events:auto;}
.minimap-inner{width:200px;height:160px;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:relative;overflow:hidden;}
.minimap-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:20px 20px;}
.minimap-dot{position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,255,255,0.5);transition:0.4s ease;z-index:2;}
.minimap-npc{position:absolute;width:5px;height:5px;border-radius:50%;}
.npc-1{background:#f87171;top:30%;left:60%;}
.npc-2{background:#60a5fa;top:70%;left:25%;}
.npc-3{background:#fbbf24;top:45%;left:80%;}
.minimap-info{background:rgba(0,0,0,0.7);padding:6px 10px;border-radius:0 0 4px 4px;display:flex;justify-content:space-between;}
.minimap-info .street{font-size:10px;font-weight:500;}
.minimap-info .zone{font-size:10px;color:#888;}

/* Status bars */
.status-bars{position:fixed;bottom:20px;left:240px;display:flex;flex-direction:column;gap:4px;z-index:20;}
.status-bar{display:flex;align-items:center;gap:6px;}
.status-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px;}
.status-icon.health{color:#ef4444;}
.status-icon.armor{color:#60a5fa;}
.status-icon.hunger{color:#fb923c;}
.status-icon.water{color:#38bdf8;}
.bar-track{width:120px;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;border-radius:3px;transition:width 1s ease;}
.health-fill{background:linear-gradient(90deg,#dc2626,#ef4444);}
.armor-fill{background:linear-gradient(90deg,#2563eb,#60a5fa);}
.hunger-fill{background:linear-gradient(90deg,#ea580c,#fb923c);}
.water-fill{background:linear-gradient(90deg,#0284c7,#38bdf8);}

/* Money */
.money-display{position:fixed;top:64px;right:20px;display:flex;flex-direction:column;gap:4px;z-index:20;}
.money{display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(0,0,0,0.5);border-radius:8px;font-size:13px;}
.money-icon{font-size:14px;}
.money.cash .money-amount{color:#34d399;}
.money.bank .money-amount{color:#a78bfa;}

/* Notifications */
.notifications{position:fixed;top:64px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:20;animation:notifSlide 0.4s ease;}
@keyframes notifSlide{from{opacity:0;transform:translateX(-50%) translateY(-20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.notification{display:flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border-radius:10px;font-size:12px;border:1px solid rgba(255,255,255,0.08);}
.notification.success svg{color:#34d399;}
.notification.info svg{color:#60a5fa;}

/* Phone */
.phone{position:fixed;right:40px;top:50%;transform:translateY(-50%);z-index:50;pointer-events:auto;}
.phone-frame{width:260px;background:rgba(15,15,20,0.95);border:1px solid rgba(255,255,255,0.1);border-radius:28px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.phone-notch{width:80px;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;margin:0 auto 12px;}
.phone-screen{min-height:440px;position:relative;}
.phone-header{display:flex;justify-content:space-between;align-items:center;padding:0 4px 12px;font-size:11px;color:#888;}
.phone-status-icons{display:flex;gap:6px;color:#888;}
.phone-home-btn{width:40px;height:5px;background:rgba(255,255,255,0.15);border-radius:3px;margin:12px auto 0;cursor:pointer;}

/* Apps grid */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px;}
.app-item{text-align:center;cursor:pointer;transition:0.2s;}
.app-item:hover{transform:scale(1.08);}
.app-item:active{transform:scale(0.95);}
.app-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;}
.app-item span{font-size:9px;color:#888;}

/* App screens */
.phone-app-screen{padding:0 4px;animation:appOpen 0.25s ease;}
@keyframes appOpen{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.app-header{display:flex;align-items:center;gap:10px;padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:12px;font-size:13px;font-weight:500;}
.app-back{background:none;border:none;color:#888;cursor:pointer;padding:4px;transition:0.2s;}
.app-back:hover{color:#fff;}

/* Bank */
.bank-card{background:linear-gradient(135deg,#1a1a3e,#2a1a4e);border-radius:14px;padding:20px;margin-bottom:16px;}
.bank-label{font-size:10px;color:#888;display:block;margin-bottom:4px;}
.bank-amount{font-size:22px;font-weight:700;display:block;margin-bottom:8px;color:#a78bfa;}
.bank-number{font-size:11px;color:#555;}
.bank-actions{display:flex;gap:8px;margin-bottom:16px;}
.bank-btn{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:#fff;font-family:inherit;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:0.2s;}
.bank-btn:hover{background:rgba(255,255,255,0.08);}
.bank-history h4{font-size:11px;color:#555;margin-bottom:8px;}
.bank-tx{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:11px;}
.tx-plus{color:#34d399;}
.tx-minus{color:#f87171;}

/* Contacts */
.contacts-list{display:flex;flex-direction:column;gap:2px;}
.contact-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;transition:0.2s;cursor:pointer;}
.contact-item:hover{background:rgba(255,255,255,0.04);}
.contact-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;}
.contact-item strong{font-size:12px;display:block;}
.contact-item p{font-size:10px;color:#666;margin-top:2px;}

/* Messages */
.messages-list{display:flex;flex-direction:column;gap:2px;}
.message-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;cursor:pointer;transition:0.2s;position:relative;}
.message-item:hover{background:rgba(255,255,255,0.04);}
.message-item.unread::after{content:'';position:absolute;right:8px;top:50%;width:6px;height:6px;background:#60a5fa;border-radius:50%;transform:translateY(-50%);}
.message-item strong{font-size:12px;display:block;}
.message-item p{font-size:10px;color:#666;margin-top:2px;}
.msg-time{font-size:9px;color:#444;margin-top:4px;display:block;}

/* GPS */
.gps-list{display:flex;flex-direction:column;gap:2px;}
.gps-item{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:10px;font-size:12px;cursor:pointer;transition:0.2s;}
.gps-item:hover{background:rgba(255,255,255,0.04);}

/* Jobs */
.jobs-info{text-align:center;}
.job-current{padding:24px 0;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:16px;}
.job-label{font-size:10px;color:#555;display:block;margin-bottom:4px;}
.job-current h3{font-size:18px;margin-bottom:4px;}
.job-org{font-size:11px;color:#888;}
.job-stats{display:flex;justify-content:center;gap:24px;}
.job-stat{text-align:center;}
.job-stat-num{display:block;font-size:16px;font-weight:700;color:#fbbf24;}
.job-stat span{font-size:10px;color:#555;}

/* Settings */
.settings-list{display:flex;flex-direction:column;gap:2px;}
.setting-item{display:flex;align-items:center;justify-content:space-between;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px;}
.setting-val{color:#555;font-size:11px;}
.toggle{position:relative;width:36px;height:20px;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:0.2s;}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:0.2s;}
.toggle input:checked+.toggle-slider{background:#34d399;}
.toggle input:checked+.toggle-slider::before{left:18px;}

/* Inventory */
.inventory{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:420px;background:rgba(10,10,15,0.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px;display:none;pointer-events:auto;}
.inv-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.inv-header h3{font-size:14px;}
.inv-weight{font-size:11px;color:#555;}
.inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.inv-slot{aspect-ratio:1;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:0.2s;}
.inv-slot.filled:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.06);}
.inv-item-icon{font-size:24px;}
.inv-qty{position:absolute;top:4px;right:6px;font-size:9px;color:#888;}
.inv-name{font-size:8px;color:#555;margin-top:4px;}

/* Speedometer */
.speedometer{position:fixed;bottom:20px;right:20px;z-index:20;text-align:center;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px 24px;}
.speed-value{font-size:32px;font-weight:800;line-height:1;}
.speed-unit{font-size:10px;color:#555;margin-top:2px;}
.speed-info{display:flex;gap:12px;margin-top:8px;font-size:10px;color:#888;}

/* Demo label */
.demo-label{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;text-align:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:10px 20px;}
.demo-label span{display:block;font-size:11px;color:#555;}
.demo-label a{font-size:11px;color:#888;transition:0.2s;display:block;margin-top:4px;}
.demo-label a:hover{color:#fff;}

/* Interaction hint */
.interaction-hint{position:fixed;top:50%;left:240px;z-index:20;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.6);padding:8px 14px;border-radius:8px;font-size:11px;color:#888;animation:hintPulse 2s infinite;}
@keyframes hintPulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
.hint-key{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;color:#fff;}

@media(max-width:768px){
    .phone{right:10px;transform:translateY(-50%) scale(0.85);}
    .minimap{width:140px;bottom:10px;left:10px;}
    .minimap-inner{width:140px;height:110px;}
    .status-bars{left:160px;bottom:10px;}
    .bar-track{width:80px;}
    .speedometer{bottom:10px;right:10px;padding:10px 16px;}
    .speed-value{font-size:24px;}
    .demo-label{display:none;}
    .interaction-hint{display:none;}
}