/* Geisterjagd (E115) — flach und ruhig: ein dunkles Spielfeld, sonst die Plattform. */
.hero-gj { display: flex; gap: 10px; justify-content: center; align-items: center; height: 56px; }
.hero-gj .gj-fresser { width: 34px; height: 34px; border-radius: 50%; background: #8fa0ff; }
.hero-gj .gj-punkt { width: 8px; height: 8px; border-radius: 50%; background: #e6dcc3; }
.hero-gj .gj-geist { width: 34px; height: 40px; background: #8b78b8; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }

.gj-kopf { display: flex; justify-content: center; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
.gj-punkte { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 20px; min-width: 3ch; text-align: right; }
.gj-leben { color: #d9544f; letter-spacing: 2px; min-width: 3ch; }
.gj-level { font-variant-numeric: tabular-nums; }

.gj-buehne { position: relative; width: max-content; max-width: 100%; margin: 0 auto; }
.gj-feld {
    display: block; border-radius: 10px; border: 1px solid var(--panel-border); background: #14171f;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.gj-hinweis {
    position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); text-align: center;
    padding: 10px 14px; border-radius: 10px; background: rgba(20, 23, 31, .88); color: #e6e9f2; font-size: 14px;
}
.gj-hinweis[hidden], .gj-status[hidden], .gj-kreuz[hidden] { display: none !important; }
.gj-tipp, .gj-status { text-align: center; margin: 8px 0 0; }

/* Steuerkreuz: nur am Handy */
.gj-kreuz { display: none; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; justify-content: center; margin: 10px auto 0; }
@media (pointer: coarse), (max-width: 699px) { .gj-kreuz { display: grid; } }
.gj-taste { border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); border-radius: 10px; font-size: 18px; touch-action: none; padding: 0; }
.gj-taste:active { background: var(--panel-border); }
.gj-taste.hoch { grid-column: 2; grid-row: 1; }
.gj-taste.links { grid-column: 1; grid-row: 2; }
.gj-taste.runter { grid-column: 2; grid-row: 2; }
.gj-taste.rechts { grid-column: 3; grid-row: 2; }

.gj-tabelle { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.gj-zeile { display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--panel); }
.gj-zeile span:last-child { color: var(--muted); font-size: 12.5px; }