@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Pacifico&family=Poppins:wght@400;600&display=swap');

body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-image: radial-gradient(circle at 50% 50%, #1e592c 0%, #0c2b14 60%, #030a04 100%);
    background-color: #0c2b14; 
    font-family: 'Poppins', sans-serif;
    color: white;
}

#game-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#css-ui-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
    display: none; 
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#css-ui-layer > * { pointer-events: auto; }

/* --- TOP RIGHT ICONS AS BUTTONS --- */
.top-icons {
    position: absolute;
    top: 25px; right: 25px;
    display: flex; gap: 15px; z-index: 10;
    transform-origin: top right; /* Ensures it shrinks toward the corner */
}

.icon-btn {
    background: linear-gradient(to bottom, #d88924, #a65d10);
    border: 2px solid #ffe8aa;
    color: white;
    width: 50px; height: 50px;
    border-radius: 12px;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    transition: transform 0.1s ease, filter 0.2s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.icon-btn:hover { filter: brightness(1.15); }
.icon-btn:active { transform: scale(0.95); }

/* Main Game Container */
.game-ui-container {
    width: 95vw; max-width: 1200px; height: 90vh; max-height: 800px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5vh;
    transform-origin: center center; /* Ensures it shrinks toward the middle */
}

/* --- LOGO STYLING --- */
.logo-container {
    text-align: center; position: relative;
    display: flex; flex-direction: column; align-items: center;
    font-size: clamp(10px, 1.5vmin, 20px); 
}

.logo-top {
    font-family: 'Pacifico', cursive;
    font-size: 8em; color: #fff9e6; margin-bottom: -0.4em; z-index: 3;
    text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111, 0px 6px 0px #111;
}

.logo-mid {
    font-family: 'Alfa Slab One', serif;
    font-size: 8em; color: #f4ead5; letter-spacing: 2px; z-index: 2; position: relative;
    text-shadow: -3px -3px 0 #111, 3px -3px 0 #111, -3px 3px 0 #111, 3px 3px 0 #111, 0px 8px 0px #111, 0px 12px 10px rgba(0,0,0,0.8);
}

.logo-bottom-container {
    display: flex; align-items: center; justify-content: center;
    width: 110%; margin-top: -0.5em; z-index: 4;
}

.logo-line {
    height: 8px; background-color: #ffd700; flex-grow: 1; border: 3px solid #111; border-radius: 4px; box-shadow: 0px 4px 0px #111;
}

.logo-bottom {
    font-family: 'Pacifico', cursive;
    font-size: 5em; color: #ffd700; margin: 0 15px;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, -3px -3px 0 #111, 3px -3px 0 #111, -3px 3px 0 #111, 3px 3px 0 #111, 0px 6px 0px #111;
}

/* --- MENU PANELS STYLING --- */
.menu-panels {
    display: flex; flex-direction: row; gap: 30px; width: 100%; max-width: 800px; justify-content: center; 
    /* Removed flex-wrap so the panels NEVER stack vertically */
}

.panel {
    background: rgba(12, 43, 20, 0.85);
    border: 3px solid #3a7a48; border-radius: 15px; padding: 25px; flex: 1; min-width: 280px;
    display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.panel h2 {
    margin: 0 0 20px 0; font-family: 'Alfa Slab One', serif; color: #f4ead5;
    font-weight: normal; letter-spacing: 1px; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); font-size: 1.8rem; text-transform: uppercase;
}

/* --- FLAT BUTTON STYLING --- */
.btn {
    background: linear-gradient(to bottom, #d88924, #a65d10);
    border: 2px solid #ffe8aa; color: white; padding: 15px 20px; margin: 10px 0; width: 100%;
    border-radius: 8px; font-size: 1.1rem; font-weight: bold; font-family: 'Poppins', sans-serif;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4); transition: transform 0.1s ease, filter 0.2s ease; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap; /* Ensures button text doesn't accidentally wrap when shrinking */
}

.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.97); }
.btn i { font-size: 1.3rem; }
.btn-online { background: linear-gradient(to bottom, #2b8cbe, #12547a); }

/* --- SETTINGS PANEL --- */
#settings-panel {
    position: absolute; z-index: 20; display: none; flex-direction: column; align-items: center;
    background: rgba(12, 43, 20, 0.95); padding: 30px 40px; border-radius: 15px; border: 3px solid #3a7a48;
    color: white; font-family: 'Poppins', sans-serif; box-shadow: 0px 10px 20px rgba(0,0,0,0.8);
}

.setting-row { display: flex; justify-content: space-between; align-items: center; width: 280px; margin: 15px 0; font-size: 18px; font-weight: bold; }
.stepper { display: flex; align-items: center; gap: 15px; }
.stepper button { background: #d88924; color: white; border: 2px solid #ffe8aa; border-radius: 8px; width: 35px; height: 35px; font-size: 22px; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.stepper button:active { filter: brightness(0.8); }

.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .3s; border-radius: 26px; border: 2px solid #777;}
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #d88924; border-color: #ffe8aa;}
input:checked + .slider:before { transform: translateX(24px); }

/* --- IN-GAME PAUSE MENU --- */
#gameplay-ui-layer {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; 
    height: 100vh;
    /* This locks the HTML layer to the exact 16:9 shape of the Phaser canvas */
    max-width: calc(100vh * (16 / 9));
    max-height: calc(100vw * (9 / 16));
    z-index: 15;
    pointer-events: none;
}

#gameplay-ui-layer > * { pointer-events: auto; }

#pause-panel {
    position: absolute; z-index: 25; display: none; flex-direction: column; align-items: center;
    background: rgba(12, 43, 20, 0.95); padding: 30px 40px; border-radius: 15px; border: 3px solid #3a7a48;
    color: white; font-family: 'Poppins', sans-serif; box-shadow: 0px 10px 20px rgba(0,0,0,0.8);
}

/* ==============================================
   MOBILE ADJUSTMENTS - GENTLER RESCALING
   ============================================== */

@media (max-width: 1000px), (max-height: 800px) {
    .game-ui-container { transform: scale(0.9); }
    .top-icons { transform: scale(0.9); }
}

@media (max-width: 800px), (max-height: 600px) {
    .game-ui-container { transform: scale(0.8); }
    .top-icons { transform: scale(0.8); }
}

@media (max-width: 650px), (max-height: 450px) {
    .game-ui-container { transform: scale(0.7); }
    .top-icons { transform: scale(0.7); }
}

@media (max-width: 450px), (max-height: 350px) {
    .game-ui-container { transform: scale(0.55); }
    .top-icons { transform: scale(0.55); }
}

/* --- IN-GAME PLAYER PROFILES --- */
.gameplay-profiles {
    position: absolute;
    bottom: 3%; 
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 6.5%; /* Reduced from 12% to 6.5% to move off the black slots */
    box-sizing: border-box;
    pointer-events: none;
}

.profile-box {
    width: 65px;
    height: 65px;
    background: #000000;
    border: 2px solid #fca855;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    box-shadow: inset 0 0 10px rgba(216, 137, 36, 0.4), 0 4px 6px rgba(0,0,0,0.6);
}

.profile-box i {
    font-size: 40px;
    color: #fca855;
    filter: drop-shadow(0px 2px 2px #000);
}

/* Mobile Rescaling for Profiles */
@media (max-width: 800px), (max-height: 600px) {
    .gameplay-profiles { padding: 0 6.5%; bottom: 3%; }
    .profile-box { width: 50px; height: 50px; }
    .profile-box i { font-size: 30px; }
}