/* =========================
   MOBILE GAME MODE
   Sichere Version passend zur finalen script.js
========================= */

.mobile-game-mode {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at top left, rgba(70,164,255,.16), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(13,77,139,.12), transparent 24%),
    linear-gradient(180deg, #04101d 0%, #081a2c 100%);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.mobile-game-mode.is-visible {
  display: flex;
}

html.mobile-game-mode-active-root,
body.mobile-game-mode-active {
  overflow: hidden;
  overscroll-behavior: none;
}

body.mobile-game-mode-active {
  touch-action: none;
}

/* =========================
   TOPBAR
========================= */

.mobile-game-mode-topbar {
  position: relative;
  z-index: 40;
  min-height: 58px;
  padding:
    calc(env(safe-area-inset-top, 0px) + 10px)
    14px
    10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.12) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-game-mode-title {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-game-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  cursor: pointer;
  touch-action: manipulation;
}

.mobile-game-close:active {
  transform: scale(.96);
}

/* =========================
   ROTATE HINT
========================= */

.mobile-rotate-hint {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.78);
  z-index: 60;
  text-align: center;
}

.mobile-game-mode.show-rotate-hint .mobile-rotate-hint {
  display: flex;
}

.mobile-rotate-hint-box {
  width: min(320px, 100%);
  padding: 26px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.26);
}

.mobile-rotate-hint-box i {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  font-size: 1.4rem;
}

.mobile-rotate-hint-box strong {
  display: block;
  font-size: 1.08rem;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}

.mobile-rotate-hint-box span {
  display: block;
  color: rgba(255,255,255,.80);
  font-size: .95rem;
  line-height: 1.55;
}

/* =========================
   GAME HOST
========================= */

.mobile-game-stage-host {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  contain: layout size style;
}

.mobile-game-stage-host .premium-game-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: linear-gradient(180deg, #071524 0%, #0d2944 45%, #163a5d 100%);
  contain: layout size style;
}

.mobile-game-stage-host .premium-game-stage::before {
  display: none;
}

.mobile-game-stage-host #careerGameCanvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  object-fit: contain;
  display: block;
  touch-action: none;
}

/* =========================
   CONTROLS OVERLAY
========================= */

.mobile-controls-watermark {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* =========================
   JOYSTICK LINKS
========================= */

.mobile-joystick-wrap {
  position: absolute;
  left: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  width: 132px;
  height: 132px;
  pointer-events: auto;
}

.mobile-joystick-base {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.05) 58%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: none;
  user-select: none;
}

.mobile-joystick-base::before,
.mobile-joystick-base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255,255,255,.08);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mobile-joystick-base::before {
  width: 2px;
  height: 82px;
  border-radius: 999px;
}

.mobile-joystick-base::after {
  width: 82px;
  height: 2px;
  border-radius: 999px;
}

.mobile-joystick-ring {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}

.mobile-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.52), rgba(255,255,255,.18) 42%, rgba(126,192,255,.18) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 20px rgba(0,0,0,.22);
  transition: transform .04s linear;
  pointer-events: none;
}

.mobile-joystick-base.is-active .mobile-joystick-knob {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 28px rgba(0,0,0,.34),
    0 0 18px rgba(70,164,255,.18);
}

/* =========================
   JUMP BUTTON
========================= */

.mobile-jump-button {
  position: absolute;
  right: 22px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.20), rgba(126,192,255,.12) 45%, rgba(13,77,139,.20) 100%);
  color: #fff;
  display: inline-grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 30px rgba(0,0,0,.24);
  font-weight: 800;
  letter-spacing: -0.02em;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-jump-button span {
  font-size: 1rem;
}

.mobile-jump-button.is-pressed,
.mobile-jump-button:active {
  transform: scale(.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 24px rgba(0,0,0,.22),
    0 0 20px rgba(70,164,255,.20);
}

/* =========================
   MOBILE GAME OVERLAY
========================= */

.mobile-game-stage-host .career-game-overlay {
  padding: 14px;
  align-items: flex-end;
  justify-content: center;
}

.mobile-game-stage-host .career-game-overlay-box {
  width: min(320px, calc(100% - 20px));
  border-radius: 20px;
  padding: 14px;
}

.mobile-game-stage-host .career-game-overlay-box h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.15;
}

.mobile-game-stage-host .career-game-overlay-box h4:empty {
  display: none;
}

.mobile-game-stage-host .career-game-overlay-box p {
  display: none !important;
}

