/* ── Keyframes ────────────────────────────────────────────── */

@-webkit-keyframes animLand {
    0%   { background-position: 0px 0px; }
    100% { background-position: -335px 0px; }
}
@keyframes animLand {
    0%   { background-position: 0px 0px; }
    100% { background-position: -335px 0px; }
}

@-webkit-keyframes animSky {
    0%   { background-position: 0px 100%; }
    100% { background-position: -275px 100%; }
}
@keyframes animSky {
    0%   { background-position: 0px 100%; }
    100% { background-position: -275px 100%; }
}

@-webkit-keyframes animBird {
    from { background-position: 0px 0px; }
    to   { background-position: 0px -96px; }
}
@keyframes animBird {
    from { background-position: 0px 0px; }
    to   { background-position: 0px -96px; }
}

/* animPipe injected dynamically by JS for each viewport width */

@-webkit-keyframes animCeiling {
    0%   { background-position: 0px 0px; }
    100% { background-position: -63px 0px; }
}
@keyframes animCeiling {
    0%   { background-position: 0px 0px; }
    100% { background-position: -63px 0px; }
}

/* ── Base ─────────────────────────────────────────────────── */

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    background-color: #74B8F0; /* match top-edge of sky.png */ /* match sky colour so no black bars */
}

/* ── Logo KomE - góc trên bên trái ───────────────────────── */
#logo-kome {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 9999;
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}
#logo-kome:hover { opacity: 1; }
#logo-kome img {
    height: 34px;
    width: auto;
    display: block;
    pointer-events: none;
}

/* ── Nút mute hình tròn - góc trên bên phải ──────────────── */
#mute-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, transform 0.15s;
    outline: none;
}
#mute-btn:hover  { background: rgba(0, 0, 0, 0.60); transform: scale(1.08); }
#mute-btn:active { transform: scale(0.95); }
#mute-btn.muted  { background: rgba(180, 0, 0, 0.50); }
#mute-btn svg    { width: 18px; height: 18px; display: block; }

/* ── Game container — full viewport ──────────────────────── */
#gamecontainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;          /* fills 100vh */
    overflow: hidden;
}

/* ── Game screen ──────────────────────────────────────────── */
#gamescreen {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Sky: top 80% of the screen */
#sky {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80%;
    background-image: url('assets/sky.png');
    background-repeat: repeat-x;
    background-position: 0px 100%;
    background-color: #74ACF6; /* match top-edge of sky.png */
    -webkit-animation: animSky 7s linear infinite;
    animation: animSky 7s linear infinite;
}

/* Fly area fills entire sky */
#flyarea {
    position: absolute;
    bottom: 0;
    height: 100%;           /* 100% of #sky = 80% of screen */
    width: 100%;
}

#ceiling {
    position: absolute;
    top: -16px;
    height: 16px;
    width: 100%;
    background-image: url('assets/ceiling.png');
    background-repeat: repeat-x;
    -webkit-animation: animCeiling 481ms linear infinite;
    animation: animCeiling 481ms linear infinite;
}

/* Land: bottom 20% of the screen */
#land {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background-image: url('assets/land.png');
    background-repeat: repeat-x;
    background-position: 0px 0px;
    background-color: #ded895;
    -webkit-animation: animLand 2516ms linear infinite;
    animation: animLand 2516ms linear infinite;
}

/* Big score — centered horizontally */
#bigscore {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
    font-family: 'Press Start 2P', monospace;
    font-size: 40px;
    color: #fff;
    text-shadow:
        3px  3px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0px  3px 0 #000;
    line-height: 1;
    pointer-events: none;
}
/* remove old img rule */
#bigscore img { display: none; }

/* Splash — centered horizontally */
#splash {
    position: absolute;
    opacity: 0;
    top: 75px;
    left: calc(50% - 94px);  /* 188px / 2 */
    width: 188px;
    height: 170px;
    background-image: url('assets/splash.png');
    background-repeat: no-repeat;
}

/* Scoreboard — centered horizontally */
#scoreboard {
    position: absolute;
    display: none;
    opacity: 0;
    top: 64px;
    left: calc(50% - 118px); /* 236px / 2 */
    width: 236px;
    height: 280px;
    background-image: url('assets/scoreboard.png');
    background-repeat: no-repeat;
    z-index: 1000;
}

#medal {
    position: absolute;
    opacity: 0;
    top: 114px;
    left: 32px;
    width: 44px;
    height: 44px;
}

#currentscore {
    position: absolute;
    top: 105px;
    left: 107px;
    width: 104px;
    height: 14px;
    text-align: right;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 0 #555, -1px -1px 0 #555;
    line-height: 14px;
}
#currentscore img { display: none; }

#highscore {
    position: absolute;
    top: 147px;
    left: 107px;
    width: 104px;
    height: 14px;
    text-align: right;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 0 #555, -1px -1px 0 #555;
    line-height: 14px;
}
#highscore img { display: none; }

#replay {
    position: absolute;
    opacity: 0;
    top: 205px;
    left: 61px;
    height: 115px;
    width: 70px;
    cursor: pointer;
}

/* ── Debug bounding boxes ─────────────────────────────────── */
.boundingbox {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 1px solid red;
}

/* ── Bird ─────────────────────────────────────────────────── */
#player {
    left: calc(50% - 17px); /* bird width = 34px, center = 50% - 17px */
    top: 200px;
}
.bird {
    position: absolute;
    width: 34px;
    height: 24px;
    background-image: url('assets/bird.png');
    -webkit-animation: animBird 300ms steps(4) infinite;
    animation: animBird 300ms steps(4) infinite;
}

/* ── Pipes — animation set by JS per viewport ─────────────── */
.pipe {
    position: absolute;
    left: -100px;
    width: 52px;
    height: 100%;
    z-index: 10;
    /* animation injected inline by JS */
}

.pipe_upper {
    position: absolute;
    top: 0;
    width: 52px;
    background-image: url('assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}
.pipe_upper:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 52px;
    height: 26px;
    background-image: url('assets/pipe-down.png');
}

.pipe_lower {
    position: absolute;
    bottom: 0;
    width: 52px;
    background-image: url('assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}
.pipe_lower:after {
    content: "";
    position: absolute;
    top: 0;
    width: 52px;
    height: 26px;
    background-image: url('assets/pipe-up.png');
}