/* ===== SHARED GAME STYLES ===== */
.game-wrap{
  background:linear-gradient(135deg,#ffe7b8,#ffd0c4);
  border:4px solid var(--ink);
  border-radius:32px;
  padding:24px;
  box-shadow:8px 8px 0 var(--ink);
}
.game-wrap.sky{background:linear-gradient(180deg,#a3d8ff 0%,#cce9fb 60%,#d4f0c4 100%);}
.game-wrap.night{background:linear-gradient(180deg,#2c2358 0%,#5b4a99 100%);color:#fff;}
.game-wrap.grass{background:linear-gradient(135deg,#c8e2c9,#fde6a8);}
.game-wrap.lava{background:linear-gradient(135deg,#ffb27e,#ef6c5d);}

.game-status{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:16px;
}
.game-status .stat{
  background:var(--soft);
  padding:8px 18px;border-radius:999px;
  border:3px solid var(--ink);
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
}
.game-status .stat b{color:var(--coral);margin-left:6px;}

.game-stage{
  background:var(--soft);
  border:3px solid var(--ink);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  touch-action:none;
  user-select:none;
}
canvas.game-canvas{
  display:block;
  width:100%;
  height:auto;
  background:#cce9fb;
  touch-action:none;
}

.game-instructions{
  background:var(--soft);
  border:3px dashed var(--ink);
  border-radius:18px;
  padding:14px 18px;margin-bottom:18px;
  font-family:'Caveat',cursive;font-size:1.3rem;color:var(--plum);
  text-align:center;
}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.btn{
  background:var(--gold);color:var(--ink);
  border:3px solid var(--ink);
  padding:10px 20px;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:all .15s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn.primary{background:var(--coral);color:#fff;}
.btn.cool{background:var(--lavender);}
.btn.go{background:var(--leaf);color:#fff;}

.game-msg{
  text-align:center;margin-top:14px;
  font-family:'Caveat',cursive;font-size:1.8rem;color:var(--leaf);
  min-height:36px;
}

/* Mobile keypad / touch controls */
.touch-pad{
  display:none;
  margin-top:18px;
  justify-content:space-between;align-items:center;gap:20px;
  user-select:none;
}
.touch-pad .arrows{
  display:grid;
  grid-template-columns:60px 60px 60px;
  grid-template-rows:60px 60px 60px;
  gap:6px;
}
.touch-pad .arrows .pad-btn{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:14px;font-size:1.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:'Fredoka',sans-serif;color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  touch-action:none;user-select:none;
}
.touch-pad .arrows .pad-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.touch-pad .arrows .up{grid-column:2;grid-row:1;}
.touch-pad .arrows .left{grid-column:1;grid-row:2;}
.touch-pad .arrows .right{grid-column:3;grid-row:2;}
.touch-pad .arrows .down{grid-column:2;grid-row:3;}
.touch-pad .action{
  width:90px;height:90px;border-radius:50%;
  background:var(--coral);color:#fff;border:3px solid var(--ink);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;
  cursor:pointer;box-shadow:4px 4px 0 var(--ink);
  touch-action:none;user-select:none;
}
.touch-pad .action:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
@media (hover:none) and (pointer:coarse){
  .touch-pad{display:flex;}
}

/* Click-target objects */
.tap-target{
  position:absolute;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  user-select:none;
}

/* Grid game cells */
.cell-grid{display:grid;gap:6px;margin:0 auto;}
.cell-grid .cell{
  background:var(--soft);
  border:3px solid var(--ink);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:700;
  cursor:pointer;
  font-size:1.5rem;
}