/* Grid Layout */
.grid-wrapper { flex:1; display:flex; align-items:center; justify-content:center; padding:4px; min-height:0; overflow:hidden; }
.grid-container {
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr);
  gap:var(--cell-gap); width:var(--grid-size); height:calc(var(--grid-size) * 5 / 4);
  max-width:100%; max-height:100%; aspect-ratio:4/5;
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="24">🔨</text></svg>') 16 16, pointer;
}

/* Cell Base */
.cell {
  position:relative; border-radius:50%;
  background:radial-gradient(circle, #2a4a2a 40%, #1a3a1a 100%);
  border:1px solid #3a5a3a; cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cell::before {
  content:''; position:absolute; inset:15%; border-radius:50%;
  background:radial-gradient(circle, #1a2a15 0%, #0d1a0a 100%); z-index:0;
}
.cell:active:not(.frozen) { transform:scale(0.95); }
.cell:hover:not(.frozen) { border-color:#4a7a4a; }

/* Enemy in Cell */
.cell .enemy {
  position:absolute; z-index:2;
  font-size:clamp(18px, calc(var(--grid-size) / 14), 32px);
  transition:transform 0.1s ease;
  animation:enemyPopUp 0.15s cubic-bezier(0.34,1.56,0.64,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); line-height:1;
}
.cell .enemy.hiding { animation:enemyPopDown 0.15s ease-in forwards; }
.cell .enemy.hit { animation:enemyHit 0.2s ease-out forwards; }

/* Enemy Types */
.cell.has-enemy { border-color:#444466; }
.cell.enemy-fast .enemy { animation:enemyPopUp 0.1s cubic-bezier(0.34,1.56,0.64,1); }
.cell.enemy-fast::after { content:'💨'; position:absolute; font-size:10px; bottom:2px; right:2px; z-index:3; opacity:0.7; }
.cell.enemy-golden { border-color:var(--neon-gold-dim) !important; box-shadow:inset 0 0 15px rgba(255,215,0,0.15), 0 0 10px rgba(255,215,0,0.1); }
.cell.enemy-golden .enemy { animation:enemyPopUp 0.15s cubic-bezier(0.34,1.56,0.64,1), goldenShimmer 0.6s ease-in-out infinite; }
.cell.enemy-armor { border-color:#6688aa !important; }
.cell.enemy-armor::after { content:''; position:absolute; inset:10%; border:2px solid rgba(100,150,200,0.4); border-radius:50%; z-index:3; pointer-events:none; }
.cell.enemy-armor.cracked::after { border-style:dashed; border-color:rgba(100,150,200,0.2); animation:crackShake 0.3s ease; }
.cell.enemy-mini .enemy { font-size:clamp(12px, calc(var(--grid-size) / 22), 20px); }
.cell.enemy-giant { border-color:#885533 !important; }
.cell.enemy-giant .enemy { font-size:clamp(22px, calc(var(--grid-size) / 11), 38px); }
.cell.enemy-giant .hp-pips { position:absolute; bottom:2px; display:flex; gap:2px; z-index:4; }
.cell.enemy-giant .hp-pip { width:6px; height:6px; border-radius:50%; background:var(--neon-pink); transition:all 0.15s ease; }
.cell.enemy-giant .hp-pip.depleted { background:var(--text-dim); opacity:0.4; }
.cell.enemy-bomb { border-color:var(--neon-red) !important; }
.cell.enemy-bomb::after { content:'⚠'; position:absolute; font-size:8px; top:1px; right:3px; z-index:3; color:var(--neon-red); animation:warningBlink 0.4s ease-in-out 2; }
.cell.enemy-healer { border-color:#44cc88 !important; }
.cell.enemy-healer .enemy { animation:enemyPopUp 0.15s cubic-bezier(0.34,1.56,0.64,1), healPulse 1s ease-in-out infinite; }
.cell.enemy-decoy { border-color:#9966cc !important; }
.cell.enemy-ice { border-color:#88ccff !important; box-shadow:inset 0 0 10px rgba(136,204,255,0.1); }
.cell.enemy-split { border-color:var(--neon-red) !important; }
.cell.enemy-shadow .enemy { opacity:0.35; animation:enemyPopUp 0.15s cubic-bezier(0.34,1.56,0.64,1), shadowFlicker 1.5s ease-in-out infinite; }
.cell.enemy-crown { border-color:var(--neon-gold) !important; box-shadow:inset 0 0 20px rgba(255,215,0,0.15), 0 0 15px rgba(255,215,0,0.15); }
.cell.enemy-magnet { border-color:var(--neon-purple) !important; }
.cell.enemy-magnet::after { content:''; position:absolute; inset:-4px; border:1px solid var(--neon-purple); border-radius:50%; opacity:0.3; animation:magnetPulse 0.8s ease-in-out infinite; z-index:1; pointer-events:none; }

/* Frozen */
.cell.frozen { pointer-events:none; border-color:#88ccff !important; background:radial-gradient(circle, #1a2a40 40%, #0d1a2a 100%); }
.cell.frozen::before { background:radial-gradient(circle, #0a1520 0%, #060d18 100%); }
.cell.frozen::after { content:'❄'; position:absolute; font-size:14px; z-index:5; opacity:0.6; animation:frozenSpin 2s linear infinite; }

/* Hit Effect */
.cell .hit-effect { position:absolute; inset:0; border-radius:50%; z-index:10; pointer-events:none; }
.cell .hit-effect.hit-normal { background:radial-gradient(circle, rgba(0,255,136,0.4) 0%, transparent 70%); animation:hitFlash 0.2s ease-out forwards; }
.cell .hit-effect.hit-golden { background:radial-gradient(circle, rgba(255,215,0,0.5) 0%, transparent 70%); animation:hitFlash 0.3s ease-out forwards; }
.cell .hit-effect.hit-bomb { background:radial-gradient(circle, rgba(255,23,68,0.5) 0%, transparent 70%); animation:hitFlash 0.4s ease-out forwards; }
.cell .hit-effect.hit-miss { background:radial-gradient(circle, rgba(136,136,170,0.2) 0%, transparent 70%); animation:hitFlash 0.15s ease-out forwards; }

/* Locked Row/Col */
.cell.row-locked,.cell.col-locked { pointer-events:none; opacity:0.3; border-color:#ff174466 !important; }
.cell.row-locked::after,.cell.col-locked::after { content:'🔒'; font-size:10px; position:absolute; z-index:5; opacity:0.6; }