/* ── New battery component CSS ── */
/* BATTERY LIVES -- left of power bulb strip */
.battery-housing {
  width: auto;
  min-width: 60px;
  max-width: 120px;
  position: relative;

  /* Flush-mounted panel: matches housing metal exactly */
  background:
    repeating-linear-gradient(
      90deg,
      transparent, transparent 2px,
      rgba(255,255,255,0.008) 2px,
      rgba(255,255,255,0.008) 4px
    ),
    linear-gradient(180deg, #282a22 0%, #222418 50%, #1c1e14 100%);

  /* Recessed into housing — inset shadow makes it look countersunk */
  border-radius: 4px;
  border-top: 1px solid #1a1c12;
  border-left: 1px solid #1e2016;
  border-right: 1px solid #2a2c22;
  border-bottom: 1px solid #2e3026;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.9),
    inset 0 1px 3px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.04);

  padding: 3px 5px 3px;
}


.battery-bay {
  position: relative;
  border-radius: 4px;
  padding: 4px 4px 5px;
  background: linear-gradient(180deg, #0c0e09 0%, #111309 60%, #0e1008 100%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.9), inset 0 1px 3px rgba(0,0,0,0.7), inset -1px 0 2px rgba(0,0,0,0.5), inset 1px 0 0 rgba(255,255,255,0.025);
  border: 1px solid #0a0b07;
}

.cells {
  display: flex;
  gap: clamp(2px, 0.5vw, 5px);
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.cell {
  position: relative;
  width: clamp(18px, calc(2.57vw + 4px), 27px);
  border-radius: 3px 3px 2px 2px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.cell-body {
  width: 100%;
  height: clamp(22px, 4vw, 35px);
  border-radius: 2px 2px 1px 1px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.6);
}

.cell::before {
  content: '';
  display: block;
  width: clamp(5px, 1vw, 8px);
  height: clamp(2px, 0.5vw, 4px);
  margin: 0 auto 1px;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(90deg, #2a2c24, #3a3c30, #2a2c24);
  border: 1px solid #1a1c14;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.cell.charged .cell-body {
  background: linear-gradient(180deg, #1a3a12 0%, #22520e 20%, #1e4a0c 50%, #163808 80%, #0e2806 100%);
  box-shadow: inset 0 0 12px rgba(80,220,40,0.15), inset 1px 0 0 rgba(100,255,60,0.1), inset -1px 0 0 rgba(0,0,0,0.3);
  animation: cell-breathe 3s ease-in-out infinite;
}
.cell.charged .cell-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(120,255,80,0.12) 0%, transparent 40%, rgba(0,0,0,0.2) 100%); }
.cell.charged .cell-body::before { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: rgba(100,255,60,0.18); border-radius: 2px; box-shadow: 0 10px 0 rgba(100,255,60,0.1), 0 20px 0 rgba(100,255,60,0.07); }
@keyframes cell-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.cell:nth-child(1).charged .cell-body { animation-delay: 0s; }
.cell:nth-child(2).charged .cell-body { animation-delay: 0.8s; }
.cell:nth-child(3).charged .cell-body { animation-delay: 1.6s; }

.cell.overcharge .cell-body {
  background: linear-gradient(180deg, #0a1a2e 0%, #0e2444 20%, #0c1e3a 50%, #081628 80%, #040e1c 100%);
  animation: cell-overcharge 0.9s ease-in-out infinite;
}
.cell.overcharge .cell-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,240,255,0.2) 0%, rgba(120,200,255,0.08) 40%, rgba(255,255,255,0.04) 100%); }
.cell.overcharge .cell-body::before { content: ''; position: absolute; left: 2px; right: 2px; top: 4px; height: 3px; background: rgba(180,230,255,0.3); border-radius: 2px; box-shadow: 0 8px 0 rgba(160,220,255,0.2), 0 16px 0 rgba(140,210,255,0.15), 0 24px 0 rgba(120,200,255,0.1); }
@keyframes cell-overcharge {
  0%   { filter: brightness(1);    box-shadow: inset 0 0 16px rgba(120,200,255,0.25); }
  50%  { filter: brightness(1.35); box-shadow: inset 0 0 28px rgba(180,230,255,0.45); }
  100% { filter: brightness(1);    box-shadow: inset 0 0 16px rgba(120,200,255,0.25); }
}

