/* ========================================
   GRUNDLAGEN
   Fröhlicher Pixelart-Jump-&-Run-Stil
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  font-family:
    "Courier New",
    "Trebuchet MS",
    monospace;

  color: #fff;

  background:
    linear-gradient(
      #54c8ff 0%,
      #8ee8ff 45%,
      #b8f3ff 100%
    );

  image-rendering: pixelated;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

button:disabled {
  opacity: 0.5;
  cursor: wait;
}

.status {
  min-height: 1.5em;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
}

.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ========================================
   HINTERGRUND
   ======================================== */

.startseite,
.levelseite {
  position: fixed;
  inset: 0;

  overflow-y: auto;

  background:
    /* Wolken */
    radial-gradient(
      ellipse at 15% 15%,
      #ffffff 0 5%,
      transparent 5.5%
    ),
    radial-gradient(
      ellipse at 22% 15%,
      #ffffff 0 4%,
      transparent 4.5%
    ),
    radial-gradient(
      ellipse at 78% 22%,
      #ffffff 0 5%,
      transparent 5.5%
    ),
    radial-gradient(
      ellipse at 85% 22%,
      #ffffff 0 4%,
      transparent 4.5%
    ),

    linear-gradient(
      #51c7ff 0%,
      #83ddff 55%,
      #a5edff 100%
    );

  background-size:
    auto,
    auto,
    auto,
    auto,
    auto;
}


/* ========================================
   WASSER STATT BODEN – rein dekorativ
   ======================================== */
.startseite::after,
.levelseite::after {
  content: "";
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65px;
  border-top: 6px solid #d6ffff;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 28px, #e2ffffaa 28px 60px,
      transparent 60px 96px) 0 9px / 96px 4px repeat-x,
    repeating-linear-gradient(90deg,
      transparent 0 48px, #92ecff99 48px 72px,
      transparent 72px 128px) 0 28px / 128px 4px repeat-x,
    linear-gradient(#39d8ef 0 24%, #1bb0e1 24% 55%, #1281ca 55% 100%);
  box-shadow: 0 -4px 0 #42cfe8, inset 0 5px 0 #8af4ff;
  pointer-events: none;
  animation: wasser-fliessen 4s linear infinite;
}
@keyframes wasser-fliessen {
  from { background-position: 0 9px, 0 28px, 0 0; }
  to { background-position: 96px 9px, -128px 28px, 0 0; }
}

/* ========================================
   HAUPTMENÜ
   ======================================== */

.startseite {
  display: grid;
  padding: 30px;

  animation: spielstart 0.5s ease-out;
}

.menue {
  width: 100%;
  min-height: 100%;

  padding:
    clamp(30px, 6vw, 100px)
    clamp(25px, 7vw, 120px)
    100px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(350px, 1fr);

  gap: clamp(40px, 6vw, 100px);

  align-items: center;
}


/* ========================================
   PIXEL-SYMBOL
   ======================================== */

.symbol {
  display: grid;
  place-items: center;

  width: 105px;
  height: 105px;

  margin-bottom: 30px;

  color: #ffe94a;

  background:
    #ff9d00;

  border: 8px solid #8c4d19;

  border-radius: 12px;

  font-size: 58px;

  box-shadow:
    8px 8px 0 #713b19,
    inset 5px 5px 0 #ffc94a;

  transform: rotate(-3deg);
}


/* ========================================
   TEXTE
   ======================================== */

.untertitel {
  margin: 0 0 14px;

  color: #fff7a8;

  font-size: 18px;
  font-weight: 900;

  letter-spacing: 3px;
  text-transform: uppercase;

  text-shadow:
    3px 3px 0 #2770a0;
}

.startseite h1 {
  margin: 0 0 20px;

  color: #fff;

  font-size:
    clamp(48px, 6vw, 100px);

  line-height: 1.05;

  letter-spacing: -3px;

  text-shadow:
    7px 7px 0 #5d329d,
    10px 10px 0 #342064;

  overflow-wrap: anywhere;
}

.beschreibung {
  margin: 0;

  color: #fff;

  font-size:
    clamp(18px, 2vw, 28px);

  font-weight: bold;

  line-height: 1.6;

  text-shadow:
    3px 3px 0 #2770a0;
}


/* ========================================
   HAUPTMENÜ-BUTTONS
   ======================================== */

.buttons {
  display: grid;
  gap: 18px;
}

.buttons > button {
  position: relative;

  width: 100%;
  min-height: 92px;

  display: flex;
  align-items: center;

  gap: 20px;

  padding: 20px 28px;

  border: 6px solid #3c286e;
  border-radius: 14px;

  color: #fff;

  font-size: 27px;
  font-weight: 900;

  text-align: left;

  box-shadow:
    7px 7px 0 #251744;

  transition:
    transform 0.12s,
    box-shadow 0.12s,
    filter 0.12s;
}

