:root{
  --bg1:#9bddff;
  --bg2:#b486f8;
  --bg3:#ff9ace;
  --glass:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.18);
  --text:#0b1a2b;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
  color:var(--text);
}

body{
  min-height:100vh;
  background:linear-gradient(120deg,var(--bg1),var(--bg2),var(--bg3));
  background-size:600% 600%;
  animation:bg 20s linear infinite;
  padding-top:90px;
}
@keyframes bg{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Header */
.app-header{
  position:fixed;
  top:12px; left:12px; right:12px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-radius:16px;
  background:var(--glass);
  backdrop-filter:blur(18px);
  border:1px solid var(--border);
  z-index:1000;
}

.nav-links a{
  margin:0 6px;
  text-decoration:none;
  font-weight:600;
  color:#fff;
}

/* Layout */
.container{
  max-width:1100px;
  margin:auto;
  display:grid;
  gap:20px;
}

/* Card */
.card{
  padding:16px;
  border-radius:18px;
  background:var(--glass);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.center{text-align:center}

/* Buttons */
.btn{
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  background:rgba(255,255,255,.25);
}
.btn.small{padding:6px 10px}
.btn.neon{
  box-shadow:0 0 20px rgba(125,42,232,.4);
}

/* Caro */
#caro-board{
  margin:auto;
  border-collapse:collapse;
}
#caro-board td{
  width:80px;
  height:80px;
  font-size:32px;
  text-align:center;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.15);
  border-radius:8px;
}

/* Pacman modal */
#secretGame{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  align-items:center;
  justify-content:center;
}
#secretGame .panel{
  width:90%;
  max-width:640px;
  background:var(--glass);
  backdrop-filter:blur(24px);
  padding:12px;
  border-radius:16px;
}

/* Stars */
#stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
/* ===== Geometry Dash effects ===== */
@keyframes shake {
  0% { transform: translate(0,0); }
  25% { transform: translate(6px,-6px); }
  50% { transform: translate(-6px,6px); }
  75% { transform: translate(6px,6px); }
  100% { transform: translate(0,0); }
}

.shake {
  animation: shake 0.35s;
}