* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body { width:100%; height:100%; overflow:hidden; background:#050810; font-family:'Courier New',Consolas,monospace; color:#c8d4e8; user-select:none; -webkit-user-select:none; touch-action:none; } #wrap { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#0a1020 0%,#050810 70%); } /* HUD */ #hud { width:340px; max-width:92vw; display:flex; align-items:center; justify-content:space-between; padding:6px 10px; margin-bottom:6px; font-size:12px; letter-spacing:1px; text-transform:uppercase; } .hud-cell { display:flex; flex-direction:column; align-items:center; } .hud-cell .lbl { font-size:9px; color:#5a6a88; } .hud-cell .val { font-size:15px; color:#7cf0ff; font-weight:bold; text-shadow:0 0 8px rgba(124,240,255,.5); } #btnPause { width:40px; height:40px; min-width:40px; border:1px solid #2a3a58; background:rgba(20,30,50,.6); color:#7cf0ff; border-radius:8px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; } #btnPause:active { background:rgba(124,240,255,.2); } #stage { position:relative; } canvas { display:block; background:#070b15; border:1px solid #1a2540; border-radius:6px; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; } /* Overlay */ #overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(5,8,16,.88); backdrop-filter:blur(2px); border-radius:6px; padding:20px; text-align:center; z-index:5; } #overlay.hidden { display:none; } .title { font-size:30px; font-weight:bold; letter-spacing:6px; color:#7cf0ff; text-shadow:0 0 18px rgba(124,240,255,.6),0 0 4px #7cf0ff; margin-bottom:4px; } .subtitle { font-size:11px; color:#5a6a88; letter-spacing:3px; margin-bottom:18px; } .bigBtn { margin-top:14px; padding:13px 30px; border:1px solid #7cf0ff; background:rgba(124,240,255,.1); color:#7cf0ff; font-family:inherit; font-size:14px; letter-spacing:2px; cursor:pointer; border-radius:6px; text-transform:uppercase; font-weight:bold; } .bigBtn:active { background:rgba(124,240,255,.3); transform:scale(.97); } .info { font-size:11px; color:#8a98b8; line-height:1.7; max-width:300px; margin:10px 0; } .info b { color:#7cf0ff; } .result { font-size:22px; font-weight:bold; letter-spacing:3px; margin-bottom:8px; } .controls-hint { font-size:10px; color:#4a5a78; margin-top:18px; line-height:1.6; } .audio-toggle { margin-top:10px; font-size:10px; color:#5a6a88; } .audio-toggle label { cursor:pointer; } .audio-toggle input { width:12px; height:12px; vertical-align:middle; margin-right:4px; } /* Mobile swipe hint */ #swipeHint { position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:9px; color:#3a4a68; pointer-events:none; letter-spacing:1px; }
Level
1
Score
0
Moves
0
❚❚
SWIPE OR ARROW KEYS TO MOVE
← Alle Spiele