.battery-housing.overcharge-active {
  animation: housing-overcharge-glow 0.9s ease-in-out infinite;
}
@keyframes housing-overcharge-glow {
  0%, 100% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 12px rgba(100,200,255,0.2), 0 0 28px rgba(80,180,255,0.1); }
  50%       { box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 22px rgba(140,220,255,0.4), 0 0 50px rgba(100,200,255,0.2); }
}

.cell.amber .cell-body {
  background: linear-gradient(180deg, #3a2800 0%, #5a3c00 20%, #4a3000 50%, #382400 80%, #281800 100%);
  box-shadow: inset 0 0 12px rgba(220,140,20,0.15);
  animation: cell-breathe-amber 3.2s ease-in-out infinite;
}
.cell.amber .cell-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,180,60,0.12) 0%, transparent 40%, rgba(0,0,0,0.2) 100%); }
.cell.amber .cell-body::before { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: rgba(255,160,40,0.18); border-radius: 2px; box-shadow: 0 10px 0 rgba(255,160,40,0.1), 0 20px 0 rgba(255,160,40,0.07); }
@keyframes cell-breathe-amber { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

.cell.red .cell-body {
  background: linear-gradient(180deg, #2e0800 0%, #480c00 20%, #3a0800 50%, #2c0600 80%, #1e0400 100%);
  box-shadow: inset 0 0 12px rgba(220,40,20,0.2);
  animation: cell-breathe-red 1.2s ease-in-out infinite;
}
.cell.red .cell-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,80,40,0.12) 0%, transparent 40%, rgba(0,0,0,0.2) 100%); }
.cell.red .cell-body::before { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: rgba(255,60,40,0.18); border-radius: 2px; }
@keyframes cell-breathe-red { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }

