/* VISUAL 1x1 V1.2: final mobile visual lock candidate. */
.court-shell {
  box-shadow: 0 22px 62px #000d, inset 0 0 0 1px #d8fff00c, inset 0 -34px 55px #0006;
  isolation: isolate;
}
.court-shell canvas { image-rendering: auto; }
.game-controls {
  gap: 13px;
  border-top: 1px solid #ffffff0d;
  background: linear-gradient(180deg, #0d100f00, #0b0d0cc7 34%, #050505);
}
.joystick {
  border-color: #868d8a;
  background: radial-gradient(circle at 42% 38%, #454b48cc, #101211e8 63%, #050505);
  box-shadow: inset 0 0 0 4px #050505, inset 0 0 18px #ffffff0a, 0 0 0 1px #ff2e9347, 0 8px 19px #000a;
}
.joystick i {
  background: radial-gradient(circle at 34% 27%, #fff, #a9afac 44%, #494d4b);
  box-shadow: inset -3px -4px 7px #0005, 0 5px 12px #0008;
}
.strike-controls { align-items: center; gap: 9px; }
.strike {
  position: relative;
  height: 60px;
  border-radius: 13px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  overflow: hidden;
  font-size: 19px;
  letter-spacing: .045em;
}
.strike::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .42;
}
.strike.hit {
  width: 79px;
  border: 1px solid #747b78;
  background: linear-gradient(155deg, #272b29, #080909 64%);
  box-shadow: inset 0 0 0 2px #050505, inset 0 10px 18px #ffffff08, 0 7px 16px #000a;
}
.strike.smash {
  width: 88px;
  border: 1px solid #c7a900;
  background: linear-gradient(155deg, #373008, #080806 66%);
  box-shadow: inset 0 0 0 2px #050505, inset 0 10px 18px #ffd32a0d, 0 7px 16px #000a, 0 0 18px #ffd32a1c;
}
.strike small {
  margin-top: 2px;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .72;
}
.result-screen.active {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: flex;
  width: min(100%, 440px);
  height: 100dvh;
  min-height: 0;
  margin: auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: linear-gradient(#040706c9, #040404f5), url('/assets/assets/arena-surroundings-v11.png?v=visual11-20260902') center/cover;
}
.result-screen .result-mark {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  font-size: 19px;
  animation: victory-mark .72s cubic-bezier(.16, .78, .2, 1.15) both;
}
.result-screen h1 { margin-top: 5px; font-size: clamp(52px, 8.2vh, 68px); }
.result-screen .result-winner { margin-top: 5px; }
.result-screen .final-score {
  margin: clamp(10px, 2vh, 17px) 0 clamp(13px, 2.4vh, 21px);
  font-size: clamp(64px, 9.5vh, 80px);
  line-height: .88;
}
.result-screen .result-stats {
  width: 100%;
  max-width: 360px;
  margin: 0 auto clamp(14px, 2.4vh, 22px);
}
.result-screen .result-stats > div { padding: 10px 6px; }
.result-screen .result-stats strong { font-size: 17px; }
.result-screen #result-mp {
  color: var(--yellow);
  font-size: 19px;
  text-shadow: 0 0 16px #ffd32a42;
}
.result-screen .cta { height: 48px; max-width: 350px; margin-left: auto; margin-right: auto; }
.result-screen .outline { margin-top: 8px; }
@keyframes victory-mark {
  0% { opacity: 0; transform: translateY(12px) scale(.65) rotate(-12deg); }
  65% { opacity: 1; transform: translateY(0) scale(1.08) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (max-height: 760px) {
  .result-screen.active { padding-top: 14px; padding-bottom: 10px; }
  .result-screen .result-mark { width: 42px; height: 42px; margin-bottom: 7px; }
  .result-screen h1 { font-size: 49px; }
  .result-screen .final-score { margin: 8px 0 12px; font-size: 60px; }
  .result-screen .result-stats { margin-bottom: 12px; }
  .result-screen .result-stats > div { padding: 8px 5px; }
  .result-screen .cta { height: 44px; }
}