:root { --bg: #170f06; /* Brett „Holz" — Seitenfarbe aus BOARDS.wood.page */ --accent: #f5b642; /* Balance 9 Akzent — Messing-Gold (Kugel) */ --text: #f3e3cc; /* Geteilte Knöpfe (menu.js / fullscreen.js) auf die Holz-Welt einstellen. Positioniert werden sie dort, hier geht es nur um die Farbe. */ --ng-menu-fg: #f3e3cc; --ng-menu-accent: #f5b642; --ng-menu-accent-fg: #201400; --ng-menu-line: rgba(243,227,204,0.30); --ng-menu-btn-bg: rgba(30,18,6,0.62); --ng-menu-scrim: rgba(23,15,6,0.90); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; background: var(--bg); color: var(--text); font-family: 'Rajdhani', 'Segoe UI', sans-serif; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; } body { position: relative; } #stage { position: absolute; inset: 0; } /* Querformat: Das Spiel wird als Ganzes gegengedreht, statt sich neu anzuordnen. Ein 7×14-Brett quer gelegt käme auf 14 % der Bildschirmfläche (nachgemessen) — gegengedreht behält es seine Form, seine Zellgröße und die Anordnung von Leiste und Knöpfen. Die Transformation auf macht body zum Bezugsrahmen auch für die `position:fixed`-Knöpfe aus menu.js/fullscreen.js — sie drehen dadurch mit, statt an der Gerätekante hängen zu bleiben. `max-height` grenzt das auf Handys ein: Ein Desktop-Fenster ist ebenfalls quer, soll aber nicht gedreht werden. */ @media (orientation: landscape) and (max-height: 560px) { html, body { width: 100vh; height: 100vw; } body { transform-origin: top left; transform: rotate(-90deg) translateX(-100%); } } #board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } /* ── Ingame-Leiste: Knopf — Zeit — Knopf ─────────────────── Die Zeit sitzt mittig zwischen den beiden 44×44-Knöpfen. Vorher lag sie links unter dem Vollbild-Knopf (z-index 900 gegen 5) und war halb verdeckt. */ .hud { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: calc(env(safe-area-inset-left, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px); height: 44px; display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 5; } .bar-slot { width: 44px; height: 44px; flex: none; } .bar-time { flex: 1; text-align: center; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 44px; text-shadow: 0 2px 10px rgba(0,0,0,0.6); } .bar-time.urgent { color: #ff6f5e; } .hud.hidden { display: none; } /* Ersteindruck-Hinweis: erklärt das Ziel einmal, dann verschwindet er. Als Dauer-Element im HUD hat er nur Platz gekostet. */ .hud-hint { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 62px); left: 16px; right: 16px; padding: 8px 12px; border-radius: 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-align: center; color: var(--text); background: rgba(0,0,0,0.42); border: 1px solid rgba(243,227,204,0.16); pointer-events: none; z-index: 5; transition: opacity 0.5s; } .hud-hint.hidden { display: none; } .hud-hint.fade { opacity: 0; } /* ── Screens ───────────────────────────────────────────── */ .screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(120% 90% at 50% 20%, rgba(245,182,66,0.12), rgba(23,15,6,0.95) 70%); backdrop-filter: blur(2px); z-index: 10; } .screen.hidden { display: none; } .card { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .logo { font-family: 'Space Grotesk', sans-serif; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .logo span { color: var(--accent); } .tagline { font-size: 1.05rem; font-weight: 600; opacity: 0.7; } .hint { font-size: 0.86rem; opacity: 0.5; line-height: 1.45; margin-top: 4px; } .mode-btn { width: 100%; padding: 15px; border: none; border-radius: 14px; background: var(--accent); color: #201400; font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; transition: transform 0.08s, filter 0.12s; } .mode-btn:active { transform: scale(0.97); filter: brightness(1.12); } .daily-btn { padding: 9px 18px; border: 1.5px solid rgba(245,182,66,0.5); border-radius: 999px; background: transparent; color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: all 0.14s; } .daily-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #201400; } /* ── Calibration ───────────────────────────────────────── */ .calib { background: radial-gradient(120% 90% at 50% 50%, rgba(245,182,66,0.10), rgba(23,15,6,0.96) 70%); } .calib-text { position: absolute; left: 0; right: 0; bottom: 12%; padding: 0 32px; text-align: center; pointer-events: none; } .calib-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 8px; } .calib-hint { font-size: 0.95rem; opacity: 0.7; line-height: 1.45; } /* ── Game over ─────────────────────────────────────────── */ .go-mode { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: #16c47f; text-shadow: 0 0 24px rgba(22,196,127,0.4); } .go-score { font-size: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; } .go-best { font-size: 0.98rem; opacity: 0.72; } .text-btn { background: none; border: none; color: var(--text); opacity: 0.6; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; padding: 6px; } .text-btn:active { opacity: 1; } /* ── Reg-Panel (Akzent Gold) ───────────────────────────── */ .reg-panel { width: 100%; margin-top: 6px; padding: 14px; border-radius: 14px; background: rgba(245,182,66,0.10); border: 1px solid rgba(245,182,66,0.28); } .reg-panel.hidden { display: none; } .reg-panel form { display: flex; flex-direction: column; gap: 0.55rem; } .reg-hint { font-size: 0.9rem; font-weight: 700; opacity: 0.7; } .reg-input { padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.25); color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 600; } .reg-input::placeholder { opacity: 0.4; } .reg-input:focus { outline: none; border-color: rgba(245,182,66,0.6); } .reg-error { font-size: 0.82rem; font-weight: 700; color: #ff4d6d; } .reg-error.hidden { display: none; } .reg-saved { font-size: 1rem; font-weight: 700; color: #16c47f; } .reg-btns { display: flex; gap: 0.55rem; } .reg-submit-btn { flex: 1; padding: 11px; border: none; border-radius: 10px; background: var(--accent); color: #201400; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; } .reg-skip-btn { padding: 11px 16px; border: none; border-radius: 10px; background: rgba(255,255,255,0.08); color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; }