.overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: none;
  padding: 20px;
  background: #030a14b8;
  backdrop-filter: blur(7px);
  place-items: center;
}
.overlay.show { display: grid; overflow-y: auto; place-items: safe center; }

.result {
  position: relative;
  width: min(540px, 100%);
  overflow: hidden;
  padding: 28px;
  color: #eff5f8;
  border: 1px solid #7091a5;
  border-top: 3px solid #95d4e0;
  border-radius: 24px;
  background: linear-gradient(145deg, #142335, #0b1725 58%, #0a1727);
  box-shadow: 0 24px 80px #0008, inset 0 1px #fff2;
  text-align: left;
}
.result p { margin: 0; color: #a6c9d7; font: 800 10px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.result > strong { display: block; margin: 10px 0; color: #e6eef3; font: 850 clamp(30px, 6vh, 46px)/1.05 var(--body); letter-spacing: -.045em; }
.result > span { display: block; margin-bottom: 22px; color: #bad0dc; font-size: 14px; line-height: 1.5; }
.result.tone-loss { border-top-color: #a87a86; }
.result.tone-win { border-color: rgba(229, 198, 92, .5); border-top-color: #f3cf77; background: linear-gradient(145deg, #292719, #101e2b 48%, #0b1c2c); box-shadow: 0 24px 80px #0008, 0 0 64px rgba(212, 175, 55, .16), inset 0 1px #fff2; }
.result.tone-win > p, .result.tone-win > strong { color: #ffe1a0; }
.result.tone-neutral > strong { color: #edf5fa; }

.resultFigures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4c6375;
  border-radius: 14px;
  background: #071525;
}
.resultFigures div { min-width: 0; padding: 13px 16px; }
.resultFigures div:nth-child(2) { border-left: 1px solid #34495c; }
.resultFigures div:last-child { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid #4c6375; background: #102536; }
.resultFigures dt { margin: 0 0 4px; color: #b1c9d8; font: 700 10px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; }
.resultFigures dd { margin: 0; color: #ecf4f8; font: 750 23px/1.12 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.03em; overflow-wrap: anywhere; }
.resultFigures div:last-child dt { color: #e3eff5; }
.resultFigures div:last-child dd { font-size: 32px; }
.result.tone-win .resultFigures div:last-child { background: #183e3a; }
.result.tone-win #resultNet { color: #9de9c5; }
.result.tone-loss .resultFigures div:last-child { background: #332731; }
.result.tone-loss #resultNet { color: #f0adb7; }
.resultActions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.resultActions button { width: 100%; min-height: 54px; }

@media (prefers-reduced-motion: no-preference) {
  .overlay.show .result:not(.tone-loss) { animation: resultArrive .22s ease-out both; }
}
@keyframes resultArrive { from { opacity: 0; transform: translateY(8px); } }

@media (orientation: landscape) and (max-height: 500px) {
  .gamePage .result { padding: 17px 20px; border-radius: 18px; }
  .result > strong { margin: 6px 0; font-size: 32px; }
  .result > span { margin-bottom: 12px; font-size: 12px; }
  .resultFigures { margin-bottom: 12px; }
  .resultFigures div { padding: 8px 12px; }
  .resultFigures dd { font-size: 20px; }
  .resultFigures div:last-child dd { font-size: 27px; }
  .resultActions button { min-height: 48px; }
}
@media (max-width: 420px) and (orientation: portrait) {
  .result { padding: 22px; }
  .result > strong { font-size: 34px; }
  .resultFigures div { padding: 12px; }
  .resultFigures dd { font-size: 21px; }
  .resultFigures div:last-child dd { font-size: 29px; }
}

.siren {
  display: none;
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  color: var(--game-danger, #e23b4d);
}

.result.tone-loss .siren { display: block; }

.siren svg {
  width: 100%;
  height: 100%;
}

.alarmWash {
  display: none;
}

.fxLayer {
  position: absolute;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fxText {
  position: absolute;
  top: var(--fx-top);
  left: var(--fx-left);
  color: #fff;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  animation: floatScore .9s ease-out both;
}

.fxText.green { color: #a5f0d2; }
.fxText.gold { color: #e5c65c; }
.fxText.red { color: #ff8b9b; }

.flashWin { color: #58b184; }
.flashBust { color: #e23b4d; }

@keyframes floatScore {
  0% { opacity: 0; transform: translate(-50%, 5px) scale(.85); }
  20% { opacity: 1; transform: translate(-50%, -15px) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -75px) scale(1.05); }
}

@keyframes runnerBob {
  to { transform: translateX(-50%) translateY(-5px) rotate(1deg); }
}

@keyframes runnerCaught {
  to { filter: grayscale(.7); transform: translateX(-50%) translateY(9px) rotate(8deg); }
}

@keyframes gamePunch {
  45% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes potPop {
  50% { filter: drop-shadow(0 0 12px rgba(229, 198, 92, .85)); transform: scale(1.28) rotate(-8deg); }
}

.game.punch { animation: gamePunch .28s ease; }
.potIcon.pop { animation: potPop .5s ease; }
.game.running #thief { animation: runnerBob .32s steps(2, end) infinite alternate; }
.game #thief.busted { animation: runnerCaught .45s steps(4, end) forwards; }

.game.cashoutGlow .trackGate {
  position: absolute;
  z-index: 6;
  right: 4%;
  bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 150px;
  color: #fff8e0;
  border: 4px solid var(--gold-light);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255, 216, 61, .35), rgba(255, 216, 61, .05));
  font-family: var(--display);
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  animation: gateGlow .9s ease-out both;
}

@keyframes gateGlow {
  0% { box-shadow: 0 0 0 rgba(255, 216, 61, 0); opacity: .35; }
  45% { box-shadow: 0 0 30px 10px rgba(255, 216, 61, .55); opacity: 1; }
  100% { box-shadow: 0 0 16px 4px rgba(255, 216, 61, .35); opacity: 1; }
}

#thief.exit { animation: runnerEscape .8s cubic-bezier(.3, .7, .4, 1) forwards; }

@keyframes runnerEscape {
  to { transform: translateX(-50%) translateX(55vw) scale(.85); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .potIcon.pop { animation: none; filter: drop-shadow(0 0 8px rgba(229, 198, 92, .7)); }

  .result { animation: resultCrossfade .18s ease both; }
}

@keyframes resultCrossfade {
  from { opacity: 0; }
}