#dock {
  display: flex; align-items: flex-end; gap: 10px;
  border: 3px solid var(--ink); background: rgba(232,232,232,.85);
  padding: 8px 14px 10px; box-shadow: 4px 4px 0 rgba(26,26,26,.45);
}
.dock-item {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; background: none; padding: 0;
}
/* samakan ukuran tampil walau grid peta berbeda (12x12 vs 16x16) */
.dock-item svg, .dock-item img { image-rendering: pixelated; width: 26px; height: 26px; }
@keyframes dockbounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.dock-item:hover, .dock-item:focus-visible { animation: dockbounce .4s steps(3) 1; }
.dock-item:active { animation: none; transform: translateY(3px); }
.dock-item.active::after {
  content: ''; position: absolute; bottom: -7px; width: 6px; height: 6px; background: var(--ink);
}
.dock-sep { width: 3px; align-self: stretch; background: var(--ink); }
@media (max-width: 640px) {
  #dock { gap: 4px; padding: 6px 8px 8px; max-width: 96vw; overflow-x: auto; }
  .dock-item { width: 40px; height: 40px; }
  .dock-item.active::after { bottom: 2px; }
}