/* =========================================================
   Punch Morph — preserves original layout / colors / grid.
   Only additions: keyboard state styling + desktop hint.
   ========================================================= */

* { box-sizing: border-box; }
body { margin: 0; }

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

header {
  background: lightblue;
  padding: 0.5rem;
font-size: 1.5rem;
}

main {
  background: #e66465;
  padding: .5rem;
  container-type: size;
  display: grid;
  place-content: center;
  position: relative;
}

footer {
  padding: .5rem;
  background: lightblue;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

footer > button {
  flex-grow: 1;
  flex-basis: 3rem;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: .5rem;
  cursor: pointer;
}
footer > button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
footer > button.active {
  background: #000;
  color: #fff;
}

svg {
  height: 100cqmin;
  width: 100cqmin;
  aspect-ratio: 1;
  display: block;
}

/* Glyph rendering: body filled black, counters carved out white. */
#zeichenFlaeche .body    { fill: #000; }
#zeichenFlaeche .counter { fill: #e66465; }

/* Desktop fallback hint + sensor permission button */
#hint {
  position: absolute;
  bottom: .5rem; left: 50%;
  transform: translateX(-50%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .75rem;
  color: rgba(0,0,0,0.55);
  background: rgba(255,255,255,0.65);
  padding: .25rem .5rem;
  border-radius: 10px;
  pointer-events: none;
}
#enableSensor {
  position: absolute;
  top: .5rem; right: .5rem;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.2);
  background: #fff;
  padding: .4rem .8rem;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.wdxl-lubrifont-sc-regular {
  font-family: "WDXL Lubrifont SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

 html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: sans-serif;
    }



/*.  Dies ist die Gestaltung des #permissionLayers Da könnt ihr die Farbe, opacity ändern, damit sie zu eurer App passt*/
    #permissionLayer {
      position: fixed;
      inset: 0;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: .9;
    }

    /*.  Den button könntet ihr ebenfalls anpassent*/

    button {
      font-size: 24px;
      padding: 20px 40px;
      
    }