/* Startbildschirm der App: ein Abschlag im Stil von ShotOnline */
.sp { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto auto auto auto; justify-items: center; align-items: center;
  gap: 8px; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px)); overflow: hidden; background: #02080a;
  transition: opacity .55s ease, transform .55s ease; }
.sp.out { opacity: 0; transform: scale(1.08); pointer-events: none; }

/* Kurs im Hintergrund mit langsamer Kamerafahrt */
.sp-bg { position: absolute; inset: -6%; background: url('assets/img/theme/bg-fairway-mobil.webp') center / cover no-repeat; animation: sp-cam 14s ease-in-out infinite alternate; }
.sp-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(2, 8, 10, .15), rgba(2, 8, 10, .75) 70%), linear-gradient(rgba(2, 8, 10, .55), rgba(2, 8, 10, .1) 35%, rgba(2, 8, 10, .85)); }
@keyframes sp-cam { from { transform: scale(1.02) translate(-2%, 1%); } to { transform: scale(1.14) translate(2%, -2%); } }
.sp > *:not(.sp-bg):not(.sp-shade):not(.sp-sparks) { position: relative; z-index: 1; }

/* Lichtfunken */
.sp-sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #00f8ff; box-shadow: 0 0 8px #00f8ff; opacity: 0; animation: sp-rise 6s linear infinite; }
.sp-sparks i:nth-child(odd) { background: #f5c518; box-shadow: 0 0 8px #f5c518; }
.sp-sparks i:nth-child(1) { left: 6%; animation-delay: .2s; } .sp-sparks i:nth-child(2) { left: 14%; animation-delay: 2.4s; }
.sp-sparks i:nth-child(3) { left: 23%; animation-delay: 1.1s; } .sp-sparks i:nth-child(4) { left: 31%; animation-delay: 3.6s; }
.sp-sparks i:nth-child(5) { left: 40%; animation-delay: .7s; } .sp-sparks i:nth-child(6) { left: 49%; animation-delay: 4.4s; }
.sp-sparks i:nth-child(7) { left: 57%; animation-delay: 1.8s; } .sp-sparks i:nth-child(8) { left: 66%; animation-delay: 3s; }
.sp-sparks i:nth-child(9) { left: 74%; animation-delay: .4s; } .sp-sparks i:nth-child(10) { left: 82%; animation-delay: 2.9s; }
.sp-sparks i:nth-child(11) { left: 89%; animation-delay: 1.5s; } .sp-sparks i:nth-child(12) { left: 95%; animation-delay: 5s; }
@keyframes sp-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-105vh) scale(1.2); opacity: 0; } }

/* Logos */
.sp-top { display: grid; justify-items: center; gap: 6px; }
.sp-logo { width: min(86vw, 380px); height: auto; filter: drop-shadow(0 0 14px rgba(0, 248, 255, .55)); animation: sp-drop .9s cubic-bezier(.2, .9, .25, 1.25) .15s both, sp-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes sp-drop { from { opacity: 0; transform: translateY(-40px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes sp-breathe { 50% { filter: drop-shadow(0 0 24px rgba(0, 248, 255, .85)); } }
.sp-for { display: flex; align-items: center; gap: 8px; animation: sp-fade .7s ease .7s both; }
.sp-for span { font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #cfeff1; text-shadow: 0 1px 4px #000; }
.sp-for img { width: 140px; height: auto; filter: drop-shadow(0 1px 4px #000); }
@keyframes sp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Szene mit Golfer, Ballflug und Fahne */
.sp-scene { width: min(100%, 460px); height: auto; max-height: 38vh; overflow: visible; animation: sp-fade .6s ease .5s both; }
.sp-scene image { filter: drop-shadow(0 0 10px rgba(0, 248, 255, .55)); }

/* Schlagbalken wie beim Abschlag: hoch zur Kraft, zurück in die Trefferzone */
.sp-gauge { position: relative; width: min(62vw, 260px); animation: sp-fade .5s ease .6s both; }
.sp-gauge img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 4px 18px rgba(0, 0, 0, .6); }
.sp-mark { position: absolute; top: -8%; bottom: -8%; left: 4%; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px #00f8ff;
  animation: sp-power 1.2s cubic-bezier(.45, 0, .55, 1) .85s both; }
@keyframes sp-power { 0% { left: 4%; } 58% { left: 95%; } 100% { left: 14%; } }
.sp-flash { position: absolute; inset: -20% -4%; border-radius: 8px; background: radial-gradient(ellipse at 14% 50%, rgba(255, 255, 255, .95), rgba(0, 248, 255, .35) 30%, transparent 60%); opacity: 0;
  animation: sp-flash .5s ease-out 2.05s both; }
@keyframes sp-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* Spieltext */
.sp-nice { font: italic 900 clamp(30px, 10vw, 46px) / 1 var(--font-deco); letter-spacing: .02em; color: #fff4c2;
  background: linear-gradient(180deg, #fff9d9 10%, #f5c518 55%, #c77d00 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #5a3500) drop-shadow(0 0 14px rgba(245, 197, 24, .7)); animation: sp-nice 1.1s cubic-bezier(.2, 1.4, .4, 1) 3.25s both; }
@keyframes sp-nice { 0% { opacity: 0; transform: scale(2.4) rotate(-6deg); } 60% { opacity: 1; transform: scale(.92) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }

/* Der Knopf: ShotOnline / Weitenrechner */
.sp-btn { position: relative; display: grid; gap: 2px; justify-items: center; min-width: min(82vw, 330px); padding: 14px 28px 16px; border-radius: 22px; cursor: pointer; overflow: hidden;
  border: 2px solid #00f8ff; color: #eaffff; background: linear-gradient(180deg, rgba(0, 90, 98, .92), rgba(2, 20, 24, .95));
  box-shadow: 0 0 0 1px rgba(0, 248, 255, .5), 0 0 26px rgba(0, 248, 255, .55), inset 0 0 22px rgba(0, 248, 255, .25);
  animation: sp-up .8s cubic-bezier(.2, 1.1, .3, 1) 3.7s both, sp-pulse 2.2s ease-in-out 4.6s infinite; -webkit-tap-highlight-color: transparent; }
.sp-btn span:first-child { font: 700 19px var(--font-caps); letter-spacing: .06em; color: #9ff7ff; }
.sp-btn span:last-child { font: 900 clamp(24px, 7.6vw, 32px) / 1.1 var(--font-deco); text-shadow: 0 0 12px rgba(0, 248, 255, .9); }
.sp-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: sp-shine 3s ease-in-out 4.6s infinite; }
.sp-btn:active { transform: scale(.97); }
@keyframes sp-up { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sp-pulse { 50% { box-shadow: 0 0 0 1px rgba(0, 248, 255, .8), 0 0 44px rgba(0, 248, 255, .85), inset 0 0 28px rgba(0, 248, 255, .35); } }
@keyframes sp-shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.sp-foot { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #cfeff1; text-shadow: 0 1px 4px #000; animation: sp-fade .6s ease 4.1s both; }

@media (max-height: 640px) { .sp-scene { max-height: 30vh; } .sp-logo { width: min(70vw, 300px); } }
@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::after, .sp-bg { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}