body {
            margin: 0;
            overflow: hidden;
            background-color: #121212;
            font-family: 'Consolas', 'Courier New', monospace;
            color: white;
            user-select: none;
        }

        #gameCanvas {
            display: block;
        }

        /* --- UI LAYER --- */
        .ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* HUD: Góc trái trên */
        #hud-top-left {
            position: absolute;
            top: 20px;
            left: 20px;
            text-align: left;
        }
        .hud-text {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 5px;
            text-shadow: 2px 2px 0 #000;
        }
        .highlight { color: #4CAF50; }
        .wave-text { color: #FFD700; font-size: 1.5rem; }

        
        /* Hide legacy P2 HP text in top-left (we have proper P2 HP bar now) */
        #p2HpText{ display:none !important; }
/* HUD: Góc phải trên - Buffs */
        #hud-top-right {
            position: absolute;
            top: 20px;
            right: 20px;
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        
        .buff-icon {
            display: inline-block;
            padding: 5px 10px;
            margin-top: 5px;
            border-radius: 4px;
            font-size: 0.9rem;
            background: rgba(0,0,0,0.6);
            border: 1px solid white;
        }

        

        /* HUD Bottom layout (2P split) */
        #hudRoot {
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: min(1100px, 96vw);
            height: 220px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            pointer-events: none;
            z-index: 200;
        }

        #hudP1, #hudP2 {
            width: 50%;
            padding: 16px 24px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        #hudP1 { align-items: flex-start; }
        #hudP2 { align-items: flex-end; }

        #hudDivider {
            width: 2px;
            height: 180px;
            align-self: flex-end;
            background: rgba(255,255,255,0.15);
            border-radius: 2px;
        }

        /* Allow interaction on HUD elements */
        #hudRoot .slot,
        #hudRoot .weapon-slot,
        #hudRoot button {
            pointer-events: auto;
        }

        /* Bar rows */
        #skillBar, #weaponBar {
            display: flex;
            gap: 10px;
        }
        #skillBarP2, #weaponBarP2 {
            gap: 10px;
            justify-content: flex-end;
        }

        /* Hide debug HUD text (move outside HUD if needed) */
        #world-info { display: none; }

/* WEAPON & SKILL BAR */
        #bottomBar {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            pointer-events: auto;
        }

        #weaponBar, #skillBar {
            display: flex;
            gap: 10px;
        }

        /* 2P: Skill bar for Player2 (shown when weaponBarP2 is visible) */
        #skillBarP2 {
            display: none;
            gap: 10px;
        }

        /* Base box for skill slots */
        .slot{
          width:60px;
          height:60px;
          border:2px solid #555;
          border-radius:10px;
          background:rgba(20,20,20,0.85);
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          position:relative;   /* IMPORTANT: contain cooldown overlay */
          overflow:hidden;     /* IMPORTANT: clip overlay */
          box-sizing:border-box;
          text-align:center;
        }

        /* Base box for weapon slots (UIManager tạo class weapon-slot) */
        .weapon-slot{
          width:60px;
          height:60px;
          border:2px solid #555;
          border-radius:10px;
          background:rgba(20,20,20,0.85);
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          position:relative;
          overflow:hidden;
          box-sizing:border-box;
          text-align:center;
        }

        /* Active style phải áp dụng cho cả weapon-slot */
        .weapon-slot.active{
          border-color:#fff;
          transform:scale(1.1);
          box-shadow:0 0 15px rgba(255,255,255,0.4);
          background:rgba(60,60,60,0.9);
        }

        /* key/icon/level áp dụng cho weapon-slot */
        .weapon-slot .key-number{ position:absolute; top:2px; left:4px; font-size:0.7rem; color:#aaa; }
        .weapon-slot .icon{ font-size:0.9rem; line-height:1.1; }
        .weapon-slot .level-indicator{ font-size:0.7rem; color:#FFD700; margin-top:2px; }

        
        .slot.active {
            border-color: #fff;
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(255,255,255,0.4);
            background: rgba(60, 60, 60, 0.9);
        }

        .slot .key-number {
            position: absolute;
            top: 2px;
            left: 4px;
            font-size: 0.7rem;
            color: #aaa;
        }

        .slot .icon {
            font-size: 0.9rem;
            text-align: center;
            line-height: 1.1;
            margin-bottom: 2px;
        }

        .slot .level-indicator {
            font-size: 0.7rem;
            color: #FFD700;
            margin-top: 2px;
        }

        /* ULTIMATE BAR */
        #ultiContainer {
            width: 400px;
            height: 10px;
            background: #333;
            border: 1px solid #FFD700;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 5px;
            position: relative;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }
        #ultiBar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #FFD700, #FFAB00);
            transition: width 0.2s;
            box-shadow: 0 0 10px #FFD700;
        }
        #ultiText {
            position: absolute;
            top: -20px;
            width: 100%;
            text-align: center;
            font-size: 0.8rem;
            color: #FFD700;
            font-weight: bold;
            text-shadow: 0 0 5px black;
        }

        /* Cooldown Overlay */
        .cooldown-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0%;
            transition: height 0.1s linear;
            background: rgba(0, 0, 0, 0.78);
            background-image: linear-gradient(135deg,
                rgba(255,255,255,0.14) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255,255,255,0.14) 50%,
                rgba(255,255,255,0.14) 75%,
                transparent 75%,
                transparent);
            background-size: 14px 14px;
        }

        .cooldown-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.85rem;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,0.8);
            padding: 2px 6px;
            border-radius: 8px;
            background: rgba(0,0,0,0.25);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.08s linear;
        }

