* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


body {
    background: #eeeeee;
}


/* =========================
   PAGE LAYOUT
========================= */

.page-layout {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-rows:
        60px
        1fr
        60px;

    overflow: hidden;
}


/* =========================
   AD SPACE
========================= */

.ad-space {
    display: flex;

    align-items: center;
    justify-content: center;

    color: #d8d8d8;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 1px;
}


.ad-top {
    width: 100%;
}


.ad-bottom {
    width: 100%;
}


.ad-side {
    width: 100px;

    min-width: 100px;
}


/* =========================
   MIDDLE LAYOUT
========================= */

.middle-layout {
    min-width: 0;
    min-height: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    overflow: hidden;
}


/* =========================
   GAME VIEWPORT
========================= */

.game-viewport {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================
   GAME
========================= */

.game {
    position: relative;

    width: 1600px;
    height: 900px;

    flex-shrink: 0;

    overflow: hidden;

    transform-origin:
        center center;
}


/* =========================
   BACKGROUND
========================= */

.background {
    position: absolute;

    inset: 0;

    background-image:
        url("assets/backgrounds/battle-room.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================
   UI
========================= */

.game-ui {
    position: absolute;

    top: 20px;
    left: 0;

    width: 100%;

    text-align: center;

    z-index: 20;

    pointer-events: none;
}


.instruction {
    margin-top: 25px;

    font-weight: bold;

    font-size: 40px;

    text-shadow:
        2px 2px 0 white,
        -2px -2px 0 white,
        2px -2px 0 white,
        -2px 2px 0 white;
}


.music-button {
    position: absolute;

    top: 30px;
    right: 40px;

    padding:
        8px 12px;

    background: white;

    border: 3px solid black;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    pointer-events: auto;
}


.music-button:hover {
    transform:
        translateY(-2px);
}


/* =========================
   BATTLE
========================= */

.battle {
    position: absolute;

    inset: 0;

    z-index: 5;
}


/* =========================
   CHARACTERS
========================= */

.character {
    position: absolute;

    bottom: 18%;

    z-index: 10;

    will-change: transform;
}


.character img {
    display: block;

    width: auto;

    user-select: none;

    pointer-events: none;

    transform-origin:
        bottom center;
}


/* =========================
   CHARACTER WOBBLE
========================= */

.player.dancing img {
    animation:
        playerDance
        1s
        ease-in-out
        infinite;
}


.opponent.dancing img {
    animation:
        opponentDance
        1s
        ease-in-out
        infinite;
}


@keyframes playerDance {

    0% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(2deg)
            translateY(-5px);
    }

    100% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

}


@keyframes opponentDance {

    0% {
        transform:
            rotate(2deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-2deg)
            translateY(-5px);
    }

    100% {
        transform:
            rotate(2deg)
            translateY(0);
    }

}


/* =========================
   PLAYER
========================= */

.player {
    left: 13%;

    top: auto;
}


.player img {
    height: 350px;
}


/* =========================
   OPPONENT
========================= */

.opponent {
    right: 14%;

    top: auto;
}


.opponent img {
    height: 370px;
}


/* =========================
   CHARACTER NAMES
========================= */

.character-name {
    position: absolute;

    bottom:
        calc(
            8% + 395px
        );

    padding:
        5px 10px;

    background: white;

    border: 3px solid black;

    font-weight: 900;

    font-size: 24px;

    white-space: nowrap;

    z-index: 20;

    pointer-events: none;
}


.player-name {
    left: 15%;

    bottom:
        calc(
            8% + 500px
        );
    transform:
        translateX(-50%);
}


.opponent-name {
    right: 15%;
    
    bottom:
        calc(
            8% + 500px
        );

    transform:
        translateX(50%);
}


/* =========================
   ROPE AREA
========================= */

.rope-area {
    position: absolute;

    left: 18%;
    right: 18%;

    top: 61%;

    height: 100px;

    z-index: 8;

    will-change: transform;
}


/* =========================
   CENTER LINE
========================= */

.center-line {
    position: absolute;

    left: 50%;
    top: -100px;

    width: 5px;
    height: 300px;

    background: black;

    opacity: 0.65;

    transform:
        translateX(-50%);
}


/* =========================
   ROPE
========================= */

.rope {
    position: absolute;

    left: 0;
    top: 50%;

    width: 100%;
    height: 12px;

    background: #2879c9;

    border: 3px solid #06043b;

    border-radius: 10px;

    transform:
        translateY(-50%);
}


.rope-handle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 28px;
    height: 42px;

    background: #b61111;

    border: 3px solid black;

    transform:
        translate(
            -50%,
            -50%
        );
}


/* =========================
   GROUND PULL MARKINGS
========================= */

.pull-zone {
    position: absolute;

    width: 10px;
    height: 100px;

    background: black;

    z-index: 4;

    opacity: 1;
}


.left-zone {
    left: 25%;

    top: 88%;
}


.right-zone {
    left: 75%;

    top: 88%;
}


/* =========================
   START SCREEN
========================= */

.start-screen {
    position: absolute;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(0, 0, 0, 0.65);
}


.start-box {
    width: 550px;

    padding: 40px;

    text-align: center;

    background: white;

    border: 5px solid black;

    box-shadow:
        10px 10px 0 black;

    transform:
        rotate(-1deg);
}


.start-box h1 {
    margin:
        0 0 15px;

    font-size: 70px;

    line-height: 0.9;
}


.start-box p {
    margin: 20px 0;

    font-size: 20px;

    font-weight: 900;
}


#start-button {
    padding:
        15px 30px;

    background: #ffd43b;

    border: 4px solid black;

    font-size: 22px;

    font-weight: 900;

    cursor: pointer;
}


