.game-area {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #12151a;
}

#stage-svg {
  width: 100%;
  aspect-ratio: 350 / 460;
  display: block;
  touch-action: none;
}

#flip-btn { width: calc(100% - 24px); margin: 0 12px; }
#flip-hint { text-align: center; min-height: 16px; margin: 0; }
#flip-hint.ready { color: #d8a94a; }

.plate-wrapper { transform-origin: 175px 260px; }
.plate-wrapper.flipping { animation: plate-flip 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes plate-flip {
  0% { transform: scaleX(1); }
  48% { transform: scaleX(0.05); }
  52% { transform: scaleX(0.05); }
  100% { transform: scaleX(1); }
}

.plate-bg-recto { fill: #2a2118; }
.plate-bg-verso { fill: #17222a; }
.plate-border-recto { fill: none; stroke: #8a6a2e; stroke-width: 3; }
.plate-border-verso { fill: none; stroke: #2e5c78; stroke-width: 3; }

.wall-recto { fill: #4a3a24; stroke: #6a5334; stroke-width: 2; }
.wall-verso { fill: #223a48; stroke: #33546a; stroke-width: 2; }

.face-badge { font-size: 15px; font-weight: bold; text-anchor: start; }
.face-badge.recto { fill: #d8a94a; }
.face-badge.verso { fill: #6fa0e0; }

.start-mark { fill: #4caf6b; stroke: #2f6b41; stroke-width: 1.5; }
.hole { fill: #05070a; stroke: #7a3030; stroke-width: 2; }
.hole-icon { fill: #b85050; font-size: 14px; text-anchor: middle; }
.exit-zone { fill: rgba(76,175,107,0.18); stroke: #4caf6b; stroke-width: 2.5; }
.exit-icon { fill: #4caf6b; font-size: 15px; text-anchor: middle; }

.transfer-zone { fill: rgba(216,169,74,0.15); stroke: #d8a94a; stroke-width: 2; }
.transfer-zone.pending { stroke: #f2d9a0; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(242,217,160,.8)); animation: transfer-pulse 1s ease-in-out infinite; }
@keyframes transfer-pulse { 0%,100% { r: 16; } 50% { r: 19; } }
.transfer-label { fill: #f2d9a0; font-size: 13px; text-anchor: middle; font-weight: bold; }

.droplet { fill: #e8e2d0; stroke: #9aa0aa; stroke-width: 1.5; }
.droplet.fail { fill: #ff6b6b; }

.digit-reveal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  font-size: 90px;
  font-weight: bold;
  color: #f2d9a0;
}
.digit-reveal.visible { display: flex; }

#pad-2d {
  width: 140px;
  height: 140px;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 8px;
  touch-action: none;
  cursor: grab;
  display: block;
  margin: 0 auto;
}
.pad-axis { stroke: #ddd; stroke-width: 1; }
.pad-dot { fill: #222; cursor: grab; }