body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #1F1F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* WAVE_BITE_RESPONSIVE_SHELL_V8 */
:root {
  color-scheme: dark;
  --wb-navy-abgrund: #06101e;
  --wb-navy-glas: rgba(8, 31, 51, .86);
  --wb-gold: #e8c76d;
  --wb-creme: #f5f0df;
  --wb-blue: #33c9f0;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--wb-navy-abgrund);
  touch-action: none;
  overscroll-behavior: none;
}
#unity-container {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
}
#unity-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: var(--wb-navy-abgrund);
  touch-action: none;
}
#unity-footer { display: none !important; }
#unity-loading-bar {
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(22, 92, 132, .42), transparent 36%),
    linear-gradient(180deg, #071b2d 0%, #06101e 72%);
  color: var(--wb-creme);
  z-index: 20;
  box-sizing: border-box;
  padding:
    max(20px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}
#unity-logo { display: none !important; }
/* ===== KINO-EBENE: Nachtrevier ===== */
#wavebite-cine { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#wavebite-cine * { position: absolute; }

/* Himmel */
.wb-cine-sky {
  inset: 0;
  background:
    radial-gradient(115% 62% at 72% 30%, rgba(46, 96, 132, .34), transparent 58%),
    radial-gradient(150% 80% at 50% 108%, rgba(10, 42, 66, .55), transparent 60%),
    linear-gradient(180deg, #020810 0%, #061626 46%, #0a2136 56%, #061120 100%);
  animation: wbSceneIn 1.2s ease-out both;
}
/* Sterne */
.wb-cine-stars, .wb-cine-stars-b {
  left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%;
  background: transparent;
  box-shadow:
    8vw 6vh 0 0 rgba(245,240,223,.55), 19vw 12vh 0 0 rgba(245,240,223,.32),
    27vw 4vh 0 0 rgba(200,225,240,.45), 36vw 15vh 0 0 rgba(245,240,223,.28),
    44vw 8vh 0 0 rgba(245,240,223,.5), 52vw 18vh 0 0 rgba(200,225,240,.3),
    61vw 5vh 0 0 rgba(245,240,223,.42), 69vw 13vh 0 0 rgba(245,240,223,.3),
    77vw 7vh 0 0 rgba(200,225,240,.5), 84vw 16vh 0 0 rgba(245,240,223,.34),
    91vw 10vh 0 0 rgba(245,240,223,.46), 14vw 21vh 0 0 rgba(245,240,223,.26),
    32vw 24vh 0 0 rgba(200,225,240,.24), 57vw 26vh 0 0 rgba(245,240,223,.22),
    73vw 22vh 0 0 rgba(245,240,223,.26), 88vw 25vh 0 0 rgba(200,225,240,.2),
    5vw 15vh 0 0 rgba(245,240,223,.3), 96vw 18vh 0 0 rgba(245,240,223,.24);
  animation: wbSceneIn 1.6s ease-out both;
}
.wb-cine-stars-b {
  box-shadow:
    11vw 9vh 0 0 rgba(245,240,223,.4), 24vw 17vh 0 0 rgba(200,225,240,.34),
    41vw 3vh 0 0 rgba(245,240,223,.36), 49vw 11vh 0 0 rgba(245,240,223,.3),
    64vw 20vh 0 0 rgba(200,225,240,.28), 81vw 3vh 0 0 rgba(245,240,223,.38),
    93vw 13vh 0 0 rgba(245,240,223,.3), 17vw 27vh 0 0 rgba(200,225,240,.2);
  animation: wbTwinkle 5.4s ease-in-out 1.6s infinite;
}
/* Mondlicht-Dunst */
.wb-cine-moon {
  right: 12vw; top: 6vh; width: 34vmin; height: 34vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(214, 233, 244, .16), rgba(160, 205, 228, .05) 42%, transparent 68%);
  filter: blur(2px);
  animation: wbSceneIn 1.8s ease-out both;
}
/* Ufer-Silhouette am Horizont */
.wb-cine-shore {
  left: -2vw; right: -2vw; top: calc(55vh - 6.4vmin); height: 6.6vmin;
  background: linear-gradient(180deg, #04101d 0%, #030b15 100%);
  clip-path: polygon(0% 100%, 0% 62%, 3% 58%, 6% 66%, 9% 52%, 11% 60%, 14% 44%, 15.5% 58%, 19% 54%, 22% 64%, 26% 48%, 28% 60%, 31% 56%, 33% 38%, 34.2% 56%, 38% 52%, 42% 62%, 46% 50%, 49% 58%, 52% 46%, 54% 60%, 58% 54%, 61% 30%, 61.9% 54%, 65% 50%, 68% 62%, 72% 44%, 74% 58%, 78% 52%, 81% 60%, 84% 48%, 87% 56%, 90% 42%, 92% 58%, 95% 52%, 98% 60%, 100% 56%, 100% 100%);
  filter: blur(.5px);
  opacity: .92;
  animation: wbSceneIn 1.5s ease-out .2s both;
}
/* Warme Uferlichter */
.wb-cine-shore-lights {
  left: 0; right: 0; top: calc(55vh - 1.2vmin); height: 2px;
  background-image:
    radial-gradient(circle, rgba(232,199,109,.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,214,140,.6) 0 1px, transparent 2px);
  background-size: 23vw 2px, 13vw 2px;
  background-position: 4vw 0, 9vw 0;
  background-repeat: repeat-x;
  opacity: .5;
  animation: wbSceneIn 2s ease-out .5s both;
}
/* Wasserflaeche */
.wb-cine-sea {
  left: 0; right: 0; top: 55vh; bottom: 0;
  background:
    radial-gradient(120% 90% at 72% 0%, rgba(52, 106, 143, .30), transparent 52%),
    linear-gradient(180deg, #0a2438 0%, #081b2c 34%, #050f1c 100%);
  animation: wbSceneIn 1.2s ease-out both;
}
.wb-cine-sea::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0 7px,
    rgba(120, 190, 220, .05) 7px 8px,
    transparent 8px 15px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.85) 18%, rgba(0,0,0,.35) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.85) 18%, rgba(0,0,0,.35) 70%, transparent 100%);
  animation: wbSeaDrift 7s linear infinite;
}
/* Mondspur auf dem Wasser */
.wb-cine-glints {
  left: 68vw; top: 55.2vh; width: 14vw; height: 34vh;
  background:
    linear-gradient(180deg, rgba(190, 226, 244, .30), rgba(170, 214, 236, .12) 40%, transparent 88%) 50% 0 / 46% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 1.6vh, rgba(200, 230, 245, .12) 1.6vh 2vh, transparent 2vh 3.4vh) 50% 0 / 78% 100% no-repeat;
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(3px);
  opacity: .5;
  animation: wbGlint 4.6s ease-in-out infinite;
}
/* Nebel */
.wb-cine-fog {
  border-radius: 50%;
  filter: blur(14px);
  will-change: transform;
}
.wb-fog-far {
  left: -30vw; top: calc(55vh - 9vmin); width: 90vw; height: 12vmin;
  background: radial-gradient(50% 50% at 50% 50%, rgba(130, 170, 195, .10), transparent 70%);
  animation: wbFogFar 46s linear infinite;
}
.wb-fog-near {
  left: -40vw; bottom: -4vh; width: 110vw; height: 22vmin;
  background: radial-gradient(50% 50% at 50% 50%, rgba(96, 138, 164, .12), transparent 70%);
  animation: wbFogNear 31s linear infinite;
}
/* Sonar-Ringe */
.wb-cine-sonarclip {
  left: 0; right: 0; top: 55.2vh; bottom: 0;
  overflow: hidden;
}
.wb-cine-sonar, .wb-sonar-b {
  left: 50%; top: 6vh; width: 46vmin; height: 11vmin;
  margin: -5.5vmin 0 0 -23vmin;
  border: 1px solid rgba(80, 210, 240, .5);
  border-radius: 50%;
  opacity: 0;
  animation: wbSonar 4.6s ease-out 1.1s infinite;
}
.wb-sonar-b { animation-delay: 3.4s; border-color: rgba(80, 210, 240, .34); }