.cell.depleted .cell-body {
  background: linear-gradient(180deg, #0e0f0b 0%, #111208 60%, #0d0e09 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}
.cell.depleted::before { background: linear-gradient(90deg, #1c1c14, #222218, #1c1c14); border-color: #111108; }

.window-panel {
  position: absolute; inset: 0; border-radius: 4px; pointer-events: none; z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0px, rgba(255,255,255,0.04) 1px, transparent 3px, transparent 70%, rgba(0,0,0,0.12) 100%), rgba(10,16,8,0.18);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5);
}
.window-panel::before, .window-panel::after { display: none; }
.window-screws { display: none; }

.charge-dots { display: flex; gap: clamp(2px, 0.5vw, 5px); justify-content: center; margin-top: 4px; position: relative; z-index: 1; }
.charge-dot { width: clamp(18px, calc(2.57vw + 4px), 27px); height: 3px; border-radius: 1px; transition: all 0.4s ease; }
.charge-dot.charged   { background: #3a8a1a; box-shadow: 0 0 4px rgba(80,200,40,0.5), 0 0 8px rgba(80,200,40,0.2); }
.charge-dot.amber     { background: #8a5a00; box-shadow: 0 0 4px rgba(220,140,20,0.5), 0 0 8px rgba(220,140,20,0.2); }
.charge-dot.red       { background: #8a1000; box-shadow: 0 0 4px rgba(220,30,20,0.5), 0 0 8px rgba(220,30,20,0.2); animation: dot-red-pulse 1.8s ease-in-out infinite; }
.charge-dot.overcharge{ background: #1a6a9a; box-shadow: 0 0 6px rgba(100,200,255,0.7); animation: dot-overcharge-pulse 0.9s ease-in-out infinite; }
.charge-dot.depleted  { background: #1e201a; box-shadow: none; }
@keyframes dot-red-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes dot-overcharge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ==========================================
   POWER INDICATOR BULBS -- on housing surface
   Recessed jewel pilot lights drilled into metal
   ========================================== */
.bulb-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40px 0 40px;
  position: relative;
  overflow: visible;
  width: 100%;
}

/* Battery: absolute left of bulb strip, respects bulb row spacing */
.bulb-strip .battery-housing {
  position: absolute;
  right: calc(50% + 132px + clamp(4px, 1vw, 10px));
  top: 50%;
  transform: translateY(-50%);
}

/* Center group: pinned to true center, bulbs never compress */
.bulb-strip-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  min-width: 264px;
}



.bulb-strip-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #7e827e;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 -1px 0 rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.8),
    1px 0 2px rgba(0,0,0,0.4),
    -1px 0 2px rgba(0,0,0,0.4);
  user-select: none;
  text-align: center;
  margin-bottom: 3px;
}

.bulb-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Each bulb: a recessed circular socket drilled into the housing */
.bulb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  /* Socket recess: dark pit with metallic rim */
  background:
    radial-gradient(circle at 50% 55%,
      #0a0908 0%,
      #0e0d0a 60%,
      #1a1810 100%
    );
  border: 1.5px solid #2a2820;
  box-shadow:
    /* Inset shadow: drilled hole depth */
    inset 0 2px 4px rgba(0,0,0,0.9),
    inset 0 -1px 2px rgba(0,0,0,0.5),
    inset 1px 0 2px rgba(0,0,0,0.4),
    inset -1px 0 2px rgba(0,0,0,0.4),
    /* Outer rim catch light */
    0 1px 0 rgba(255,255,255,0.06),
    0 -1px 0 rgba(0,0,0,0.4);
}

/* The glass lens dome sitting inside the socket */
.bulb .bulb-lens {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  /* Dark unlit lens by default */
  background:
    radial-gradient(circle at 40% 35%,
      rgba(255,255,255,0.06) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 50% 50%,
      #1a1a14 0%,
      #111110 100%
    );
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Active lit states ---- */
.bulb.active.tier-green .bulb-lens {
  background:
    radial-gradient(circle at 40% 35%,
      rgba(255,255,255,0.5) 0%,
      rgba(180,255,160,0.3) 20%,
      transparent 55%
    ),
    radial-gradient(circle at 50% 50%,
      #44ee18 0%,
      #2ab808 40%,
      #1a8800 80%,
      #0e5500 100%
    );
  box-shadow:
    0 0 4px rgba(57,255,20,0.5),
    0 0 10px rgba(57,255,20,0.25),
    inset 0 -1px 2px rgba(0,0,0,0.3);
}

.bulb.active.tier-amber .bulb-lens {
  background:
    radial-gradient(circle at 40% 35%,
      rgba(255,255,255,0.5) 0%,
      rgba(255,230,160,0.3) 20%,
      transparent 55%
    ),
    radial-gradient(circle at 50% 50%,
      #ffcc20 0%,
      #dd9e00 40%,
      #aa7800 80%,
      #775200 100%
    );
  box-shadow:
    0 0 4px rgba(255,183,0,0.5),
    0 0 10px rgba(255,183,0,0.25),
    inset 0 -1px 2px rgba(0,0,0,0.3);
  animation: bulbAmberPulse 1.6s ease-in-out infinite;
}

@keyframes bulbAmberPulse {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 5px rgba(255,183,0,0.6),
      0 0 12px rgba(255,183,0,0.3),
      inset 0 -1px 2px rgba(0,0,0,0.3);
  }
  50% {
    opacity: 0.8;
    box-shadow:
      0 0 3px rgba(255,183,0,0.35),
      0 0 6px rgba(255,183,0,0.12),
      inset 0 -1px 2px rgba(0,0,0,0.3);
  }
}

.bulb.active.tier-red .bulb-lens {
  background:
    radial-gradient(circle at 40% 35%,
      rgba(255,255,255,0.5) 0%,
      rgba(255,180,160,0.3) 20%,
      transparent 55%
    ),
    radial-gradient(circle at 50% 50%,
      #ff4444 0%,
      #cc2020 40%,
      #991010 80%,
      #660808 100%
    );
  animation: bulbFlicker 0.4s ease-in-out infinite;
}

/* Drain animation: bulb fades out like a filament cooling */
.bulb.draining .bulb-lens {
  animation: bulbDrain 0.5s ease forwards;
}

@keyframes bulbDrain {
  0%   { opacity: 1; }
  30%  { opacity: 0.6; }
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 40% 35%,
        rgba(255,255,255,0.06) 0%,
        transparent 50%
      ),
      radial-gradient(circle at 50% 50%,
        #1a1a14 0%,
        #111110 100%
      );
    box-shadow: none;
  }
}

/* Last bulb standing: rapid strobe */
.bulb.active.tier-red.last-bulb .bulb-lens {
  animation: bulbCritical 0.12s linear infinite;
}

@keyframes bulbFlicker {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 6px rgba(255,64,64,0.7),
      0 0 14px rgba(255,64,64,0.35),
      inset 0 -1px 2px rgba(0,0,0,0.3);
  }
  50% {
    opacity: 0.65;
    box-shadow:
      0 0 3px rgba(255,64,64,0.4),
      0 0 6px rgba(255,64,64,0.15),
      inset 0 -1px 2px rgba(0,0,0,0.3);
  }
}

