:root {
  --primary: #0ea5e9;
  --accent: #ffb020;
  --bg1: #061126;
  --bg2: #04243a;
  --glass: rgba(255,255,255,0.06);
  --text: #eef6ff;
  --muted: rgba(255,255,255,0.7);
}

body {
  margin: 0;
  overflow: hidden;
  font-family: 'Orbitron', 'Press Start 2P', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(6,17,38,0.35), rgba(4,36,58,0.2)), radial-gradient(ellipse at 10% 10%, rgba(255,255,255,0.02), transparent 20%);
  overflow: hidden;
}

#hud {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    z-index: 20;
}

#logo { display:flex; align-items:center; gap:12px; color:white; font-weight:800; font-size:18px; text-shadow: 0 2px 8px rgba(0,0,0,0.25); }
#logoIcon { font-size:36px; transform: translateY(1px); }
#logoText { font-size:20px; }

#statGroup { display:flex; gap:12px; align-items:center; }

#controls { display:flex; gap:10px; align-items:center; }
#controls button { background: rgba(255,255,255,0.95); border: none; padding:8px 10px; border-radius:10px; cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

#progressWrap { position:absolute; top:78px; left:50%; transform: translateX(-50%); width:60%; display:flex; align-items:center; gap:12px; z-index:19; pointer-events:none; }
#progressBar { flex:1; background: rgba(255,255,255,0.12); height: 12px; border-radius: 999px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.08) inset; }
#progressFill { height:100%; width:0%; background: linear-gradient(90deg,#ffd54f,#ff7043); transition: width 420ms cubic-bezier(.2,.9,.2,1); }
#progressText { color:white; font-size:14px; opacity:0.95; }

/* Pulse animation for score */
.pulse { animation: pulse 680ms ease; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08);} 100% { transform: scale(1); } }

/* subtle moving stripes/clouds background */
#game-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(120deg, rgba(255,255,255,0.03) 0 20%, transparent 20% 40%, rgba(255,255,255,0.03) 40% 60%);
    background-size: 1000px 1000px;
    z-index: 0;
    pointer-events: none;
    animation: moveBG 22s linear infinite;
}
@keyframes moveBG { from { background-position: 0 0; } to { background-position: 1000px 0; } }

/* ensure canvas is behind UI */
#gameCanvas { position:absolute; inset:0; z-index:1; }

.stat-box {
    background: var(--glass);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 25px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.3);
    font-weight: bold;.stat-box {
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.1)
    );
    backdrop-filter: blur(15px);
    color: white;
    padding: 14px 28px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.4);
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.overlay h1 {
    font-size: 64px;
    animation: pop 0.6s ease;
}
@keyframes pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

#typing-container {
    position: absolute;
    bottom: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
}

#typing-box {
    background: white;
    padding: 15px 45px;
    border-radius: 50px;
    font-size: 38px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    letter-spacing: 2px;
}

#typedWord { color: #2ecc71; font-weight: bold; }
#pendingWord { color: #bdc3c7; }

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    color: white;
    text-align: center;
}

#startBtn {
    padding: 15px 40px;
    font-size: 20px;
    background: var(--accent);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s;
}

#startBtn:hover { transform: scale(1.1); }

#musicBtn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 15;
    background: rgba(255,255,255,0.9);
    border: none;
    padding: 8px 12px;
    font-size: 22px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
#musicBtn:hover { transform: scale(1.05); }
/* Parallax clouds */
.cloud {
    position: absolute;
    top: 80px;
    width: 160px;
    height: 60px;
    background: rgba(255,255,255,0.85);
    border-radius: 50px;
    filter: blur(1px);
    animation: moveClouds linear infinite;
}
.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    width: 80px;
    height: 80px;
    top: -30px;
    left: 20px;
    border-radius: 50%;
}
.cloud::after {
    width: 100px;
    height: 100px;
    left: 60px;
    top: -45px;
}

@keyframes moveClouds {
    from { transform: translateX(-200px); }
    to { transform: translateX(120vw); }
}

/* Trees (parallax background layer) */
#treeLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.tree { position: absolute; bottom: 64px; left: 0; transform-origin: center bottom; transition: transform 220ms linear, opacity 360ms; pointer-events: none; }
.tree .foliage { width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 64px solid #0b6a2b; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); }
.tree .trunk { width: 10px; height: 22px; background: #6b3b1a; margin: -6px auto 0; border-radius: 2px; }
.tree--small .foliage { border-left-width: 18px; border-right-width: 18px; border-bottom-width: 44px; }
.tree { opacity: 0.95; }
/* gentle foliage sway (uses child element so outer transform isn't overwritten) */
.tree.sway .foliage { transform-origin: center bottom; animation: foliageSway 5s ease-in-out infinite; }
@keyframes foliageSway { 0% { transform: rotate(-1.8deg) translateX(-1px) } 50% { transform: rotate(1.8deg) translateX(1px) } 100% { transform: rotate(-1.8deg) translateX(-1px) } }
@media (max-width: 600px) {
  .tree .foliage { border-left-width: 20px; border-right-width: 20px; border-bottom-width: 48px; }
  #treeLayer { bottom: 36px; }
}

/* Lives HUD */
.lives { display:flex; align-items:center; gap:8px; }
.lives .heart { font-size:16px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)); }
#lifeColumn { position: absolute; left: 12px; top: 72px; bottom: 24px; width: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-radius: 12px; border: 1px solid rgba(255,255,255,0.03); box-shadow: inset 0 6px 20px rgba(0,0,0,0.4); z-index: 28; pointer-events:none; display:flex; align-items:flex-start; justify-content:center; }
#lifeFill { width:10px; height:100%; margin:6px 0; background: linear-gradient(180deg,#ff6b6b,#ffb3b3); border-radius:8px; transition: height 420ms ease, opacity 320ms; }

/* Mountain canvas helper (mountain shapes are drawn on the canvas but we keep a layer element for layout) */
#mountainLayer { position:absolute; inset:0; z-index:4; pointer-events:none; }
#foreground { position:absolute; inset:0; z-index:36; pointer-events:none; }

/* Platform log visuals: small branch and rounded log */
.platform-log { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }

/* subtle foreground shrubs */
.shrub { position:absolute; bottom:20px; left:0; width:120px; height:60px; background: linear-gradient(180deg,#2c8b3a,#1f6b2b); border-radius:60px; box-shadow: 0 12px 38px rgba(0,0,0,0.45); opacity:0.95; }