/* Einsatzboot-Silhouette */
.wb-cine-boat {
  left: 50%; top: 55vh;
  width: min(64vmin, 470px); height: calc(min(64vmin, 470px) * .37);
  margin-top: calc(min(64vmin, 470px) * -.315);
  transform: translateX(-50%);
  animation: wbBoatIn 1.4s cubic-bezier(.2,.7,.3,1) .5s both;
}
.wb-cine-boat > .wb-boat-heave {
  position: absolute; inset: 0;
  animation: wbHeave 5.2s ease-in-out infinite;
}
.wb-cine-boat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Blaulichtbalken */
.wb-cine-beacon {
  left: 36%; top: 28.5%; width: 7%; height: 2.6%;
  border-radius: 2px;
  background: #37b9ff;
  box-shadow: 0 0 10px 3px rgba(55, 185, 255, .85), 0 0 26px 8px rgba(45, 150, 235, .4);
  animation: wbBeacon 1.15s steps(2, end) 1.7s infinite, wbSceneIn .4s ease-out 1.7s both;
}
/* Suchscheinwerfer: Ursprung exakt am Scheinwerfergehaeuse (SVG 168/61 von 600x222) */
.wb-cine-beam {
  left: 27%; top: calc(27.5% - 10vmin);
  width: 30vw; height: 20vmin;
  transform-origin: 0 50%;
  transform: rotate(157deg);
  background: conic-gradient(from 81deg at 0% 50%,
    transparent 0deg,
    rgba(215, 235, 244, .16) 4deg,
    rgba(245, 240, 223, .34) 9deg,
    rgba(215, 235, 244, .16) 14deg,
    transparent 18deg);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,.75) 55%, transparent 97%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,.75) 55%, transparent 97%);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: wbBeamOn .9s ease-out 1.5s both, wbBeamSweep 11s ease-in-out 2.4s infinite alternate;
}
.wb-beam-pool {
  right: 0; top: 4%; width: 24%; height: 92%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(215, 235, 244, .30), rgba(190, 222, 238, .09) 62%, transparent);
  filter: blur(5px);
}
.wb-cine-beamglow {
  left: 26%; top: 25.4%; width: 3.4%; height: 5.6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,240,223,.95), rgba(220,235,240,.28) 55%, transparent 78%);
  filter: blur(1px);
  animation: wbBeamOn .9s ease-out 1.5s both;
}
/* Spiegelungen unter dem Boot */
.wb-cine-reflect {
  left: 50%; top: 55.4vh; width: min(64vmin, 470px); height: 20vh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(55, 185, 255, .17), transparent 62%) 34% 0 / 9% 100% no-repeat,
    linear-gradient(180deg, rgba(232, 199, 109, .10), transparent 55%) 56% 0 / 5% 100% no-repeat,
    linear-gradient(180deg, rgba(160, 205, 230, .12), transparent 70%) 45% 0 / 26% 100% no-repeat,
    linear-gradient(180deg, rgba(245, 240, 223, .10), transparent 45%) 27% 0 / 4% 100% no-repeat;
  filter: blur(3px);
  animation: wbReflect 5.2s ease-in-out infinite, wbSceneIn 1.6s ease-out 1s both;
}
/* Gischt-Staub im Lichtkegel */
.wb-cine-spray {
  left: 12vw; top: 52vh; width: 2px; height: 2px; border-radius: 50%;
  background: transparent;
  box-shadow:
    2vw 6vh 0 0 rgba(220, 236, 244, .3), 6vw 3vh 0 0 rgba(220, 236, 244, .22),
    10vw 8vh 0 0 rgba(220, 236, 244, .26), 15vw 5vh 0 0 rgba(220, 236, 244, .18),
    19vw 9vh 0 0 rgba(220, 236, 244, .22), 24vw 4vh 0 0 rgba(220, 236, 244, .16);
  animation: wbSpray 8s linear 2.4s infinite;
  opacity: 0;
}
/* Vignette + Lesbarkeitsverlauf */
.wb-cine-vignette {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, .68) 0%, rgba(2, 8, 16, .25) 18%, transparent 34%),
    radial-gradient(120% 90% at 50% 52%, transparent 58%, rgba(1, 5, 11, .62) 100%);
}

