/* ===== Crypt Sweeper — page‑specific stylesheet ===== */

/* container & headings override */
.container{
  position:relative;
  max-width:1200px;
  margin:40px auto;
  padding:30px;
  background:rgba(10,10,10,0.85);
  border:2px solid #00cccc;
  border-radius:15px;
  box-shadow:0 0 30px rgba(0,255,255,.3);
  text-align:center;
  z-index:2;
}

h2{
  font-size:2em;
  color:#e0e0e0;
  margin:10px 0 20px;
  text-shadow:0 0 5px #00cccc;
}

/* ===== How‑to panel ===== */
.game-info{
  max-width:400px;
  margin:0 auto 30px;
  background:rgba(15,15,15,0.9);
  border:1px solid #00cccc;
  border-radius:8px;
  padding:12px;
  text-align:center;
  box-shadow:0 0 10px rgba(0,255,255,0.2);
}
.game-info h3{
  margin:0 0 6px;
  color:#00cccc;
  font-size:1.3em;
}
.game-info p{
  margin:0 0 10px;
  color:#a0a0a0;
  font-style:italic;
  font-size:0.95em;
}
.game-info ul{
  list-style:disc inside;
  margin:0; padding:0;
  font-size:0.9em; line-height:1.3;
}
.game-info li{margin-bottom:4px}

/* ===== game pane ===== */
#cryptsweeper-container{
  position:relative;
  background:rgba(20,20,20,0.9);
  padding:20px;
  border:2px solid #00cccc;
  border-radius:10px;
  box-shadow:0 0 20px rgba(0,255,255,0.4);
  margin:0 auto 40px;
  width:fit-content;
}
#controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
#controls input{
  font-family:inherit;
  font-size:1em;
  padding:6px 10px;
  border:1px solid #444;
  border-radius:4px;
  background:#111;
  color:#e0e0e0;
  width:180px;
}
#controls input::placeholder{color:#555}
#controls button{
  font-family:inherit;
  font-size:1em;
  padding:6px 14px;
  border:1px solid #444;
  border-radius:4px;
  background:#222;
  color:#e0e0e0;
  cursor:pointer;
  transition:background .2s,box-shadow .2s;
}
#controls button:hover:not(:disabled){
  background:#00cccc;
  color:#000;
  box-shadow:0 0 10px #00cccc;
}
#controls button:disabled{opacity:.4;cursor:not-allowed}
#timer{font-weight:bold;font-size:1.1em;color:#00ff99}

#game-canvas{
  display:block;
  margin:0 auto;
  border:4px double #00cccc;
  border-radius:6px;
  box-shadow:inset 0 0 10px rgba(0,255,255,0.4);
}

/* decorative urns */
.trap-img,
.exploded-img{
  position:absolute;
  top:30%;
  width:300px;
  height:auto;
  transform:translateY(-50%);
  pointer-events:none;
}
.trap-img{left:-350px}
.exploded-img{right:-350px}

/* hide urns on mobile */
@media(max-width:900px){
  .trap-img,.exploded-img{display:none}
}

/* ===== leaderboard ===== */
#leaderboard{margin-top:24px}
#scores-table{
  width:100%;
  max-width:400px;
  margin:0 auto;
  border-collapse:collapse;
  background:rgba(15,15,15,0.9);
  border:1px solid #444;
  box-shadow:0 0 10px rgba(0,255,255,0.2);
}
#scores-table th,
#scores-table td{
  padding:8px 12px;
  border:1px solid #00cccc;
}
#scores-table th{
  background:#00cccc;
  color:#000;
}

/* mobile fallback – hide entire game if viewport too narrow */
@media(max-width:600px){
  #cryptsweeper-container{display:none}
}