:root{
  --bg0:#020617; --bg1:#071029; --accent1:#00e6c3; --accent2:#18a0ff; --danger:#ff5a5f; --good:#39d353; --muted:rgba(255,255,255,0.12);
  --glass: rgba(255,255,255,0.04);
}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,'Helvetica Neue',Arial; background:var(--bg0); color:#e9f6ff}

/* 3D moving background layers (pure CSS, works across browsers) */
.bg {
  position:fixed; inset:0; z-index:-2; overflow:hidden; perspective:900px;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(24,58,77,0.18), transparent),
              radial-gradient(900px 500px at 90% 80%, rgba(8,40,60,0.14), transparent),
              linear-gradient(180deg,#020617 0%, #071029 100%);
}
.bg .layer{
  position:absolute; inset:-10%; transform-origin:center; will-change:transform,opacity; mix-blend-mode:screen;
}
.bg .layer.one { background: linear-gradient(45deg, rgba(24,120,255,0.08), rgba(0,230,195,0.06)); animation: floatA 18s linear infinite; }
.bg .layer.two { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03), transparent 20%), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.02), transparent 25%); animation: floatB 24s linear infinite; }
.bg .layer.three { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 2px, transparent 2px 40px); opacity:0.4; animation: rotateSlow 60s linear infinite; }

@keyframes floatA{ 0%{transform:translateZ(-200px) rotate(0deg) scale(1.05)} 50%{transform:translateZ(-120px) rotate(3deg) scale(1.1)} 100%{transform:translateZ(-200px) rotate(0deg) scale(1.05)} }
@keyframes floatB{ 0%{transform:translateZ(-400px) translateY(0)} 50%{transform:translateZ(-380px) translateY(20px)} 100%{transform:translateZ(-400px) translateY(0)} }
@keyframes rotateSlow{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Page layout */
header, footer{display:block; width:calc(100% - 80px); max-width:1100px; margin:18px auto; padding:12px 20px; border-radius:14px; background:linear-gradient(90deg, rgba(24,40,60,0.45), rgba(10,80,110,0.25)); box-shadow:0 6px 30px rgba(0,0,0,0.6);}
header{font-weight:700; font-size:1.1rem; text-align:center}

main{display:flex; flex-direction:column; align-items:center; gap:28px; padding-bottom:80px;}

/* Start Menu Card */
#startMenu{width:100%; max-width:760px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:18px; padding:28px; box-shadow:0 12px 40px rgba(0,0,0,0.6); text-align:center;}
#titleText{font-size:2.4rem; margin:0 0 8px 0; color:var(--accent2); text-shadow:0 6px 30px rgba(24,160,255,0.12);}
#startMenu p{margin:6px 0 16px 0; color:rgba(255,255,255,0.75)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:12px; border:none; cursor:pointer; font-weight:700}
.btn--play{background:linear-gradient(90deg,var(--accent1), var(--accent2)); color:#012; box-shadow:0 8px 30px rgba(0,120,200,0.25); font-size:1.05rem;}
.btn--play:active{transform:translateY(1px)}

/* Canvas */
#gameWrap{position:relative; width:calc(100% - 80px); max-width:1100px; display:flex; justify-content:center}
canvas{display:block; width:100%; height:560px; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,0.6); background:linear-gradient(180deg,#0b0b0b,#101219);}

/* Respawn button overlay (hidden initially) */
#respawnBtn{display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:50; background:linear-gradient(90deg,#ff5a5f,#ff7b4a); color:white; border:none; padding:14px 28px; border-radius:14px; font-size:1.1rem; box-shadow:0 12px 40px rgba(0,0,0,0.6);}

/* Info / about area to make page longer */
.info{width:calc(100% - 80px); max-width:1100px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:22px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.45);}
.controls{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.chip{background:var(--glass); padding:10px 14px; border-radius:999px; color:rgba(255,255,255,0.9);}

footer{display:flex; justify-content:space-between; align-items:center; gap:12px}

/* small screens */
@media (max-width:720px){ canvas{height:420px} #titleText{font-size:1.6rem} }


.mute-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.4rem;
  cursor: pointer;
  color: white;
  backdrop-filter: blur(5px);
  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease;
}

.mute-btn:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.mute-btn.muted {
  color: #ff6b6b; /* red-ish for muted */
  transform: rotate(-20deg);
}