:root{
    --bg:#0b1220;
    --ground:#173f2b;
    --accent:#e63946;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
    background: linear-gradient(180deg,var(--bg) 0%, #071023 60%);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: #fff;
}
#scene{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}
#ground{
    position:absolute;
    left:0;right:0;
    height:120px;
    bottom:0;
    background: linear-gradient(180deg,#2b6b45 0%, var(--ground) 100%);
    box-shadow: inset 0 8px 30px rgba(0,0,0,0.5);
}
.platform{
    position:absolute;
    height:14px;
    background: linear-gradient(180deg,#ffd1d1 0%, #ff9aa2 100%);
    border-radius:6px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.35);
    z-index:10;
}
#santa{
    position:absolute;
    left:40px;
    width:128px;
    height:128px;
    font-size:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:filter 120ms;
    user-select:none;
    touch-action:none;
}

#santa img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    pointer-events:none; /* unngå at bildet stjeler pointer-events fra knapper */
}

#prize{
    position:absolute;
    left:0;
    top:0;
    width:128px;
    height:128px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    transition:transform 320ms ease, opacity 320ms ease;
    z-index:35;
    pointer-events:none;
}
#prize.collected{
    transform: translateY(-20px) scale(1.6);
    opacity:0;
}
#santa.jumping{filter:drop-shadow(0 10px 6px rgba(0,0,0,0.5));}
#hud{position:absolute;left:12px;top:12px}
#instructions{background:rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;font-size:14px}

/* Simple touch controls */
#controls{
    position:fixed;
    right:12px;
    bottom:20px;
    display:flex;
    gap:8px;
    z-index:40;
}
.ctl{
    width:56px;height:56px;border-radius:12px;border:0;background:rgba(255,255,255,0.06);color:#fff;font-size:20px;
    backdrop-filter: blur(4px);
}
.ctl:active{transform:scale(0.98)}

@media(min-width:800px){
    /* hide touch controls on wide screens */
    #controls{display:none}
}

/* Small polish for narrow screens */
@media(max-width:420px){
    #instructions{display:none}
}

#snow{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    pointer-events:none;
    z-index:2; /* behind platforms (platform z-index 10) */
    overflow:hidden;
}
.flake{
    position:absolute;
    top:-10vh;
    color: #fff;
    opacity: 0.85;
    will-change: transform, opacity;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
/* fall = vertical motion, sway = horizontal oscillation */
@keyframes fall {
    0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1;}
    90% { opacity: 0.95; }
    100% { transform: translate3d(var(--dx,0), 110vh, 0) rotate(360deg); opacity: 0.85; }
}
@keyframes sway {
    0% { transform: translateX(0); }
    50% { transform: translateX(var(--sway,20px)); }
    100% { transform: translateX(0); }
}
/* combine animations via nested element or using animation properties inline */
.flake-inner{
    display:block;
    transform-origin:center;
    animation-name: sway;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
/* small visual tweaks for mobile */
@media(max-width:420px){
    .flake{ opacity:0.9 }
}
#scene[aria-busy="snowy"]{ /* optional hook if you want to toggle */ }