/* ===== Crypt Invaders — page‑specific stylesheet v1.7 ===== */

/* -------------- container -------------- */
.game-shell{
  max-width:1200px;
  margin:0 auto;
  position:relative;
}

/* -------------- decorative side sprites -------------- */
.enemy-left,
.enemy-right{
  position:absolute;
  top:40%;
  width:300px;
  height:auto;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.9;
}
.enemy-left { left:50px; }
.enemy-right{ right:50px; }

@media(max-width:900px){
  .enemy-left,
  .enemy-right{ display:none; }
}

/* -------------- how‑to panel -------------- */
.game-info{
  max-width:440px;
  margin:20px auto;
  background:rgba(15,15,15,.9);
  border:1px solid #00cccc;
  border-radius:8px;
  padding:14px;
  text-align:center;
  box-shadow:0 0 10px rgba(0,214,214,.25);
}
.game-info h3{margin:0 0 6px;color:#00cccc;font-size:1.3rem;}
.game-info ul{list-style:disc inside;margin:0;padding:0;font-size:.95rem;line-height:1.3;}
.game-info li{margin-bottom:4px;}

/* -------------- name + start bar -------------- */
#ui-bar{
  display:flex;justify-content:center;align-items:center;gap:12px;margin:20px 0;
}
#ui-bar input{
  font:inherit;font-size:1rem;padding:6px 12px;width:200px;border:1px solid #444;
  border-radius:4px;background:#111;color:#e6e6e6;
}
#ui-bar input::placeholder{color:#555;}
#ui-bar button{
  font:inherit;font-size:.9rem;font-weight:700;padding:8px 22px;border:1px solid #00cccc;
  border-radius:4px;background:#013535;color:#00cccc;cursor:pointer;transition:background .15s,color .15s;
}
#ui-bar button:hover:not(:disabled){background:#00cccc;color:#000;}
#ui-bar button:disabled{opacity:.4;cursor:not-allowed;}

/* -------------- game canvas -------------- */
#game-canvas{
  display:block;margin:0 auto;background:url('/images/cryptinvaders/background.png') center/cover no-repeat;
  border:4px double #00cccc;border-radius:6px;box-shadow:inset 0 0 10px rgba(0,255,255,.35);
}

/* -------------- leaderboard -------------- */
#lbTable{
  width:100%;max-width:360px;margin:18px auto 40px;border-collapse:collapse;font-size:.9rem;
  background:rgba(17,17,17,.92);border:1px solid #00cccc;
}
#lbTable th,#lbTable td{padding:8px 10px;border:1px solid #013535;}
#lbTable th{background:#00cccc;color:#000;font-weight:700;}
#lbTable tr:nth-child(even){background:rgba(255,255,255,.04);}

/* -------------- mobile touch controls -------------- */
.touch-pad{display:none;margin:18px auto 0;max-width:320px;gap:8px;text-align:center;}
.touch-pad button{
  width:90px;height:90px;font:700 1.4rem "Cinzel",serif;border:2px solid #00cccc;border-radius:10px;
  background:#013535aa;color:#00cccc;backdrop-filter:blur(2px);
}
@media(max-width:900px){ .touch-pad{display:flex;justify-content:center;} }

/* -------------- mobile tweaks -------------- */
@media(max-width:600px){
  .game-shell{padding:0 10px;}
  #game-canvas{width:100%;height:auto;}
}