.buttons > button:hover {
  transform:
    translate(-2px, -5px);

  box-shadow:
    9px 12px 0 #251744;

  filter: brightness(1.08);
}

.buttons > button:active {
  transform:
    translate(5px, 5px);

  box-shadow:
    2px 2px 0 #251744;
}


/* ========================================
   BUTTON-ICONS
   ======================================== */

.button-icon {
  width: 48px;

  flex-shrink: 0;

  text-align: center;

  font-size: 34px;

  filter:
    drop-shadow(3px 3px 0 #00000055);
}

.pfeil {
  margin-left: auto;

  font-size: 32px;

  opacity: 0.9;
}


/* ========================================
   SPIELEN
   ======================================== */

#spielen {
  background:
    linear-gradient(
      #9c67ff 0%,
      #7045df 100%
    );

  border-color: #472b91;

  box-shadow:
    7px 7px 0 #352064,
    inset 0 5px 0 #c19bff;
}

#spielen:hover {
  box-shadow:
    9px 12px 0 #352064,
    inset 0 5px 0 #c19bff;
}


/* ========================================
   LEVEL
   ======================================== */

#level {
  background:
    linear-gradient(
      #45dca3 0%,
      #20a875 100%
    );

  border-color: #167451;

  box-shadow:
    7px 7px 0 #11583f,
    inset 0 5px 0 #8affca;
}

#level:hover {
  box-shadow:
    9px 12px 0 #11583f,
    inset 0 5px 0 #8affca;
}


/* ========================================
   SHOP
   ======================================== */

#shop {
  color: #fff;

  background:
    linear-gradient(
      #ffc94f 0%,
      #f28b26 100%
    );

  border-color: #9c501c;

  box-shadow:
    7px 7px 0 #743815,
    inset 0 5px 0 #ffe99a;
}

#shop:hover {
  box-shadow:
    9px 12px 0 #743815,
    inset 0 5px 0 #ffe99a;
}


/* ========================================
   EINSTELLUNGEN
   ======================================== */

#einstellungen {
  background:
    linear-gradient(
      #5bb5ec 0%,
      #347ac3 100%
    );

  border-color: #24568c;

  box-shadow:
    7px 7px 0 #193d65,
    inset 0 5px 0 #a3e0ff;
}

#einstellungen:hover {
  box-shadow:
    9px 12px 0 #193d65,
    inset 0 5px 0 #a3e0ff;
}


/* ========================================
   LEVEL-SEITE
   ======================================== */

.levelseite {
  padding: 35px 40px 100px;
}

.level-header {
  max-width: 1500px;

  margin:
    0 auto 35px;
}

.level-untertitel {
  margin:
    25px 0 8px;

  color: #fff7a8;

  font-size: 16px;
  font-weight: 900;

  letter-spacing: 3px;

  text-transform: uppercase;

  text-shadow:
    3px 3px 0 #2770a0;
}

.level-header h2 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(40px, 5vw, 75px);

  line-height: 1.1;

  text-shadow:
    6px 6px 0 #5d329d,
    9px 9px 0 #342064;
}

.seitentext {
  margin:
    15px 0 24px;

  color: #fff;

  font-size: 18px;
  font-weight: bold;

  text-shadow:
    2px 2px 0 #2770a0;
}


/* ========================================
   ZURÜCK-BUTTON
   ======================================== */

.zurueck-button {
  padding:
    13px 20px;

  border:
    5px solid #315f86;

  border-radius: 10px;

  color: #fff;

  background:
    linear-gradient(
      #6dc5ef,
      #438cc7
    );

  font-size: 17px;
  font-weight: 900;

  box-shadow:
    5px 5px 0 #244665;

  transition:
    transform 0.12s,
    box-shadow 0.12s;
}

.zurueck-button:hover:not(:disabled) {
  transform:
    translate(-2px, -3px);

  box-shadow:
    7px 8px 0 #244665;
}


/* ========================================
   LEVEL-RASTER
   ======================================== */

.level-raster {
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 20px;
}


/* ========================================
   LEVEL-KARTE
   ======================================== */

.level-card {
  min-width: 0;

  overflow: hidden;

  border:
    6px solid #4c347d;

  border-radius: 12px;

  background: #fff;

  box-shadow:
    6px 6px 0 #30204f;

  transition:
    transform 0.12s,
    box-shadow 0.12s;
}

.level-card:hover {
  transform:
    translate(-2px, -5px);

  box-shadow:
    8px 11px 0 #30204f;
}


/* ========================================
   LEVEL-VORSCHAU
   ======================================== */

.level-start {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  padding: 0;

  border: 0;

  color: #fff;

  background:
    linear-gradient(
      #72d5ff,
      #d8f8ff
    );
}

