html, body {
    height: 100%; /* Ensures that the body takes the full viewport height */
    margin: 0; /* Removes default margin */
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Stacks children elements vertically */
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

#content {
    color: #555;
    height: 30%;
}

#gravel, #output {
    color: #555;
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    width: auto;
    height: auto;
    font-size: 4em;
    font-weight: bold;
}

#countdown {
    color: #555;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin: 1em;
}

/* Rezerwacja wysokości tickera, by zmienna długość nagłówka nie przesuwała
   układu (a tym samym podpowiedzi startu). */
#output {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    box-sizing: border-box;
}

#textureLink {
    color: #555;
    text-decoration: none;
}

/* ── Górny wiersz: HiScore + kraj + data ─────────────────────────────────── */
#hiscore-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 6px 12px;
    text-align: center;
    color: #555;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Podpowiedź startu gry ────────────────────────────────────────────────── */
#start-hint {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 5;
    text-align: center;
    color: #999;
    font-size: 1em;
    pointer-events: none;
    animation: hintPulse 1.6s ease-in-out infinite;
}
#start-hint b { color: #555; }
@keyframes hintPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ── Nakładka gry (Phaser) ────────────────────────────────────────────────── */
#game-root {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    background: #fff;
}
#game-root canvas { display: block; }

/* W trybie gry chowamy chrome strony i pokazujemy nakładkę. */
body.game-playing #content,
body.game-playing #countdown,
body.game-playing #output,
body.game-playing #gravel,
body.game-playing #hiscore-bar,
body.game-playing #mode-menu,
body.game-playing #start-hint {
    display: none;
}
body.game-playing #game-root { display: block; }

/* Canvas gry: blokuj gesty przeglądarki (scroll/zoom) na dotyku. */
#game-root canvas { touch-action: none; }

/* ── Menu wyboru trybu (napisy nad podpowiedzią startu) ───────────────────── */
#mode-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 52px;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    padding: 0 12px;
    box-sizing: border-box;
}
.mode-label {
    font-family: inherit;
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 2px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 0.15s, border-color 0.15s;
}
.mode-label:hover,
.mode-label:focus-visible { color: #cc3333; border-bottom-color: #cc3333; outline: none; }
.mode-label.soon {
    color: #bbb;
    cursor: default;
    font-weight: normal;
}
.mode-label.soon:hover { color: #bbb; border-bottom-color: transparent; }
.soon-tag {
    display: inline-block;
    margin-left: 5px;
    font-size: 0.6em;
    font-weight: normal;
    color: #cc3333;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Sterowanie dotykowe (tylko urządzenia dotykowe, tylko w grze) ─────────── */
#touch-controls { display: none; }
body.game-playing.touch #touch-controls {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;       /* nad #game-root (1000) */
    pointer-events: none; /* kliki łapią tylko przyciski */
}
#touch-controls button {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    color: #cc3333;
    background: rgba(204, 51, 51, 0.07);
    border: 1px solid rgba(204, 51, 51, 0.35);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#touch-controls button.pressed { background: rgba(204, 51, 51, 0.22); }
#touch-left  { left: 16px;  bottom: calc(20px + env(safe-area-inset-bottom)); }
#touch-right { left: 92px;  bottom: calc(20px + env(safe-area-inset-bottom)); }
#touch-fire  { right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 80px; height: 80px; font-size: 30px; }
#touch-exit  {
    right: 12px; top: calc(8px + env(safe-area-inset-top));
    width: 44px; height: 44px; font-size: 20px;
    border-radius: 8px;
}