* { box-sizing: border-box; user-select: none; margin: 0; padding: 0; }
        html, body { width: 100%; height: 100%; }
        
        /* Bổ sung fallback 100vh để sửa lỗi đen xì trên trình duyệt cũ không hỗ trợ 100dvh */
        body { 
            background-color: #000; 
            overflow: hidden; 
            touch-action: none; 
            height: 100vh; 
            height: 100dvh; 
        }
        
        footer { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            background-color: #0b0f19; 
            border-top: 1px solid #334155; 
            color: #8b9eb3; 
            text-align: center; 
            padding: 12px 20px; 
            font-family: Arial, sans-serif; 
            font-size: clamp(11px, 1.2vw, 14px); 
            z-index: 1000; 
        }

        /* Đảm bảo khung game luôn lấp đầy màn hình, không bị sập (collapse) height */
        #game-viewport {
            position: absolute; 
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%; 
            background-color: #5c94fc; 
            overflow: hidden;
            font-family: 'Press Start 2P', monospace;
        }

        #game-world { position: absolute; top: 0; left: 0; width: 6000px; height: 100%; }

        /* UI ĐIỂM SỐ - Đã chia đều khoảng cách, giảm font-size tối thiểu để không bị đè lên nhau ở màn hình nhỏ */
        #ui-layer {
            position: fixed; 
            top: max(60px, calc(env(safe-area-inset-top) + 40px)); 
            left: 0; 
            width: 100%; 
            display: flex; 
            justify-content: space-between;
            padding: 0 10px;
            color: white; 
            font-size: clamp(8px, 2.2vw, 18px); 
            font-weight: bold;
            text-shadow: 2px 2px 0 #000; 
            z-index: 100; 
            pointer-events: none;
        }
        .ui-text { 
            text-align: center; 
            line-height: 1.5; 
            flex: 1; 
            word-wrap: break-word;
        }

        /* NỀN ĐẤT */
        .ground-texture {
            background-color: #c84c0c; 
            background-image: 
                linear-gradient(to bottom, #58f858 0px, #58f858 4px, #00a800 4px, #00a800 16px, #000 16px, #000 20px, transparent 20px),
                linear-gradient(45deg, #a03800 25%, transparent 25%, transparent 75%, #a03800 75%, #a03800), 
                linear-gradient(45deg, #a03800 25%, transparent 25%, transparent 75%, #a03800 75%, #a03800);
            background-size: 100% 100%, 32px 32px, 32px 32px; 
            background-position: 0 0, 0 0, 16px 16px; 
            border-top: 4px solid #000; 
        }
        
        /* Bổ sung fallback vh cho dvh */
        #ground { 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            height: clamp(140px, 30vh, 250px); 
            height: clamp(140px, 30dvh, 250px); 
            z-index: 15; 
        }
        .floor { position: absolute; z-index: 15; }

        .entity { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; z-index: 20; }
        
        /* MARIO & HIỆU ỨNG SAO */
        .mario { 
            width: 32px; height: 32px; 
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 16"><rect x="5" y="1" width="5" height="1" fill="%23e52521"/><rect x="4" y="2" width="9" height="1" fill="%23e52521"/><rect x="4" y="3" width="3" height="1" fill="%238b4513"/><rect x="7" y="3" width="2" height="1" fill="%23ffcc99"/><rect x="9" y="3" width="1" height="1" fill="%23000"/><rect x="10" y="3" width="1" height="1" fill="%23ffcc99"/><rect x="3" y="4" width="1" height="1" fill="%238b4513"/><rect x="4" y="4" width="1" height="1" fill="%23ffcc99"/><rect x="5" y="4" width="1" height="1" fill="%238b4513"/><rect x="6" y="4" width="3" height="1" fill="%23ffcc99"/><rect x="9" y="4" width="1" height="1" fill="%23000"/><rect x="10" y="4" width="3" height="1" fill="%23ffcc99"/><rect x="3" y="5" width="1" height="1" fill="%238b4513"/><rect x="4" y="5" width="1" height="1" fill="%23ffcc99"/><rect x="5" y="5" width="2" height="1" fill="%238b4513"/><rect x="7" y="5" width="3" height="1" fill="%23ffcc99"/><rect x="10" y="5" width="1" height="1" fill="%23000"/><rect x="11" y="5" width="3" height="1" fill="%23ffcc99"/><rect x="3" y="6" width="2" height="1" fill="%238b4513"/><rect x="5" y="6" width="4" height="1" fill="%23ffcc99"/><rect x="9" y="6" width="4" height="1" fill="%23000"/><rect x="5" y="7" width="6" height="1" fill="%23ffcc99"/><rect x="4" y="8" width="2" height="1" fill="%23e52521"/><rect x="6" y="8" width="1" height="1" fill="%232e2eb8"/><rect x="7" y="8" width="2" height="1" fill="%23e52521"/><rect x="9" y="8" width="1" height="1" fill="%232e2eb8"/><rect x="10" y="8" width="2" height="1" fill="%23e52521"/><rect x="3" y="9" width="3" height="1" fill="%23e52521"/><rect x="6" y="9" width="1" height="1" fill="%232e2eb8"/><rect x="7" y="9" width="2" height="1" fill="%23e52521"/><rect x="9" y="9" width="1" height="1" fill="%232e2eb8"/><rect x="10" y="9" width="3" height="1" fill="%23e52521"/><rect x="2" y="10" width="4" height="1" fill="%23e52521"/><rect x="6" y="10" width="4" height="1" fill="%232e2eb8"/><rect x="10" y="10" width="4" height="1" fill="%23e52521"/><rect x="4" y="11" width="1" height="1" fill="%23ffcc00"/><rect x="5" y="11" width="6" height="1" fill="%232e2eb8"/><rect x="11" y="11" width="1" height="1" fill="%23ffcc00"/><rect x="3" y="12" width="10" height="1" fill="%232e2eb8"/><rect x="3" y="13" width="3" height="1" fill="%232e2eb8"/><rect x="10" y="13" width="3" height="1" fill="%232e2eb8"/><rect x="2" y="14" width="3" height="1" fill="%238b4513"/><rect x="11" y="14" width="3" height="1" fill="%238b4513"/><rect x="1" y="15" width="4" height="1" fill="%238b4513"/><rect x="11" y="15" width="4" height="1" fill="%238b4513"/></svg>'); 
        }
        .mario.super { height: 48px; }
        .mario.face-left { transform: scaleX(-1); }
        .star-power { animation: rainbow 0.2s linear infinite; }
        @keyframes rainbow { 0% { filter: hue-rotate(0deg) saturate(2) brightness(1.2); } 50% { filter: hue-rotate(180deg) saturate(3) brightness(1.8) drop-shadow(0 0 10px #ffcc00); } 100% { filter: hue-rotate(360deg) saturate(2) brightness(1.2); } }
        .flash { animation: damageFlash 0.2s infinite; }
        @keyframes damageFlash { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

        /* GOOMBA */
        .goomba { 
            width: 32px; height: 32px; 
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 16"><rect x="6" y="2" width="4" height="1" fill="%23d8a038"/><rect x="4" y="3" width="8" height="1" fill="%23d8a038"/><rect x="3" y="4" width="10" height="1" fill="%23d8a038"/><rect x="2" y="5" width="12" height="1" fill="%23d8a038"/><rect x="1" y="6" width="3" height="1" fill="%23d8a038"/><rect x="4" y="6" width="2" height="1" fill="%23fff"/><rect x="6" y="6" width="4" height="1" fill="%23d8a038"/><rect x="10" y="6" width="2" height="1" fill="%23fff"/><rect x="12" y="6" width="3" height="1" fill="%23d8a038"/><rect x="1" y="7" width="4" height="1" fill="%23d8a038"/><rect x="5" y="7" width="1" height="1" fill="%23000"/><rect x="6" y="7" width="4" height="1" fill="%23d8a038"/><rect x="10" y="7" width="1" height="1" fill="%23000"/><rect x="11" y="7" width="4" height="1" fill="%23d8a038"/><rect x="1" y="8" width="14" height="1" fill="%23d8a038"/><rect x="1" y="9" width="14" height="1" fill="%23d8a038"/><rect x="3" y="10" width="10" height="1" fill="%23d8a038"/><rect x="6" y="11" width="4" height="1" fill="%23f8d8a0"/><rect x="5" y="12" width="6" height="1" fill="%23f8d8a0"/><rect x="4" y="13" width="8" height="1" fill="%23f8d8a0"/><rect x="3" y="14" width="3" height="1" fill="%23000"/><rect x="10" y="14" width="3" height="1" fill="%23000"/><rect x="2" y="15" width="4" height="1" fill="%23000"/><rect x="10" y="15" width="4" height="1" fill="%23000"/></svg>'); 
        }
        .goomba.squished { transform: scaleY(0.3); transition: transform 0.1s; transform-origin: bottom; }
        .goomba.kicked { transform: scaleY(-1) rotate(180deg); transition: transform 0.2s; }
        
        /* ITEMS */
        .mushroom { width: 32px; height: 32px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 16"><rect x="5" y="2" width="6" height="1" fill="%23e52521"/><rect x="3" y="3" width="10" height="1" fill="%23e52521"/><rect x="2" y="4" width="3" height="1" fill="%23fff"/><rect x="5" y="4" width="6" height="1" fill="%23e52521"/><rect x="11" y="4" width="3" height="1" fill="%23fff"/><rect x="1" y="5" width="4" height="1" fill="%23fff"/><rect x="5" y="5" width="6" height="1" fill="%23e52521"/><rect x="11" y="5" width="4" height="1" fill="%23fff"/><rect x="1" y="6" width="3" height="1" fill="%23fff"/><rect x="4" y="6" width="8" height="1" fill="%23e52521"/><rect x="12" y="6" width="3" height="1" fill="%23fff"/><rect x="1" y="7" width="2" height="1" fill="%23e52521"/><rect x="3" y="7" width="3" height="1" fill="%23fff"/><rect x="6" y="7" width="4" height="1" fill="%23e52521"/><rect x="10" y="7" width="3" height="1" fill="%23fff"/><rect x="13" y="7" width="2" height="1" fill="%23e52521"/><rect x="1" y="8" width="14" height="1" fill="%23e52521"/><rect x="2" y="9" width="12" height="1" fill="%23e52521"/><rect x="4" y="10" width="8" height="1" fill="%23ffcc99"/><rect x="4" y="11" width="8" height="1" fill="%23ffcc99"/><rect x="4" y="12" width="2" height="1" fill="%23ffcc99"/><rect x="6" y="12" width="1" height="1" fill="%23000"/><rect x="7" y="12" width="2" height="1" fill="%23ffcc99"/><rect x="9" y="12" width="1" height="1" fill="%23000"/><rect x="10" y="12" width="2" height="1" fill="%23ffcc99"/><rect x="4" y="13" width="8" height="1" fill="%23ffcc99"/></svg>'); }
        .star-item { width: 32px; height: 32px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 16"><path fill="%23ffcc00" d="M8 0l2.5 5 5 .5-4 4 1 5L8 12l-4.5 2.5 1-5-4-4 5-.5z"/><rect x="6" y="6" width="1" height="3" fill="%23000"/><rect x="9" y="6" width="1" height="3" fill="%23000"/></svg>'); }
        
        /* CÔNG CHÚA VÀ LÂU ĐÀI */
        .princess { 
            width: 75px; height: 110px; z-index: 25; display: block;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 24"><rect x="5" y="2" width="1" height="2" fill="%23ffd700"/><rect x="7" y="3" width="2" height="1" fill="%23ffd700"/><rect x="10" y="2" width="1" height="2" fill="%23ffd700"/><rect x="5" y="4" width="6" height="1" fill="%23ffd700"/><rect x="4" y="5" width="8" height="2" fill="%23ffcc00"/><rect x="3" y="7" width="10" height="4" fill="%23ffcc00"/><rect x="5" y="7" width="6" height="4" fill="%23ffcc99"/><rect x="6" y="8" width="1" height="1" fill="%23000"/><rect x="9" y="8" width="1" height="1" fill="%23000"/><rect x="5" y="11" width="6" height="4" fill="%23ff66b2"/><rect x="4" y="12" width="2" height="3" fill="%23ff3399"/><rect x="10" y="12" width="2" height="3" fill="%23ff3399"/><rect x="7" y="12" width="2" height="2" fill="%230000ff"/><rect x="3" y="14" width="1" height="2" fill="%23ffcc99"/><rect x="12" y="14" width="1" height="2" fill="%23ffcc99"/><rect x="4" y="15" width="8" height="3" fill="%23ff66b2"/><rect x="3" y="18" width="10" height="3" fill="%23ff66b2"/><rect x="2" y="21" width="12" height="3" fill="%23ff66b2"/></svg>'); 
            background-size: 100% 100%;
            background-position: bottom center;
            background-repeat: no-repeat;
            filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
        }
        .castle-bg { 
            position: absolute; width: 350px; height: 350px; z-index: 10; 
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect x="25" y="80" width="150" height="120" fill="%23f0d0b0" stroke="%23000" stroke-width="2"/><polygon points="15,80 50,20 85,80" fill="%23dc143c" stroke="%23000" stroke-width="2"/><polygon points="115,80 150,20 185,80" fill="%23dc143c" stroke="%23000" stroke-width="2"/><polygon points="65,60 100,5 135,60" fill="%23dc143c" stroke="%23000" stroke-width="2"/><rect x="30" y="80" width="40" height="120" fill="%23f0d0b0" stroke="%23000" stroke-width="2"/><rect x="130" y="80" width="40" height="120" fill="%23f0d0b0" stroke="%23000" stroke-width="2"/><rect x="75" y="60" width="50" height="140" fill="%23f0d0b0" stroke="%23000" stroke-width="2"/><path d="M 85 200 v -40 a 15 15 0 0 1 30 0 v 40" fill="%234a2e00" stroke="%23000" stroke-width="3"/><rect x="43" y="100" width="14" height="24" rx="7" fill="%2387ceeb" stroke="%23000" stroke-width="2"/><rect x="143" y="100" width="14" height="24" rx="7" fill="%2387ceeb" stroke="%23000" stroke-width="2"/><rect x="93" y="80" width="14" height="24" rx="7" fill="%2387ceeb" stroke="%23000" stroke-width="2"/><circle cx="50" cy="40" r="4" fill="%23ffd700"/><circle cx="150" cy="40" r="4" fill="%23ffd700"/><circle cx="100" cy="25" r="4" fill="%23ffd700"/></svg>');
        }

        /* ĐIỂM SỐ BAY LÊN */
        .floating-score {
            position: absolute; color: white; font-size: 14px; font-weight: bold;
            font-family: 'Press Start 2P', monospace; z-index: 100; text-shadow: 2px 2px 0 #000;
            animation: floatUp 1s ease-out forwards; pointer-events: none;
        }
        @keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-40px); } }

        /* GẠCH & ỐNG CỐNG */
        .brick { position: absolute; width: 32px; height: 32px; background-color: #c84c0c; border: 2px solid #000; box-shadow: inset -2px -2px 0px #8b4513, inset 2px 2px 0px #ffcc99; z-index: 15; }
        .q-block { position: absolute; background-color: #f89828; border: 3px solid #000; box-shadow: inset -3px -3px 0px #b85000, inset 3px 3px 0px #fcb878; z-index: 15; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-weight: 900; color: #fff; text-shadow: 1px 1px 0 #b85000, -1px -1px 0 #b85000, 1px -1px 0 #b85000, -1px 1px 0 #b85000; }
        .q-car-block { width: 64px; height: 32px; font-size: 13px; }
        .q-item-block { width: 32px; height: 32px; font-size: 18px; font-family: 'Press Start 2P', monospace; }
        .q-block.empty { background-color: #8b4513; box-shadow: none; border-color: #000; color: transparent; text-shadow: none; }
        
        .pipe { position: absolute; background-color: #00a800; border: 2px solid #000; z-index: 10; border-left: 4px solid #58f858; border-right: 4px solid #005800; border-top: none; }
        .pipe-top { position: absolute; top: -16px; left: -4px; width: calc(100% + 8px); height: 16px; background-color: #00a800; border: 2px solid #000; border-left: 4px solid #58f858; border-right: 4px solid #005800; }

        /* PHONG CẢNH */
        .scenery { position: absolute; z-index: 2; opacity: 0.9; }
        .scenery.bush { width: 90px; height: 40px; background-color: #00a800; border-radius: 50px 50px 0 0; border: 2px solid #000; border-bottom: none; }
        .scenery.bush::before { content: ''; position: absolute; top: -15px; left: 15px; width: 60px; height: 60px; background-color: #00a800; border-radius: 50%; border: 2px solid #000; border-bottom: none; z-index: -1; }
        .scenery.cloud { width: 80px; height: 30px; background-color: #fff; border-radius: 20px; }
        .scenery.cloud::before { content: ''; position: absolute; top: -15px; left: 15px; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; }
        .scenery.tree { width: 16px; height: 40px; background: #8b4513; border: 2px solid #000; }
        .scenery.tree::before { content: ''; position: absolute; top: -40px; left: -22px; width: 60px; height: 60px; background: #00a800; border-radius: 50%; border: 2px solid #000; }

        /* GIAO DIỆN CHỮ VIỆT & POPUP */
        .vi-font { font-family: 'Arial Black', Impact, Arial, sans-serif !important; }
        .vi-heading { font-size: clamp(20px, 4vw, 36px); color: #00a800; text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 4px 4px 0 #000; margin-bottom: 10px; }
        .vi-heading.red { color: #e52521; }
        .vi-sub { font-family: Arial, sans-serif; font-weight: bold; color: #fff; font-size: clamp(13px, 1.5vw, 18px); line-height: 1.5; text-shadow: 2px 2px 0 #000; }
        .blink { animation: blinker 1s linear infinite; font-family: Arial, sans-serif; font-weight: bold; color: #f89828; margin-top: 20px; cursor: pointer; text-shadow: 2px 2px 0 #000; padding: 12px; background: rgba(0,0,0,0.5); border-radius: 8px; border: 2px solid #f89828; font-size: clamp(12px, 3vw, 16px); }
        @keyframes blinker { 50% { opacity: 0; } }
        
        .instruction-box { background: rgba(0,0,0,0.8); border: 2px dashed #f89828; padding: 15px; border-radius: 12px; margin-top: 20px; font-family: Arial, sans-serif; font-size: clamp(11px, 2.5vw, 15px); color: #ddd; text-align: left; line-height: 1.6; max-width: 600px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
        .overlay-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 300; text-align: center; overflow-y: auto; padding: 15px; }
        
        #modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(0,0,0,0.85); z-index: 200; justify-content: center; align-items: center; padding: 15px; }
        #modal-box { background-color: #111; border: 4px solid #5c94fc; border-radius: 12px; padding: clamp(15px, 3vw, 25px); width: 100%; max-width: 700px; max-height: 90vh; overflow-y: auto; text-align: left; font-family: Arial, sans-serif !important; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
        .m-title { color: #f89828; font-size: clamp(18px, 3vw, 28px); font-weight: 900; margin-bottom: 12px; text-transform: uppercase; text-shadow: 2px 2px 0 #000;}
        .m-text { color: #e0e0e0; font-size: clamp(13px, 2.5vw, 16px); line-height: 1.6; margin-bottom: 20px; font-weight: bold; }
        .m-img { width: 100%; height: auto; max-height: 35vh; object-fit: cover; border: 2px solid #333; border-radius: 8px; margin-bottom: 15px; }
        .btn-close { background: #00a800; color: white; border: none; border-radius: 8px; font-family: Arial, sans-serif; font-weight: bold; padding: 12px; cursor: pointer; width: 100%; font-size: clamp(13px, 2.5vw, 18px); box-shadow: 0 5px 0 #005800; text-transform: uppercase; }
        .btn-close:active { transform: translateY(5px); box-shadow: 0 0 0 #005800; }
        
        .ranking-list { text-align: left; margin: 15px auto; font-size: clamp(12px, 2.5vw, 16px); line-height: 1.8; width: 100%; max-width: 500px; background: rgba(0,0,0,0.6); padding: 15px 20px; border-radius: 12px; border: 2px solid #f89828; list-style: none; font-family: Arial, sans-serif; color: #fff; }
        .ranking-list li { border-bottom: 1px dashed #555; padding-bottom: 5px; margin-bottom: 5px; }
        .ranking-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .rank-label { color: #f89828; font-weight: 900; margin-right: 10px; font-size: 110%; }

        /* NÚT BẤM CẢM ỨNG MOBILE */
        #mobile-controls {
            display: none; position: fixed; bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px)); left: 0; width: 100%; height: auto; z-index: 150;
            justify-content: space-between; padding: 0 20px; pointer-events: none;
        }
        .ctrl-btn {
            width: clamp(50px, 12vw, 65px); height: clamp(50px, 12vw, 65px); background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.6);
            border-radius: 50%; color: rgba(255,255,255,0.9); font-weight: bold; font-size: clamp(20px, 5vw, 28px); pointer-events: auto; 
            display: flex; justify-content: center; align-items: center; backdrop-filter: blur(4px); box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .ctrl-btn:active { background: rgba(255,255,255,0.5); transform: scale(0.95); }
        .ctrl-left { display: flex; gap: 15px; }
        
        @media (hover: none) and (pointer: coarse) { #mobile-controls { display: flex; } }