/* Lock Breaker: what only the vault has. The rest comes from /rooms/room.css. */

/* the gems to choose from, and the buttons beside them */
.dock { flex-direction: column; gap: 10px; }
.palette { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gem-btn { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06), rgba(0,0,0,0.25)); display: grid; place-items: center; transition: transform .12s, border-color .12s; }
.gem-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(217,178,107,0.55); }
.gem-btn:active:not(:disabled) { transform: scale(.94); }
.gem-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gem-btn:disabled { opacity: .3; cursor: not-allowed; }
.gem-btn small { position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: var(--mute); font-variant-numeric: tabular-nums; }
.gem-face { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.35);
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.65), rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 55%, var(--c), color-mix(in srgb, var(--c) 60%, #000)); }
.palette.glow .gem-face, .swatch-gems.glow .gem-face { filter: drop-shadow(0 0 6px var(--c)); }
.actions { display: flex; gap: 10px; }

/* the opponent's last try, in the scoreboard */
.mini-lamps { display: flex; gap: 4px; margin: 6px 0 2px; }
.mini-lamps i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.mini-lamps i.exact { background: #ffb43a; box-shadow: 0 0 6px rgba(255,180,58,0.7); }
.mini-lamps i.near { background: transparent; box-shadow: inset 0 0 0 2px #eef1f7, 0 0 5px rgba(223,229,240,0.55); }

/* the locksmith's swatches */
.swatch-door { background: linear-gradient(135deg, color-mix(in srgb, var(--metal) 80%, #fff 20%), var(--metal) 45%, color-mix(in srgb, var(--metal) 70%, #000));
  box-shadow: inset 0 0 0 5px var(--trim), inset 0 0 0 6px rgba(0,0,0,0.35); }
.swatch-door .wheel { position: absolute; right: 18%; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 3px solid var(--trim);
  background: conic-gradient(from 0deg, transparent 0 28deg, var(--trim) 28deg 32deg, transparent 32deg 88deg, var(--trim) 88deg 92deg, transparent 92deg 148deg, var(--trim) 148deg 152deg, transparent 152deg 208deg, var(--trim) 208deg 212deg, transparent 212deg 268deg, var(--trim) 268deg 272deg, transparent 272deg 328deg, var(--trim) 328deg 332deg, transparent 332deg); }
.swatch-door .rivets { position: absolute; left: 12px; right: 12px; top: 10px; height: 4px;
  background: radial-gradient(circle, var(--trim) 1.6px, transparent 2px) 0 0 / 14px 4px repeat-x; }
.swatch-gems { gap: 6px; padding: 0 8px; flex-wrap: wrap; }
.swatch-gems .gem-face { width: 20px; height: 20px; }
.swatch-lamps { gap: 10px; background: #0b0c0f; }
.swatch-lamps i { width: 14px; height: 14px; border-radius: 50%; background: #1b1c20; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.swatch-lamps .exact { background: var(--exact); box-shadow: 0 0 10px var(--exact); }
.swatch-lamps .near { background: transparent; box-shadow: inset 0 0 0 3px var(--near), 0 0 8px var(--near); }

@media (max-width: 640px), (max-height: 520px) {
  .palette { gap: 5px; padding: 6px 8px; }
  .gem-btn { width: 40px; height: 40px; border-radius: 10px; }
  .gem-face { width: 26px; height: 26px; }
}
@media (max-width: 380px) {
  .gem-btn { width: 36px; height: 36px; }
  .gem-face { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) { .gem-btn { transition: none; } }