html, body { margin:0; height:100%; background:#0a0e18; overflow:hidden; touch-action:none; -webkit-tap-highlight-color:transparent; font-family: system-ui, Arial, sans-serif; }
  #wrap { position:relative; width:100vw; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; }
  canvas { display:block; background:#0f1526; max-width:100%; max-height:100%; touch-action:none; }
  .home-btn { position:absolute; top:16px; left:16px; z-index:20; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08); border:2px solid #4da6ff; color:#e7ecf7; font-size:20px; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.4); }
  .home-btn:hover { filter:brightness(1.25); }
  #shuffleBtn { position:absolute; top:16px; right:16px; z-index:20; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08); border:2px solid #4da6ff; color:#e7ecf7; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.4); }
  #shuffleBtn:hover { filter:brightness(1.25); }
  #overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#e7ecf7; background:rgba(10,14,24,0.88); z-index:30; }
  #overlay.hidden { display:none; }
  #overlay h1 { font-size:28px; margin:0 0 10px; color:#4da6ff; }
  #overlay p { max-width:340px; color:#93a0bf; font-size:15px; line-height:1.5; margin:0 0 20px; }
  #overlay .final { font-size:20px; color:#a6ffb3; margin-bottom:16px; font-weight:700; }
  button { font-size:20px; padding:12px 34px; border-radius:40px; border:none; background:linear-gradient(135deg,#4da6ff,#2f6fe0); color:#04102a; font-weight:800; cursor:pointer; box-shadow:0 6px 18px -6px rgba(77,166,255,0.7); }