@keyframes bulbCritical {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 8px rgba(255,64,64,0.9),
      0 0 20px rgba(255,64,64,0.5),
      0 0 32px rgba(255,64,64,0.2),
      inset 0 -1px 2px rgba(0,0,0,0.3);
  }
  50% {
    opacity: 0.25;
    box-shadow:
      0 0 2px rgba(255,64,64,0.3),
      inset 0 -1px 2px rgba(0,0,0,0.3);
  }
}

/* ==========================================
   PHYSICAL KEYPAD -- on the housing surface
   ========================================== */

.keypad-well {
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 3px
    ),
    linear-gradient(180deg, #100e0a 0%, #141210 50%, #100e0a 100%);
  border-radius: 6px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    inset 3px 0 8px rgba(0,0,0,0.6),
    inset -3px 0 8px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.06);
}

#numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

/* MECHANICAL KEYCAP CONTAINER */
.np {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* Must be tall enough to contain cap + full side wall travel */
  height: 62px;
}

/* ---- KEYCAP ----
 * The whole cap is .key-face.
 * Side walls = thick box-shadow stack (8px deep).
 * Top dish = ::before (concave scoop).
 * Wear texture = ::after.
 * Numbers are large, centered, and stamped in with inset text-shadow.
 */
.np .key-face {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 50px;
  border-radius: 6px;

  /* Cap surface -- lighter top edge fading darker toward base */
  background: linear-gradient(180deg,
    #5c5a52 0%,
    #53514a 5%,
    #4a4840 12%,
    #42403a 40%,
    #3a3832 70%,
    #32302c 100%
  );
  border: 1px solid #64625a;
  border-bottom: 1px solid #2a2824;

  transition: transform 0.05s ease, box-shadow 0.05s ease;
  transform: translateY(0px);
  overflow: hidden;

  /* Big centered engraved number */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: rgba(57,255,20,0.9);
  text-shadow:
    /* carved-in: dark above, light below */
    0 -1px 1px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.1),
    /* subtle glow */
    0 0 10px rgba(57,255,20,0.3);

  /* 8px side wall built from stacked shadows */
  box-shadow:
    /* ---- bottom wall (8 steps) ---- */
    0 1px 0 0 #4a4840,
    0 2px 0 0 #42403a,
    0 3px 0 0 #3a3832,
    0 4px 0 0 #32302c,
    0 5px 0 0 #2a2826,
    0 6px 0 0 #222220,
    0 7px 0 0 #1c1a18,
    0 8px 0 0 #161412,
    /* ---- left wall ---- */
    -1px 2px 0 0 #46443e,
    -2px 4px 0 0 #3a3832,
    -2px 6px 0 0 #2a2826,
    /* ---- right wall ---- */
    1px 2px 0 0 #42403a,
    2px 4px 0 0 #363430,
    2px 6px 0 0 #262422,
    /* ---- ground shadow ---- */
    0 10px 6px -2px rgba(0,0,0,0.6),
    0 12px 18px -4px rgba(0,0,0,0.4),
    1px 9px 3px -1px rgba(0,0,0,0.3),
    -1px 9px 3px -1px rgba(0,0,0,0.3),
    /* ---- top surface highlights ---- */
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset -1px 0 0 rgba(0,0,0,0.15);
}

