/* ============================================================
VORA – BASIS UND GEMEINSAME KOMPONENTEN
Richtung „Flutlicht“. Setzt Css/vora-tokens.css voraus.
Konzept und Regeln: docs/DESIGN.md.
Alles liegt in Cascade Layers. Seiten- und Spiel-CSS bleibt
ungelayert und gewinnt deshalb immer (docs/ARCHITECTURE.md).
Einbinden ohne sichtbare Wirkung auf alte Seiten:
- Basis (Schrift, Farben, Links, color-scheme) nur unter
.
- Komponenten, deren Namen alte Seiten schon benutzen
(.vora-header, .vora-nav*, .vora-dateline, .vora-panel*,
.vora-rules, .vora-start, .vora-start-button), nur unter
:where(.vora-page). Alle übrigen vora-Namen benutzt keine alte
Seite.
- Global: [hidden], reduzierte Bewegung, Auth-guard-UI.
============================================================ */
@layer vora.base, vora.components;
/* ============================================================
BASIS
============================================================ */
@layer vora.base {
[hidden] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.vora-page,
.vora-page *,
.vora-page *::before,
.vora-page *::after {
box-sizing: border-box;
}
:root:has(> body.vora-page) {
color-scheme: dark;
}
.vora-page {
margin: 0;
/* Das Analyse-Raster im Einstieg läuft randlos, ohne Scrollbalken */
overflow-x: clip;
min-height: 100vh;
min-height: 100dvh;
background: var(--vr-color-bg);
color: var(--vr-color-text);
font-family: var(--vr-font-text);
font-size: var(--vr-step-0);
font-weight: var(--vr-weight-text);
line-height: var(--vr-leading-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
:where(.vora-page) :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-tight);
letter-spacing: var(--vr-track-tight);
text-wrap: balance;
}
:where(.vora-page) :where(p, ul, ol, dl, dd, figure, blockquote) {
margin: 0;
}
:where(.vora-page) :where(p) {
text-wrap: pretty;
}
:where(.vora-page) :where(a) {
color: var(--vr-color-text);
text-decoration-line: underline;
text-decoration-color: var(--vr-color-line-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--vr-dur-fast) var(--vr-ease-out),
text-decoration-color var(--vr-dur-fast) var(--vr-ease-out);
}
:where(.vora-page) :where(a:hover) {
color: var(--vr-color-accent);
text-decoration-color: currentColor;
}
:where(.vora-page) :where(strong, b) {
font-weight: var(--vr-weight-strong);
}
:where(.vora-page) :where(img, svg, video) {
display: block;
max-width: 100%;
height: auto;
}
:where(.vora-page) :where(button, input, select, textarea) {
font: inherit;
color: inherit;
}
:where(.vora-page) :focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 2px;
}
:where(.vora-page) ::selection {
background: var(--vr-color-accent);
color: var(--vr-color-accent-contrast);
}
}
/* ============================================================
KOMPONENTEN
============================================================ */
@layer vora.components {
/* --------------------------------------------------------
Hilfsklassen
-------------------------------------------------------- */
.vora-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.vora-skip {
position: absolute;
top: var(--vr-space-2);
left: var(--vr-space-2);
z-index: calc(var(--vr-z-header) + 1);
padding: var(--vr-space-2) var(--vr-space-4);
background: var(--vr-color-accent);
color: var(--vr-color-accent-contrast);
font-family: var(--vr-font-ui);
font-weight: var(--vr-weight-bold);
text-decoration: none;
transform: translateY(-200%);
}
.vora-skip:focus {
transform: none;
}
.vora-num {
font-family: var(--vr-font-num);
font-variant-numeric: tabular-nums;
}
.vora-main {
box-sizing: content-box;
max-width: var(--vr-content-w);
margin-inline: auto;
padding: var(--vr-space-7) var(--vr-gutter) var(--vr-space-9);
}
.vora-main--narrow {
max-width: 44rem;
}
/* Eckmarken: zwei kurze weisse Winkel oben links und unten rechts,
wie die Rahmen einer Analyse-Einblendung. Nur auf .vora-panel--boxed,
.vora-modal-box und dort, wo eine Seite .vora-ticks setzt. */
.vora-ticks {
position: relative;
}
.vora-ticks::before,
.vora-ticks::after {
content: "";
position: absolute;
width: var(--vr-tick);
height: var(--vr-tick);
border: 0 solid var(--vr-color-text-strong);
pointer-events: none;
}
.vora-ticks::before {
top: -1px;
left: -1px;
border-top-width: var(--vr-rule-mark);
border-left-width: var(--vr-rule-mark);
}
.vora-ticks::after {
right: -1px;
bottom: -1px;
border-right-width: var(--vr-rule-mark);
border-bottom-width: var(--vr-rule-mark);
}
/* --------------------------------------------------------
Wortmarke
Das Chrom-V (assets/vora-logo.png, unverändert) und daneben
„VORA“ in Barlow Semi Condensed, weit gesperrt, weiss.
Markup (Link):
Vora
Ohne Link: …
-------------------------------------------------------- */
.vora-wordmark {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-size: 1rem;
line-height: 1;
text-decoration: none;
white-space: nowrap;
color: var(--vr-color-text-strong);
}
.vora-wordmark-logo {
display: block;
flex: none;
width: auto;
height: 2em;
margin-block: -0.2em;
}
.vora-wordmark-text {
display: block;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-size: 1em;
font-weight: var(--vr-weight-strong);
letter-spacing: var(--vr-track-mark);
text-transform: uppercase;
/* die Sperrung hängt rechts eine Lücke an: ausgleichen */
margin-right: calc(-1 * var(--vr-track-mark));
}
a.vora-wordmark:hover .vora-wordmark-text {
color: var(--vr-color-accent);
}
.vora-wordmark:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 4px;
}
.vora-wordmark--sm { font-size: 0.875rem; }
.vora-wordmark--lg { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
/* --------------------------------------------------------
Kopfzeile
Volle Breite, Inhalt auf Seitenbreite. Zeile 1: Wortmarke +
Navigation (+ „Konto“ von auth-guard.js als direktes Kind von
). Zeile 2: .vora-dateline, rechts der Nutzer-Badge.
-------------------------------------------------------- */
/* „Konto“-Link aus auth-guard.js auf NICHT migrierten Hub-Seiten:
imitiert den bisherigen Inline-Stil. Legacy, in M5 löschen. */
.vora-account-link {
color: var(--vora-text, #f5f7fa);
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.vora-account-link:hover {
color: var(--vora-accent, #42e88c);
}
body:not(.vora-page) .vora-account-link {
font-family: "Inter", Arial, sans-serif !important;
}
:where(.vora-page) .vora-header {
box-sizing: border-box;
position: relative;
z-index: var(--vr-z-header);
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--vr-space-5);
width: 100%;
padding-inline: max(var(--vr-gutter), calc((100% - var(--vr-content-w)) / 2));
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line-strong);
background: var(--vr-color-bg);
font-family: var(--vr-font-ui);
}
:where(.vora-page) .vora-header > .vora-wordmark {
margin-right: auto;
min-height: var(--vr-masthead-h);
}
:where(.vora-page) .vora-nav {
display: flex;
align-items: center;
gap: var(--vr-space-5);
min-height: var(--vr-masthead-h);
white-space: nowrap;
}
:where(.vora-page) .vora-nav-link,
:where(.vora-page) .vora-header > a.homeh {
position: relative;
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-strong);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color var(--vr-dur-fast) var(--vr-ease-out);
}
:where(.vora-page) .vora-nav-link::after,
:where(.vora-page) .vora-header > a.homeh::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.45rem;
height: var(--vr-rule-mark);
background: var(--vr-color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--vr-dur-base) var(--vr-ease-out);
}
:where(.vora-page) .vora-nav-link:hover,
:where(.vora-page) .vora-header > a.homeh:hover,
:where(.vora-page) .vora-nav-link[aria-current="page"] {
color: var(--vr-color-text-strong);
}
:where(.vora-page) .vora-nav-link:hover::after,
:where(.vora-page) .vora-header > a.homeh:hover::after,
:where(.vora-page) .vora-nav-link[aria-current="page"]::after {
transform: scaleX(1);
}
:where(.vora-page) .vora-nav-link:focus-visible,
:where(.vora-page) .vora-header > a.homeh:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 2px;
}
:where(.vora-page) .vora-dateline {
box-sizing: border-box;
order: 99;
flex: 1 0 100%;
display: flex;
align-items: center;
min-height: calc(var(--vr-dateline-h) + var(--vr-rule-hair));
margin: 0;
border-top: var(--vr-rule-hair) solid var(--vr-color-line);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
@media (max-width: 34rem) {
:where(.vora-page) .vora-header { column-gap: var(--vr-space-4); }
:where(.vora-page) .vora-nav { gap: var(--vr-space-4); }
:where(.vora-page) .vora-header > .vora-wordmark { font-size: 0.875rem; }
:where(.vora-page) .vora-dateline-text { display: none; }
}
/* --------------------------------------------------------
Seiteneinstieg
Titel in hartem Weiss, ein Satz, eine Aktion, rechts optional
die Fakten. Auf Hub-Seiten liegt dahinter das feine Raster
einer Analyse-Grafik (randlos, nach unten ausgeblendet).
-------------------------------------------------------- */
.vora-intro {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: var(--vr-space-7);
row-gap: var(--vr-space-6);
align-items: end;
padding-bottom: var(--vr-space-7);
}
.vora-intro:not(:has(> .vora-intro-facts)) {
grid-template-columns: minmax(0, 1fr);
}
.vora-intro:not(.vora-intro--compact)::before {
content: "";
position: absolute;
z-index: -1;
top: calc(-1 * var(--vr-space-7));
bottom: 0;
left: calc(50% - 50vw);
right: calc(50% - 50vw);
background-image:
linear-gradient(var(--vr-color-line) 1px, transparent 1px),
linear-gradient(90deg, var(--vr-color-line) 1px, transparent 1px);
background-size: var(--vr-grid-cell) var(--vr-grid-cell);
background-position: center -1px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
pointer-events: none;
}
.vora-intro-main {
display: grid;
gap: var(--vr-space-5);
justify-items: start;
}
.vora-intro-title {
margin: 0;
max-width: 14ch;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-size: var(--vr-step-5);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-headline);
letter-spacing: var(--vr-track-tight);
text-wrap: balance;
}
.vora-intro-lead {
max-width: var(--vr-measure);
color: var(--vr-color-text-muted);
font-size: var(--vr-step-1);
line-height: 1.5;
}
.vora-intro-actions {
display: flex;
flex-wrap: wrap;
gap: var(--vr-space-3) var(--vr-space-5);
align-items: center;
margin-top: var(--vr-space-2);
}
.vora-intro-facts {
align-self: end;
}
.vora-intro-facts-title {
margin: 0 0 var(--vr-space-2);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-intro--compact {
padding-bottom: var(--vr-space-6);
}
.vora-intro--compact .vora-intro-title {
max-width: none;
font-size: var(--vr-step-4);
}
@media (max-width: 52rem) {
.vora-intro {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
}
/* --------------------------------------------------------
Fakten –
Tafel mit Zeilen: Bezeichnung links, Messwert rechts in Mono.
-------------------------------------------------------- */
.vora-facts {
margin: 0;
display: grid;
border: var(--vr-rule-hair) solid var(--vr-color-line);
background: var(--vr-color-surface);
}
.vora-facts > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--vr-space-4);
padding: var(--vr-space-3) var(--vr-space-4);
border-top: var(--vr-rule-hair) solid var(--vr-color-line);
}
.vora-facts > div:first-child {
border-top: 0;
}
.vora-facts dt {
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-facts dd {
margin: 0;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-num);
font-size: var(--vr-step-0);
font-weight: var(--vr-weight-medium);
line-height: var(--vr-leading-ui);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Variante ohne Tafel, z. B. Tipps in Game1: Text statt Messwert */
.vora-facts--plain {
border: 0;
background: none;
}
.vora-facts--plain > div {
display: grid;
grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
padding-inline: 0;
border-top: 0;
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line);
}
.vora-facts--plain dd {
font-family: var(--vr-font-text);
text-align: left;
}
/* --------------------------------------------------------
Rubrik (Abschnittskopf)
-------------------------------------------------------- */
.vora-rubric {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--vr-space-4);
padding-bottom: var(--vr-space-2);
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line-strong);
}
.vora-rubric-title {
margin: 0;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-strong);
letter-spacing: 0.18em;
line-height: var(--vr-leading-ui);
text-transform: uppercase;
}
.vora-rubric-meta {
min-width: 0;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-num);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
text-align: right;
}
/* --------------------------------------------------------
Buttons
Primär: Limette, eine pro Bereich. Sekundär: Kontur.
Leise: Textlink. Gefahr: Rot. Radius 2 px.
.vora-start-button (erzeugt von start-screen.js) = Primär,
nur unter .vora-page (alte Seiten stylen ihn selbst).
-------------------------------------------------------- */
.vora-btn,
:where(.vora-page) .vora-start-button {
--_btn-bg: transparent;
--_btn-fg: var(--vr-color-text);
--_btn-border: transparent;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--vr-space-2);
min-height: 2.75rem;
padding: 0.5rem 1.25rem;
border: var(--vr-rule-hair) solid var(--_btn-border);
border-radius: var(--vr-radius-control);
background: var(--_btn-bg);
color: var(--_btn-fg);
font-family: var(--vr-font-ui);
font-size: 0.9375rem;
font-weight: var(--vr-weight-bold);
letter-spacing: var(--vr-track-button);
line-height: 1.1;
text-transform: uppercase;
text-decoration: none;
text-align: center;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--vr-dur-fast) var(--vr-ease-out),
color var(--vr-dur-fast) var(--vr-ease-out),
border-color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-btn:active:not(:disabled),
:where(.vora-page) .vora-start-button:active:not(:disabled) {
transform: translateY(1px);
}
.vora-btn:focus-visible,
:where(.vora-page) .vora-start-button:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 3px;
}
.vora-btn:disabled,
.vora-btn[aria-disabled="true"],
:where(.vora-page) .vora-start-button:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.vora-btn--primary,
:where(.vora-page) .vora-start-button {
--_btn-bg: var(--vr-color-accent);
--_btn-fg: var(--vr-color-accent-contrast);
--_btn-border: var(--vr-color-accent);
}
.vora-btn--primary:hover:not(:disabled),
:where(.vora-page) .vora-start-button:hover:not(:disabled) {
--_btn-bg: var(--vr-color-accent-hover);
--_btn-border: var(--vr-color-accent-hover);
}
.vora-btn--secondary {
--_btn-fg: var(--vr-color-text);
--_btn-border: var(--vr-color-line-strong);
}
.vora-btn--secondary:hover:not(:disabled) {
--_btn-border: var(--vr-color-text-strong);
--_btn-fg: var(--vr-color-text-strong);
}
.vora-btn--quiet {
padding-inline: 0.25rem;
--_btn-fg: var(--vr-color-text-muted);
font-weight: var(--vr-weight-strong);
text-decoration-line: underline;
text-decoration-color: var(--vr-color-line-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.35em;
}
.vora-btn--quiet:hover:not(:disabled) {
--_btn-fg: var(--vr-color-text-strong);
text-decoration-color: currentColor;
}
.vora-btn--danger {
--_btn-bg: var(--vr-color-danger);
--_btn-fg: var(--vr-color-inverse-text);
--_btn-border: var(--vr-color-danger);
}
.vora-btn--danger:hover:not(:disabled) {
--_btn-bg: var(--vr-color-danger-hover);
--_btn-border: var(--vr-color-danger-hover);
}
.vora-btn--lg,
:where(.vora-page) .vora-start-button {
min-height: 3rem;
padding-inline: 1.4rem;
font-size: var(--vr-step-0);
}
.vora-btn--block {
display: flex;
width: 100%;
}
.vora-btn-arrow {
display: inline-block;
transition: transform var(--vr-dur-base) var(--vr-ease-out);
}
.vora-btn:hover:not(:disabled) .vora-btn-arrow {
transform: translateX(3px);
}
.vora-actions {
display: flex;
flex-wrap: wrap;
gap: var(--vr-space-3) var(--vr-space-4);
align-items: center;
}
/* --------------------------------------------------------
Formularfelder
-------------------------------------------------------- */
.vora-label {
display: block;
margin-bottom: var(--vr-space-2);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-field {
box-sizing: border-box;
display: block;
width: 100%;
min-height: 3rem;
padding: 0.625rem 1rem;
border: var(--vr-rule-field) solid var(--vr-color-field-border);
border-radius: var(--vr-radius-control);
background: var(--vr-color-surface);
color: var(--vr-color-text);
font-family: var(--vr-font-text);
font-size: max(1rem, var(--vr-step-0)); /* ab 16px kein Zoom auf iOS */
font-weight: var(--vr-weight-medium);
line-height: var(--vr-leading-ui);
transition: border-color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-field::placeholder {
color: var(--vr-color-text-muted);
opacity: 1;
}
.vora-field:hover:not(:disabled) {
border-color: var(--vr-color-text-muted);
}
.vora-field:focus,
.vora-field:focus-visible {
border-color: var(--vr-color-text-strong);
outline: 2px solid var(--vr-color-focus);
outline-offset: 2px;
}
.vora-field[aria-invalid="true"] {
border-color: var(--vr-color-danger);
}
.vora-field:disabled {
background: var(--vr-color-bg);
color: var(--vr-color-text-muted);
border-style: dashed;
cursor: not-allowed;
}
textarea.vora-field {
min-height: 7.5rem;
resize: vertical;
line-height: var(--vr-leading-text);
}
select.vora-field {
appearance: none;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23eef5f0' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
cursor: pointer;
}
.vora-field-hint,
.vora-field-error {
margin-top: var(--vr-space-2);
font-family: var(--vr-font-text);
font-size: var(--vr-step--1);
line-height: var(--vr-leading-ui);
}
.vora-field-hint { color: var(--vr-color-text-muted); }
.vora-field-error { color: var(--vr-color-danger-text); font-weight: var(--vr-weight-strong); }
.vora-field-error:empty { display: none; }
.vora-search {
position: relative;
}
.vora-search-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--vr-space-3);
align-items: center;
}
@media (max-width: 30rem) {
.vora-search-row { grid-template-columns: minmax(0, 1fr); }
}
/* Formular: Felder untereinander, Aktion darunter links.
Buttons und Links stehen links in Inhaltsbreite, nicht gestreckt
(ausser mit .vora-btn--block). */
.vora-form {
display: grid;
gap: var(--vr-space-5);
justify-items: start;
margin: 0;
}
.vora-form > .vora-form-field,
.vora-form > .vora-field {
justify-self: stretch;
}
.vora-form-field {
display: grid;
min-width: 0;
}
/* --------------------------------------------------------
Vorschlagsliste (Autocomplete)
Script-Einträge über .vora-suggest > *, egal welcher className.
-------------------------------------------------------- */
.vora-suggest {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: 20;
max-height: min(20rem, 60vh);
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 0;
list-style: none;
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-control);
background: var(--vr-color-surface);
box-shadow: var(--vr-shadow-float);
}
.vora-suggest:empty {
display: none;
}
.vora-suggest > * {
display: grid;
gap: 0.125rem;
padding: var(--vr-space-3) var(--vr-space-4);
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line);
cursor: pointer;
transition: background-color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-suggest > :last-child {
border-bottom: 0;
}
.vora-suggest > :hover,
.vora-suggest > :focus-visible,
.vora-suggest > [aria-selected="true"],
.vora-suggest > .active {
background: var(--vr-color-surface-2);
box-shadow: inset var(--vr-rule-mark) 0 0 var(--vr-color-accent);
outline: none;
}
.vora-suggest > * > :first-child,
.vora-suggest-name {
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-size: var(--vr-step-1);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-ui);
}
.vora-suggest > * > :nth-child(2),
.vora-suggest-meta {
color: var(--vr-color-text-muted);
font-size: var(--vr-step--1);
line-height: var(--vr-leading-ui);
}
.vora-suggest > .vora-suggest-empty {
cursor: default;
color: var(--vr-color-text-muted);
}
.vora-suggest > .vora-suggest-empty:hover {
background: none;
box-shadow: none;
}
/* --------------------------------------------------------
Fläche (Panel) – Namen von alten Seiten belegt: nur .vora-page
Standard: offener Abschnitt unter einer Linie.
--boxed: Tafel mit Eckmarken. --inset: eingesenkt.
-------------------------------------------------------- */
:where(.vora-page) .vora-panel {
padding-top: var(--vr-space-5);
border-top: var(--vr-rule-hair) solid var(--vr-color-line-strong);
}
:where(.vora-page) .vora-panel--boxed {
position: relative;
padding: var(--vr-space-5);
border: var(--vr-rule-hair) solid var(--vr-color-line);
border-radius: var(--vr-radius-block);
background: var(--vr-color-surface);
}
:where(.vora-page) .vora-panel--boxed::before,
:where(.vora-page) .vora-panel--boxed::after {
content: "";
position: absolute;
width: var(--vr-tick);
height: var(--vr-tick);
border: 0 solid var(--vr-color-text-strong);
pointer-events: none;
}
:where(.vora-page) .vora-panel--boxed::before {
top: -1px;
left: -1px;
border-top-width: var(--vr-rule-mark);
border-left-width: var(--vr-rule-mark);
}
:where(.vora-page) .vora-panel--boxed::after {
right: -1px;
bottom: -1px;
border-right-width: var(--vr-rule-mark);
border-bottom-width: var(--vr-rule-mark);
}
:where(.vora-page) .vora-panel--inset {
padding: var(--vr-space-4) var(--vr-space-5);
border: var(--vr-rule-hair) dashed var(--vr-color-line-strong);
border-radius: var(--vr-radius-block);
}
@media (max-width: 30rem) {
:where(.vora-page) .vora-panel--boxed { padding: var(--vr-space-4); }
}
/* --------------------------------------------------------
Regeln und Startbildschirm – Namen von alten Seiten belegt
Liste aus Js/start-screen.js. Ein-/Ausblenden regelt
Css/start-screen.css.
-------------------------------------------------------- */
:where(.vora-page) .vora-rules {
counter-reset: vr-rule;
list-style: none;
max-width: var(--vr-measure);
margin: 0;
padding: 0;
color: var(--vr-color-text);
font-family: var(--vr-font-text);
font-size: var(--vr-step-0);
line-height: var(--vr-leading-text);
text-align: left;
}
/* Kein Grid auf : start-screen.js setzt Text + per innerHTML */
:where(.vora-page) .vora-rules > li {
counter-increment: vr-rule;
position: relative;
padding: var(--vr-space-2) 0 var(--vr-space-2) 2.5rem;
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line);
}
:where(.vora-page) .vora-rules > li::before {
content: counter(vr-rule, decimal-leading-zero);
position: absolute;
left: 0;
top: calc(var(--vr-space-2) + 0.2em);
color: var(--vr-color-accent);
font-family: var(--vr-font-num);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-medium);
line-height: 1.3;
}
:where(.vora-page) .vora-rules strong {
color: var(--vr-color-text-strong);
font-weight: var(--vr-weight-strong);
}
:where(.vora-page) .vora-start {
display: grid;
gap: var(--vr-space-6);
justify-items: start;
padding-top: var(--vr-space-5);
border-top: var(--vr-rule-hair) solid var(--vr-color-line-strong);
}
/* --------------------------------------------------------
Anzeigetafel (HUD)
Messwerte in Feldern mit Linien, Zahl in Mono, Eckmarken.
-------------------------------------------------------- */
.vora-hud {
position: relative;
display: flex;
flex-wrap: wrap;
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-block);
color: var(--vr-color-text);
}
.vora-hud::before,
.vora-hud::after {
content: "";
position: absolute;
width: var(--vr-tick);
height: var(--vr-tick);
border: 0 solid var(--vr-color-text-strong);
pointer-events: none;
}
.vora-hud::before {
top: -1px;
left: -1px;
border-top-width: var(--vr-rule-mark);
border-left-width: var(--vr-rule-mark);
}
.vora-hud::after {
right: -1px;
bottom: -1px;
border-right-width: var(--vr-rule-mark);
border-bottom-width: var(--vr-rule-mark);
}
.vora-stat {
flex: 1 1 5.5rem;
display: grid;
align-content: start;
gap: var(--vr-space-2);
min-width: 0;
padding: var(--vr-space-4) var(--vr-space-5);
box-shadow: inset -1px 0 0 var(--vr-color-line-strong);
}
.vora-stat:last-child {
box-shadow: none;
}
.vora-stat-label {
overflow: hidden;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
line-height: var(--vr-leading-ui);
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.vora-stat-value {
color: var(--vr-color-text-strong);
font-family: var(--vr-font-num);
font-size: var(--vr-step-3);
font-weight: var(--vr-weight-bold);
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.vora-stat-value--small {
font-size: var(--vr-step-1);
line-height: 1.3;
}
.vora-stat--accent .vora-stat-value {
color: var(--vr-color-near);
}
@media (max-width: 30rem) {
.vora-stat { padding: var(--vr-space-3); }
.vora-stat-value { font-size: var(--vr-step-2); }
}
/* Zeitbalken */
.vora-timer {
height: 3px;
overflow: hidden;
background: var(--vr-color-line-strong);
}
.vora-timer-bar {
height: 100%;
width: 100%;
background: var(--vr-color-accent);
transform-origin: left;
}
/* --------------------------------------------------------
Rückmeldung
Getönte Fläche mit 2-px-Streifen links. Signatur-Bewegung:
die Fläche wird von links aufgedeckt wie eine Einblendung.
-------------------------------------------------------- */
.vora-feedback {
--_fb-bar: var(--vr-color-line-strong);
--_fb-fill: var(--vr-color-surface);
padding: var(--vr-space-3) var(--vr-space-4);
border-radius: var(--vr-radius-block);
background: var(--_fb-fill);
box-shadow: inset var(--vr-rule-mark) 0 0 var(--_fb-bar);
color: var(--vr-color-text);
font-family: var(--vr-font-text);
font-size: var(--vr-step-0);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-ui);
}
.vora-feedback:empty {
display: none;
}
.vora-feedback--reserve:empty {
display: block;
min-height: 3rem;
background: none;
box-shadow: none;
}
.vora-feedback.correct,
.vora-feedback.success {
--_fb-bar: var(--vr-color-correct);
--_fb-fill: var(--vr-color-correct-bg);
animation: vr-reveal var(--vr-dur-slow) var(--vr-ease-out);
}
.vora-feedback.wrong,
.vora-feedback.error {
--_fb-bar: var(--vr-color-wrong);
--_fb-fill: var(--vr-color-wrong-bg);
animation: vr-reveal var(--vr-dur-slow) var(--vr-ease-out);
}
.vora-feedback.near,
.vora-feedback.hint,
.vora-feedback.warning {
--_fb-bar: var(--vr-color-near);
--_fb-fill: var(--vr-color-near-bg);
animation: vr-reveal var(--vr-dur-slow) var(--vr-ease-out);
}
@keyframes vr-reveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
/* --------------------------------------------------------
Laden, leer
-------------------------------------------------------- */
.vora-loading {
display: inline-grid;
gap: var(--vr-space-2);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-loading::after,
.vora-auth-overlay::after {
content: "";
display: block;
width: 6rem;
height: 2px;
background:
linear-gradient(var(--vr-color-accent), var(--vr-color-accent)) no-repeat 0 0 / 30% 100%,
var(--vr-color-line-strong);
animation: vr-scan 1.1s var(--vr-ease-in-out) infinite alternate;
}
@keyframes vr-scan {
from { background-position: 0 0, 0 0; }
to { background-position: 100% 0, 0 0; }
}
.vora-empty {
padding: var(--vr-space-5) var(--vr-space-4);
border: var(--vr-rule-hair) dashed var(--vr-color-line-strong);
color: var(--vr-color-text-muted);
text-align: center;
}
/* --------------------------------------------------------
Chips (Liga-Auswahl) und Tags
Script-erzeugte Chips (z. B. .league-chip in Game1) über
.vora-chips > button, egal welcher className.
Gewählt: Limetten-Rahmen und -Kästchen, keine volle Fläche
(volle Limette bleibt der Hauptaktion vorbehalten).
-------------------------------------------------------- */
.vora-chips {
display: flex;
flex-wrap: wrap;
gap: var(--vr-space-2);
}
.vora-chip,
.vora-chips > button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 0.55em;
min-height: 2.75rem;
padding: 0.375rem 0.9rem;
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-chip);
background: transparent;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-strong);
letter-spacing: 0.08em;
line-height: 1.1;
text-transform: uppercase;
cursor: pointer;
user-select: none;
transition: background-color var(--vr-dur-fast) var(--vr-ease-out),
color var(--vr-dur-fast) var(--vr-ease-out),
border-color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-chip::before,
.vora-chips > button::before {
content: "";
flex: none;
width: 0.7em;
height: 0.7em;
border: 1px solid currentColor;
}
.vora-chip:hover,
.vora-chips > button:hover:not(:disabled) {
border-color: var(--vr-color-text-strong);
color: var(--vr-color-text-strong);
}
.vora-chip:focus-visible,
.vora-chips > button:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 2px;
}
.vora-chip.active,
.vora-chips > button.active,
.vora-chip[aria-pressed="true"],
.vora-chip:has(input:checked) {
border-color: var(--vr-color-accent);
background: var(--vr-color-accent-bg);
color: var(--vr-color-text-strong);
}
.vora-chip.active::before,
.vora-chips > button.active::before,
.vora-chip[aria-pressed="true"]::before,
.vora-chip:has(input:checked)::before {
border-color: var(--vr-color-accent);
background: var(--vr-color-accent);
}
.vora-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.vora-chip:disabled,
.vora-chips > button:disabled {
border-style: dashed;
cursor: not-allowed;
opacity: 0.45;
}
.vora-chip--tag {
min-height: 0;
padding: 0.15rem 0.45rem;
font-family: var(--vr-font-num);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: 0;
text-transform: none;
cursor: default;
}
.vora-chip--tag::before {
display: none;
}
.vora-chip--tag:hover {
border-color: var(--vr-color-line-strong);
color: var(--vr-color-text-muted);
}
/* Status-Punkt, z. B. „Online“ – der einzige runde Radius */
.vora-chip--live::before {
display: block;
width: 0.45rem;
height: 0.45rem;
border: 0;
border-radius: var(--vr-radius-round);
background: var(--vr-color-accent);
}
/* --------------------------------------------------------
Reiter (Login)
-------------------------------------------------------- */
.vora-tabs {
display: flex;
gap: var(--vr-space-5);
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line-strong);
}
.vora-tab {
position: relative;
min-height: 2.75rem;
padding: 0;
border: 0;
background: none;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step-0);
font-weight: var(--vr-weight-strong);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
cursor: pointer;
transition: color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-tab:hover {
color: var(--vr-color-text-strong);
}
.vora-tab:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 2px;
}
.vora-tab.active,
.vora-tab[aria-selected="true"] {
color: var(--vr-color-text-strong);
}
.vora-tab.active::after,
.vora-tab[aria-selected="true"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: var(--vr-rule-mark);
background: var(--vr-color-accent);
}
/* --------------------------------------------------------
Tabelle
Zellzustände: .correct (Limette getönt, Streifen, Limetten-
Text), .wrong (Rot getönt, Streifen), .near (Bernstein),
.neutral. Unterscheidbar auch ohne Farbe: richtig ist der
einzige Zustand mit farbigem, fettem Text.
-------------------------------------------------------- */
.vora-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vora-table {
width: 100%;
border-collapse: collapse;
font-family: var(--vr-font-text);
font-size: var(--vr-step--1);
line-height: var(--vr-leading-ui);
}
.vora-table-wrap > .vora-table {
min-width: 40rem;
}
.vora-table caption {
padding-bottom: var(--vr-space-2);
color: var(--vr-color-text-muted);
text-align: left;
}
.vora-table th {
padding: var(--vr-space-2) var(--vr-space-3);
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line-strong);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.vora-table td {
padding: var(--vr-space-3);
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line);
vertical-align: middle;
}
.vora-table tbody tr:hover td:not(.correct):not(.wrong):not(.near) {
background: var(--vr-color-surface-2);
}
.vora-table .num {
font-family: var(--vr-font-num);
text-align: right;
white-space: nowrap;
}
.vora-table-lead {
color: var(--vr-color-text-strong);
font-weight: var(--vr-weight-strong);
white-space: nowrap;
}
.vora-table--sticky-first :is(th, td):first-child {
position: sticky;
left: 0;
z-index: 1;
background: var(--vr-color-bg);
box-shadow: inset -1px 0 0 var(--vr-color-line-strong);
}
.vora-table--nowrap td {
white-space: nowrap;
}
.vora-table .correct {
background: var(--vr-color-correct-bg);
box-shadow: inset var(--vr-rule-mark) 0 0 var(--vr-color-correct);
color: var(--vr-color-correct);
font-weight: var(--vr-weight-strong);
}
.vora-table .wrong {
background: var(--vr-color-wrong-bg);
box-shadow: inset var(--vr-rule-mark) 0 0 var(--vr-color-wrong);
color: var(--vr-color-text);
}
.vora-table .near {
background: var(--vr-color-near-bg);
box-shadow: inset var(--vr-rule-mark) 0 0 var(--vr-color-near);
color: var(--vr-color-text);
}
.vora-table .neutral {
color: var(--vr-color-text-muted);
}
.vora-table--fresh tbody tr:first-child td {
animation: vr-fresh var(--vr-dur-slow) var(--vr-ease-out);
}
@keyframes vr-fresh {
from { opacity: 0; }
}
/* --------------------------------------------------------
Spielliste – Zeilen statt Karten (Container Query)
-------------------------------------------------------- */
.vora-gamelist {
container-type: inline-size;
list-style: none;
margin: 0;
padding: 0;
}
.vora-gamelist > li {
border-bottom: var(--vr-rule-hair) solid var(--vr-color-line);
}
.vora-game-row {
display: grid;
grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto 1.25rem;
grid-template-areas: "title text meta go";
column-gap: var(--vr-space-5);
align-items: baseline;
padding: var(--vr-space-4) var(--vr-space-2);
color: var(--vr-color-text);
text-decoration: none;
transition: background-color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-game-row-title {
grid-area: title;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-size: var(--vr-step-1);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-tight);
transition: color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-game-row-text {
grid-area: text;
max-width: var(--vr-measure);
color: var(--vr-color-text-muted);
font-size: var(--vr-step--1);
line-height: 1.45;
}
.vora-game-row-meta {
grid-area: meta;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-num);
font-size: var(--vr-step--2);
white-space: nowrap;
}
.vora-game-row-go {
grid-area: go;
justify-self: end;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-num);
transition: transform var(--vr-dur-base) var(--vr-ease-out),
color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-game-row:hover {
background: var(--vr-color-surface);
color: var(--vr-color-text);
}
.vora-game-row:hover .vora-game-row-title,
.vora-game-row:hover .vora-game-row-go {
color: var(--vr-color-accent);
}
.vora-game-row:hover .vora-game-row-go {
transform: translateX(4px);
}
.vora-game-row:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: -2px;
}
/* Aufmacher: Kontur und Limetten-Kante links */
.vora-game-row--lead {
grid-template-columns: minmax(0, 1fr) 2rem;
grid-template-areas:
"title go"
"text go"
"meta go";
row-gap: var(--vr-space-2);
padding: var(--vr-space-5);
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-left: var(--vr-rule-heavy) solid var(--vr-color-accent);
}
.vora-game-row--lead .vora-game-row-title {
font-size: var(--vr-step-3);
letter-spacing: var(--vr-track-tight);
}
.vora-game-row--lead .vora-game-row-go {
align-self: center;
color: var(--vr-color-accent);
font-size: var(--vr-step-2);
}
.vora-gamelist > li:has(> .vora-game-row--lead) {
border-bottom: 0;
}
@container (max-width: 36rem) {
.vora-game-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title go"
"text go"
"meta go";
row-gap: var(--vr-space-1);
}
.vora-game-row-go {
align-self: center;
}
.vora-game-row-meta {
white-space: normal;
}
}
/* --------------------------------------------------------
Endstand
-------------------------------------------------------- */
.vora-result {
display: grid;
justify-items: start;
gap: var(--vr-space-2);
}
.vora-result-title {
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-result-score {
color: var(--vr-color-text-strong);
font-family: var(--vr-font-num);
font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
font-weight: var(--vr-weight-bold);
line-height: 0.95;
font-variant-numeric: tabular-nums;
}
.vora-result-label {
color: var(--vr-color-text);
font-family: var(--vr-font-display);
font-size: var(--vr-step-1);
font-weight: var(--vr-weight-strong);
}
.vora-result-stats {
display: flex;
flex-wrap: wrap;
gap: var(--vr-space-4) var(--vr-space-6);
margin: var(--vr-space-4) 0 0;
padding-top: var(--vr-space-4);
border-top: var(--vr-rule-hair) solid var(--vr-color-line-strong);
}
.vora-result-stats > div {
display: grid;
gap: 0.125rem;
}
.vora-result-stats dt,
.vora-result-stats span {
order: 2;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-result-stats dd,
.vora-result-stats strong {
order: 1;
margin: 0;
color: var(--vr-color-text-strong);
font-family: var(--vr-font-num);
font-size: var(--vr-step-2);
font-weight: var(--vr-weight-bold);
line-height: 1.1;
}
.vora-result-record {
display: inline-flex;
align-items: center;
gap: 0.5em;
color: var(--vr-color-near);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-bold);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
/* --------------------------------------------------------
Raum-Code (Online-Duelle)
-------------------------------------------------------- */
.vora-code {
display: inline-block;
padding: var(--vr-space-2) var(--vr-space-4);
border: var(--vr-rule-hair) dashed var(--vr-color-line-strong);
background: var(--vr-color-surface);
color: var(--vr-color-text-strong);
font-family: var(--vr-font-num);
font-size: var(--vr-step-2);
font-weight: var(--vr-weight-bold);
letter-spacing: 0.18em;
user-select: all;
}
/* --------------------------------------------------------
Modal (Willkommen, Fehler melden, Modals in Spielen)
Tafel mit Eckmarken. Mobil als Blatt von unten.
-------------------------------------------------------- */
.vora-modal {
box-sizing: border-box;
position: fixed;
inset: 0;
z-index: var(--vr-z-report-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--vr-space-4);
background: var(--vr-color-overlay);
animation: vr-fade var(--vr-dur-base) var(--vr-ease-out);
}
.vora-modal--welcome {
z-index: var(--vr-z-welcome);
}
.vora-modal-box {
box-sizing: border-box;
position: relative;
width: 100%;
max-width: 30rem;
max-height: calc(100dvh - 2 * var(--vr-space-4));
overflow-y: auto;
padding: var(--vr-space-5);
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-block);
background: var(--vr-color-surface);
box-shadow: var(--vr-shadow-modal);
color: var(--vr-color-text);
font-family: var(--vr-font-text);
font-size: var(--vr-step-0);
line-height: var(--vr-leading-text);
animation: vr-rise var(--vr-dur-base) var(--vr-ease-out);
}
.vora-modal-box::before,
.vora-modal-box::after {
content: "";
position: absolute;
width: var(--vr-tick);
height: var(--vr-tick);
border: 0 solid var(--vr-color-text-strong);
pointer-events: none;
}
.vora-modal-box::before {
top: -1px;
left: -1px;
border-top-width: var(--vr-rule-mark);
border-left-width: var(--vr-rule-mark);
}
.vora-modal-box::after {
right: -1px;
bottom: -1px;
border-right-width: var(--vr-rule-mark);
border-bottom-width: var(--vr-rule-mark);
}
.vora-modal-title {
margin: 0 0 var(--vr-space-3);
color: var(--vr-color-text-strong);
font-family: var(--vr-font-display);
font-size: var(--vr-step-2);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-tight);
}
.vora-modal-text {
margin: 0 0 var(--vr-space-3);
color: var(--vr-color-text-muted);
}
.vora-modal-text strong {
color: var(--vr-color-text-strong);
font-weight: var(--vr-weight-strong);
}
.vora-modal-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--vr-space-3);
margin-top: var(--vr-space-5);
}
.vora-modal .vora-field {
margin-top: var(--vr-space-2);
}
@media (max-width: 30rem) {
.vora-modal { align-items: flex-end; padding: 0; }
.vora-modal-box { max-height: 92dvh; border-width: 1px 0 0; }
.vora-modal-actions { flex-direction: column-reverse; }
.vora-modal-actions > * { width: 100%; }
}
@keyframes vr-fade {
from { opacity: 0; }
}
@keyframes vr-rise {
from { opacity: 0; transform: translateY(0.75rem); }
}
/* --------------------------------------------------------
Auth-guard-UI (Js/auth-guard.js)
Gilt auf jeder geschützten Seite, auch ohne .vora-page,
deshalb setzt jede Komponente Schrift und Box-Modell selbst.
-------------------------------------------------------- */
:where(.vora-auth-overlay, .vora-user-badge, .vora-report-button, .vora-modal, .vora-invite-stack),
:where(.vora-auth-overlay, .vora-user-badge, .vora-report-button, .vora-modal, .vora-invite-stack) * {
box-sizing: border-box;
}
/* Lade-Overlay: Chrom-V, „Lädt...“, Laufleiste in Limette.
Logo aus CSS, Pfad relativ zu Css/. */
.vora-auth-overlay {
position: fixed;
inset: 0;
z-index: var(--vr-z-auth-overlay);
display: grid;
place-content: center;
justify-items: center;
gap: var(--vr-space-4);
background: var(--vr-color-bg);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-strong);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
}
.vora-auth-overlay::before {
content: "";
width: 5rem;
height: 3.75rem;
background: url("../assets/vora-logo.png") center / contain no-repeat;
}
/* Nutzer-Badge
Ohne .vora-page schwebt er wie bisher oben rechts unter dem
alten 70-px-Header (jetzt Nacht-Tafel ohne Glas). Mit
.vora-page sitzt er in der schmalen Header-Zeile. */
.vora-user-badge {
box-sizing: border-box;
position: fixed;
top: 85px;
right: 16px;
z-index: var(--vr-z-badge);
display: flex;
align-items: center;
gap: var(--vr-space-3);
max-width: calc(100% - 32px);
padding: 0.4rem 0.8rem;
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-control);
background: var(--vr-color-surface);
box-shadow: var(--vr-shadow-float);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--2);
font-weight: var(--vr-weight-medium);
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
:where(.vora-page) .vora-user-badge {
position: absolute;
top: calc(var(--vr-header-h) - var(--vr-dateline-h));
right: max(var(--vr-gutter), calc((100% - var(--vr-content-w)) / 2));
max-width: calc(100% - 2 * var(--vr-gutter));
height: calc(var(--vr-dateline-h) - 1px);
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.vora-user-badge-name,
#vora-badge-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.vora-user-badge a,
.vora-user-badge button {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
padding: 0 0.1rem;
border: 0;
background: none;
color: var(--vr-color-text-strong);
font: inherit;
font-weight: var(--vr-weight-bold);
letter-spacing: inherit;
text-transform: inherit;
text-decoration: underline;
text-decoration-color: var(--vr-color-line-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.25em;
cursor: pointer;
}
.vora-user-badge a:hover,
.vora-user-badge button:hover {
color: var(--vr-color-accent);
text-decoration-color: currentColor;
}
.vora-user-badge a:focus-visible,
.vora-user-badge button:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 1px;
}
.vora-user-badge > * + *::before {
content: "";
display: inline-block;
width: 1px;
height: 0.9em;
margin-right: var(--vr-space-3);
background: var(--vr-color-line-strong);
}
/* Melde-Button: ruhig, damit er keinem Spiel die Aufmerksamkeit nimmt */
.vora-report-button {
position: fixed;
right: max(var(--vr-space-4), env(safe-area-inset-right));
bottom: max(var(--vr-space-4), env(safe-area-inset-bottom));
z-index: var(--vr-z-report-button);
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: 0.5rem 0.9rem;
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-control);
background: var(--vr-color-surface);
box-shadow: var(--vr-shadow-float);
color: var(--vr-color-text);
font-family: var(--vr-font-ui);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-bold);
letter-spacing: var(--vr-track-button);
text-transform: uppercase;
cursor: pointer;
transition: border-color var(--vr-dur-fast) var(--vr-ease-out),
color var(--vr-dur-fast) var(--vr-ease-out);
}
.vora-report-button:hover {
border-color: var(--vr-color-text-strong);
color: var(--vr-color-text-strong);
}
.vora-report-button:focus-visible {
outline: 2px solid var(--vr-color-focus);
outline-offset: 3px;
}
.vora-report-status {
min-height: 1.4em;
margin-top: var(--vr-space-2);
font-family: var(--vr-font-text);
font-size: var(--vr-step--1);
font-weight: var(--vr-weight-strong);
line-height: var(--vr-leading-ui);
}
.vora-report-status--error { color: var(--vr-color-danger-text); }
.vora-report-status--pending { color: var(--vr-color-text-muted); }
.vora-report-status--ok { color: var(--vr-color-success); }
/* Einladungs-Karten (Js/auth-guard.js#watchGameInvites): unten links,
damit sie sich nicht mit dem Melde-Button (unten rechts) beissen.
Gleiche Tafel-Optik wie Melde-Button/Modal, gestapelt bei mehreren
gleichzeitig offenen Einladungen. */
.vora-invite-stack {
position: fixed;
left: max(var(--vr-space-4), env(safe-area-inset-left));
bottom: max(var(--vr-space-4), env(safe-area-inset-bottom));
z-index: var(--vr-z-report-button);
display: flex;
flex-direction: column-reverse;
gap: var(--vr-space-3);
width: min(22rem, calc(100vw - 2 * var(--vr-space-4)));
}
/* .vora-message-card (Js/auth-guard.js#watchChatMessages, Phase 2):
gleicher Stapel und dieselbe Tafel-Optik wie die Einladungs-Karten. */
.vora-invite-card,
.vora-message-card {
padding: var(--vr-space-4);
border: var(--vr-rule-hair) solid var(--vr-color-line-strong);
border-radius: var(--vr-radius-control);
background: var(--vr-color-surface);
box-shadow: var(--vr-shadow-float);
font-family: var(--vr-font-text);
animation: vr-rise var(--vr-dur-base) var(--vr-ease-out);
}
.vora-invite-text {
margin: 0 0 var(--vr-space-3);
color: var(--vr-color-text);
font-size: var(--vr-step--1);
line-height: var(--vr-leading-ui);
}
.vora-invite-actions {
display: flex;
flex-wrap: wrap;
gap: var(--vr-space-3);
}
/* Unread-Punkt am "Nachrichten"-Link in der Kopfzeile (derselbe runde
Radius wie der Online-Punkt in Css/Freunde.css) - gilt wie der Rest
der Auth-guard-UI auch ohne .vora-page, deshalb hier statt im
Header-Abschnitt oben. */
.vora-nav-badge-dot {
display: inline-block;
width: 0.4rem;
height: 0.4rem;
margin-left: 0.45rem;
border-radius: var(--vr-radius-round);
background: var(--vr-color-accent);
vertical-align: middle;
}
/* --------------------------------------------------------
Fusszeile
-------------------------------------------------------- */
.vora-footer {
box-sizing: content-box;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--vr-space-7);
row-gap: var(--vr-space-4);
align-items: center;
max-width: var(--vr-content-w);
margin-inline: auto;
padding: var(--vr-space-6) var(--vr-gutter) var(--vr-space-8);
border-top: var(--vr-rule-hair) solid var(--vr-color-line);
color: var(--vr-color-text-muted);
font-family: var(--vr-font-text);
font-size: var(--vr-step--1);
line-height: var(--vr-leading-ui);
}
.vora-footer-nav {
display: flex;
flex-wrap: wrap;
gap: var(--vr-space-1) var(--vr-space-5);
}
.vora-footer-nav a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--vr-color-text-muted);
font-family: var(--vr-font-ui);
font-weight: var(--vr-weight-strong);
letter-spacing: var(--vr-track-label);
text-transform: uppercase;
text-decoration: none;
}
.vora-footer-nav a:hover {
color: var(--vr-color-text-strong);
}
.vora-footer-note {
grid-column: 2;
max-width: var(--vr-measure);
line-height: var(--vr-leading-text);
}
@media (max-width: 40rem) {
.vora-footer {
grid-template-columns: minmax(0, 1fr);
}
.vora-footer-note {
grid-column: 1;
}
}
}