* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body {
width:100%; height:100%; overflow:hidden;
background:#0a0b14;
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
color:#0ff; user-select:none; -webkit-user-select:none;
touch-action:none;
}
#wrap {
position:relative; width:100%; height:100%;
display:flex; flex-direction:column;
background:#0a0b14;
}
/* ===== HUD ===== */
#hud {
flex:0 0 auto; padding:8px 12px;
display:flex; align-items:center; gap:10px;
background:linear-gradient(180deg,#0d1024 0%,#0a0b14 100%);
border-bottom:1px solid rgba(0,255,255,.25);
z-index:5; min-height:52px;
}
.pill {
background:rgba(0,255,255,.06);
border:1px solid rgba(0,255,255,.3);
border-radius:10px; padding:6px 10px;
font-size:13px; line-height:1.2; white-space:nowrap;
display:flex; flex-direction:column;
}
.pill b { color:#0ff; font-weight:800; font-size:15px; }
.pill span { font-size:9px; letter-spacing:1.5px; color:#48a; text-transform:uppercase; }
.spacer { flex:1 1 auto; }
.ibtn {
flex:0 0 auto; width:42px; height:42px; min-width:42px;
border-radius:10px; border:1px solid rgba(0,255,255,.35);
background:rgba(0,255,255,.07); color:#0ff;
font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:.12s;
}
.ibtn:active { transform:scale(.92); background:rgba(0,255,255,.2); }
.ibtn.off { opacity:.4; }
/* ===== Canvas ===== */
#stage {
flex:1 1 auto; position:relative; overflow:hidden;
background:#0a0b14;
}
canvas { display:block; width:100%; height:100%; }
/* ===== Overlays ===== */
.overlay {
position:absolute; inset:0; z-index:20;
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:rgba(10,11,20,.86);
padding:24px; text-align:center;
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.overlay.hide { display:none; }
.title {
font-size:clamp(34px,9vw,64px); font-weight:900; letter-spacing:4px;
color:#0ff; line-height:1; margin-bottom:6px;
text-shadow:0 0 18px #0ff, 0 0 40px #0ff8;
}
.subtitle { color:#6cf; font-size:13px; letter-spacing:3px; margin-bottom:24px; text-transform:uppercase; }
.rules {
max-width:380px; text-align:left; margin-bottom:22px;
color:#9af; font-size:13px; line-height:1.7;
}
.rules .row { display:flex; align-items:center; gap:8px; margin:2px 0; }
.rules .dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 8px currentColor; }
.rules .k {
display:inline-block; border:1px solid rgba(0,255,255,.4);
border-radius:5px; padding:1px 6px; font-size:11px; color:#0ff;
background:rgba(0,255,255,.06); font-weight:700;
}
.bigbtn {
padding:14px 36px; font-size:18px; font-weight:800; letter-spacing:2px;
color:#0a0b14; background:#0ff; border:none; border-radius:12px;
cursor:pointer; text-transform:uppercase;
box-shadow:0 0 24px #0ff, inset 0 0 12px #fff5;
transition:.15s;
}
.bigbtn:active { transform:scale(.94); }
.stat-row { display:flex; gap:18px; margin-bottom:18px; flex-wrap:wrap; justify-content:center; }
.stat { text-align:center; }
.stat .v { font-size:30px; font-weight:900; color:#0ff; }
.stat .l { font-size:10px; color:#6cf; letter-spacing:2px; text-transform:uppercase; }
/* mobile dpad hint */
.hint {
font-size:11px; color:#48a; margin-top:14px; letter-spacing:1px;
}
/* boost badge */
#boost {
position:absolute; top:8px; left:50%; transform:translateX(-50%);
background:rgba(0,140,255,.2); border:1px solid rgba(0,180,255,.6);
color:#7df; padding:3px 12px; border-radius:20px; font-size:11px;
font-weight:700; letter-spacing:1px; z-index:6; pointer-events:none;
opacity:0; transition:opacity .2s;
}
#boost.show { opacity:1; }
#wave-alert {
position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
font-size:clamp(28px,7vw,48px); font-weight:900; color:#f0f;
text-shadow:0 0 20px #f0f, 0 0 50px #f0f8;
letter-spacing:4px; z-index:8; pointer-events:none; opacity:0;
}
#wave-alert.show { animation:wavepop 1.6s ease-out; }
@keyframes wavepop {
0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
25%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
80%{opacity:1;transform:translate(-50%,-50%) scale(1);}
100%{opacity:0;transform:translate(-50%,-50%) scale(1);}
}
Score0
Welle1
Länge3
← Alle Spiele