/* CONCAVE DISH -- scooped top */
.np .key-face::before {
  content: '';
  position: absolute;
  top: 4px; left: 5px; right: 5px;
  height: 55%;
  border-radius: 3px 3px 10px 10px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.06) 30%,
    rgba(255,255,255,0.03) 100%
  );
  pointer-events: none;
}

/* Inner lip / edge detail */
.np .key-face::after {
  content: '';
  position: absolute;
  top: 3px; left: 4px; right: 4px;
  height: 60%;
  border-radius: 4px 4px 8px 8px;
  border: 1px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.18);
  border-bottom-color: rgba(255,255,255,0.04);
  pointer-events: none;
}

/* HOVER -- cap lifts, shadow extends */
.np:hover .key-face {
  transform: translateY(-2px);
  background: linear-gradient(180deg,
    #66645c 0%,
    #5c5a52 5%,
    #52504a 12%,
    #4a4842 40%,
    #42403a 70%,
    #3a3834 100%
  );
  box-shadow:
    0 1px 0 0 #4e4c46,
    0 2px 0 0 #46443e,
    0 3px 0 0 #3e3c36,
    0 4px 0 0 #363430,
    0 5px 0 0 #302e2a,
    0 6px 0 0 #2a2826,
    0 7px 0 0 #242220,
    0 8px 0 0 #1e1c1a,
    0 9px 0 0 #181614,
    0 10px 0 0 #141210,
    -2px 5px 0 0 #3a3832,
    -3px 7px 0 0 #2a2826,
    2px 5px 0 0 #363430,
    3px 7px 0 0 #262422,
    0 12px 8px -2px rgba(0,0,0,0.6),
    0 16px 22px -4px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 1px 0 0 rgba(255,255,255,0.1);
}

/* PRESSED -- cap bottoms out, wall collapses */
.np:active .key-face,
.np.pressed .key-face {
  transform: translateY(6px);
  background: linear-gradient(180deg,
    #4a4842 0%,
    #42403a 5%,
    #3a3834 12%,
    #34322c 40%,
    #2e2c28 70%,
    #282624 100%
  );
  box-shadow:
    0 1px 0 0 #2e2c28,
    0 2px 0 0 #242220,
    -1px 1px 0 0 #2e2c28,
    1px 1px 0 0 #282624,
    0 3px 3px rgba(0,0,0,0.5),
    inset 0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.np:disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; }

/* ENTER -- olive/green tinted cap */
.np.enter .key-face {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  background: linear-gradient(180deg,
    #4c5c44 0%,
    #44543c 5%,
    #3c4c34 12%,
    #344430 40%,
    #2c3c28 70%,
    #263424 100%
  );
  border-color: #586850;
  border-bottom-color: #1e2c16;
  text-shadow:
    0 -1px 1px rgba(0,0,0,0.8),
    0 1px 0 rgba(100,255,80,0.1),
    0 0 14px rgba(57,255,20,0.45);
  box-shadow:
    0 1px 0 0 #3c4a34,
    0 2px 0 0 #34422e,
    0 3px 0 0 #2e3a28,
    0 4px 0 0 #283222,
    0 5px 0 0 #222c1e,
    0 6px 0 0 #1c2618,
    0 7px 0 0 #182014,
    0 8px 0 0 #121a10,
    -1px 2px 0 0 #384630,
    -2px 4px 0 0 #2e3a28,
    -2px 6px 0 0 #222c1e,
    1px 2px 0 0 #34422e,
    2px 4px 0 0 #2a3626,
    2px 6px 0 0 #1e281a,
    0 10px 6px -2px rgba(0,0,0,0.6),
    0 12px 18px -4px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(57,255,20,0.12),
    inset 1px 0 0 rgba(57,255,20,0.05);
}