.mobile-game-stage-host .career-game-overlay-actions {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.mobile-game-stage-host .career-game-overlay-actions .btn,
.mobile-game-stage-host .career-game-overlay-actions button {
  width: 100%;
  min-height: 50px;
  font-size: .98rem;
}

/* =========================
   MOBILE SPEECH BUBBLE
========================= */

.mobile-game-stage-host .speech-bubble {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%) translateY(10px) scale(.96);
  transform-origin: bottom center;
  width: min(320px, calc(100% - 20px));
  max-width: min(320px, calc(100% - 20px));
  min-width: 0;
  padding: 14px 16px;
  border-radius: 18px;
  box-shadow:
    0 12px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.mobile-game-stage-host .speech-bubble.is-visible {
  transform: translateX(-50%) translateY(0) scale(1);
}

.mobile-game-stage-host .speech-bubble::after {
  display: none;
}

/* =========================
   MOBILE SASKIA CARD
========================= */

.mobile-game-stage-host .call-overlay {
  top: 8px;
  width: min(360px, calc(100% - 14px));
}

.mobile-game-stage-host .call-card {
  padding: 10px 12px;
  border-radius: 16px;
}

.mobile-game-stage-host .call-header {
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

.mobile-game-stage-host .avatar-wrap {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.mobile-game-stage-host .avatar-ring {
  inset: -3px;
}

.mobile-game-stage-host .avatar {
  width: 52px;
  height: 52px;
}

.mobile-game-stage-host .avatar-face {
  left: 13px;
  top: 15px;
  width: 26px;
  height: 26px;
}

.mobile-game-stage-host .avatar-hair {
  left: 7px;
  top: 5px;
  width: 34px;
  height: 18px;
  border-radius: 20px 20px 10px 10px;
}

.mobile-game-stage-host .avatar-hair::before {
  left: 4px;
  top: 5px;
  width: 12px;
  height: 9px;
}

.mobile-game-stage-host .avatar-ear {
  top: 23px;
  width: 6px;
  height: 9px;
}

.mobile-game-stage-host .avatar-ear-left {
  left: 10px;
}

.mobile-game-stage-host .avatar-ear-right {
  right: 10px;
}

.mobile-game-stage-host .avatar-eye {
  top: 26px;
  width: 3px;
  height: 3px;
}

.mobile-game-stage-host .avatar-eye-left {
  left: 21px;
}

.mobile-game-stage-host .avatar-eye-right {
  right: 21px;
}

.mobile-game-stage-host .avatar-brow {
  top: 22px;
  width: 7px;
  height: 2px;
}

.mobile-game-stage-host .avatar-brow-left {
  left: 19px;
}

.mobile-game-stage-host .avatar-brow-right {
  right: 19px;
}

.mobile-game-stage-host .avatar-nose {
  left: 25px;
  top: 28px;
  width: 2px;
  height: 5px;
}

.mobile-game-stage-host .avatar-mouth {
  left: 20px;
  top: 34px;
  width: 10px;
  height: 5px;
  border-bottom-width: 2px;
}

.mobile-game-stage-host .avatar-neck {
  left: 22px;
  top: 39px;
  width: 7px;
  height: 5px;
}

.mobile-game-stage-host .avatar-shoulders {
  left: 8px;
  width: 36px;
  height: 13px;
  bottom: -2px;
}

.mobile-game-stage-host .avatar-headset::before,
.mobile-game-stage-host .avatar-headset::after {
  top: 17px;
  width: 6px;
  height: 13px;
}

.mobile-game-stage-host .avatar-headset::before {
  left: 6px;
}

.mobile-game-stage-host .avatar-headset::after {
  right: 6px;
}

.mobile-game-stage-host .avatar-headset span {
  left: 10px;
  top: 5px;
  width: 28px;
  height: 15px;
  border-width: 2px;
}

.mobile-game-stage-host .avatar-mic {
  right: 6px;
  top: 29px;
  width: 14px;
  height: 2px;
}

.mobile-game-stage-host .avatar-mic::after {
  width: 5px;
  height: 5px;
  right: -2px;
  top: -2px;
}

.mobile-game-stage-host .name {
  font-size: 13px;
}

.mobile-game-stage-host .role,
.mobile-game-stage-host .call-status {
  font-size: 11px;
}

.mobile-game-stage-host .call-text {
  font-size: 12px;
  padding: 9px 10px;
  line-height: 1.45;
}

/* =========================
   LEADERBOARD MOBILE
========================= */

@media (max-width: 860px) {
  .mobile-game-stage-host #gameOverlayLeaderboard {
    display: none;
  }

  .mobile-game-mode.is-visible .mobile-game-stage-host #gameOverlayLeaderboard {
    display: block;
  }
}

/* =========================
   LANDSCAPE
========================= */

@media (max-width: 860px) and (orientation: landscape) {
  .mobile-game-mode-topbar {
    min-height: 50px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    padding-bottom: 6px;
  }

  .mobile-joystick-wrap {
    left: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    width: 116px;
    height: 116px;
  }

  .mobile-joystick-base {
    width: 116px;
    height: 116px;
  }

  .mobile-joystick-ring {
    inset: 16px;
  }

  .mobile-joystick-knob {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
  }

  .mobile-jump-button {
    width: 84px;
    height: 84px;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  .mobile-jump-button span {
    font-size: .95rem;
  }

  .mobile-game-stage-host .call-overlay {
    top: 8px;
    width: min(360px, calc(100% - 14px));
  }

  .mobile-game-stage-host .call-card {
    padding: 10px 12px;
    border-radius: 16px;
  }

  .mobile-game-stage-host .call-text {
    font-size: 12px;
    padding: 9px 10px;
  }

  .mobile-game-stage-host .career-game-overlay-box {
    max-width: 460px;
    padding: 14px 16px;
  }

  .mobile-game-stage-host .speech-bubble {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* =========================
   PORTRAIT
========================= */

@media (max-width: 860px) and (orientation: portrait) {
  .mobile-game-mode.show-rotate-hint .mobile-controls-watermark {
    opacity: .16;
  }

  .mobile-game-mode.show-rotate-hint .mobile-game-stage-host {
    filter: blur(2px);
  }
}

/* =========================
   DESKTOP SAFETY
========================= */

@media (min-width: 861px) {
  .mobile-game-mode {
    display: none !important;
  }
}

/* =========================
   IMMERSIVE STABILITY
========================= */

html.mobile-game-mode-active-root,
html.mobile-game-mode-active-root body {
  width: 100%;
  height: 100%;
}

@supports (height: 100dvh) {
  .mobile-game-mode {
    height: 100dvh;
    min-height: 100dvh;
  }
}


/* =========================
   DOUBLE TAP / ZOOM BLOCK
========================= */

html,
body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

.mobile-game-mode,
.mobile-game-stage-host,
#careerGameCanvas {
  touch-action: none;
}

.mobile-game-mode * {
  -webkit-user-select: none;
  user-select: none;
}

body {
  -webkit-touch-callout: none;
}