/* HUD: Thanh máu */
        #healthBarContainer {
            position: relative;
            width: 320px;
            height: 18px;
            background: #222;
            border: 2px solid #555;
            border-radius: 4px;
            overflow: hidden;
        }
        #healthBar {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            transition: width 0.2s;
        }
        #shieldOverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 191, 255, 0.5);
            display: none;
        }

        /* BOSS HP BAR */
        #bossHealthContainer {
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: 600px;
            height: 30px;
            background: #222;
            border: 3px solid #d32f2f;
            border-radius: 4px;
            overflow: hidden;
            display: none; 
            z-index: 10;
        }
        #bossHealthBar {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #d32f2f, #b71c1c);
            transition: width 0.2s;
        }
        #bossName {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px black;
        }

        /* SCREENS */
        #startScreen, #gameOverScreen, #victoryScreen {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 10, 10, 0.95);
            padding: 50px;
            border-radius: 15px;
            border: 2px solid #4CAF50;
            text-align: center;
            pointer-events: auto;
            box-shadow: 0 0 30px rgba(76, 175, 80, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: min(400px, 92vw);
            /* Prevent tall start screen content from being clipped on small viewports */
            max-height: 92vh;
            overflow-y: auto;
            overflow-x: hidden;
            max-width: 92vw;
            box-sizing: border-box;
            z-index: 100;
        }

        /* Optional: tighten spacing on shorter laptop screens */
        @media (max-height: 820px) {
            #startScreen, #gameOverScreen, #victoryScreen {
                padding: 28px;
            }
            #startScreen h1, #victoryScreen h1 { font-size: 2.4rem; margin-bottom: 14px; }
            #startScreen h2, #gameOverScreen h2, #victoryScreen h2 { font-size: 2.0rem; margin-bottom: 12px; }
            #startScreen p, #gameOverScreen p, #victoryScreen p { font-size: 1.0rem; }
            #startScreen .btn, #gameOverScreen .btn, #victoryScreen .btn { font-size: 1.25rem; margin-top: 20px; padding: 12px 32px; }
        }

        h1 { margin: 0 0 20px; font-size: 3rem; color: #4CAF50; text-transform: uppercase; letter-spacing: 3px; }
        h2 { margin: 0 0 15px; color: #ff4444; font-size: 2.5rem; }
        p { color: #ccc; margin-bottom: 10px; font-size: 1.1rem; }
        
        .btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.5rem;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 30px;
            transition: all 0.2s;
            font-family: inherit;
            font-weight: bold;
            text-transform: uppercase;
        }
        .btn:hover { background: #45a049; transform: scale(1.05); box-shadow: 0 0 20px #4CAF50; }

        /* --- SHOP UI FIX: keep BUY buttons consistent (avoid giant/shifted buttons) --- */
        #shopModal .btn {
            padding: 10px 12px;
            font-size: 0.95rem;
            margin-top: 10px;
            width: 100%;
            box-sizing: border-box;
        }
        #shopModal #btnShopContinue {
            width: auto;
            padding: 12px 16px;
            font-size: 1rem;
            margin-top: 0;
        }
        .hidden { display: none !important; }

        .key-guide {
            display: grid;
            grid-template-columns: auto auto;
            gap: 10px;
            text-align: left;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #888;
        }
        .key { color: white; font-weight: bold; background: #333; padding: 2px 6px; border-radius: 4px; }
        
        #world-info {
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 0.8rem;
            color: #555;
        }

    
        /* --- MAX EDITION UX TWEAKS --- */
        #weaponBar .weapon-slot, .weapon-slot, #weaponBar .slot { width: 60px; height: 60px; }
        #settingsModal input[type="range"] { width: 100%; }
        #settingsModal input[type="checkbox"] { transform: scale(1.2); }
        #maxTopBar .btn:hover { transform: scale(1.03); box-shadow: 0 0 12px rgba(255,255,255,0.15); }


        /* --- Admin code modal (hidden) --- */
        #adminCodeModal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:99999}
        #adminCodeModal.hidden{display:none}
        #adminCodePanel{pointer-events:auto;width:min(520px,92vw);background:#0b0f0c;border:2px solid rgba(24,255,106,.9);border-radius:14px;box-shadow:0 0 30px rgba(24,255,106,.25);padding:18px}
        #adminCodePanel h3{margin:0 0 10px;color:#18ff6a;letter-spacing:2px}
        #adminCodeInput{pointer-events:auto;width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#090b0a;color:#fff;font-size:16px;outline:none}
        #adminCodeMsg{margin-top:10px;font-size:13px;min-height:18px;color:rgba(255,255,255,.8)}


        /* --- Copyright badge --- */
        #copyrightBadge{
            position:fixed;
            top:14px;
            right:14px;
            z-index:100000;
            padding:6px 8px;
            border-radius:10px;
            border:1px solid rgba(24,255,106,.22);
            background:rgba(0,0,0,.18);
            color:rgba(24,255,106,.70);
            font-size:11px;
            letter-spacing:0.6px;
            user-select:none;
            pointer-events:none;
            backdrop-filter: blur(6px);
        }


        /* VietKey confirm modal */
        #vietkeyModal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:100001;}
        #vietkeyModal.hidden{display:none;}
        #vietkeyPanel{width:min(560px,92vw); background:#0b0f0c; border:2px solid rgba(24,255,106,.55); border-radius:14px;
                      box-shadow:0 0 30px rgba(24,255,106,.22); padding:16px 18px;}
        .vietkeyTip{margin-top:14px; font-size:12px; color:rgba(255,255,255,.78); text-align:center;}
        .vietkeyTip b{color:#18ff6a;}