@charset "UTF-8"; /* ============================================================================= Myso_44 Gamehub · gamehub.css — gemeinsame Grundlage auf One UI Regelwerk: ONE_UI.md im One-UI-Repo (C:\DEV\One_UI), siehe DESIGN.md. Nur --ou-*-Tokens, keine eigenen Farbwerte. Reihenfolge im : /one-ui/one-ui.css → /shared/higher-lower.css (Seiten mit Higher Lower) → /shared/gamehub.css → Seiten-CSS (index.css, player.css, host.css, stage.css, leaderboard.css). Keine Inline-Stile (npm run check:design prüft das). Stufen: App-Seiten calm, Bühne loud ohne Filmkorn, Einstieg loud, Bestenliste balanced. Klassen, an denen JavaScript hängt (.hidden, .active, .player, .opt …), behalten ihre Namen und bekommen hier nur ein neues Aussehen. ========================================================================== */ /* 1. Basis -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--ou-bg); color: var(--ou-text); font-family: var(--ou-font-body); font-size: var(--ou-fs-md); font-weight: 400; line-height: 1.55; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--ou-primary); color: var(--ou-black); } a { color: var(--ou-primary-ink); text-decoration: none; } /* Fokusring nur bei Tastatur. Felder haben ihren eigenen Fokusrahmen. */ :focus-visible { outline: 2px solid var(--ou-focus); outline-offset: 2px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; } .hidden { display: none !important; } * { scrollbar-width: thin; scrollbar-color: var(--ou-line-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--ou-line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } /* Filmkorn fest über dem Fenster (nur Seiten auf loud, z. B. der Einstieg) */ .gh-grain::after { content: ""; position: fixed; inset: 0; z-index: 95; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: var(--ou-grain); pointer-events: none; } /* 2. Typografie ---------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--ou-font-display); font-weight: 400; line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; } h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.375rem; } .font-display { font-family: var(--ou-font-display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; } .font-mono { font-variant-numeric: tabular-nums; } /* Kleine Überzeile (One UI eyebrow) */ .kicker { font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; color: var(--ou-muted); } /* Marke im Kopf: Schriftzug als Bild (One UI 11.2), Hell/Dunkel über 11.7 */ .brand { display: inline-flex; align-items: center; flex: none; line-height: 0; } .brand img { display: block; width: auto; height: 36px; } /* Schriftzug mindestens 80 px breit (One UI 11.4) */ .logo-light { display: none !important; } [data-ou-theme="light"] .logo-light { display: block !important; } [data-ou-theme="light"] .logo-dark { display: none !important; } /* 3. Icons (Lucide über icons.js, erben Farbe und Größe) ---------------------- */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; } .icon svg { width: 100%; height: 100%; display: block; } /* 4. Fläche ------------------------------------------------------------------- */ .card { background: var(--ou-surface); border: 1px solid var(--ou-line); border-radius: var(--ou-radius); } /* 5. Buttons (Aussehen wie .ou-btn, Klassennamen wie bisher) ------------------ */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border: 1px solid transparent; border-radius: var(--ou-radius-sm); background: transparent; color: var(--ou-text); font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body); letter-spacing: .01em; cursor: pointer; transition: background-color var(--ou-dur-fast) var(--ou-ease), border-color var(--ou-dur-fast) var(--ou-ease), color var(--ou-dur-fast) var(--ou-ease), transform var(--ou-dur-fast) var(--ou-ease); } button:active, .btn:active { transform: translateY(1px); } button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } button .icon, .btn .icon { font-size: 1.15em; } .btn-primary { background: var(--ou-primary-fill); border-color: var(--ou-primary-fill); color: var(--ou-on-primary); } .btn-primary:hover:not(:disabled) { background: var(--ou-primary-fill-hover); border-color: var(--ou-primary-fill-hover); } .btn-ghost { border-color: var(--ou-line-strong); color: var(--ou-text); } .btn-ghost:hover:not(:disabled) { border-color: var(--ou-text); background: color-mix(in srgb, var(--ou-text) 6%, transparent); } .btn-ok { background: var(--ou-green); border-color: var(--ou-green); color: var(--ou-black); } .btn-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--ou-green) 88%, var(--ou-cream)); } .btn-danger { border-color: color-mix(in srgb, var(--ou-danger) 55%, transparent); color: var(--ou-danger-ink); } .btn-danger:hover:not(:disabled) { border-color: var(--ou-danger); background: color-mix(in srgb, var(--ou-danger) 12%, transparent); } .btn-danger-fill { background: var(--ou-danger); border-color: var(--ou-danger); color: var(--ou-black); } .btn-danger-fill:hover:not(:disabled) { background: color-mix(in srgb, var(--ou-danger) 88%, var(--ou-cream)); } .btn-block { width: 100%; } .btn-sm { gap: 6px; padding: 6px 11px; font-size: .8125rem; } /* Quadratischer Icon-Knopf (Moderation, Verwaltung) */ .icon-btn { padding: 8px; border: 1px solid var(--ou-line-strong); background: transparent; color: var(--ou-muted); } .icon-btn:hover:not(:disabled) { color: var(--ou-text); border-color: var(--ou-text); } .icon-btn.danger:hover:not(:disabled) { color: var(--ou-danger-ink); border-color: var(--ou-danger); } /* 6. Formularfelder ------------------------------------------------------------ */ label { display: block; margin: 0 0 6px; font: 600 var(--ou-fs-xs)/1.3 var(--ou-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ou-muted); } input[type=text], input[type=password], input[type=number], input[type=search], input[type=url], input[type=email], input:not([type]) { width: 100%; padding: 11px 12px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-field-bg); color: var(--ou-text); font: 400 var(--ou-fs-md)/1.4 var(--ou-font-body); /* 16 px: kein Auto-Zoom auf iOS */ outline: none; transition: border-color var(--ou-dur-fast) var(--ou-ease), box-shadow var(--ou-dur-fast) var(--ou-ease); } textarea, select { width: 100%; padding: 11px 12px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-field-bg); color: var(--ou-text); font: 400 var(--ou-fs-md)/1.4 var(--ou-font-body); outline: none; transition: border-color var(--ou-dur-fast) var(--ou-ease), box-shadow var(--ou-dur-fast) var(--ou-ease); } textarea { resize: vertical; } select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A9A097' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } input::placeholder, textarea::placeholder { color: var(--ou-faint); } input:focus, select:focus, textarea:focus { border-color: var(--ou-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ou-primary) 22%, transparent); } .err { min-height: 1.1em; margin-top: 10px; color: var(--ou-danger-ink); font-size: var(--ou-fs-sm); } /* 7. Overlay und Modal ----------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--ou-black) 82%, transparent); animation: gh-fade var(--ou-dur) var(--ou-ease); } .modal { width: 100%; max-width: 560px; padding: 32px; animation: gh-rise var(--ou-dur-slow) var(--ou-ease); } /* 8. Toast ------------------------------------------------------------------------ */ #toast-stack { position: fixed; bottom: 22px; left: 50%; z-index: 100; display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); pointer-events: none; } .toast { --_c: var(--ou-info); display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border: 1px solid color-mix(in srgb, var(--_c) 55%, transparent); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--_c) 10%, var(--ou-surface)); box-shadow: var(--ou-drop); color: var(--ou-text); font-size: var(--ou-fs-sm); animation: gh-rise var(--ou-dur) var(--ou-ease); } .toast.leaving { animation: gh-sink var(--ou-dur) var(--ou-ease) forwards; } .toast .icon { display: grid; place-items: center; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--_c); color: var(--ou-black); } .toast.ok { --_c: var(--ou-success); } .toast.err { --_c: var(--ou-danger); } /* 9. Badge, Pill, Punkt, Avatar ------------------------------------------------- */ .badge { --_c: var(--ou-muted); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--_c) 50%, transparent); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--_c) 10%, transparent); color: var(--_c); font: 600 .6875rem/1 var(--ou-font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .badge .icon { font-size: 1.1em; } .badge.ok { --_c: var(--ou-green-ink); } .badge.no { --_c: var(--ou-red-ink); } .badge.ac { --_c: var(--ou-primary-ink); } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); color: var(--ou-muted); font-size: .8125rem; font-weight: 500; } .pill b { color: var(--ou-text); font-weight: 700; font-variant-numeric: tabular-nums; } .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ou-faint); transition: background-color var(--ou-dur) var(--ou-ease); } .dot.live { background: var(--ou-green); animation: ou-pulse 1.6s ease-in-out infinite; } .avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); color: var(--ou-text); font: 400 1.25rem/1 var(--ou-font-display); } /* 10. Spielerzeile (Lobby, Scoreboards; Host und Spieler) ------------------------ */ .player { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-text) 3%, transparent); animation: gh-rise var(--ou-dur-slow) var(--ou-ease) backwards; transition: border-color var(--ou-dur) var(--ou-ease), opacity var(--ou-dur) var(--ou-ease); } .player.offline { opacity: .5; } .player.me { border-color: color-mix(in srgb, var(--ou-primary) 55%, transparent); background: color-mix(in srgb, var(--ou-primary) 9%, transparent); } .player.lead { border-color: var(--ou-primary); box-shadow: inset 3px 0 0 var(--ou-primary); } .player .pname { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; } .player .rank { width: 1.4em; flex: none; text-align: right; color: var(--ou-muted); font: 400 1.25rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; } .player .pts { color: var(--ou-primary-ink); font: 400 1.5rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; } .player .pstatus { display: inline-flex; align-items: center; gap: 7px; color: var(--ou-muted); font-size: .8125rem; } .player .wins { display: inline-flex; align-items: center; gap: 5px; color: var(--ou-muted); font: 400 1.25rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; } .player .wins .icon { display: inline-flex; color: var(--ou-yellow-ink); } .player .wins .icon svg { width: 15px; height: 15px; } /* 11. Session-Bestenliste und Lobby-Chat ------------------------------------------ */ .session-board { margin-top: 18px; } .session-board h3, .chat h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; color: var(--ou-muted); } .session-board h3 .icon, .chat h3 .icon { display: inline-flex; color: var(--ou-primary-ink); } .session-board ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .session-board .empty { padding: 6px 2px; text-align: left; } /* Chat ist flüchtig: Nachrichten blenden über 4 s aus (.fading), dann entfernt JS sie. */ .chat { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ou-line); } .chat-log { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 240px; margin: 0 0 12px; padding: 0; overflow-y: auto; } .chat-empty { padding: 4px 2px; color: var(--ou-muted); font-size: var(--ou-fs-sm); } .chat-msg { padding: 8px 12px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-text) 3%, transparent); animation: gh-rise var(--ou-dur) var(--ou-ease); transition: opacity 4s linear; } .chat-msg.fading { opacity: 0; } .chat-msg .chat-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .chat-msg .chat-name { color: var(--ou-muted); font-size: .8125rem; font-weight: 600; } .chat-msg .chat-text { color: var(--ou-text); font-size: var(--ou-fs-sm); overflow-wrap: anywhere; } .chat-msg.host { border-color: color-mix(in srgb, var(--ou-primary) 55%, transparent); background: color-mix(in srgb, var(--ou-primary) 9%, transparent); } .chat-msg.host .chat-name { color: var(--ou-primary-ink); } .chat-badge { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--ou-primary) 50%, transparent); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-primary) 10%, transparent); color: var(--ou-primary-ink); font: 600 .625rem/1 var(--ou-font-body); letter-spacing: .1em; text-transform: uppercase; } .chat-input { display: flex; gap: 8px; } .chat-input input { flex: 1; min-width: 0; padding: 10px 12px; } .chat-input button { flex: none; padding: 10px 14px; } /* 12. Zähler und Leerzustand -------------------------------------------------------- */ .count { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--ou-primary) 45%, transparent); border-radius: var(--ou-radius-sm); color: var(--ou-primary-ink); font: 400 1.375rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; } .empty { padding: 28px 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); text-align: center; } /* 13. Hell/Dunkel und Ton (Kopfleisten-Knöpfe) --------------------------------------- */ .theme-switch { position: relative; } .theme-switch > button, .sound-toggle { width: 40px; height: 40px; padding: 0; border: 1px solid var(--ou-line-strong); color: var(--ou-muted); } .theme-switch > button:hover, .sound-toggle:hover { color: var(--ou-text); border-color: var(--ou-text); } .theme-switch > button .icon, .sound-toggle .icon { font-size: 1.15rem; } .sound-toggle.muted { color: var(--ou-faint); } .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 188px; padding: 8px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius); background: var(--ou-surface); box-shadow: var(--ou-drop); transform-origin: top right; animation: gh-rise var(--ou-dur) var(--ou-ease); } .theme-menu.hidden { display: none; } .theme-opt { flex-direction: column; gap: 6px; padding: 10px 6px 8px; border: 1px solid transparent; color: var(--ou-muted); font-size: .75rem; } .theme-opt:hover { color: var(--ou-text); background: var(--ou-surface-2); } .theme-opt.active { border-color: var(--ou-primary); color: var(--ou-text); } .theme-opt .swatch { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--swatch); color: var(--swatch-2); font-size: 1.1rem; } /* 14. Emotes: Papier-Sticker in Handschrift ------------------------------------------- */ .emote-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; } .emote-btn { --_bg: var(--ou-paper); --_fg: var(--ou-sticker-text); --_rot: -3deg; position: relative; isolation: isolate; padding: 6px 12px 5px; border: 0; background: none; color: var(--_fg); font: 400 .8125rem/1.5 var(--ou-font-hand); text-transform: uppercase; transform: rotate(var(--_rot)); filter: drop-shadow(var(--ou-drop)); transition: transform var(--ou-dur-fast) var(--ou-ease); } .emote-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--_bg); clip-path: polygon(1% 6%, 14% 0, 34% 4%, 55% 0, 78% 3%, 100% 0, 98% 34%, 100% 66%, 97% 100%, 74% 96%, 50% 100%, 26% 97%, 0 100%, 3% 64%, 0 32%); } .emote-btn:nth-child(3n + 2) { --_rot: 2deg; } .emote-btn:nth-child(3n) { --_rot: -1deg; } .emote-btn[data-emote="fire"], .emote-btn[data-emote="heart"], .emote-btn[data-emote="hundred"] { --_bg: var(--ou-red); --_fg: var(--ou-black); } .emote-btn[data-emote="party"] { --_bg: var(--ou-yellow); --_fg: var(--ou-black); } @media (hover: hover) and (pointer: fine) { .emote-btn:hover { transform: rotate(0deg) translateY(-2px); } } .emote-btn:active { transform: rotate(0deg) scale(.95); } .emote-bar.compact { gap: 8px 6px; } .emote-bar.compact .emote-btn { padding: 4px 9px 3px; font-size: .6875rem; } /* Touch: Treffer mindestens 44 px (WCAG 2.5.5) */ @media (pointer: coarse) { .theme-switch > button, .sound-toggle, .chat-input button, .icon-btn { min-width: 44px; min-height: 44px; } .emote-btn { min-height: 44px; } } /* Aufsteigende Sticker (unten rechts, über der aktuellen Ansicht) */ .emote-layer { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 140px; height: 46vh; overflow: hidden; pointer-events: none; } .emote-burst { position: absolute; bottom: 0; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: gh-emote-rise 2.4s var(--ou-ease) forwards; will-change: transform, opacity; } .emote-burst .em { position: relative; isolation: isolate; padding: 6px 12px 5px; color: var(--ou-sticker-text); font: 400 1.05rem/1.5 var(--ou-font-hand); text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); filter: drop-shadow(var(--ou-drop)); } .emote-burst .em::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ou-paper); clip-path: polygon(1% 6%, 14% 0, 34% 4%, 55% 0, 78% 3%, 100% 0, 98% 34%, 100% 66%, 97% 100%, 74% 96%, 50% 100%, 26% 97%, 0 100%, 3% 64%, 0 32%); } .emote-burst[data-emote="fire"] .em::before, .emote-burst[data-emote="heart"] .em::before, .emote-burst[data-emote="hundred"] .em::before { background: var(--ou-red); } .emote-burst[data-emote="party"] .em::before { background: var(--ou-yellow); } .emote-burst .who { max-width: 120px; padding: 2px 6px; border-radius: var(--ou-radius-sm); background: var(--ou-surface); color: var(--ou-muted); font-size: .6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 15. Quiz-Bausteine (QuoteQuest, Wer sagt das eher?, Wahr oder Falsch?) --------- Gemeinsam für Host und Spieler; manche Teile nutzen auch andere Spiele (.intro-lead, .ready-go, .is-ready, .reveal-row). Bühne: stage.css. */ /* Spielerklärung */ .intro-lead h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.75rem; } .intro-lead h3 .icon { color: var(--ou-primary-ink); font-size: .8em; } .intro-lead p { max-width: 62ch; margin: 0 0 18px; color: var(--ou-muted); font-size: var(--ou-fs-sm); } .intro-lead b { color: var(--ou-text); } .intro-example { position: relative; margin-bottom: 16px; padding: 24px 16px 16px; border: 1px dashed var(--ou-line-strong); border-radius: var(--ou-radius); background: color-mix(in srgb, var(--ou-text) 3%, transparent); } .ie-tag { position: absolute; top: -11px; left: 14px; padding: 3px 8px; border-radius: var(--ou-radius-sm); background: var(--ou-yellow); color: var(--ou-black); font: 600 .6875rem/1.2 var(--ou-font-body); letter-spacing: .12em; text-transform: uppercase; } .intro-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .point-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); color: var(--ou-muted); font-size: .8125rem; font-weight: 500; } .point-pill b { color: var(--ou-primary-ink); font: 400 1.25rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; } .intro-timer { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--ou-muted); font-size: var(--ou-fs-sm); } .intro-timer .icon { flex: none; color: var(--ou-primary-ink); } /* Bereit-Gate: Host sieht, wer bereit ist; Spieler meldet sich bereit */ .ready-gate { padding-top: 14px; border-top: 1px solid var(--ou-line); } .ready-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ou-muted); font-size: var(--ou-fs-sm); } .ready-head .icon { color: var(--ou-green-ink); } .ready-head b { color: var(--ou-text); font: 400 1.375rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; } .ready-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .ready-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--ou-green) 50%, transparent); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-green) 10%, transparent); color: var(--ou-green-ink); font-size: .8125rem; font-weight: 600; animation: gh-rise var(--ou-dur) var(--ou-ease); } /* Alle bereit: Start-Knopf bekommt einen grünen Rand (klickbar bleibt er immer) */ .ready-go { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ou-green) 55%, transparent); } .ready-meta { margin-top: 12px; color: var(--ou-muted); font-size: var(--ou-fs-sm); text-align: center; } .btn-primary.is-ready, .btn-primary.is-ready:hover:not(:disabled) { border-color: var(--ou-green); background: var(--ou-green); color: var(--ou-black); } /* Antwortoption. Zustände aus JS: .sel (eigene Wahl), .correct, .wrong */ .opt { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius); background: var(--ou-surface); color: var(--ou-text); font: 500 var(--ou-fs-md)/1.3 var(--ou-font-body); text-align: left; white-space: normal; transition: border-color var(--ou-dur-fast) var(--ou-ease), background-color var(--ou-dur-fast) var(--ou-ease); } .opt .key { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); color: var(--ou-muted); font: 400 1.25rem/1 var(--ou-font-display); transition: background-color var(--ou-dur-fast) var(--ou-ease), border-color var(--ou-dur-fast) var(--ou-ease), color var(--ou-dur-fast) var(--ou-ease); } button.opt:hover:not(:disabled) { border-color: var(--ou-text); } .opt.sel { border-color: var(--ou-primary); background: color-mix(in srgb, var(--ou-primary) 12%, var(--ou-surface)); } .opt.sel .key { border-color: var(--ou-primary-fill); background: var(--ou-primary-fill); color: var(--ou-on-primary); } .opt.correct { border-color: var(--ou-success); background: color-mix(in srgb, var(--ou-success) 16%, var(--ou-surface)); } .opt.correct .key { border-color: var(--ou-success); background: var(--ou-success); color: var(--ou-black); } .opt.wrong { border-color: color-mix(in srgb, var(--ou-danger) 70%, transparent); background: color-mix(in srgb, var(--ou-danger) 9%, var(--ou-surface)); } .opt.wrong .key { border-color: var(--ou-danger); color: var(--ou-danger-ink); } .opt:disabled { cursor: default; opacity: 1; } /* Live-Stimmverteilung (nur Host): Balken hinter dem Inhalt, Zähler rechts. Blau = Information, damit die Verteilung nicht wie richtig oder falsch aussieht. */ .opt.tallied { overflow: hidden; } .opt.tallied > span:not(.opt-fill) { position: relative; z-index: 1; } .opt-fill { position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--ou-blue) 20%, transparent); transform: scaleX(0); transform-origin: left; transition: transform var(--ou-dur-slow) var(--ou-ease); } .opt.correct .opt-fill { background: color-mix(in srgb, var(--ou-success) 24%, transparent); } .opt-count { min-width: 1.6em; margin-left: auto; flex: none; color: var(--ou-blue-ink); font: 400 1.5rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; text-align: right; } .opt.correct .opt-count { color: var(--ou-green-ink); } /* Countdown (Host, Spieler). Dringend: rot, dazu das Muster urgent je Sekunde */ .timer { display: inline-block; min-width: 2ch; color: var(--ou-text); font: 400 1.75rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; text-align: right; } .timer.urgent { color: var(--ou-red-ink); } /* Richtig/Falsch-Kennzeichen in Ergebnissen */ .mark { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .mark.ok { color: var(--ou-green-ink); } .mark.no { color: var(--ou-red-ink); } /* Pokal- und Kronenfarbe */ .crown { color: var(--ou-yellow-ink); } /* Papier-Konfetti (one-ui-motion.js legt es als Canvas an body) über Overlays und Podium */ body > canvas[aria-hidden="true"] { z-index: 96 !important; } /* Gestaffelte Ergebniszeilen (One UI lines als CSS; --i aus JS) */ .reveal-row { animation: gh-rise var(--ou-dur-slow) var(--ou-ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); } /* 16. Bewegung -------------------------------------------------------------------------- */ @keyframes gh-fade { from { opacity: 0; } } @keyframes gh-rise { from { opacity: 0; transform: translateY(8px); } } @keyframes gh-sink { to { opacity: 0; transform: translateY(8px); } } /* Sticker klatscht auf, steigt auf, verblasst */ @keyframes gh-emote-rise { 0% { opacity: 0; transform: translate(-50%, 0) scale(1.35) rotate(6deg); } 10% { opacity: 1; transform: translate(-50%, -6px) scale(1) rotate(0deg); } 35% { transform: translate(calc(-50% + var(--dx, 0px)), -24vh) rotate(-2deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx2, 0px)), -42vh) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* 17. Rangliste (Tierlist, Phase 6) ------------------------------------------------------ Geteilte Bausteine für Host, Spieler und Bühne (ranking-render.js, saved-ranking-view.js). Unverändert aus der Schutzliste 2.2: Bilder-Bühne mit gestapelten Bildern (.is-on), touch-action und user-select an Roulette und Detailkarte, Kartenformel (--n, --k, cqw). Tier-Farben kommen aus den Daten (--tier), darauf steht immer dunkle Schrift. */ /* Element-Kachel (Bild und Kurztext) */ .rk-el { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; max-width: 220px; padding: 5px 10px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-surface); color: var(--ou-text); font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body); letter-spacing: 0; text-align: left; } .rk-el:has(> .rk-el-img) { padding-left: 5px; } .rk-el:hover:not(.static):not(:disabled) { border-color: var(--ou-text); } .rk-el.static, .rk-el:disabled { cursor: default; opacity: 1; } .rk-el.mark { gap: 8px; border-color: var(--ou-primary); box-shadow: 0 0 0 1px var(--ou-primary); } .rk-el-img { width: 34px; height: 34px; flex: none; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); object-fit: cover; } .rk-el-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Namens-Chip (Intro bei Host und Spieler) */ .rk-chip { padding: 4px 10px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); font-size: .8125rem; font-weight: 600; } /* Tier-Balken: farbiges Label, daneben die Elemente */ .rk-tierlist { display: flex; flex-direction: column; gap: 6px; } .rk-bar { display: flex; align-items: stretch; min-height: 52px; overflow: hidden; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); } .rk-bar-label { display: flex; align-items: center; justify-content: center; flex: none; width: 66px; padding: 6px; background: var(--tier, #7f7f7f); color: var(--ou-black); font: 400 1.625rem/1 var(--ou-font-display); letter-spacing: .02em; text-align: center; text-transform: uppercase; word-break: break-word; } .rk-bar-body, .rk-bar-items { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px; min-width: 0; padding: 7px; } .rk-tierlist .rk-bar-body { padding: 0; } /* dort liegt .rk-bar-items mit eigenem Abstand darin */ /* Auflösung: Rahmen und Konsens-Stempel */ .rk-reveal { display: flex; flex-direction: column; gap: 14px; } .rk-reveal-intro { padding: 24px; color: var(--ou-muted); text-align: center; } .rk-reveal-intro p { margin: 8px 0 0; } .rk-reveal-kicker { color: var(--ou-text); font: 400 2.5rem/1 var(--ou-font-display); letter-spacing: .01em; text-transform: uppercase; } .rk-agree-banner { align-self: center; margin-top: 4px; padding: 8px 18px; border: 2px solid var(--ou-primary); border-radius: var(--ou-radius-sm); color: var(--ou-primary-ink); font: 400 1.75rem/1 var(--ou-font-display); letter-spacing: .02em; text-transform: uppercase; rotate: calc(var(--ou-tilt) * -2deg); /* eigene Eigenschaft: stamp animiert transform */ } /* Auflösung nach Element */ .rk-rev-item { display: flex; flex-direction: column; align-items: center; gap: 14px; } .rk-rev-item-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .rk-rev-item-head.tappable { cursor: pointer; } .rk-rev-progress { color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; } /* Bild wächst mit der Bildschirmhöhe, das ganze Motiv bleibt sichtbar */ .rk-rev-item-img { width: clamp(120px, 34vh, 320px); height: clamp(120px, 34vh, 320px); max-width: 80vw; max-height: 80vw; border: 1px solid var(--ou-line); border-radius: var(--ou-radius); background: var(--ou-surface-2); object-fit: contain; } .rk-rev-item-name { font: 400 clamp(2.25rem, 4vw, 3.25rem)/1 var(--ou-font-display); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; } .rk-rev-item-sub { color: var(--ou-muted); font-size: var(--ou-fs-md); } .rk-rev-places { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 440px; } .rk-rev-place { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface); } .rk-rev-places.agree .rk-rev-place { border-color: color-mix(in srgb, var(--ou-primary) 60%, transparent); } .rk-rev-place-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .rk-tier-tag { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 42px; padding: 4px 12px; border-radius: var(--ou-radius-sm); color: var(--ou-black); font: 400 1.375rem/1 var(--ou-font-display); letter-spacing: .02em; text-transform: uppercase; } .rk-tier-tag.none { background: var(--ou-surface-2); color: var(--ou-faint); } /* Auflösung nach Tier */ .rk-rev-tier { display: flex; flex-direction: column; gap: 12px; } .rk-rev-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: var(--ou-radius-sm); background: var(--tier, #7f7f7f); color: var(--ou-black); } .rk-rev-tier-label { font: 400 2.75rem/1 var(--ou-font-display); letter-spacing: .02em; text-transform: uppercase; } .rk-rev-tier-head .rk-rev-progress { color: var(--ou-black); opacity: .75; } .rk-rev-cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; } .rk-rev-col { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); transition: opacity var(--ou-dur) var(--ou-ease); } .rk-rev-col.is-covered { opacity: .5; } .rk-rev-col-name { margin-bottom: 8px; font: 400 1.5rem/1 var(--ou-font-display); letter-spacing: .01em; text-align: center; text-transform: uppercase; } .rk-rev-col-items { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 12px; min-height: 40px; container-type: inline-size; } /* Große Bildkarte. Breite = min(Spaltenbreite / Karten pro Reihe, Anteil der Bildschirmhöhe, Obergrenze). Fallback ohne Container-Einheiten: Viewport. */ .rk-rc { --rk-rc-max: 340px; --rk-rc-w: clamp(72px, min(calc(86vw / (var(--n, 1) * var(--k, 1))), 42vh), var(--rk-rc-max)); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; width: var(--rk-rc-w); padding: 8px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius); background: var(--ou-surface); color: var(--ou-text); font: inherit; letter-spacing: 0; text-align: center; } @supports (width: 1cqw) { .rk-rc { --rk-rc-w: clamp(64px, min(calc((100cqw - (var(--k, 1) - 1) * 12px) / var(--k, 1)), 42vh), var(--rk-rc-max)); } } .rk-rc:hover:not(:disabled) { border-color: var(--ou-text); } .rk-rc:disabled { cursor: default; opacity: 1; } .rk-rc.mark { display: flex; align-items: stretch; gap: 8px; border-color: var(--ou-primary); box-shadow: 0 0 0 2px var(--ou-primary); } .rk-rc-img { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); } .rk-rc-img img { display: block; width: 100%; height: 100%; object-fit: contain; } .rk-rc-mono { color: var(--ou-muted); font: 400 calc(var(--rk-rc-w) * .34)/1 var(--ou-font-display); } .rk-rc-name { font-weight: 600; font-size: clamp(.8rem, calc(var(--rk-rc-w) * .075), 1.2rem); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; } .rk-rev-col.is-covered .rk-rev-hidden { padding: 4vh 0; font-size: clamp(2rem, 10vh, 5rem); } /* Schmale Bildschirme: Spalten umbrechen statt winzig werden */ @media (max-width: 600px) { .rk-rev-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .rk-rev-cols.is-multi { grid-template-columns: minmax(0, 1fr); } .rk-rc { --rk-rc-max: 300px; } } .rk-rev-empty { color: var(--ou-faint); font-size: var(--ou-fs-sm); } .rk-rev-hidden { color: var(--ou-faint); font: 400 2.5rem/1 var(--ou-font-display); } /* Endansicht: alle Listen nebeneinander */ .rk-allboards { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; } .rk-allboard { min-width: 220px; padding: 12px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius); } .rk-allboard-name { margin-bottom: 10px; font: 400 1.75rem/1 var(--ou-font-display); letter-spacing: .01em; text-align: center; text-transform: uppercase; } /* Detailansicht (Bilder-Roulette), als Portal an body */ .rk-detail-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--ou-black) 82%, transparent); animation: gh-fade var(--ou-dur) var(--ou-ease); } .rk-detail-card { width: min(560px, 94vw); max-height: 90vh; overflow: auto; padding: 22px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius); background: var(--ou-surface); box-shadow: var(--ou-drop); text-align: center; touch-action: manipulation; } .rk-detail-close { position: absolute; top: 16px; right: 18px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-surface); box-shadow: var(--ou-drop); color: var(--ou-text); font-size: 22px; line-height: 1; } .rk-detail-close:hover { border-color: var(--ou-text); } .rk-detail-name { margin: 0 0 12px; font-size: 2.25rem; } /* Bilder-Bühne mit fester Höhe: alle Bilder gestapelt, nur .is-on ist sichtbar. Ein Wechsel ändert kein Layout, die Pfeile bleiben unter dem Finger. */ .rk-roulette { position: relative; min-height: 120px; touch-action: manipulation; } .rk-roulette-stage { position: relative; height: min(50vh, 520px); min-height: 180px; } .rk-roulette-stage.is-tappable { cursor: pointer; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .rk-roulette-img { position: absolute; inset: 0; max-width: 100%; max-height: 100%; margin: auto; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); object-fit: contain; opacity: 0; pointer-events: none; } .rk-roulette-img.is-on { opacity: 1; } .rk-roulette-stage.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid var(--ou-line-strong); border-top-color: var(--ou-primary); border-radius: 50%; animation: rk-spin .7s linear infinite; } @keyframes rk-spin { to { transform: rotate(360deg); } } .rk-roulette-none { padding: 30px; color: var(--ou-faint); } .rk-roulette-nav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-surface); box-shadow: var(--ou-drop); color: var(--ou-text); font-size: 22px; line-height: 1; transform: translateY(-50%); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .rk-roulette-nav:hover { border-color: var(--ou-text); } .rk-roulette-nav:active { transform: translateY(-50%) scale(.92); } .rk-roulette-nav.prev { left: 0; } .rk-roulette-nav.next { right: 0; } .rk-roulette-count { position: absolute; bottom: 6px; left: 50%; z-index: 2; padding: 2px 10px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-surface); color: var(--ou-text); font: 600 var(--ou-fs-xs)/1.5 var(--ou-font-body); font-variant-numeric: tabular-nums; transform: translateX(-50%); pointer-events: none; } .rk-detail-desc { margin: 14px 0 0; color: var(--ou-muted); line-height: 1.5; text-align: left; } .rk-detail-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } /* Gespeichertes Ranking (Verwaltung, Spieler; Bühne: stage.css) */ .svr { display: flex; flex-direction: column; gap: 16px; } .svr-head { display: flex; flex-direction: column; gap: 6px; } .svr-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ou-primary-ink); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; } .svr-kicker svg { width: 16px; height: 16px; } .svr-name { margin: 0; font-size: clamp(2rem, 4vw, 3rem); } .svr-meta { color: var(--ou-muted); font-size: var(--ou-fs-md); } .svr-desc { max-width: 70ch; margin: 2px 0 0; color: var(--ou-muted); }