/* ================================ Schätzspiel – Modernes UI-Redesign v2 - Mehr Tiefe (Glas + Glow) - Level-Themes (leicht/mittel/schwer) - Medaillen & Lesbarkeit - Feinere Mobile-Touch-Ziele - Barrierefreiheit & Reduced Motion ================================= */ /* Root: Farben/Abstände/Typo */ :root{ --bg-overlay: rgba(9, 12, 20, 0.55); --card-bg: rgba(255, 255, 255, 0.14); --card-border: rgba(255, 255, 255, 0.22); --text: #0f172a; /* slate-900 */ --text-contrast: #f8fafc; /* slate-50 */ --primary: #3b82f6; /* blue-500 */ --primary-hover: #2563eb; /* blue-600 */ --success: #10b981; /* emerald-500 */ --warn: #f59e0b; /* amber-500 */ --error: #ef4444; /* red-500 */ --accent: #d4af37; /* gold */ --muted: #94a3b8; /* slate-400 */ --ring: #93c5fd; /* blue-300 */ --radius: 20px; --shadow: 0 12px 40px rgba(2, 6, 23, .30); --space: clamp(16px, 1.8vw, 22px); --font: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; } /* Level-Themes (per data-Attribut auf oder #app) */ :root[data-level="leicht"]{ --primary:#10b981; --primary-hover:#059669; --ring:#86efac; } :root[data-level="mittel"]{ --primary:#f59e0b; --primary-hover:#d97706; --ring:#fcd34d; } :root[data-level="schwer"]{ --primary:#ef4444; --primary-hover:#dc2626; --ring:#fca5a5; } /* Reset */ *{ box-sizing:border-box; } html,body{ height:100%; margin:0; padding:0; } img{ display:block; max-width:100%; } button,input{ font: inherit; } /* Hintergrundbild + Overlay */ body{ background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; display: grid; place-items: center; min-height: 100%; color: var(--text); font-family: var(--font); } body::before{ content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(9,12,20,.65), rgba(9,12,20,.35)), var(--bg-overlay); pointer-events: none; z-index: 0; } /* Glas-Karte */ #app{ position: relative; z-index: 1; width: min(92vw, 560px); padding: calc(var(--space) * 1.25); border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(12px) saturate(120%); box-shadow: var(--shadow); text-align: center; color: var(--text-contrast); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } #app:hover{ transform: translateY(-1px); box-shadow: 0 16px 44px rgba(2, 6, 23, .36); } /* Typo */ h1{ font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin: 0 0 .8rem; color: var(--accent); text-shadow: 0 0 6px rgba(212,175,55,.28); } h2{ font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: .2rem 0 .8rem; color: #e2e8f0; } p{ margin: .5rem 0; color: #e5e7eb; } /* Form */ input[type="text"], input[type="number"]{ width: 100%; height: 52px; padding: 0 1rem; border-radius: calc(var(--radius) - 8px); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: var(--text-contrast); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .06s ease; } input::placeholder{ color: rgba(248,250,252,.7); } input:focus{ border-color: var(--ring); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ring) 30%, transparent); background: rgba(255,255,255,.16); } /* Labels (Modus/Level) */ .level-select label, label{ color: var(--accent); font-weight: 700; text-shadow: 0 0 3px rgba(212,175,55,.20); margin: 0 .65rem; } /* Buttons */ button{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .9rem 1.25rem; border: none; border-radius: calc(var(--radius) - 6px); cursor: pointer; color: white; background: linear-gradient(180deg, var(--primary), var(--primary-hover)); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 -2px 0 rgba(255,255,255,.12); transition: transform .12s ease, filter .2s ease, box-shadow .2s ease, background .2s ease; user-select: none; will-change: transform; } button:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 42%, transparent), 0 0 0 6px color-mix(in srgb, var(--ring) 18%, transparent); } button:active{ transform: translateY(0) scale(.99); filter: brightness(.98); } button:focus-visible{ outline: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ring) 35%, transparent), inset 0 0 0 1px rgba(255,255,255,.7); } /* Sekundär-/Ghost-Button */ .button-ghost{ background: rgba(255,255,255,.08); color: #e5e7eb; border: 1px solid rgba(255,255,255,.22); box-shadow: none; } .button-ghost:hover{ filter:none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ring) 12%, transparent); } /* Score/Meta */ #scoreDisplay{ color: #c7d2fe !important; font-weight: 800; letter-spacing: .3px; } /* Timer: Text + Balken */ #timerText{ font-weight: 700; font-size: 1.05rem; color: #cbd5e1; margin-top: .35rem; letter-spacing:.2px; } .timer-bar-container{ width: 100%; height: 14px; margin: .9rem 0 1.1rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; position: relative; } .timer-bar-fill{ height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); position: relative; } .timer-bar-fill::after{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 8px, rgba(255,255,255,0) 8px 16px); animation: stripes 1.2s linear infinite; mix-blend-mode: screen; } /* Genauigkeitsbalken: rot→gelb→grün Verlauf */ .accuracy-bar{ background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.22); border-radius:12px; overflow:hidden; } .accuracy-bar > div{ height:100%; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%); box-shadow: inset 0 0 8px rgba(0,0,0,.12); } /* Listen (Highscores) */ ol{ text-align: left; padding-left: 1.2rem; margin: .75rem 0; } ol li{ color: #e2e8f0; margin-bottom: .45rem; display:flex; align-items:center; gap:.5rem; } /* Medaillen für Top 3 */ ol li:nth-child(1)::before{ content:"🥇"; } ol li:nth-child(2)::before{ content:"🥈"; } ol li:nth-child(3)::before{ content:"🥉"; } /* Micro-Animationen */ @keyframes fadeInUp{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } } @keyframes stripes{ from{ background-position: 0 0; } to{ background-position: 40px 0; } } #app > *{ animation: fadeInUp .28s ease both; } /* Fokusfreundliche Radios via Label */ input[type="radio"]:focus-visible + label, label:has(> input[type="radio"]:focus-visible){ outline: 0; text-decoration: underline; text-underline-offset: 3px; } /* Utility: Spacing unter Buttons auf mobilen Geräten */ button + button{ margin-left: .4rem; } @media (max-width: 460px){ button{ width:100%; } button + button{ margin: .6rem 0 0; } #app{ padding: 18px; border-radius: 16px; } .timer-bar-container{ height: 12px; } } @media (min-height: 900px){ #app{ padding: calc(var(--space) * 1.4); } } /* Goldene Akzente */ h1.faded{ color: var(--accent); text-shadow: 0 0 6px rgba(212,175,55,.28); } .level-select label{ color: var(--accent); } /* Optional: Kategorie-Icon-Style (falls genutzt) */ .badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; font-size:.85rem; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#e5e7eb; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } .timer-bar-fill::after{ animation: none !important; } } /* Score Pop + Fly-up */ .player-score { position: relative; } #scoreDisplay .pop { animation: scorePop 380ms cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 2px 8px rgba(16,185,129,.35)); } .score-fly { position: absolute; right: -6px; top: -6px; font-weight: 800; font-size: .95rem; color: #86efac; /* leichtes Grün */ opacity: 0; pointer-events: none; animation: flyUp 900ms ease-out forwards; text-shadow: 0 1px 6px rgba(16,185,129,.35); } @keyframes scorePop { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-2px) scale(1.12); } 100% { transform: translateY(0) scale(1); } } @keyframes flyUp { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }