/* =========================
   CƠ BẢN – KHÔNG LÀM BIẾN DẠNG CANVAS
   ========================= */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html {
    -ms-touch-action: none;
}

body, canvas, div {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
}

body {
    background-color: #000;
    color: #888;
    font-family: Helvetica, Verdana, Arial, sans-serif;
}

/* Canvas – để Cocos tự set width/height, KHÔNG scale bằng CSS */
canvas {
    display: block;
    background-color: transparent;
}

/* =========================
   SPLASH & THANH LOAD
   ========================= */

#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;

    background: #171717 url(./splash.85cfd.png) no-repeat center;
    background-size: 45%;
    display: none; /* Cocos sẽ bật lên khi cần */
}

/* Thanh tiến trình */
.progress-bar {
    position: absolute;
    left: 27.5%;
    top: 80%;
    width: 45%;
    height: 3px;
    padding: 2px;

    border-radius: 7px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background-color: #e91e63;
    box-shadow: 0 0 10px 1px #f9edac;
}

/* Hiệu ứng sọc chạy */
.stripes span {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, .15) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .15) 50%,
        rgba(255, 255, 255, .15) 75%, transparent 75%,
        transparent
    );
    animation: animate-stripes 1s linear infinite;
}

@keyframes animate-stripes {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 0; }
}

/* Link (nếu có) */
a:link, a:visited,
a:active, a:hover {
    color: #666;
}
/* Căn canvas vào giữa */
#GameCanvas {
    display: block;
    margin: 0 auto;
}

/* Trên màn hình rộng (PC / tablet ngang), phóng to game cho dễ nhìn */
@media (min-width: 992px) {
    #GameCanvas {
        height: 95vh;   /* gần full chiều cao cửa sổ */
        width: auto;    /* tự giữ đúng tỉ lệ 1080x2400 */
    }
}