.level-start img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  image-rendering: pixelated;
}

.level-start::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      transparent 50%,
      #00000055
    );

  pointer-events: none;
}


/* ========================================
   LEVEL-NUMMER
   ======================================== */

.level-nummer {
  position: absolute;

  z-index: 1;

  left: 10px;
  bottom: 10px;

  display: grid;
  place-items: center;

  min-width: 44px;
  height: 44px;

  padding: 0 10px;

  border:
    4px solid #3e2868;

  border-radius: 8px;

  color: #fff;

  background:
    #7650d8;

  font-size: 18px;
  font-weight: 900;

  box-shadow:
    4px 4px 0 #2c1d4c;
}

.level-spielen {
  position: absolute;

  z-index: 1;

  right: 12px;
  bottom: 18px;

  color: #fff;

  font-size: 14px;
  font-weight: 900;

  text-shadow:
    2px 2px 0 #000;
}


/* ========================================
   BESTZEITEN
   ======================================== */

.level-bestzeiten {
  display: block;

  width: 100%;

  min-height: 54px;

  padding: 12px;

  border: 0;

  border-top:
    5px solid #b87919;

  color: #fff;

  background:
    linear-gradient(
      #ffd957,
      #ed9f27
    );

  font-size: 15px;
  font-weight: 900;

  text-shadow:
    2px 2px 0 #8b4b16;

  transition:
    filter 0.12s;
}

.level-bestzeiten:hover {
  filter: brightness(1.1);
}


/* ========================================
   RANGLISTE
   ======================================== */

.ranglisten-container {
  max-width: 1500px;

  margin: 0 auto;

  overflow-x: auto;

  border:
    6px solid #4c347d;

  border-radius: 12px;

  background: #fff;

  box-shadow:
    7px 7px 0 #30204f;
}

.rangliste {
  width: 100%;

  border-collapse: collapse;

  color: #392858;

  font-size:
    clamp(16px, 2vw, 23px);
}

.rangliste th,
.rangliste td {
  padding: 18px;

  text-align: left;

  border-bottom:
    3px solid #d8c8f4;
}

.rangliste th {
  color: #fff;

  background:
    linear-gradient(
      #8059d7,
      #6040ad
    );

  text-shadow:
    2px 2px 0 #39256c;
}

.rangliste th:last-child,
.rangliste td:last-child {
  text-align: right;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}

.rangliste tbody tr:first-child {
  color: #8b5313;

  background:
    #fff1a8;
}

.rangliste tbody tr:last-child td {
  border-bottom: none;
}


/* ========================================
   ANIMATION
   ======================================== */

@keyframes spielstart {
  from {
    opacity: 0;
    transform:
      translateY(20px)
      scale(0.98);
  }

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


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {

  .level-raster {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }
}


@media (max-width: 900px) {

  .menue {
    grid-template-columns: 1fr;

    text-align: center;

    padding:
      40px 20px
      100px;

    gap: 40px;
  }

  .symbol {
    margin:
      0 auto 24px;
  }

  .startseite h1 {
    letter-spacing: -1px;
  }

  .buttons > button {
    min-height: 82px;

    padding: 20px;

    font-size: 23px;
  }

  .level-raster {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 700px) {

  .levelseite {
    padding:
      25px 18px
      90px;
  }

  .level-raster {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px;
  }

  .level-card {
    border-width: 4px;
  }

  .level-nummer {
    left: 7px;
    bottom: 7px;

    min-width: 34px;
    height: 34px;

    font-size: 14px;
  }

  .level-spielen {
    right: 7px;
    bottom: 15px;

    font-size: 12px;
  }

  .rangliste th,
  .rangliste td {
    padding:
      13px 9px;
  }
}


@media (max-width: 380px) {

  .startseite {
    padding: 12px;
  }

  .menue {
    padding:
      24px 8px
      90px;
  }

  .buttons > button {
    gap: 12px;

    padding: 17px;

    font-size: 20px;
  }

  .level-raster {
    grid-template-columns: 1fr;
  }
}


@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Coinanzeige und kleine Darstellungsreparaturen */
.coin-anzeige {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 10px 16px;
  border: 4px solid #9c501c;
  border-radius: 10px;
  color: #58320e;
  background: #ffe99a;
  box-shadow: 4px 4px 0 #743815;
  font-size: 20px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
#coin-anzahl { font-variant-numeric: tabular-nums; }
.status { color: #163f66; font-weight: bold; }
#menue-status { margin: 0; }
.rangliste td:nth-child(2) { overflow-wrap: anywhere; }
.level-header h2 { overflow-wrap: anywhere; }
.level-start:focus-visible,
.level-bestzeiten:focus-visible { outline-offset: -6px; }
@media (max-width: 900px) {
  .coin-anzeige { margin-inline: auto; }
}