#start-button:hover {
    transform:
        translateY(-3px);
}


/* =========================
   CHARACTER SELECTION
========================= */

.character-select {
    position: absolute;

    inset: 0;

    z-index: 110;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        rgba(0, 0, 0, 0.72);
}


.character-select-box {
    width: 1050px;

    max-height: 90%;

    padding: 30px;

    overflow-y: auto;

    background: white;

    border: 5px solid black;

    box-shadow:
        10px 10px 0 black;

    transform:
        rotate(-0.5deg);
}


.character-select-box h1 {
    margin:
        0 0 25px;

    text-align: center;

    font-size: 55px;

    line-height: 0.95;
}


.character-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(120px, 1fr)
        );

    gap: 18px;
}


.character-option {
    min-width: 0;

    padding: 12px;

    background: #f4f4f4;

    border: 4px solid black;

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    transition:
        transform 0.12s ease,
        background 0.12s ease;
}


.character-option:hover {
    transform:
        translateY(-6px)
        rotate(-1deg);

    background: #ffd43b;
}


.character-option:active {
    transform:
        translateY(2px);
}


.character-option-image {
    height: 230px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    margin-bottom: 10px;
}


.character-option-image img {
    max-width: 100%;

    max-height: 220px;

    width: auto;

    display: block;

    user-select: none;

    pointer-events: none;
}


.character-option-name {
    display: block;

    min-height: 20px;

    font-size: 15px;

    color: rgb(2, 71, 176);

    line-height: 1.1;
}


.character-option-difficulty {
    display: block;

    margin-top: 7px;

    font-size: 11px;

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: 0.5px;

    color: #0a91ebe0;
}


/* =========================
   COUNTDOWN
========================= */

.countdown {
    position: absolute;

    inset: 0;

    z-index: 90;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 250px;

    font-weight: 900;

    color: rgb(185, 184, 184);

    text-shadow:
        8px 8px 0 black,
        -5px -5px 0 black;

    pointer-events: none;
}


/* =========================
   RESULT SCREEN
========================= */

.result-screen {
    position: absolute;

    inset: 0;

    z-index: 50;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(0, 0, 0, 0.15);

    pointer-events: none;
}


.result-box {
    width: 500px;

    padding: 35px;

    text-align: center;

    background: white;

    border: 5px solid black;

    box-shadow:
        10px 10px 0 black;

    transform:
        rotate(-1deg);

    pointer-events: auto;
}


.result-box h1 {
    margin:
        0 0 15px;

    font-size: 80px;
}


.result-box p {
    font-size: 20px;

    font-weight: bold;
}


.result-box button {
    margin-top: 20px;

    padding:
        14px 25px;

    border: 4px solid black;

    background: #ffd43b;

    font-size: 18px;

    font-weight: 900;

    cursor: pointer;
}


.result-box button:hover {
    transform:
        translateY(-2px);
}


/* =========================
   CONFETTI
========================= */

#confetti-canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 200;

    pointer-events: none;
}


/* =========================
   RAIN
========================= */

#rain-canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 190;

    pointer-events: none;
}


/* =========================
   HIDDEN
========================= */

.hidden {
    display: none;
}


/* =========================
   SMALLER SCREENS
========================= */

@media (max-width: 850px) {

    .page-layout {
        grid-template-rows:
            50px
            1fr
            50px;
    }


    .ad-side {
        display: none;
    }

}