@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --bg: #f7f3e9;
    --dino: #535353;
    --accent: #e05c2a;
}

* { box-sizing: border-box; margin: 0; padding: 0; touch-action: none; user-select: none; }

body {
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Press Start 2P', cursive;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 95vw;
    max-width: 800px;
    min-height: 200px; 
    background: var(--bg);
    border: 4px solid var(--dino);
    image-rendering: pixelated;
    transition: background 1s, border-color 1s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#game-container.jungle { background: #aed581; --dino: #2e7d32; }
#game-container.city { background: #cfd8dc; --dino: #37474f; }
#game-container.night { background: #263238; border-color: #eceff1; }
#game-container.night h1, #game-container.night h2, #game-container.night #score-box { color: #eceff1; }

canvas { width: 100%; height: 200px; display: block; }

.overlay {
    position: absolute;
    inset: 0;
    background: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding: 15px;
}

#menu-main {
    position: relative;
    padding: 30px 10px;
}

#nick-input, #room-input {
    background: #fff;
    border: 2px solid var(--dino);
    padding: 8px;
    font-family: 'Press Start 2P';
    font-size: 8px;
    margin-bottom: 15px;
    outline: none;
    width: 220px;
    text-align: center;
}

.hidden { display: none !important; }

h1 { font-size: 14px; margin-bottom: 15px; color: var(--dino); text-align: center; }
h2 { font-size: 10px; margin-bottom: 10px; color: var(--accent); }

.btn-group { display: flex; flex-direction: column; gap: 8px; width: 220px; }

button {
    background: var(--dino);
    color: white;
    border: none;
    padding: 10px;
    font-family: 'Press Start 2P';
    font-size: 8px;
    cursor: pointer;
}

button:active { transform: scale(0.96); }

#game-stats {
    position: absolute;
    top: 8px; right: 12px;
    font-size: 8px;
    color: var(--dino);
    z-index: 10;
}

#biome-tag { font-size: 6px; margin-bottom: 4px; color: var(--accent); text-align: right; }

.scroll-box {
    font-size: 7px;
    line-height: 2;
    max-height: 100px;
    overflow-y: auto;
    width: 100%;
    text-align: center;
}

@media (orientation: portrait) {
    #game-container { min-height: 250px; }
}