.np.enter:hover .key-face {
  transform: translateY(-2px);
  background: linear-gradient(180deg,
    #566650 0%,
    #4e5e46 5%,
    #46563e 12%,
    #3e4e38 40%,
    #364630 70%,
    #2e3e2a 100%
  );
  box-shadow:
    0 1px 0 0 #404e38,
    0 2px 0 0 #384632,
    0 3px 0 0 #323e2c,
    0 4px 0 0 #2c3826,
    0 5px 0 0 #263220,
    0 6px 0 0 #202c1c,
    0 7px 0 0 #1c2618,
    0 8px 0 0 #182014,
    0 9px 0 0 #141c10,
    0 10px 0 0 #10180e,
    -2px 5px 0 0 #2e3a28,
    -3px 7px 0 0 #222c1e,
    2px 5px 0 0 #2a3626,
    3px 7px 0 0 #1e281a,
    0 12px 8px -2px rgba(0,0,0,0.6),
    0 16px 22px -4px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(57,255,20,0.18),
    0 0 14px rgba(57,255,20,0.06);
}

.np.enter:active .key-face,
.np.enter.pressed .key-face {
  transform: translateY(6px);
  background: linear-gradient(180deg,
    #3a4832 0%,
    #32402c 5%,
    #2c3826 12%,
    #263222 40%,
    #202c1c 70%,
    #1c2618 100%
  );
  box-shadow:
    0 1px 0 0 #222c1e,
    0 2px 0 0 #1c2618,
    -1px 1px 0 0 #222c1e,
    1px 1px 0 0 #1e281a,
    0 3px 3px rgba(0,0,0,0.5),
    inset 0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(57,255,20,0.06);
}

.np-spacer { grid-column: span 3; height: 3px; }
.np.np-wide { grid-column: span 2; }
.np.enter.full {
  grid-column: span 3;
  height: 66px;
}

.np.enter.full .key-face {
  height: 54px;
  font-size: 16px;
  letter-spacing: 8px;
}

/* ENTER key in NEW GAME mode -- glowing pulse */
.np.enter.new-game .key-face {
  background: linear-gradient(180deg,
    #4c5c44 0%,
    #44543c 5%,
    #3c4c34 12%,
    #344430 40%,
    #2c3c28 70%,
    #263424 100%
  );
  text-shadow:
    0 -1px 1px rgba(0,0,0,0.8),
    0 1px 0 rgba(100,255,80,0.1),
    0 0 18px rgba(57,255,20,0.6);
  animation: pulseEnter 2s ease-in-out infinite;
}

@keyframes pulseEnter {
  0%, 100% {
    box-shadow:
      0 2px 0 0 #2a3820, 0 4px 0 0 #223018, 0 6px 0 0 #1a2812,
      0 7px 0 0 #14200e, 0 8px 0 0 #10180a,
      -1px 4px 0 0 #223018, -2px 3px 0 0 #2a3820,
      1px 4px 0 0 #1a2812, 2px 3px 0 0 #243220,
      0 10px 6px -2px rgba(0,0,0,0.6), 0 12px 18px -4px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(57,255,20,0.15),
      0 0 16px rgba(57,255,20,0.15);
  }
  50% {
    box-shadow:
      0 2px 0 0 #2a3820, 0 4px 0 0 #223018, 0 6px 0 0 #1a2812,
      0 7px 0 0 #14200e, 0 8px 0 0 #10180a,
      -1px 4px 0 0 #223018, -2px 3px 0 0 #2a3820,
      1px 4px 0 0 #1a2812, 2px 3px 0 0 #243220,
      0 10px 6px -2px rgba(0,0,0,0.6), 0 12px 18px -4px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(57,255,20,0.25),
      0 0 30px rgba(57,255,20,0.3), 0 0 50px rgba(57,255,20,0.1);
  }
}