.iphone { position: relative; height: clamp(560px, calc(100svh - 96px), 1100px); aspect-ratio: 1350 / 2760; max-width: 100%; }
.iphone-frame, .iphone-frame-shadow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* separate shadow copy behind the game, so the drop-shadow never darkens the screen or fights the island mask */
.iphone-frame-shadow { z-index: -1; filter: drop-shadow(0 12px 18px rgba(0, 8, 40, 0.45)) drop-shadow(0 40px 60px rgba(0, 8, 40, 0.55)); }
/* hides the Dynamic Island: 292x118 hole at (529, 107) of the 1350x2760 bezel */
.iphone-frame { -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 50% 4.05% / 21.63% 4.275% no-repeat; -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 50% 4.05% / 21.63% 4.275% no-repeat; mask-composite: exclude; }
.iphone-shadow { position: absolute; z-index: -1; left: 6%; right: -8%; bottom: -4%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 6, 30, 0.75), transparent); filter: blur(10px); pointer-events: none; }
/* screen cut-out of the 1350x2760 Apple bezel: 1206x2622 at (72, 69) */
/* laid out in iPhone 18 Pro points (402x874) so the SDK webview gets phone-like layout; --k fits it to the bezel */
#game { position: absolute; z-index: 1; left: 5.3333%; top: 2.5%; width: 402px; height: 874px; transform-origin: 0 0; transform: scale(var(--k, 0.75)); border-radius: 48px; overflow: hidden; background: #000; }
@media (max-width: 767px) { .iphone { height: auto; width: min(92%, calc(86svh * 1350 / 2760)); } }
#game iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-poster { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.game-poster:active span { scale: 0.95; background: rgba(0, 120, 72, 0.92); }
.game-poster:focus-visible span { outline: 3px solid #fff; outline-offset: 3px; }
.game-poster[hidden] { display: none; }
.game-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-poster span { position: absolute; left: 50%; bottom: 64px; translate: -50% 0; padding: 14px 26px; border-radius: 999px; background: rgba(9, 18, 40, 0.88); box-shadow: 0 0 0 3px #00bc70, 0 8px 24px rgba(0, 10, 40, 0.45); font: 600 20px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; white-space: nowrap; transition: scale 0.12s ease, background-color 0.12s ease; }
.akm-poster .akm-tour, .akm-poster .tour-tip, .akm-poster .tour-line, .akm-poster .tour-restart { display: none !important; }
.tour-exit { display: none; }
html.akm-full, html.akm-full body { overflow: hidden; }
.akm-full #game, .akm-full .akm-tour { position: fixed; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; transform: none; border-radius: 0 !important; }
.akm-full .iphone-frame, .akm-full .iphone-frame-shadow, .akm-full .iphone-shadow, .akm-full .tour-restart, .akm-full .tour-line { display: none !important; }
.akm-full .tour-exit { display: block; position: fixed; z-index: 5; left: 50%; top: calc(env(safe-area-inset-top) + 6px); translate: -50% 0; border: 0; border-radius: 999px; padding: 5px 12px; background: rgba(9, 18, 40, 0.6); color: #fff; font: 600 12px/1 var(--main--secondary-font, "DM Sans", Arial, sans-serif); cursor: pointer; }
.akm-full .tour-tip { position: fixed; max-width: 200px; padding: 7px 9px; column-gap: 6px; border-radius: 12px; }
.akm-full .tour-ico { width: 18px; height: 18px; font-size: 10px; }
.akm-full .tour-title, .akm-full .tour-tip.finish .tour-title { font-size: 13px; }
.akm-full .tour-text { font-size: 11.5px; }
.akm-full .tour-skip { font-size: 14px; }
.akm-full .tour-tip.finish .tour-end .tour-primary { padding: 10px 14px; font-size: 13px; }
.akm-tour { position: absolute; z-index: 3; overflow: hidden; left: 5.3333%; top: 2.5%; width: 402px; height: 874px; transform-origin: 0 0; transform: scale(var(--k, 0.75)); pointer-events: none; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.tour-ring, .tour-hand, .tour-box { position: absolute; transition: left 0.35s ease, top 0.35s ease, opacity 0.25s ease; }
.tour-hand svg { display: block; width: 100%; height: 100%; }
.tour-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(0, 188, 112, 0.55), 0 0 24px rgba(0, 188, 112, 0.8); animation: tour-ripple 1.4s ease-out infinite; }
.tour-hand { width: 46px; height: 60px; margin: -3px 0 0 -16px; filter: drop-shadow(0 4px 6px rgba(0, 10, 40, 0.45)); animation: tour-tap 1.4s ease-in-out infinite; }
.tour-box { border-radius: 14px; box-shadow: 0 0 0 3px #00bc70, 0 0 0 9999px rgba(4, 10, 30, 0.55), 0 0 28px rgba(0, 188, 112, 0.9); }
.tour-box.fade { opacity: 0; transition-duration: 0.6s; }
.tour-tip { position: absolute; z-index: 4; left: 0; top: 0; display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; row-gap: 2px; align-items: center; box-sizing: border-box; width: max-content; max-width: 250px; padding: 10px 10px 10px 10px; border-radius: 16px; background: rgba(9, 18, 40, 0.96); border: 1px solid var(--neutral-transparent--neutral-white-16, #ffffff29); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); color: #fff; font-family: var(--main--secondary-font, "DM Sans", Arial, sans-serif); letter-spacing: -0.01em; transform-origin: 100% 50%; scale: 0.2 0.5; opacity: 0; transition: scale 0.38s cubic-bezier(0.3, 1.45, 0.5, 1), opacity 0.18s; }
.tour-tip.on { scale: 1; opacity: 1; }
.tour-tip.on.quiet { opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.tour-tip::after { content: ""; position: absolute; right: -5.5px; top: var(--notch, 50%); width: 10px; height: 10px; margin-top: -5px; rotate: 45deg; background: rgb(9, 18, 40); border-top: 1px solid var(--neutral-transparent--neutral-white-16, #ffffff29); border-right: 1px solid var(--neutral-transparent--neutral-white-16, #ffffff29); }
.tour-tip.inset { transform-origin: 50% 50%; } .tour-tip.inset::after, .tour-tip.free::after { display: none; }
.tour-ico { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 188, 112, 0.16); color: #3ee39a; font-size: 12px; font-weight: 700; }
.tour-txt { display: contents; }
.tour-title { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; line-height: 1.25; }
.tour-text, .tour-end { grid-column: 2 / 4; }
.tour-text { font-size: 13px; line-height: 1.35; color: var(--brand-opaque--teal-200, #abc2da); }
.tour-skip { grid-column: 3; grid-row: 1; align-self: start; padding: 0 2px; border: 0; background: none; color: var(--neutral-transparent--neutral-white-50, #ffffff80); font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.tour-skip:hover { color: #fff; }
.tour-end { display: flex; margin-top: 10px; }
.tour-end .tour-primary { flex: 1; text-align: center; text-decoration: none; border: 0; border-radius: 999px; padding: 14px 24px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; }
.tour-primary { background: var(--system--success, #00bc70); color: #fff; } .tour-primary:hover { filter: brightness(1.1); }
.tour-tip.finish .tour-title { font-size: 15px; }
.tour-tip.finish .tour-end .tour-primary { padding: 13px 20px; font-size: 15px; }
.tour-line { position: absolute; z-index: 4; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.75); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); pointer-events: none; }
.akm-tour[hidden], .akm-tour [hidden], .tour-tip[hidden], .tour-tip [hidden], .tour-line[hidden], .tour-restart[hidden] { display: none !important; }
.tour-restart { position: absolute; z-index: 3; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%); white-space: nowrap; border: 1px solid var(--neutral-transparent--neutral-white-16, #ffffff29); border-radius: 999px; padding: 8px 16px; background: rgba(9, 18, 40, 0.7); color: #fff; font: 600 14px/1 var(--main--secondary-font, "DM Sans", Arial, sans-serif); cursor: pointer; }
@keyframes tour-ripple { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tour-tap { 0%, 100% { translate: 10px 14px; } 45%, 60% { translate: 0 0; scale: 0.92; } }
@media (prefers-reduced-motion: reduce) { .tour-ring, .tour-hand { animation: none; } .tour-ring, .tour-hand, .tour-box, .tour-tip { transition: none; } }