.spielbildschirm {
  background-color: var(--farbe-haupt);
  color: var(--farbe-haupt-text);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  background-image: radial-gradient(circle at 30% 0, #ffffff14, #0000 60%), url("/assets/bilder/textur/filz.webp");
  background-size: auto, 256px 256px;
  font-size: 1.5rem;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.spielbildschirm[hidden] {
  display: none;
}

.geste {
  z-index: 40;
  width: 64px;
  height: 64px;
  color: var(--farbe-filz-leise);
  cursor: pointer;
  touch-action: none;
  background: #173a308c;
  border: 0;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  top: 12px;
  right: 12px;
}

.geste svg {
  grid-area: 1 / 1;
  width: 64px;
  height: 64px;
}

.geste__hintergrund {
  fill: none;
  stroke: #d9e4d340;
  stroke-width: 4px;
}

.geste__ring {
  fill: none;
  stroke: var(--farbe-honig);
  stroke-width: 4px;
  stroke-linecap: round;
  transform-origin: 50%;
  transform: rotate(-90deg);
}

.geste__tuer {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.geste__hinweis {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  white-space: nowrap;
  box-shadow: var(--schatten-liegt);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--uebergang);
  border-radius: 10px;
  padding: .4em .8em;
  font-size: 1.1rem;
  font-weight: 600;
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
}

@media (hover: hover) {
  .geste:not(.geste--haelt):hover .geste__hinweis--ruhe {
    opacity: 1;
  }
}

.geste--haelt .geste__hinweis--ruhe {
  opacity: 0;
}

.geste--haelt .geste__hinweis--halten {
  opacity: 1;
}

.geste--haelt {
  color: var(--farbe-honig);
  background: #173a30d9;
}

.lob {
  z-index: 30;
  padding: 2rem 2rem calc(2.5rem + env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity .6s var(--uebergang);
  background: linear-gradient(to top, #173a30eb 0%, #173a308c 32%, #173a3000 60%);
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  display: flex;
  position: absolute;
  inset: 0;
}

.lob--sichtbar {
  opacity: 1;
}

.lob__text, .lob__knoepfe {
  z-index: 1;
  position: relative;
}

.lob__knoepfe {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  display: flex;
}

.konfetti {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.lob__text {
  font-family: var(--schrift-titel);
  color: var(--farbe-haupt-text);
  text-shadow: 0 4px 24px #00000059;
  text-align: center;
  max-width: none;
  margin: 0;
  font-size: clamp(3rem, 1.8rem + 5vw, 6rem);
  font-weight: 700;
  line-height: 1;
}

.lob__knopf {
  white-space: nowrap;
  background: var(--farbe-honig);
  min-height: 96px;
  color: var(--farbe-text);
  padding-inline: clamp(.9em, 5vw, 2.2em);
  font-size: 2rem;
}

.lob__knopf:hover {
  color: var(--farbe-text);
  background: #ecc46e;
}

.lob__knopf--leise {
  color: var(--farbe-haupt-text);
  box-shadow: inset 0 0 0 3px var(--farbe-haupt-text);
  background: #173a3099;
}

.lob__knopf--leise:hover {
  background: var(--farbe-haupt-tief);
  color: var(--farbe-haupt-text);
}

.wieder-gross {
  z-index: 25;
  background: var(--farbe-flaeche);
  min-height: 72px;
  color: var(--farbe-haupt);
  font-size: 1.5rem;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.wieder-gross:hover {
  background: var(--farbe-salbei-hell);
  color: var(--farbe-haupt);
}

.wieder-gross[hidden] {
  display: none;
}

.maus-hilfe {
  z-index: 45;
  pointer-events: none;
  color: var(--farbe-haupt-text);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  display: none;
  position: absolute;
}

.maus-hilfe p {
  max-width: none;
  margin: 0;
  font-weight: 700;
}

.maus-hilfe svg {
  width: 100%;
  height: auto;
  display: block;
}

.maus-hilfe--klein svg {
  width: 3rem;
}

.maus-hilfe--klein p {
  text-wrap: nowrap;
}

.maus__gehaeuse {
  fill: var(--farbe-flaeche);
  stroke: var(--farbe-text);
  stroke-width: 2.5px;
}

.maus__links {
  fill: var(--farbe-honig);
  stroke: var(--farbe-honig-dunkel);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.maus__linie {
  fill: none;
  stroke: var(--farbe-text);
  stroke-width: 2.5px;
}

.maus__rad {
  fill: var(--farbe-rand);
  stroke: var(--farbe-text);
  stroke-width: 1.5px;
}

.maus-hilfe--klein {
  left: calc(1rem + env(safe-area-inset-left));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  background: #173a30bf;
  border-radius: 14px;
  gap: .35rem;
  width: 10rem;
  padding: .6rem .5rem .5rem;
  font-size: 1.5rem;
}

.maus-hilfe--gross {
  opacity: 0;
  width: min(22rem, 80vw);
  transition: opacity .3s var(--uebergang), transform .3s var(--uebergang);
  background: #173a30f0;
  border-radius: 24px;
  padding: 2rem 1.5rem 1.5rem;
  font-size: 1.75rem;
  line-height: 1.25;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  box-shadow: 0 20px 50px -10px #0009;
}

.maus-hilfe--gross svg {
  width: 7rem;
}

.maus-hilfe--gross.maus-hilfe--sichtbar {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (any-pointer: fine) {
  .maus-hilfe--gross, .mit-maus-hilfe .maus-hilfe--klein {
    display: flex;
  }
}