/* touchgr.as – fast kein Text: Bild, darunter eine schmale, nüchterne Zeile. */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: flex; flex-direction: column; color: #9b9b9b; -webkit-text-size-adjust: 100%;
  font: 11px/1.5 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
/* letzter Rückfall ohne Skript/Grafik: Himmel und Grasband */
body { background: linear-gradient(#8fa3b1 0%, #c3ccd0 58%, #2f4a1c 58.2%, #142509 100%) #000; }
html.run body { background: #000; }
canvas#c { flex: 1 1 auto; min-height: 0; width: 100%; display: block; background: #000; opacity: 0; transition: opacity 1.6s ease; touch-action: none; }
html.ready canvas#c { opacity: 1; }
html.swap canvas#c { opacity: 0; transition-duration: .7s; }
#start { position: fixed; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .5); cursor: pointer;
  display: grid; place-items: center; transition: opacity 1.2s ease, background 1.2s ease; -webkit-tap-highlight-color: transparent; }
#start[hidden] { display: none; }
#start.go { opacity: 0; pointer-events: none; }
#start i { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; display: block; }
#start:focus-visible i { outline: 1px solid #fff; outline-offset: 6px; }
footer#info { flex: 0 0 auto; background: #000; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap;
  gap: 2px 28px; justify-content: space-between; align-items: baseline; position: relative; z-index: 4; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
footer#info[hidden] { display: none; }
footer p { margin: 0; display: flex; flex-wrap: wrap; gap: 0 1.6ch; align-items: baseline; }
#line { color: #d6d6d6; font-variant-numeric: tabular-nums; white-space: nowrap; }
#line span:empty { display: none; }
#credits { font-size: 10px; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
#mute { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 22px; height: 16px; color: #d6d6d6; align-self: center; }
#mute:focus-visible { outline: 1px solid #9b9b9b; }
#mute .on { display: none; } #mute[aria-pressed="true"] .on { display: block; } #mute[aria-pressed="true"] .off { display: none; }
html.still footer#info, html.still #start { display: none !important; }
html.still, html.still body { cursor: none; }
@media (max-width: 640px) { footer#info { gap: 2px 14px; } #credits { gap: 0 1.2ch; } }
@media (prefers-reduced-motion: reduce) { canvas#c, #start { transition-duration: .01s; } }