/* ===== TEXT-EBENE ===== */
#wavebite-loader {
  position: relative;
  width: min(86vw, 470px);
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .06em;
}
.wb-loader-kicker {
  color: var(--wb-gold);
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 750;
  letter-spacing: .34em;
  text-indent: .34em;
  animation: wbKicker 1.1s ease-out .9s both;
}
.wb-loader-title {
  margin-top: 10px;
  font-size: clamp(26px, 7.2vw, 44px);
  font-weight: 850;
  letter-spacing: .1em;
  text-indent: .1em;
  color: var(--wb-creme);
  background: linear-gradient(100deg, #f5f0df 0 38%, #ffe9a8 46%, #e8c76d 50%, #f5f0df 58% 100%);
  background-size: 240% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 24px rgba(232, 199, 109, .18);
  animation: wbTitleIn 1s cubic-bezier(.2,.7,.2,1) 1.15s both, wbTitleSheen 2.2s ease-out 1.9s both;
}
.wb-loader-status {
  margin-top: 13px;
  color: rgba(232, 240, 244, .8);
  font-size: clamp(11px, 3.1vw, 14px);
  letter-spacing: .12em;
  min-height: 1.4em;
  animation: wbUiIn .8s ease-out 1.8s both;
}
.wb-loader-progress {
  margin-top: 8px;
  color: var(--wb-gold);
  font-size: clamp(13px, 3.4vw, 17px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  animation: wbUiIn .8s ease-out 1.9s both;
}
.wb-loader-detail {
  margin-top: 7px;
  color: rgba(232, 240, 244, .5);
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: .07em;
  animation: wbUiIn .8s ease-out 2s both;
}
#unity-progress-bar-empty {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: min(76vw, 380px) !important;
  height: 7px !important;
  margin: 16px auto 42vh !important;
  border: 1px solid rgba(232, 199, 109, .5);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, .34) !important;
  animation: wbUiIn .8s ease-out 1.9s both;
}
#unity-progress-bar-full {
  height: 100% !important;
  border-radius: inherit;
  background: linear-gradient(90deg, #1fb7e3, #e8c76d) !important;
  box-shadow: 0 0 14px rgba(51, 201, 240, .65);
}

