/* ===========================================================================
   NEON WORM. Only the on-screen steering pad needs styling; everything else
   the cabinet draws itself, and the shared chrome lives in engine.css.
   ======================================================================== */

.worm-pad {
  display: grid;
  grid-template-areas:
    '.    up    .'
    'left down right';
  grid-template-columns: repeat(3, 3rem);
  gap: .35rem;
  justify-content: center;
}
.worm-pad__btn {
  width: 3rem; height: 2.5rem;
  display: grid; place-items: center;
  font-size: .8rem;
  color: var(--accent-soft);
  background: var(--panel-bg);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s var(--ease-out), box-shadow .15s var(--ease-out);
}
.worm-pad__btn:hover { box-shadow: 0 0 14px -4px rgba(var(--accent-rgb), .7); }
.worm-pad__btn:active { transform: translateY(1px) scale(.96); }
.worm-pad__btn--up    { grid-area: up; }
.worm-pad__btn--left  { grid-area: left; }
.worm-pad__btn--down  { grid-area: down; }
.worm-pad__btn--right { grid-area: right; }

/* The pad is for touch; on a real keyboard it is clutter, so keep it small. */
@media (hover: hover) and (pointer: fine) {
  .worm-pad { opacity: .55; transition: opacity .2s var(--ease-out); }
  .worm-pad:hover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .worm-pad__btn { transition: none; }
}

/* ------------------------------------------------------------- skin picker */
/* Locked chips stay VISIBLE rather than hidden: knowing a SOLID GOLD skin
   exists at 10,000 points is the whole incentive, and hiding it wastes that. */
.worm-skins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  max-width: 34rem;
  margin: .2rem auto 0;
}
.worm-skin {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .26rem .55rem .26rem .35rem;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel-bg);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out),
              box-shadow .15s var(--ease-out), transform .08s var(--ease-out);
}
.worm-skin:hover:not(:disabled) {
  color: var(--ink);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 14px -5px rgba(var(--accent-rgb), .8);
}
.worm-skin:active:not(:disabled) { transform: translateY(1px); }
.worm-skin[aria-checked='true'] {
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 16px -4px rgba(var(--accent-rgb), .9), inset 0 0 12px -6px rgba(var(--accent-rgb), .8);
}
.worm-skin__swatch {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.worm-skin__name { white-space: nowrap; }

.worm-skin.is-locked {
  cursor: not-allowed;
  opacity: .42;
  border-style: dashed;
}
.worm-skin.is-locked .worm-skin__swatch { filter: grayscale(1) brightness(.7); }

@media (prefers-reduced-motion: reduce) {
  .worm-skin { transition: none; }
}