/* NEONWURM — Gestaltung. Alles ueber Klassen. Inline-style-Attribute im Markup verwirft die CSP lautlos; was zur Laufzeit eingefaerbt werden muss (Spielerfarben), setzt das Skript ueber das CSSOM. */ :root { --grund: #05060f; --tafel: rgba(10, 14, 30, 0.88); --neon: #3ee6ff; --neon2: #ff4fd8; --text: #dce7ff; --matt: #8a9bc4; --rand: rgba(62, 230, 255, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } /* Die Grundfarbe gehoert an , **nicht** an . Der Hintergrund des body-Kastens wird nach der Wurzel gemalt, aber vor allen Kindern mit negativem z-index — eine Deckfarbe dort verdeckt also body::before und damit das komplette Hintergrundbild. Im Browser sieht das exakt so aus, als waere das Bild nie geladen worden, obwohl die Regel nachweislich greift. */ html { background: var(--grund); } /* Der Hintergrund liegt hinter allem und wandert leicht mit (12 % der Kamerabewegung, gesetzt aus dem Skript ueber --bgx/--bgy). Bewusst verschwommen und ohne erkennbare Formen: alles mit Trefferwirkung bleibt Vektor auf dem Canvas, ein weichgezeichnetes Bild darf nie mit einem Wurm oder dem toedlichen Rand verwechselt werden. Grosszuegig ueber den Rand hinaus (-8 %), sonst schiebt die Parallaxe eine leere Kante ins Bild. Gewaehlt ist die Tiefsee-Fassung: leuchtendes Plankton im dunklen Wasser ist genau das, was das Spiel zeigt — ein Leuchtwesen, das Lichtpunkte frisst. Zwei Alternativen liegen daneben (arena.jpg kosmisch, arena3.jpg digital); zum Wechseln genuegt der Dateiname hier. */ body::before { content: ""; position: fixed; inset: -8%; z-index: -1; background: #05060f url("assets/arena2.jpg") center / cover no-repeat; transform: translate(var(--bgx, 0px), var(--bgy, 0px)); filter: blur(3px) saturate(1.25); opacity: 0.9; } canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } /* Die Kulisse soll man sehen — sie war mit 32 % und einem Weichzeichner kaum auszumachen. Abgedunkelt bleibt sie, weil davor Text steht. */ /* Die Kulisse zeigt die echte, laufende Arena. Sie soll man sehen — sie war mit 32 % und einem Weichzeichner kaum auszumachen. */ #kulisse { z-index: 0; opacity: 0.95; } #feld { z-index: 1; touch-action: none; } .weg { display: none !important; } /* --- Tafeln --- Kein flaechiger Vorhang mehr: der Inhalt sitzt auf einer eigenen weichen Karte, der Rest bleibt durchscheinend, damit die Kulisse dahinter sichtbar ist. Sie ist ja der Grund, warum es sie gibt. */ .tafel { position: fixed; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; padding: clamp(1rem, 4vw, 2.5rem); /* Deutlich durchlaessiger als zuvor: hinter den Tafeln laeuft die echte Arena, und die soll man sehen. Lesbar bleibt die Schrift ueber den weichen Schein darunter (.tafel::before), nicht ueber einen Vorhang. */ background: radial-gradient(ellipse 75% 65% at center, rgba(6, 10, 26, 0.28), rgba(3, 4, 12, 0.66)); text-align: center; overflow-y: auto; } /* Weicher Schein hinter dem Inhalt — hebt die Schrift vom Gewusel ab, ohne eine harte Kante zu ziehen. */ .tafel::before { content: ""; position: absolute; z-index: -1; width: min(46rem, 92vw); height: min(34rem, 86vh); border-radius: 50%; background: radial-gradient(circle, rgba(6, 10, 28, 0.9), rgba(6, 10, 28, 0) 72%); } .logo { margin: 0; font-size: clamp(2.4rem, 9vw, 5rem); font-weight: 800; letter-spacing: 0.16em; /* Farbverlauf im Schriftzug, wie am Wurmkoerper — derselbe Gedanke, damit Titel und Spiel zusammengehoeren. */ background: linear-gradient(105deg, #9df4ff 0%, #ffffff 38%, #ffb8ee 72%, #a77bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(62, 230, 255, 0.55)) drop-shadow(0 0 46px rgba(255, 79, 216, 0.3)); } .unterzeile { margin: 0; color: var(--matt); font-size: 0.98rem; } .wer { margin: 0.2rem 0 0.6rem; color: var(--text); } .wer strong { color: var(--neon); } .rekord { color: var(--matt); font-size: 0.9rem; margin: 0.4rem 0 0; } .hinweis { color: var(--matt); max-width: 34rem; margin: 0 0 0.6rem; line-height: 1.5; } h2 { margin: 0 0 0.2rem; font-size: 1.6rem; letter-spacing: 0.05em; } h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--neon); letter-spacing: 0.06em; } /* --- Knoepfe. Die Optik haengt an der Klasse, nicht am Element: der Portal-Rueckweg ist ein und wuerde Regeln fuer `button` nicht erben. --- */ .btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 650; letter-spacing: 0.02em; color: #04101a; background: linear-gradient(160deg, #7ff2ff 0%, var(--neon) 45%, #24b9d8 100%); border: 0; border-radius: 999px; padding: 0.7rem 1.7rem; cursor: pointer; text-decoration: none; box-shadow: 0 0 22px rgba(62, 230, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55); transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease; min-height: 44px; /* Fingergroesse, nicht Mausgroesse */ } .btn:hover { filter: brightness(1.08); box-shadow: 0 0 30px rgba(62, 230, 255, 0.5); } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .btn.big { font-size: 1.15rem; padding: 0.9rem 2.2rem; } .btn.zweit { background: rgba(62, 230, 255, 0.07); color: var(--neon); border: 1px solid var(--rand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .btn.zweit:hover { background: rgba(62, 230, 255, 0.15); filter: none; } .btn.mini { padding: 0.45rem 0.9rem; font-size: 0.85rem; min-height: 36px; } .knopfreihe { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; } .knopfreihe.klein .btn { font-size: 0.9rem; padding: 0.55rem 1.2rem; } .portal-platz { margin-top: 1.2rem; } /* --- Listen --- */ .listen { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center; } .listen ol { text-align: left; padding-left: 1.4rem; margin: 0; min-width: 12rem; } .listen li { padding: 0.16rem 0; color: var(--text); } .aufgaben { text-align: left; max-width: 34rem; line-height: 1.5; padding-left: 1.3rem; } .aufgaben li { margin-bottom: 0.7rem; color: var(--matt); } .aufgaben li strong { color: var(--neon); } .aufgaben li.geschafft { opacity: 0.45; text-decoration: line-through; } .werte { color: var(--neon); font-size: 1.05rem; margin: 0.2rem 0 0.6rem; } /* --- Anzeige im Spiel --- */ #hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; } #hud .btn { pointer-events: auto; } #hud-links { position: absolute; top: 0.8rem; left: 0.9rem; } #hud-masse { font-size: 2.1rem; font-weight: 800; line-height: 1; background: linear-gradient(160deg, #d9fbff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(62, 230, 255, 0.55)); } #hud-zeit { color: var(--matt); font-size: 0.9rem; margin-top: 0.15rem; } #hud-rang { position: absolute; top: 0.8rem; right: 0.9rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; text-align: right; color: var(--matt); } /* Die Karte sitzt unten rechts, die Rangliste oben rechts — auf einem niedrigen Fenster (Handy quer) wuchs die Liste in die Karte hinein und die Punktzahlen verschwanden darunter. Die Liste bekommt deshalb genau die Hoehe, die neben der Karte uebrig bleibt. */ #hud-rang { max-height: calc(100vh - 150px - 3.2rem); overflow: hidden; } #hud-rang li { padding: 0.08rem 0; } #hud-rang li.ich { color: #fff; font-weight: 700; } .punkt { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; } #karte { /* `top: auto; left: auto` ist hier **Pflicht**, kein Beiwerk: die Regel `canvas { position: fixed; inset: 0 }` weiter oben setzt top und left auf 0, und die gelten weiter, weil hier nur right und bottom stehen. Bei festen 150 px ist der Kasten damit ueberbestimmt — und dann gewinnen top und left. Die Karte klebte deshalb links oben ueber der Punktzahl, obwohl in der Regel "rechts unten" steht. */ position: absolute; top: auto; left: auto; right: 0.9rem; bottom: 0.9rem; width: 150px; height: 150px; background: radial-gradient(circle, rgba(10, 18, 40, 0.7), rgba(4, 8, 20, 0.45)); border: 1px solid var(--rand); border-radius: 50%; box-shadow: 0 0 24px rgba(0, 0, 0, 0.5), inset 0 0 22px rgba(62, 230, 255, 0.08); backdrop-filter: blur(2px); } /* Ton und Rueckweg unten links, nebeneinander. Beide fingergross — im Spiel wird man sie im Zweifel hastig treffen wollen. */ #hud-knoepfe { position: absolute; left: 0.9rem; bottom: 0.9rem; display: flex; gap: 0.5rem; pointer-events: auto; } .tipp { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); background: rgba(6, 10, 26, 0.82); border: 1px solid var(--rand); border-radius: 999px; padding: 0.5rem 1.1rem; color: var(--text); font-size: 0.9rem; white-space: nowrap; } /* --- Zuschauen --- */ #zuschau { position: fixed; inset: 0; z-index: 3; pointer-events: none; } #zuschau .btn { pointer-events: auto; position: absolute; left: 0.9rem; bottom: 0.9rem; } .zuschau-kopf { position: absolute; top: 0.8rem; left: 50%; transform: translateX(-50%); background: rgba(255, 79, 216, 0.18); border: 1px solid rgba(255, 79, 216, 0.5); border-radius: 999px; padding: 0.35rem 1rem; font-size: 0.85rem; } #zuschau-legende { position: absolute; top: 0.8rem; right: 0.9rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; text-align: right; color: var(--matt); pointer-events: auto; /* die Umgebung ist durchlaessig, die Liste nicht */ } /* Die Legendeneintraege sind Knoepfe: ein Klick heftet die Kamera an diesen Wurm. Fingergrosse Trefferflaeche, sonst trifft man auf dem Handy daneben. */ .legende-knopf { display: flex; align-items: center; gap: 0.1rem; width: 100%; min-height: 30px; font: inherit; color: var(--matt); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 0.2rem 0.7rem; cursor: pointer; } .legende-knopf:hover { color: var(--text); border-color: var(--rand); } .legende-knopf.gewaehlt { color: #fff; font-weight: 700; background: rgba(62, 230, 255, 0.14); border-color: var(--rand); } .zuschau-tipp { color: var(--matt); } @media (max-width: 560px) { .zuschau-tipp { display: none; } } /* --- Systemnachrichten der Arena --- Unten mittig, dezent, ueber allem. Sie duerfen nicht mit den eigenen Meldungen um denselben Platz streiten. */ #system { position: fixed; z-index: 8; left: 50%; bottom: 1.1rem; transform: translateX(-50%); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; pointer-events: none; max-width: 92vw; } #system li { background: rgba(6, 10, 26, 0.78); border: 1px solid rgba(255, 225, 120, 0.35); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem; color: #ffe9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92vw; animation: rein 0.25s ease; transition: opacity 0.6s ease; } #system li.weg-blenden { opacity: 0; } @keyframes rein { from { opacity: 0; transform: translateY(6px); } } @media (max-width: 560px) { #system { bottom: 5.5rem; } /* ueber den Knoepfen, nicht darunter */ #system li { font-size: 0.78rem; } } /* --- Meldung --- */ #meldung { position: fixed; z-index: 9; left: 50%; top: 8%; transform: translateX(-50%); background: linear-gradient(160deg, rgba(12, 18, 42, 0.95), rgba(6, 10, 26, 0.95)); border: 1px solid var(--rand); border-radius: 14px; padding: 0.7rem 1.2rem; max-width: 90vw; text-align: center; line-height: 1.4; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); } @media (max-width: 560px) { #karte { width: 96px; height: 96px; } #hud-rang { max-height: calc(100vh - 96px - 3.2rem); } } /* Niedriges Fenster (Handy quer): dort ist die Hoehe knapp, nicht die Breite. Die Karte schrumpft mit, sonst bleibt fuer die Rangliste nichts uebrig. */ @media (max-height: 560px) { #karte { width: 96px; height: 96px; } #hud-rang { max-height: calc(100vh - 96px - 3.2rem); font-size: 0.78rem; } #hud-masse { font-size: 1.5rem; } .listen { gap: 1.2rem; } }