* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }

#sky {
    position: fixed; inset: 0; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(180deg, #5eb8f5 0%, #a8ddff 55%, #dff1e2 100%);
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    color: #0e2233;
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Felső sáv: logó + belépő (rejtett bejárat) */
#topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
}
#topbar .logo { font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.25); letter-spacing: .3px; }
.enter-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.9); color: #1366c4; font-weight: 700; font-size: 14px;
    text-decoration: none; padding: 8px 15px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: background .3s, color .3s;
}
.enter-btn.alert { background: #ffd23f; color: #5a4300; }
.enter-btn .badge {
    min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px;
    border-radius: 9px; font-size: 10px; font-weight: 800; color: #fff; text-align: center;
}
.enter-btn .badge.orange { background: #f59e0b; }
.enter-btn .badge.blue   { background: #3b82f6; }

/* HUD: életek + pont */
#hud {
    position: absolute; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; padding: 2px 16px;
    pointer-events: none; font-weight: 800;
}
#lives { font-size: 20px; letter-spacing: 1px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
#score-wrap { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); font-size: 16px; }

/* Joystick */
#joystick {
    position: absolute; right: 22px; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 4;
    width: 128px; height: 128px; border-radius: 50%;
    background: rgba(255,255,255,.26); border: 2px solid rgba(255,255,255,.55);
    box-shadow: 0 6px 20px rgba(0,0,0,.18); touch-action: none;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#stick {
    position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
    border-radius: 50%; background: rgba(255,255,255,.92);
    box-shadow: 0 4px 14px rgba(0,0,0,.28); pointer-events: none;
}

/* Fedőréteg (start / game over) */
#overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,24,40,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#overlay.hidden { display: none; }
.ov-card {
    width: 100%; max-width: 360px; text-align: center;
    background: #fff; border-radius: 22px; padding: 30px 26px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: pop .35s cubic-bezier(.2,.8,.2,1.2);
}
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.ov-card h1 { margin: 0 0 10px; font-size: 26px; }
.ov-card p { margin: 0 0 20px; color: #4a5a68; font-size: 15px; line-height: 1.6; }
.ov-btn {
    background: linear-gradient(135deg, #3b82f6, #2ad2a0); color: #05121a;
    border: none; border-radius: 14px; padding: 15px 30px; font-size: 17px; font-weight: 800; cursor: pointer;
    box-shadow: 0 12px 28px rgba(59,130,246,.4); transition: filter .2s, transform .1s;
}
.ov-btn:hover { filter: brightness(1.07); }
.ov-btn:active { transform: translateY(1px) scale(.99); }
.ov-hint { margin-top: 16px; font-size: 13px; }
.ov-hint a { color: #1366c4; text-decoration: none; font-weight: 700; }

@media (hover: hover) { #joystick { opacity: .6; } #joystick:hover { opacity: 1; } }