/* ===== Choreografie ===== */
@keyframes wbSceneIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wbTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes wbSeaDrift { to { transform: translateY(15px); } }
@keyframes wbGlint { 0%, 100% { opacity: .38; } 50% { opacity: .6; } }
@keyframes wbFogFar { 0% { transform: translateX(0); } 100% { transform: translateX(46vw); } }
@keyframes wbFogNear { 0% { transform: translateX(0); } 100% { transform: translateX(-38vw); } }
@keyframes wbSonar {
  0% { transform: scale(.12); opacity: 0; }
  6% { opacity: .75; }
  70% { opacity: .12; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes wbBoatIn {
  from { opacity: 0; transform: translateX(-50%) translateY(2.2vmin); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes wbHeave {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-1.1vmin) rotate(.7deg); }
}
@keyframes wbBeacon { 50% { opacity: .18; box-shadow: none; } }
@keyframes wbBeamOn {
  0% { opacity: 0; }
  35% { opacity: .55; }
  48% { opacity: .12; }
  62% { opacity: .8; }
  100% { opacity: .9; }
}
@keyframes wbBeamSweep {
  0% { transform: rotate(150deg); }
  100% { transform: rotate(166deg); }
}
@keyframes wbReflect {
  0%, 100% { opacity: .55; transform: translateX(-50%) scaleY(1); }
  50% { opacity: .8; transform: translateX(-50%) scaleY(1.06); }
}
@keyframes wbSpray {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: .5; }
  88% { opacity: .3; }
  100% { opacity: 0; transform: translateY(-5vh); }
}
@keyframes wbKicker {
  from { opacity: 0; letter-spacing: .55em; }
  to { opacity: 1; letter-spacing: .34em; }
}
@keyframes wbTitleIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wbTitleSheen {
  from { background-position: 120% 0; }
  to { background-position: -60% 0; }
}
@keyframes wbUiIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #wavebite-cine *, .wb-loader-kicker, .wb-loader-title, .wb-loader-status,
  .wb-loader-progress, .wb-loader-detail, #unity-progress-bar-empty {
    animation: none !important;
  }
  .wb-cine-beam, .wb-cine-beamglow { opacity: .8; }
  .wb-cine-spray { opacity: 0; }
}
/* Portrait: Boot tiefer + Text hoeher, Szene bleibt voll */
@media (orientation: portrait) {
  .wb-cine-boat { width: min(74vmin, 470px); height: calc(min(74vmin, 470px) * .37); margin-top: calc(min(74vmin, 470px) * -.315); }
  .wb-cine-reflect { width: min(74vmin, 470px); }
  .wb-cine-beam { width: 46vw; }
  .wb-cine-glints { left: 60vw; width: 22vw; }
  #unity-progress-bar-empty { margin-bottom: 34vh !important; }
  .wb-loader-kicker { letter-spacing: .16em; text-indent: .16em; font-size: clamp(9px, 2.4vw, 13px); white-space: nowrap; }
}
/* Flache Landscape-Handys: kompakter Textblock, Boot nach rechts */
@media (orientation: landscape) and (max-height: 480px) {
  #wavebite-loader { width: min(70vw, 430px); }
  #unity-progress-bar-empty { margin-bottom: 30vh !important; width: min(56vw, 320px) !important; }
  .wb-loader-kicker { font-size: 9px; }
  .wb-loader-title { font-size: 22px; margin-top: 4px; }
  .wb-loader-status { font-size: 10px; margin-top: 6px; }
  .wb-loader-progress { font-size: 12px; margin-top: 4px; }
  .wb-loader-detail { font-size: 8px; margin-top: 3px; }
  .wb-cine-boat { left: 76%; width: 46vmin; height: calc(46vmin * .37); margin-top: calc(46vmin * -.315); }
  .wb-cine-reflect { left: 76%; width: 46vmin; }
  .wb-cine-beam { width: 26vw; }
  .wb-cine-glints { left: 82vw; width: 10vw; }
}
@supports (height: 100dvh) {
  #unity-container { height: 100dvh !important; }
}
@media (orientation: portrait) {
  #unity-container, #unity-canvas {
    width: 100dvw !important;
    height: 100dvh !important;
  }
}