*{box-sizing:border-box}body{margin:0;background:#151515;color:#fff8dc;font-family:Arial,Helvetica,sans-serif}header,footer{max-width:1260px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px}header{border-bottom:1px solid #282828}header strong{font-size:17px;letter-spacing:-.5px}a{color:inherit;text-decoration:none}header a{background:#fff8dc;color:#222;border-radius:25px;padding:10px 17px}main{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 12px 25px}nav{display:flex;gap:25px;font-size:14px}.plain{background:none;border:0;color:#fff8dc;cursor:pointer;font:inherit}#shell{position:relative;width:min(100%,405px);aspect-ratio:9/16;overflow:hidden;border-radius:14px;border:2px solid #3c3548;box-shadow:0 20px 70px #0008;background:#170d44}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;background:linear-gradient(#10092d80,#100920da);display:flex;align-items:center;justify-content:center;padding:20px}.overlay[hidden],#hud[hidden]{display:none}.panel{background:#171127e8;border:1px solid #b766ff77;border-radius:18px;padding:21px 18px;text-align:center;width:100%;max-width:330px;box-shadow:0 15px 35px #0007}.panel h1{font-size:25px;line-height:1.1;color:#fff;margin:0 0 10px;text-shadow:0 0 14px #bd3bff}.panel p{font-size:13px;line-height:1.5}.panel label{display:block;text-align:left;font-size:12px;margin:12px 0 5px}.panel input{width:100%;padding:12px;border:1px solid #9a77ba;border-radius:8px;background:#fff;color:#222;font-size:15px}.panel button,dialog button{background:#a52bfa;border:0;border-radius:22px;color:white;padding:12px 25px;font-weight:bold;cursor:pointer;margin-top:12px}.stats{display:flex;justify-content:space-around;margin:13px 0;font-size:12px}#hud{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:bold;text-shadow:0 2px 5px #000}#hud span{background:#6b06bddd;border-radius:25px;padding:9px 12px}#pause{border:0;border-radius:100%;width:35px;height:35px;color:white;background:#292039bb;cursor:pointer}#signup small{display:block;margin-top:9px;font-size:10px;color:#ddd}#signup a{color:#ffc15d}footer{font-size:12px;color:#ddd}dialog{border:1px solid #a45dff;border-radius:16px;background:#211532;color:white;max-width:400px;width:calc(100% - 36px);line-height:1.6}dialog::backdrop{background:#000b}@media(max-width:500px){header,footer{padding:14px 12px}header strong{font-size:13px}header a{font-size:12px;padding:9px}main{padding:9px 5px}#shell{width:min(100%,405px);border-radius:8px}footer{font-size:10px}}

#shell{position:relative}#menuMusic{position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(18,18,24,.8);color:#fff5d6;border:1px solid #9d86ca;border-radius:24px;padding:7px 10px;font-size:12px;cursor:pointer}#hud #music{cursor:pointer}#hud:not([hidden])~#menuMusic{display:none}#shell:has(#hud:not([hidden])) #menuMusic{display:none}

/* Animated welcome artwork and compact, readable player form */
#gameLogo{display:block;width:min(100%,265px);max-height:130px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 0 8px #d450ff88)}
.overlay{background:linear-gradient(180deg,#07061b25 0%,#0b08204a 30%,#0a0615a0 100%);align-items:flex-end;padding:14px 16px 55px}
.panel{background:#120d25d9;backdrop-filter:blur(6px);padding:14px 17px;max-width:325px}
.panel h1[hidden]{display:none}

/* Site-wide atmospheric backdrop: deliberately darkened behind the game */
body{min-height:100vh;background:#101012 url("images/KIWR-GameSiteBackground.webp") center center / cover fixed no-repeat;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;background:rgba(6,5,12,.83);pointer-events:none;z-index:-1}
header,main,footer{position:relative;z-index:1}
#countdown{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(180deg,#09041a33,#09041a80);text-align:center;text-shadow:0 5px 25px #000,0 0 30px #ba4bff}
#countdown[hidden]{display:none}
#countNum{font-size:clamp(100px,25vw,145px);line-height:1;color:#fff1ae;font-weight:900}
#countHint{font-size:25px;letter-spacing:.18em;font-weight:900;color:white}
#lives{color:#ff7d9c;white-space:nowrap;letter-spacing:1px}
#hud{gap:5px;font-size:12px}#hud span{padding:8px 9px}
@media(max-width:500px){body{background-attachment:scroll}#hud{font-size:11px}}

/* v3: website background stays behind all page content, with readable overlay */
body{background:#101012;isolation:auto}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url("images/KIWR-GameSiteBackground.webp") center center / cover no-repeat;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(6,5,12,.80);pointer-events:none}
header,main,footer{z-index:auto}
#countdown{background:linear-gradient(180deg,rgba(10,5,32,.48),rgba(10,5,32,.80));padding:20px;pointer-events:none}
.countdown-card{width:100%;max-width:320px;display:flex;align-items:center;flex-direction:column;gap:8px;background:rgba(14,7,32,.78);border:1px solid rgba(210,132,255,.6);border-radius:22px;padding:20px 12px;box-shadow:0 15px 50px #0009;backdrop-filter:blur(5px)}
#tapHands{display:block;max-width:175px;width:65%;max-height:145px;object-fit:contain;filter:drop-shadow(0 0 12px #a32eff99)}
.countdown-card h2{font-size:21px;line-height:1.15;color:#fff4d3;margin:0;text-shadow:0 2px 8px #000}
.countdown-card p{font-size:13px;line-height:1.35;color:#eee0ff;margin:0}
#countNum{font-size:105px;line-height:1.08;display:block}
#countHint{font-size:20px;display:block}
#levelBanner{position:absolute;z-index:2;top:54px;left:50%;transform:translateX(-50%);max-width:70%;max-height:76px;object-fit:contain;filter:drop-shadow(0 3px 8px #000c);pointer-events:none}
#levelBanner[hidden]{display:none}
@media(max-width:500px){body::before{background-position:30% center}#levelBanner{top:49px;max-height:65px}}