.cat-runner-root,
  .cat-runner-root * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  .cat-runner-root {
    --color-bg-dark: #270827;
    --color-bg-mid: #4b124b;
    --color-game-top: #503e5c;
    --color-game-bottom: #34223f;
    --color-magenta: #e6007e;
    --color-magenta-light: #ff9bd2;
    --color-text: #ffffff;

    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-text);
    background: var(--color-bg-dark);

    touch-action: manipulation;
    isolation: isolate;
  }

  .cat-runner-root .game-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background:
      radial-gradient(circle at center, var(--color-bg-mid) 0%, var(--color-bg-dark) 68%);
  }

  .cat-runner-root .game {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
    background: var(--color-game-top);

    border-top: 3px solid var(--color-magenta);
    border-bottom: 3px solid var(--color-magenta);

    image-rendering: pixelated;
    touch-action: manipulation;
  }

  .cat-runner-root .game:focus {
    outline: none;
  }

  .cat-runner-root .sky {
    position: absolute;
    inset: 0;

    background:
      linear-gradient(var(--color-game-top) 0%, var(--color-game-bottom) 100%);

    z-index: 0;
    pointer-events: none;
  }

  .cat-runner-root .clouds,
  .cat-runner-root .city,
  .cat-runner-root .street {
    position: absolute;
    left: 0;

    width: 100%;

    background-repeat: repeat-x;
    background-position-x: 0;

    image-rendering: pixelated;
    pointer-events: none;
    will-change: background-position;
  }

  .cat-runner-root .clouds {
    top: 7%;
    height: 100px;
    background-size: 1024px 100px;
    z-index: 1;
  }

  .cat-runner-root .city {
    bottom: 64px;
    height: 200px;
    background-size: 1024px 200px;

    filter: grayscale(60%) brightness(50%) blur(0.5px);
    z-index: 2;
  }

  .cat-runner-root .street {
    bottom: 0;
    height: 64px;
    background-size: 1024px 64px;

    filter: grayscale(100%) brightness(50%) blur(0.5px);
    z-index: 3;
  }

  /* =========================
     HUD
  ========================= */

  .cat-runner-root .hud {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));

    display: grid;
    grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
    align-items: flex-start;
    gap: clamp(5px, 1.5vw, 10px);

    z-index: 20;
    pointer-events: none;
  }

  .cat-runner-root .hud .score-box:first-child {
    justify-self: start;
  }

  .cat-runner-root .hud .score-box:last-child {
    justify-self: end;
  }

  .cat-runner-root .score-box {
    min-width: clamp(64px, 18vw, 92px);
    padding: clamp(5px, 1.4vw, 7px) clamp(6px, 2vw, 10px);

    color: #ffffff;
    text-align: center;

    background: rgba(39, 8, 39, 0.82);
    border: 2px solid var(--color-magenta);

    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.18),
      0 0 14px rgba(230, 0, 126, 0.55);

    pointer-events: none;
  }

  .cat-runner-root .score-box span {
    display: block;

    font-size: clamp(8px, 2vw, 10px);
    line-height: 1;

    color: var(--color-magenta-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .cat-runner-root .score-box strong {
    display: block;
    margin-top: 3px;

    font-size: clamp(17px, 4.5vw, 22px);
    line-height: 1;

    color: #ffffff;
  }

  .cat-runner-root .hud-center {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.5vw, 8px);

    justify-self: center;

    z-index: 25;
    pointer-events: auto;
  }

  .cat-runner-root .hunger-bar {
    min-width: clamp(130px, 42vw, 190px);
    padding: clamp(5px, 1.5vw, 7px) clamp(7px, 2vw, 10px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    color: #ffffff;
    text-align: center;

    background: rgba(39, 8, 39, 0.82);
    border: 2px solid var(--color-magenta);

    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.18),
      0 0 14px rgba(230, 0, 126, 0.55);

    image-rendering: pixelated;
  }

  .cat-runner-root .hunger-label {
    display: block;

    margin: 0;
    padding: 0;

    font-size: clamp(8px, 1.8vw, 9px);
    font-weight: 800;
    line-height: 1;

    color: var(--color-magenta-light);

    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 var(--color-bg-dark);
  }

  .cat-runner-root #hungerDaysLabel {
    min-height: 10px;

    color: #ffffff;
    opacity: 0.9;
  }

  .cat-runner-root .fish-icons {
    min-height: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1px, 0.8vw, 3px);
  }

  .cat-runner-root .fish {
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1;

    transform-origin: center;

    filter:
      drop-shadow(1px 1px 0 var(--color-bg-dark))
      drop-shadow(0 0 4px rgba(230, 0, 126, 0.7));

    transition:
      opacity 0.25s ease,
      filter 0.25s ease,
      transform 0.25s ease;
  }

  .cat-runner-root .fish.empty {
    opacity: 0.28;

    filter:
      grayscale(1)
      drop-shadow(1px 1px 0 var(--color-bg-dark));
  }

  .cat-runner-root .fish.refilled {
    animation: fishPop 0.4s ease forwards;
  }

  .cat-runner-root .fish.warning {
    animation: fishPulse 0.9s infinite;
  }

  .cat-runner-root .hud-buttons {
    display: flex;
    gap: clamp(6px, 1.8vw, 8px);

    pointer-events: auto;
  }

  .cat-runner-root .icon-toggle {
    width: clamp(34px, 9vw, 40px);
    height: clamp(34px, 9vw, 40px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #ffffff;
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1;

    background: rgba(39, 8, 39, 0.82);
    border: 2px solid var(--color-magenta);

    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.18),
      0 0 14px rgba(230, 0, 126, 0.55);

    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    pointer-events: auto;
  }

  .cat-runner-root .icon-toggle:active {
    transform: scale(0.92);
  }

  .cat-runner-root .sound-toggle.is-muted {
    opacity: 0.65;
  }

  .cat-runner-root .pause-toggle.is-paused {
    background: rgba(230, 0, 126, 0.92);
  }

  /* =========================
     START / GAME OVER
  ========================= */

  .cat-runner-root .start-panel {
    position: absolute;
    left: 50%;
    top: 50%;

    width: min(86vw, 420px);
    transform: translate(-50%, -50%);

    padding: clamp(16px, 4vw, 22px) clamp(14px, 4vw, 20px);

    text-align: center;
    color: #ffffff;

    background:
      linear-gradient(180deg, rgba(75, 18, 75, 0.96), rgba(39, 8, 39, 0.96));

    border: 3px solid var(--color-magenta);

    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.18),
      0 0 24px rgba(230, 0, 126, 0.8),
      8px 8px 0 rgba(0, 0, 0, 0.35);

    z-index: 30;
  }

  .cat-runner-root .start-panel h1 {
    margin: 0 0 10px;

    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;

    color: #ffffff;
    text-transform: uppercase;

    text-shadow:
      3px 3px 0 var(--color-magenta),
      6px 6px 0 var(--color-bg-dark);
  }

  .cat-runner-root .start-panel p {
    margin: 0 0 10px;

    font-size: clamp(17px, 4.5vw, 23px);
    font-weight: bold;

    color: var(--color-magenta-light);
  }

  .cat-runner-root .start-panel small {
    display: block;

    font-size: clamp(11px, 3vw, 12px);
    line-height: 1.35;

    color: #e7d7ea;
  }

  .cat-runner-root .start-panel.game-over h1,
  .cat-runner-root .start-panel.game-over p {
    color: #ffffff;
  }

  /* =========================
     PLAYER / OBSTACLES
  ========================= */

  .cat-runner-root .player {
    position: absolute;
    left: clamp(30px, 7vw, 42px);
    bottom: 55px;

    width: 78px;
    height: 78px;

    image-rendering: pixelated;
    z-index: 10;

    user-select: none;
    pointer-events: none;

    background-image: url("/content/dam/magenta_at/images/consumer/images-liquid/sandra-test/hackathon-assets/player-sheet.png");
    background-size: 312px 78px;
    background-repeat: no-repeat;
    background-position-x: -156px;
  }

  .cat-runner-root .obstacle {
    position: absolute;
    bottom: 55px;

    width: clamp(58px, 12vw, 78px);

    image-rendering: pixelated;
    z-index: 7;

    user-select: none;
    pointer-events: none;
  }

  .cat-runner-root .pigeon {
    position: absolute;

    width: clamp(52px, 10vw, 66px);

    image-rendering: pixelated;
    z-index: 7;

    user-select: none;
    pointer-events: none;
  }

  /* =========================
     REWARD POPUP
  ========================= */

  .cat-runner-root .reward-popup {
    position: absolute;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;

    padding: max(18px, env(safe-area-inset-left));

    background: rgba(20, 3, 20, 0.72);
    backdrop-filter: blur(4px);

    z-index: 100;
  }

  .cat-runner-root .reward-popup.show {
    display: flex;
  }

  .cat-runner-root .reward-card {
    width: min(88vw, 380px);
    padding: 24px 20px 18px;

    text-align: center;
    color: #ffffff;

    background:
      linear-gradient(180deg, #5b1054 0%, var(--color-bg-dark) 100%);

    border: 3px solid var(--color-magenta);

    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.16),
      0 0 28px rgba(230, 0, 126, 0.85),
      8px 8px 0 rgba(0, 0, 0, 0.38);

    animation: popupIn 0.28s ease-out;
  }

  .cat-runner-root .reward-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;

    background: var(--color-magenta);
    border: 3px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 0 18px rgba(230, 0, 126, 0.95);

    animation: heartPulse 1s infinite alternate;
  }

  .cat-runner-root .reward-card h2 {
    margin: 0 0 10px;

    font-size: clamp(21px, 6vw, 24px);
    line-height: 1.1;

    text-shadow: 3px 3px 0 var(--color-bg-dark);
  }

  .cat-runner-root .reward-card p {
    margin: 0 0 18px;

    font-size: clamp(15px, 4.4vw, 17px);
    font-weight: bold;

    color: #ffb6dc;
  }

  .cat-runner-root .reward-card a,
  .cat-runner-root .reward-card button {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;
    padding: 12px 14px;

    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    border-radius: 0;
    cursor: pointer;
  }

  .cat-runner-root .reward-card a {
    color: var(--color-bg-dark);
    background: #ffffff;
    border: 2px solid #ffffff;

    box-shadow: 4px 4px 0 var(--color-magenta);
  }

  .cat-runner-root .reward-card button {
    color: #ffffff;
    background: transparent;
    border: 2px solid var(--color-magenta);
  }

  /* =========================
     ORIENTATION HINT
  ========================= */

  .cat-runner-root .orientation-hint {
    position: absolute;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    padding: 24px;

    text-align: center;
    color: #ffffff;

    background:
      radial-gradient(circle at center, #5b1054 0%, var(--color-bg-dark) 68%);

    z-index: 200;

    opacity: 0;
    pointer-events: none;
  }

  .cat-runner-root .orientation-hint.show {
    display: flex;
    opacity: 1;

    animation: orientationFade 2.4s ease forwards;
  }

  .cat-runner-root .phone-icon {
    font-size: 64px;
    animation: phoneRotate 1.4s ease-in-out infinite;
  }

  .cat-runner-root .rotate-arrow {
    margin-top: -10px;

    font-size: 46px;
    color: var(--color-magenta);
  }

  .cat-runner-root .orientation-hint h2 {
    margin: 14px 0 8px;

    font-size: clamp(24px, 7vw, 32px);
    text-transform: uppercase;

    text-shadow: 3px 3px 0 var(--color-magenta);
  }

  .cat-runner-root .orientation-hint p {
    margin: 0;

    color: #ffb6dc;
    font-weight: bold;
  }

  /* =========================
     ANIMATIONS
  ========================= */

  @keyframes fishPop {
    0% {
      transform: scale(1);
    }

    45% {
      transform: scale(1.55) rotate(-8deg);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes fishPulse {
    0%,
    100% {
      transform: scale(1);
      filter:
        drop-shadow(1px 1px 0 #270827)
        drop-shadow(0 0 4px rgba(255, 155, 210, 0.8));
    }

    50% {
      transform: scale(1.22);
      filter:
        drop-shadow(1px 1px 0 #270827)
        drop-shadow(0 0 8px #e6007e);
    }
  }

  @keyframes popupIn {
    from {
      transform: translateY(18px) scale(0.94);
      opacity: 0;
    }

    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes heartPulse {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.12);
    }
  }

  @keyframes orientationFade {
    0% {
      opacity: 0;
    }

    12% {
      opacity: 1;
    }

    72% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes phoneRotate {
    0% {
      transform: rotate(0deg);
    }

    40% {
      transform: rotate(90deg);
    }

    70% {
      transform: rotate(90deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  /* =========================
     SMALL PHONES
  ========================= */

  @media (max-width: 380px) {
    .cat-runner-root .hud {
      gap: 5px;
    }

    .cat-runner-root .score-box {
      min-width: 62px;
      padding: 5px 6px;
    }

    .cat-runner-root .score-box strong {
      font-size: 17px;
    }

    .cat-runner-root .hunger-bar {
      min-width: 126px;
      padding: 5px 6px;
    }

    .cat-runner-root .player {
      left: 28px;
    }
  }

  /* =========================
     VERY LOW LANDSCAPE SCREENS
  ========================= */

  @media (orientation: landscape) and (max-height: 430px) {
    .cat-runner-root .hud {
      top: 7px;
    }

    .cat-runner-root .hunger-bar {
      padding-top: 4px;
      padding-bottom: 4px;
    }

    .cat-runner-root .hud-center {
      gap: 5px;
    }

    .cat-runner-root .icon-toggle {
      width: 34px;
      height: 34px;
      font-size: 16px;
    }

    .cat-runner-root .start-panel {
      top: 52%;
      padding: 16px 14px;
    }

    .cat-runner-root .start-panel h1 {
      font-size: clamp(26px, 7vw, 36px);
    }

    .cat-runner-root .start-panel p {
      font-size: clamp(16px, 4vw, 20px);
    }

    .cat-runner-root .city {
      height: 180px;
      bottom: 64px;
    }
  }

  /* =========================
     TABLETS
     Mobile-Stil bleibt gleich, nur etwas luftiger
  ========================= */

  @media (min-width: 768px) {
    .cat-runner-root .hud {
      top: max(14px, env(safe-area-inset-top));
      left: max(16px, env(safe-area-inset-left));
      right: max(16px, env(safe-area-inset-right));
    }

    .cat-runner-root .score-box {
      min-width: 98px;
    }

    .cat-runner-root .hunger-bar {
      min-width: 210px;
    }

    .cat-runner-root .start-panel {
      width: min(70vw, 460px);
    }

    .cat-runner-root .reward-card {
      width: min(70vw, 400px);
    }
  }

.cat-runner-root {
  overflow: hidden;
  overscroll-behavior: none;
}

.cat-runner-root .game-wrap,
.cat-runner-root .game {
  overflow: hidden;
  overscroll-behavior: none;
}