.game-area {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

#lock-svg {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 350 / 400;
  background: #14161b;
  border-radius: 8px;
  touch-action: none;
}

.lock-housing { fill: #22262d; stroke: #3a4250; stroke-width: 2; }
.shear-line { stroke: #d8a94a; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.7; }
.rest-line { stroke: #4a4e58; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.5; }

.piston-upper { fill: #7a8296; transition: y 0.55s ease, height 0.55s ease; }
.piston-lower { fill: #4c5262; transition: y 0.55s ease, height 0.55s ease; }
.piston-gap { fill: #14161b; transition: y 0.55s ease; }
.piston-opaque { fill: #3a4250; stroke: #575c64; stroke-width: 2; }
.opaque-cover { fill: #22262d; }

.mark-line { stroke: #e8e2d0; stroke-width: 2; opacity: 0; transition: opacity 0.2s ease; }
.mark-line.visible { opacity: 0.9; }

.key-group { transition: transform 0.55s ease; }
.key-blade { fill: #b7bcc6; stroke: #575c64; stroke-width: 2; }
.key-tooth { fill: #b7bcc6; stroke: #575c64; stroke-width: 2; }
.key-handle { fill: #d8a94a; stroke: #a97f2e; stroke-width: 2; cursor: grab; touch-action: none; }
.key-handle:active { cursor: grabbing; }

.reward-digit-text { fill: #4caf6b; font-size: 40px; font-weight: bold; }

.attempts-row { display: flex; gap: 5px; justify-content: center; }
.attempt-dot { width: 12px; height: 12px; border-radius: 50%; background: #4a4030; border: 1px solid #d8a94a; }
.attempt-dot.used { background: #2a2d33; border-color: #575c64; }

.score-feedback { font-size: 15px; font-weight: bold; color: #e8e2d0; min-height: 20px; text-align: center; margin: 0; }

.history {
  width: 100%;
  max-width: 320px;
  max-height: 90px;
  overflow-y: auto;
  font-size: 11px;
  color: #9aa0aa;
  background: #1b1e24;
  border-radius: 6px;
  padding: 4px 8px;
}
.history-row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.history-keys { display: flex; gap: 3px; }
.history-key { display: inline-block; width: 14px; text-align: center; color: #cfd6e2; }
.history-score { color: #d8a94a; font-weight: bold; }