/* GLOBAL & VARIABLES */
    :root { --bg: #f2f4f5; --nav: #fff; --text: #393b3d; --primary: #00b06f; --primary-hover: #008f5a; --card: #fff; }
    * { box-sizing: border-box; user-select: none; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    body, html { margin: 0; padding: 0; width: 100%; height: 100%; background: var(--bg); overflow: hidden; color: var(--text); }
    
    /* UI LAYER */
    #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; flex-direction: column; background: var(--bg); transition: opacity 0.3s; }
    
    /* TOP NAVIGATION */
    .navbar { background: var(--nav); height: 60px; display: flex; align-items: center; padding: 0 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex-shrink: 0; z-index: 40; }
    .logo { font-size: 24px; font-weight: 900; color: #000; letter-spacing: 1px; cursor: pointer; margin-right: 30px; }
    .nav-links { display: flex; gap: 10px; flex: 1; align-items: center; overflow-x: auto; white-space: nowrap; }
    .nav-links div { font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 12px; border-radius: 5px; transition: background 0.2s; }
    .nav-links div:hover, .nav-links div.active-nav { background: #e0e0e0; }
    
    /* SEARCH BAR */
    .search-bar { flex: 1; max-width: 400px; display: flex; position: relative; margin: 0 20px; }
    .search-bar input { width: 100%; padding: 8px 15px; border-radius: 20px; border: 1px solid #ccc; font-size: 14px; outline: none; }
    #search-results { position: absolute; top: 110%; left: 0; width: 100%; background: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: none; max-height: 350px; overflow-y: auto; z-index: 50; }
    .search-category { background: #f2f4f5; padding: 5px 10px; font-size: 12px; font-weight: bold; color: #666; text-transform: uppercase; }
    .search-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; transition: background 0.1s; }
    .search-item:hover, .search-item.selected { background: #e0e0e0; }
    
    .user-area { display: flex; align-items: center; gap: 15px; font-weight: bold; position: relative; }
    .tokens { color: #f1c40f; display: flex; align-items: center; gap: 5px; }
    .account-btn { cursor: pointer; padding: 5px 10px; background: #e0e0e0; border-radius: 5px; display: flex; align-items: center; gap: 5px; }
    .nav-avatar-icon { width: 24px; height: 24px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    
    /* ACCOUNT DROPDOWN */
    #account-dropdown { position: absolute; top: 40px; right: 0; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.2); border-radius: 5px; display: none; flex-direction: column; overflow: hidden; min-width: 150px; z-index: 50; }
    #account-dropdown div { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; }
    #account-dropdown div:hover { background: #f5f5f5; }

    /* CONTENT PANELS */
    .panel { flex: 1; padding: 30px 40px; overflow-y: auto; display: none; }
    .panel.active { display: block; }
    .hero-header { font-size: 28px; font-weight: bold; margin: 10px 0 20px 0; }
    .section-title { font-size: 20px; font-weight: bold; margin: 30px 0 15px 0; border-bottom: 2px solid #ddd; padding-bottom: 5px;}
    
    /* GAME CARDS */
    .game-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 15px; }
    .game-grid { display: flex; gap: 20px; flex-wrap: wrap; }
    .game-card { background: var(--card); border-radius: 10px; overflow: hidden; width: 220px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; position: relative; }
    .game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
    .game-thumb { width: 100%; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); text-align: center; padding: 10px; position: relative; overflow: hidden; background-color: #333; background-position: center; background-size: cover; }
    .game-thumb-icon { font-size: 40px; margin-bottom: 5px; }
    .game-info { padding: 12px; }
    .game-title { font-size: 15px; font-weight: bold; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .game-stats { font-size: 12px; color: #666; display: flex; justify-content: space-between; margin-bottom: 8px; }
    .game-stats .players { color: #28a745; font-weight: bold; }
    .fav-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 5; }
    .fav-btn:hover { background: rgba(0,0,0,0.8); }
    .fav-btn.favorited { color: #ff4757; }
    
    .empty-state-card { padding: 30px; background: white; border-radius: 10px; text-align: center; color: #666; width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

    /* DETAILS PAGE */
    .detail-container { display: flex; gap: 40px; max-width: 1000px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .detail-left { flex: 1; }
    .detail-right { flex: 1; display: flex; flex-direction: column; gap: 15px; }
    .detail-thumb { width: 100%; height: 300px; border-radius: 10px; background-color: #333; background-position: center; background-size: cover; display: flex; align-items: flex-end; justify-content: flex-start; color: white; font-size: 32px; font-weight: bold; padding: 20px; text-shadow: 2px 2px 5px #000; box-shadow: inset 0 -80px 60px -20px rgba(0,0,0,0.7); }
    .play-btn { background: var(--primary); color: white; border: none; padding: 15px; font-size: 24px; font-weight: bold; border-radius: 10px; cursor: pointer; transition: background 0.2s, transform 0.1s; box-shadow: 0 4px 6px rgba(0,176,111,0.3); }
    .play-btn:hover { background: var(--primary-hover); transform: translateY(-2px); }

    /* MARKETPLACE & INVENTORY */
    .market-grid { display: flex; gap: 20px; flex-wrap: wrap; }
    .market-card { background: var(--card); border-radius: 10px; width: 200px; text-align: center; padding: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; }
    .market-icon { width: 100px; height: 100px; background: #f8f9fa; border-radius: 10px; margin: 0 auto 10px auto; display: flex; align-items: center; justify-content: center; font-size: 50px; }
    .market-price { color: #28a745; font-weight: bold; margin: 5px 0; }
    
    .action-btn { background: var(--primary); color: white; border: none; padding: 10px 15px; font-size: 14px; font-weight: bold; border-radius: 5px; cursor: pointer; width: 100%; transition: background 0.2s; }
    .action-btn:hover { background: var(--primary-hover); }

    /* TABS */
    .tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; overflow-x: auto; }
    .tab { padding: 8px 16px; background: #e0e0e0; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 14px; white-space: nowrap; transition: background 0.2s; }
    .tab:hover { background: #ccc; }
    .tab.active { background: var(--text); color: white; }

    /* AUTH MODAL */
    #auth-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; display: none; align-items: center; justify-content: center; }
    .modal-box { background: white; padding: 30px; border-radius: 10px; width: 350px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
    .modal-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; }
    .auth-error { color: #dc3545; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: none; }

    /* ESC MENU */
    #esc-menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 80; display: none; align-items: center; justify-content: center; pointer-events: auto; }
    .menu-box { background: #fff; padding: 40px; border-radius: 15px; width: 350px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .menu-btn { display: block; width: 100%; padding: 15px; margin: 10px 0; background: #f8f9fa; border: 2px solid #e0e0e0; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 8px; transition: all 0.2s; color: #333; }
    .menu-btn:hover { background: #e0e0e0; border-color: #ccc; }
    .menu-btn.red { background: #fff; color: #dc3545; border-color: #dc3545; }
    .menu-btn.red:hover { background: #dc3545; color: #fff; }

    /* IN-GAME HUD */
    #game-hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; display: none; }
    .hud-top-left { position: absolute; top: 15px; left: 15px; pointer-events: auto; display: flex; flex-direction: column; gap: 10px; }
    .rb-menu-btn { background: rgba(0,0,0,0.7); color: white; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; border: 2px solid rgba(255,255,255,0.2); text-align: center; transition: background 0.2s; }
    .rb-menu-btn:hover { background: rgba(0,0,0,0.9); }
    
    .hud-top-right { position: absolute; top: 15px; right: 15px; text-align: right; }
    .player-name { background: rgba(0,0,0,0.7); color: white; padding: 8px 15px; border-radius: 8px; font-weight: bold; margin-bottom: 10px; display: inline-block; font-size: 16px; }
    .bar-bg { width: 180px; height: 18px; background: rgba(0,0,0,0.6); border-radius: 9px; float: right; overflow: hidden; border: 2px solid rgba(0,0,0,0.8); margin-bottom: 8px; clear: both; }
    #health-fill { width: 100%; height: 100%; background: #28a745; transition: width 0.2s; }
    #stamina-bar-bg { height: 12px; display: none; }
    #stamina-fill { width: 100%; height: 100%; background: #00aaff; transition: width 0.1s; }
    
    .hud-bottom { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: auto; }
    .interaction-prompt { background: rgba(0,0,0,0.85); color: white; padding: 12px 25px; border-radius: 8px; font-weight: bold; font-size: 18px; display: none; margin-bottom: 10px; border: 2px solid #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
    
    .game-ui-panel { display: none; background: rgba(0,0,0,0.8); color: white; padding: 15px; border-radius: 8px; font-weight: bold; margin-top: 10px; text-align: right; border: 1px solid #555; clear: both; font-size: 15px; line-height: 1.6; }
    
    /* MODALS INSIDE HUD */
    #jb-teams, #minigame-lobby { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; gap: 20px; pointer-events: auto; }
    .team-card { background: rgba(25,25,25,0.95); padding: 40px; border-radius: 15px; text-align: center; color: white; width: 280px; cursor: pointer; border: 3px solid #444; transition: transform 0.2s, border-color 0.2s; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .team-card:hover { transform: scale(1.05); border-color: #fff; }

    /* NOTIFICATIONS & EFFECTS */
    #notification-area { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 60; pointer-events: none; }
    .notification { background: rgba(0,0,0,0.9); color: white; padding: 15px 25px; border-radius: 8px; font-weight: bold; animation: fadeout 4s forwards; border: 1px solid #444; box-shadow: 0 6px 15px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 12px; font-size: 15px; }
    @keyframes fadeout { 0% { opacity: 1; transform: translateY(-10px); } 10% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } }

    #fullscreen-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); z-index: 70; display: none; align-items: center; justify-content: center; flex-direction: column; color: white; font-family: Impact, sans-serif; font-size: 60px; pointer-events: auto; text-shadow: 2px 2px 10px #000; }
    
    /* LOADING SCREEN */
    #platform-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #111; color: white; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: 'Segoe UI', sans-serif;}
    .loader { border: 8px solid #333; border-top: 8px solid var(--primary); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin-bottom: 20px; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    #crosshair { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 20; display: none; box-shadow: 0 0 2px rgba(0,0,0,0.8); }
    #fp-prompt { position: absolute; top: 60%; left: 50%; transform: translateX(-50%); color: white; font-weight: bold; text-shadow: 1px 1px 2px #000; pointer-events: auto; display: none; z-index: 20; cursor: pointer; padding: 10px; background: rgba(0,0,0,0.5); border-radius: 5px;}

    /* MOBILE CONTROLS */
    #mobile-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; display: none; }
    .joystick-zone { position: absolute; bottom: 40px; left: 40px; width: 140px; height: 140px; background: rgba(255,255,255,0.15); border-radius: 50%; pointer-events: auto; border: 2px solid rgba(255,255,255,0.3); }
    .joystick-knob { position: absolute; top: 40px; left: 40px; width: 60px; height: 60px; background: rgba(255,255,255,0.6); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
    .btn-zone { position: absolute; bottom: 40px; right: 40px; display: flex; gap: 15px; pointer-events: auto; flex-wrap: wrap-reverse; justify-content: flex-end; width: 160px;}
    .mobile-btn { width: 70px; height: 70px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: 26px; border: 2px solid rgba(255,255,255,0.5); user-select: none; }

    #game-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: block; outline: none; }


/* v12: thumbnails are artwork only; titles live in the card body below. */
.game-thumb > div:not(.thumbnail-art-allowed) {
    pointer-events: none;
}