/* Drawn iPhone 18 Pro (402 × 874 pt screen) and the effect layer
   (rings, misses) shared by the game and the screen preview. */

.device {
  position: relative; width: 430px; height: 902px; padding: 14px; border-radius: 70px;
  background: #0c0c0d;
  box-shadow:
    0 0 0 1.5px #c9c4bc,
    0 0 0 4px #8d8881,
    0 0 0 5.5px #3b3936,
    0 50px 90px -30px rgba(35, 31, 32, .45);
  transform-origin: 0 0;
  flex: none;
}
.device::before, .device::after { /* side buttons */
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: #8d8881;
}
.device::before { left: -8px; top: 190px; height: 64px; box-shadow: 0 86px 0 #8d8881; }
.device::after { right: -8px; top: 250px; height: 100px; }

.device-screen {
  --sat: 62px;
  --sab: 34px;
  position: relative; width: 402px; height: 874px; border-radius: 56px; overflow: hidden; background: #000;
  isolation: isolate; touch-action: none;
}
.device-screen .screen-host { position: absolute; inset: 0; }

.island {
  position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px;
  border-radius: 19px; background: #000; z-index: 20; pointer-events: none;
}
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 62px; z-index: 19; pointer-events: none;
  color: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.statusbar.light { color: #fff; }
.statusbar.hidden { display: none; }
.statusbar .sb-time {
  position: absolute; left: 0; width: 162px; top: 21px; text-align: center;
  font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.4px;
}
.statusbar .sb-icons { position: absolute; right: 40px; top: 25px; display: flex; gap: 6px; align-items: center; }
.statusbar .sb-icons svg:nth-child(1) { width: 18px; height: 12px; }
.statusbar .sb-icons svg:nth-child(2) { width: 16px; height: 12px; }
.statusbar .sb-icons svg:nth-child(3) { width: 27.5px; height: 13px; }
.home-ind {
  position: absolute; bottom: 8px; left: 50%; width: 139px; height: 5px; margin-left: -69.5px; border-radius: 3px;
  background: #000; z-index: 19; pointer-events: none;
}
.home-ind.light { background: #fff; }

/* ---- effects ------------------------------------------------------------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.fx .ring {
  position: absolute; border: 4px solid #34c759; border-radius: 16px;
  box-shadow: 0 0 0 5px rgba(52, 199, 89, .28), 0 0 28px rgba(52, 199, 89, .55);
  animation: ff-ring .45s cubic-bezier(.2, .9, .3, 1.35) both;
}
.fx .ring.timeout { border-color: #ff9500; box-shadow: 0 0 0 5px rgba(255, 149, 0, .28), 0 0 28px rgba(255, 149, 0, .55); }
.fx .ring.reveal { animation: none; }
@keyframes ff-ring { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fx .miss { position: absolute; width: 0; height: 0; }
.fx .miss svg { position: absolute; width: 40px; height: 40px; left: -20px; top: -20px; color: #ff3b30;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); animation: ff-miss .9s ease-out both; }
.fx .miss b {
  position: absolute; left: 22px; top: -34px; white-space: nowrap; font: 700 17px/1 -apple-system, "Helvetica Neue", sans-serif;
  color: #fff; background: #ff3b30; padding: 5px 8px; border-radius: 10px; animation: ff-plus 1s ease-out both;
}
@keyframes ff-miss { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ff-plus { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }