/* ========================================================================== Wurst-Fang: Stile des Spielblocks (Bühnen-Spalte .game) -------------------------------------------------------------------------- Quelle: Seitenvorlage "Entwurf Variante Browsergame". Werte und Selektoren unverändert, nur unter .rk-game gescopet. Root ist ein leeres Element mit der Klasse .rk-game (in Elementor ein Div-Block); wurstfang.js füllt es mit dem Spielblock und setzt zusätzlich die Klasse "game". Die .game-Regeln der Vorlage gelten für .rk-game, alle anderen hängen an ".rk-game .xyz". Benötigte globale Variablen (werden hier NICHT definiert, kommen aus dem Design-System der Seite): Farben: --rk-red --rk-red-deep --rk-red-hover --rk-navy --rk-cream --rk-cream-ink --rk-white Schrift: --rk-font-body --rk-fs-body --rk-fs-small --rk-fs-nav Abstände: --rk-space-3 Layout: --rk-header-h --rk-radius-btn Bewegung: --rk-ease Schatten: --rk-shadow-btn Schriften (@font-face global): Barlow 400/500/600/700, Bebas Neue 400 (Canvas-Effekttexte). Aufbau: 1 Basis und Absicherung gegen Hello Elementor / Elementor-Kit 2 Spielblock (HUD, Wurst-o-Meter, Leben, Feld, Canvas) 3 Overlays (.veil), Legende, Buttons, Links 4 Bedienhilfe, Live-Region (.sr) 5 Fokusstile 6 Einblenden beim Laden, Reduced Motion Kein !important außer in der Reduced-Motion-Regel (wie die Vorlage). ========================================================================== */ /* ---------- 1 Basis und Absicherung ---------- */ /* Die Vorlage setzt box-sizing global; Hello Elementor tut das auch, hier zur Sicherheit noch einmal für den Spielblock. */ .rk-game, .rk-game *, .rk-game *::before, .rk-game *::after { box-sizing: border-box; } /* Schrift und Farbe erbt die Vorlage von body bzw. .bg-navy. In Elementor sieht die Umgebung anders aus, daher hier fest gesetzt (gleiche Werte). */ .rk-game { font-family: var(--rk-font-body), system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--rk-fs-body); font-weight: 400; font-style: normal; line-height: 1.6; letter-spacing: normal; text-transform: none; color: var(--rk-cream-ink); -webkit-font-smoothing: antialiased; } /* Vorlage: img { max-width: 100%; height: auto; display: block } */ .rk-game img { max-width: 100%; height: auto; display: block; } /* Vorlage: a { color: inherit } a:hover { color: inherit } (Hello Elementor färbt Links #c36 und beim Hover #336) */ .rk-game a, .rk-game a:hover { color: inherit; } /* ---------- 2 Spielblock ---------- */ /* Root (Vorlage: .game). Elementor gibt Div-Blöcken und Containern eigene Vorgaben (.e-con / .e-div-block / generierte Klasse: display flex, padding 10px, min-width 30px, width 100%); als Block mit width 100% und ohne Innen- abstand entspricht das Root der Vorlage. Dreifach-Klasse statt !important: Spezifität (0,3,0) schlägt auch ".elementor .e-abc" (0,2,0). */ .rk-game.rk-game.rk-game { position: relative; outline: none; width: 100%; max-width: min(32rem, max(18rem, (100svh - var(--rk-header-h) - 9rem) * .75)); margin-inline: auto; display: block; padding: 0; min-width: 0; } .rk-game .hud { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; margin-bottom: .9rem; } .rk-game .lbl { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 700 var(--rk-fs-nav)/1 var(--rk-font-body), system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; } .rk-game .meter { position: relative; height: 30px; border-radius: 99px; background: rgb(251 243 227 / .14); border: 2.5px solid var(--rk-cream-ink); overflow: hidden; } .rk-game .meter::before, .rk-game .meter::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-cream-ink); transform: translateY(-50%); z-index: 2; } .rk-game .meter::before { left: 5px; } .rk-game .meter::after { right: 5px; } .rk-game .fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(180deg, #f2675f 0%, var(--rk-red) 45%, var(--rk-red-hover) 100%); box-shadow: inset 0 3px 0 rgb(255 255 255 / .35); transition: width .35s var(--rk-ease); } .rk-game .lives { display: flex; gap: .3rem; } .rk-game .lives img { width: 26px; height: 26px; transition: opacity .3s, transform .3s; } .rk-game .lives img.off { opacity: .2; transform: scale(.8); } .rk-game .field { position: relative; max-width: 32rem; margin-inline: auto; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 4px var(--rk-cream-ink), 0 2px 4px rgb(0 0 0 / .18), 0 18px 36px -18px rgb(0 0 0 / .45), 0 48px 80px -40px rgb(0 0 0 / .5); } .rk-game .field canvas { display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--rk-cream); cursor: grab; touch-action: pan-y; } .rk-game .field canvas.playing { cursor: none; touch-action: none; } @media (min-width: 961px) { .rk-game.rk-game.rk-game, .rk-game .field { max-width: none; } .rk-game .field canvas { aspect-ratio: auto; height: clamp(26rem, 100svh - var(--rk-header-h) - 14rem, 44rem); } } /* ---------- 3 Overlays, Legende, Buttons, Links ---------- */ .rk-game .veil { position: absolute; inset: 0; overflow: auto; display: grid; place-content: safe center; gap: .8rem; text-align: center; padding: var(--rk-space-3); background: rgb(251 243 227 / .9); color: var(--rk-navy); } /* Die Overlays werden per hidden-Attribut geschaltet. display: grid oben würde die Browser-Vorgabe für [hidden] sonst überstimmen. */ .rk-game .veil[hidden] { display: none; } .rk-game .veil h2 { margin: 0; } .rk-game .veil h2 img { height: calc(clamp(2.6rem, 1.6rem + 4vw, 4.4rem) * .76); width: auto; max-width: 100%; margin: 0 auto; } .rk-game .veil p { margin: 0 auto; max-width: 30ch; } .rk-game .veil .btn { justify-self: center; } .rk-game .legend { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-size: .9rem; font-weight: 600; } .rk-game .legend span { display: inline-flex; align-items: center; gap: .4rem; } .rk-game .legend img { width: 30px; height: 30px; object-fit: contain; } .rk-game .legend img.wide { width: 44px; } .rk-game .stamp-win { width: 140px; margin: 0 auto; transform: rotate(-8deg); } .rk-game .veil a.big { display: block; color: var(--rk-navy); font: 700 clamp(1.25rem, 1rem + 1.5vw, 1.75rem)/1.25 var(--rk-font-body), system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; overflow-wrap: anywhere; } .rk-game .veil a.big:hover { color: var(--rk-red-deep); } /* Buttons. Die Vorlage kennt .btn / .btn--line. Hello Elementor und das Elementor-Kit stylen jedes