:root { --bg: #f4f6fb; --card: #ffffff; --ink: #1f2733; --muted: #6b7686; --accent: #3b6ef0; --ok: #1f9d57; --bad: #d23b3b; --line: #e3e8f0; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(59,110,240,.25); } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); } .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.55rem 1.5rem; background: var(--card); border-bottom: 1px solid var(--line); } .brand { font-weight: 700; font-size: 1.25rem; color: var(--accent); text-decoration: none; white-space: nowrap; } .brand-emoji { font-size: 1.1em; } /* Session-wide player status: a compact symbol row (combo + ▶/✓/★) with a flat, full-width level bar beneath it. Consolidates what used to be three stacked lines inside the game card, freeing vertical space so question + all options fit above the mobile fold. Combo chip and level bar are explained by transient animations (comboToast / levelUp) rather than permanent labels. */ .player-status { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 16rem; min-width: 0; max-width: 30rem; } .status-symbols { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; font-size: 0.95rem; color: var(--muted); line-height: 1.2; } .status-symbols .pstat { white-space: nowrap; } .status-symbols b { color: var(--ink); } .combo-chip { display: inline-flex; align-items: center; gap: 0.05rem; margin-right: auto; /* combo far left, counters stay right */ font-weight: 700; color: #d9791a; } .status-level { display: flex; align-items: center; gap: 0.5rem; } .container { max-width: 640px; margin: 2.5rem auto; padding: 0 1rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 2rem; box-shadow: 0 6px 24px rgba(31, 39, 51, 0.05); } h1 { margin-top: 0; } .start-form { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } select, input[type="text"], input[type="number"] { padding: 0.6rem 0.75rem; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.2rem; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(1.05); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-secondary { background: #5a6478; margin-top: 1.25rem; } /* Allow a long or unexpected title (e.g. an unknown game key) to wrap inside the card instead of overflowing on narrow viewports. Hyphenation (lang="de" set on ) lets the browser break at syllable boundaries first; overflow-wrap is the last-resort fallback for a single unbreakable token. */ #game-title { min-width: 0; overflow-wrap: break-word; hyphens: auto; } .question-context { font-size: 1.05rem; color: var(--muted); margin: 1.5rem 0 0.75rem; text-align: left; line-height: 1.6; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); } .question { font-size: 2rem; font-weight: 600; margin: 1.5rem 0; text-align: center; } .question--long { text-align: left; font-size: 1.5rem; } .question--error { font-size: 1.25rem; font-weight: 500; color: var(--muted); } .question--has-context { margin-top: 0.5rem; } .question-hint { font-size: 0.85rem; color: var(--muted); text-align: center; margin: -1rem 0 1.5rem; } .question--long + .question-hint { text-align: left; } /* Round image (e.g. chord notation, a map …). Rendered generically from round.image for any game; content is drawn dark-on-transparent, so the wrapper forces an explicit light background to stay legible. Portrait images (the Bundesland maps) would otherwise push question and options below the fold, hence the viewport-relative height cap; object-fit keeps the aspect ratio once that cap bites. */ .round-image { display: flex; justify-content: center; margin: 1.5rem 0; } .round-image img { display: block; box-sizing: border-box; width: 100%; max-width: 380px; height: auto; max-height: min(38vh, 340px); object-fit: contain; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; } /* Narrow screens: the question wraps over more lines, so the image has to give up more room for the first options to stay above the fold. The header, title, question and spacing are trimmed too, so the image cap doesn't have to carry the whole budget on its own. */ @media (max-width: 560px) { .round-image { margin: 0.75rem 0; } .round-image img { max-height: 28vh; } .container { margin: 0.75rem auto; } .card { padding: 1rem 1.1rem 1.25rem; } #game-title { font-size: 1.4rem; margin-bottom: 0.5rem; } .question { font-size: 1.3rem; margin: 0.9rem 0; } .topbar { padding: 0.45rem 1rem; } .status-symbols { gap: 0.7rem; font-size: 0.9rem; } } /* Compact variant used inside review items. */ .round-image--compact { justify-content: flex-start; margin: 0 0 0.6rem 1.5rem; } .round-image--compact img { max-width: 220px; padding: 0.6rem; } .answer-form { display: flex; gap: 0.75rem; } .answer-form input { flex: 1; } .feedback { margin-top: 1.25rem; font-weight: 600; font-size: 1.1rem; padding: 0.65rem 0.9rem; border-radius: 8px; border-left: 4px solid transparent; } .feedback.ok { color: var(--ok); background: #edf7f2; border-left-color: var(--ok); } .feedback.bad { color: var(--bad); background: #fdf0f0; border-left-color: var(--bad); } .feedback .explanation { display: block; margin-top: 0.75rem; color: var(--muted); font-weight: 400; font-size: 0.95rem; } /* Difficulty selector on the menu */ .difficulty-row { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.75rem; } /* Edit mode: arrows change the value (entered via Enter) */ #difficulty.editing { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(59, 110, 240, 0.25); } /* Keyboard hint */ .kbd-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.25rem; } .kbd-hint b { color: var(--ink); } /* Accumulated score on the menu */ .score-banner { display: inline-block; margin: 0.25rem 0 0.5rem; padding: 0.4rem 0.9rem; background: #f0f4ff; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink); } /* Game menu tiles */ .game-menu .cat { margin-bottom: 1.5rem; } .game-menu h2 { font-size: 1rem; color: var(--muted); margin: 0 0 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } .tile { display: block; padding: 1rem; background: #f7f9fe; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; transition: transform 0.08s ease, box-shadow 0.08s ease; overflow-wrap: break-word; hyphens: auto; word-break: break-word; } .tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(31, 39, 51, 0.08); } /* Multiple-choice options */ .options { display: grid; gap: 0.6rem; margin-top: 0.5rem; } .option-btn { background: #f7f9fe; color: var(--ink); border: 1px solid var(--line); text-align: left; justify-content: flex-start; } .option-btn:hover:not(:disabled) { border-color: var(--accent); } .option-btn.correct { background: #e6f7ee; border-color: var(--ok); color: var(--ok); } .option-btn.wrong { background: #fdeaea; border-color: var(--bad); color: var(--bad); } .option-btn { gap: 0.7rem; } .opt-key { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); background: #e7ecf6; border: 1px solid var(--line); border-radius: 5px; } .opt-text { flex: 1 1 auto; } /* Footer row */ .game-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; gap: 0.75rem; flex-wrap: wrap; } .game-foot-left { display: flex; align-items: center; gap: 1rem; } .link-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: 0.9rem; } .link-btn:hover { color: var(--accent); text-decoration: underline; } /* Per-task feedback box */ .feedback-box { margin-top: 1rem; display: grid; gap: 0.5rem; } .feedback-box textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical; } .feedback-box-actions { display: flex; align-items: center; gap: 0.75rem; } .feedback-status { color: var(--ok); font-weight: 600; } .link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--accent); text-decoration: none; } /* Keyboard key hint */ kbd { display: inline-block; padding: 0.05rem 0.4rem; font: inherit; font-size: 0.8rem; color: var(--ink); background: #eef1f7; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; line-height: 1.4; } /* Shortcut hints are for keyboards — hide on narrow (touch/mobile) screens. */ @media (max-width: 640px) { .kbd-shortcut { display: none; } } .btn-secondary { margin-top: 0; } /* Smooth question load transition */ .question { transition: opacity 0.18s ease; } .question.loading { opacity: 0.25; } /* Combo chip pop (reused by the ⚡ chip in the status bar on reaching a tier) */ @keyframes streak-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } .streak-pop { animation: streak-pop 0.32s ease; } /* Floating score label */ .point-float { position: absolute; top: 38%; right: 2.5rem; font-weight: 700; font-size: 1.4rem; color: var(--ok); pointer-events: none; z-index: 10; animation: point-float 1s ease forwards; } @keyframes point-float { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2.5rem); } } /* Confetti overlay */ .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .card.game { position: relative; overflow: hidden; } /* Option button transition */ .option-btn { transition: border-color 0.12s, background 0.12s; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Memorize phase */ .memorize-prompt { font-size: 1.05rem; color: var(--muted); text-align: center; margin: 0.5rem 0 0.75rem; } .memorize-items { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.25rem 0 1rem; } .memorize-items span { padding: 0.4rem 0.8rem; background: #f0f4ff; border: 1px solid var(--line); border-radius: 6px; font-size: 1.15rem; font-weight: 500; } .memorize-countdown { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0; } .memorize-countdown b { color: var(--ink); font-size: 1.1rem; } /* Game footer: group buttons on the right */ .game-foot-actions { display: flex; gap: 0.5rem; align-items: center; } /* Review section */ .review { margin-top: 1.5rem; } .review-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .review-head h2 { margin: 0; font-size: 1.25rem; } .review-summary { font-size: 0.95rem; color: var(--muted); font-weight: 500; } .review-list { display: flex; flex-direction: column; gap: 0.75rem; } .review-empty { color: var(--muted); text-align: center; margin: 2rem 0; font-size: 0.95rem; } .review-item { padding: 0.875rem 1rem; border-radius: 8px; border: 1px solid var(--line); border-left: 4px solid transparent; } .review-item--correct { border-left-color: var(--ok); background: #f4fbf7; } .review-item--wrong { border-left-color: var(--bad); background: #fdf5f5; } .review-item-header { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; } .badge { font-weight: 700; font-size: 1rem; flex-shrink: 0; line-height: 1.4; } .badge--correct { color: var(--ok); } .badge--wrong { color: var(--bad); } .review-question { font-weight: 500; line-height: 1.4; font-size: 0.95rem; } .review-answers { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.5rem; font-size: 0.9rem; margin: 0 0 0 1.5rem; } .review-label { color: var(--muted); } .review-user-answer { font-weight: 500; } .review-correct-answer { font-weight: 600; color: var(--ok); } .review-explanation { margin: 0.5rem 0 0 1.5rem; font-size: 0.9rem; } .review-explanation summary { cursor: pointer; color: var(--accent); font-weight: 500; min-height: 32px; display: flex; align-items: center; user-select: none; } .review-explanation p { margin: 0.4rem 0 0; color: var(--muted); line-height: 1.5; } .review-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); } .review-foot-actions { display: flex; gap: 0.5rem; align-items: center; } /* Gamification: level + XP bar */ .gam-level { font-size: 0.72rem; font-weight: 700; color: var(--accent); white-space: nowrap; } .xp-track { flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; } .xp-fill { height: 100%; background: var(--accent); border-radius: 999px; width: 0%; transition: width 0.4s ease; } /* Gamification: badge rack on the index page */ .badge-rack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.75rem; } .badge-item { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: 0.78rem; font-weight: 600; color: var(--accent); background: #eef2fe; border: 1px solid #c8d6fc; border-radius: 999px; cursor: default; } /* Site-weiter Footer */ .site-footer { text-align: center; padding: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); } .footer-link { color: var(--muted); text-decoration: none; } .footer-link:hover { color: var(--accent); text-decoration: underline; } /* Autorenmodus: Tabellen und Links */ .author-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1rem 0; } .author-table th, .author-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line); } .author-table th { font-weight: 600; color: var(--muted); background: #f7f9fe; white-space: nowrap; } .author-actions { white-space: nowrap; } .author-link { color: var(--accent); text-decoration: none; margin-right: 0.5rem; font-size: 0.9rem; } .author-link:hover { text-decoration: underline; } /* Autorenmodus: Formular-Sektionen */ .author-section { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; } .author-section h2 { margin-top: 0; font-size: 1.1rem; } .author-field { margin-bottom: 0.75rem; } .author-field label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-size: 0.9rem; } .author-field input[type="number"] { width: 9rem; display: block; } .author-hint { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; } /* Credits-Seite */ .credits-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 1rem; } .credits-item { padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fe; } .credits-name { font-weight: 600; margin-bottom: 0.25rem; } .credits-meta { font-size: 0.9rem; color: var(--muted); } .credits-license { font-family: monospace; font-size: 0.85rem; } .credits-source { font-size: 0.9rem; } .credits-attribution { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); } /* Gamification: transient toasts */ .badge-toast, .levelup-toast, .combo-toast { position: fixed; left: 50%; transform: translateX(-50%); padding: 0.55rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: 1rem; pointer-events: none; z-index: 1000; animation: gam-toast 2.2s ease forwards; } .combo-toast { bottom: 7.5rem; background: #d9791a; color: #fff; font-size: 1.15rem; box-shadow: 0 4px 16px rgba(217,121,26,.4); } .badge-toast { bottom: 5rem; background: #eef2fe; color: var(--accent); border: 1px solid #c8d6fc; } .levelup-toast { bottom: 7.5rem; background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(59,110,240,.35); } @keyframes gam-toast { 0% { opacity: 0; transform: translateX(-50%) translateY(0.5rem); } 12% { opacity: 1; transform: translateX(-50%) translateY(0); } 75% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-0.75rem); } } /* --- Hotseat duel ---------------------------------------------------------- */ :root { --duel-p0: #3b6ef0; --duel-p1: #d9791a; } /* Menu entry point */ .duel-cta { margin: 0.5rem 0 1.25rem; } .duel-cta-btn { width: 100%; gap: 0.6rem; background: linear-gradient(90deg, var(--duel-p0), var(--duel-p1)); font-weight: 700; } .duel-cta-hint { font-weight: 400; font-size: 0.85rem; opacity: 0.9; } /* Setup screen */ .duel-setup-form { display: grid; gap: 1rem; margin-top: 1.25rem; } .duel-field { display: grid; gap: 0.3rem; } .duel-field label { font-weight: 500; font-size: 0.9rem; } .duel-field input, .duel-field select { width: 100%; } .duel-setup-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } /* Per-player accent colour: applied to so any element can opt in. */ body.duel-p0 .duel-accent-surface { background: #eef2ff; border-color: var(--duel-p0); } body.duel-p1 .duel-accent-surface { background: #fff3e8; border-color: var(--duel-p1); } body.duel-p0 .duel-accent-text { color: var(--duel-p0); } body.duel-p1 .duel-accent-text { color: var(--duel-p1); } /* Handover ("anti-cheat pause") screen: big, unmistakable, fully tappable. */ .duel-handover { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; user-select: none; border: 3px solid var(--line); transition: background 0.15s ease, border-color 0.15s ease; } .duel-handover-eyebrow { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; } .duel-handover-name { margin: 0.5rem 0; font-size: 2.75rem; font-weight: 800; line-height: 1.15; } .duel-handover-hint { margin: 0 0 0.5rem; color: var(--muted); font-size: 1.05rem; } /* Content-pool notice (G20): capped rounds_target and/or a mid-match repeat. Neutral/informational, not an error — kept visually distinct from .feedback.bad. */ .duel-pool-notice { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border-radius: 8px; background: #fff8e6; border-left: 3px solid #e0a800; color: #6b5200; font-size: 0.9rem; } .duel-scoreboard, .duel-scores { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .duel-scoreboard { margin-top: 1.5rem; } .duel-score-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 700; background: #f7f9fe; border: 2px solid var(--line); color: var(--ink); } .duel-chip-p0.active { border-color: var(--duel-p0); color: var(--duel-p0); background: #eef2ff; } .duel-chip-p1.active { border-color: var(--duel-p1); color: var(--duel-p1); background: #fff3e8; } /* Play screen: turn indicator + persistent scoreboard */ .duel-turnbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.6rem 0.9rem; margin: -0.5rem 0 1rem; border: 2px solid var(--line); border-radius: 10px; } .duel-turn-indicator { font-weight: 700; font-size: 1.1rem; } /* Flex items default to min-width:auto, so without this the free-text input would refuse to shrink below its intrinsic content width and overflow narrow (375px) viewports next to #submit-btn. Scoped to the duel play screen only; the solo game screen has no #screen-play wrapper. */ #screen-play .answer-form input { min-width: 0; } .duel-play-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } /* Finished screen: winner announcement, score comparison, per-player review, rematch */ .duel-finished { position: relative; overflow: hidden; } .duel-finished-winner { text-align: center; margin-bottom: 1.25rem; } .duel-finished-eyebrow { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; } .duel-finished-winner-name { margin: 0.3rem 0 0; font-size: 2.25rem; font-weight: 800; line-height: 1.25; } .duel-finished-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .duel-score-card { border: 2px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; text-align: center; } .duel-score-card-p0 { border-color: var(--duel-p0); } .duel-score-card-p1 { border-color: var(--duel-p1); } .duel-score-card-p0.winner { background: #eef2ff; } .duel-score-card-p1.winner { background: #fff3e8; } .duel-score-card-name { margin: 0; font-size: 1.1rem; font-weight: 700; } .duel-score-card-p0 .duel-score-card-name { color: var(--duel-p0); } .duel-score-card-p1 .duel-score-card-name { color: var(--duel-p1); } .duel-score-card-score { margin: 0.3rem 0 0.15rem; font-size: 1.6rem; font-weight: 800; } .duel-score-card-detail { margin: 0; color: var(--muted); font-size: 0.9rem; } .duel-finished-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; align-items: start; } .duel-review-col-heading { margin: 0 0 0.6rem; font-size: 1.05rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--line); } .duel-review-col-p0 .duel-review-col-heading { color: var(--duel-p0); border-color: var(--duel-p0); } .duel-review-col-p1 .duel-review-col-heading { color: var(--duel-p1); border-color: var(--duel-p1); } .duel-finished-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } /* Setup screen: per-player game picker entry point */ .duel-picker-field { gap: 0.4rem; } .duel-field-label-static { font-weight: 500; font-size: 0.9rem; } .duel-selection-summary { margin: 0; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; } /* Game picker screen: grid rendering duplicates index.html's .cat/.tile-grid/ .tile classes for visual consistency, tiles become difficulty-cycling toggles instead of links. */ .duel-picker-title { margin-bottom: 0.25rem; } .duel-picker-hint { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.25rem; } .duel-picker-grid .tile { position: relative; cursor: pointer; border-width: 1px; transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.12s ease, background 0.12s ease; } .duel-picker-tile-name { display: block; padding-right: 1.6rem; } .duel-picker-tile.selected { border-width: 3px; padding: calc(1rem - 2px); } body.duel-p0 .duel-picker-tile.selected { border-color: var(--duel-p0); background: #eef2ff; } body.duel-p1 .duel-picker-tile.selected { border-color: var(--duel-p1); background: #fff3e8; } .duel-picker-tile-badge { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.85rem; line-height: 1; } .duel-picker-max-hint { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.85rem; } .duel-picker-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; } /* Play screen: "Duell beenden" grouped with the Übersicht link, visually secondary to the primary Weiter/Prüfen actions so it isn't triggered by accident — the window.confirm() gate is the real safeguard. */ .duel-play-foot-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .duel-finish-btn { margin-top: 0; } /* Mobile: no horizontal overflow, comfortably tappable */ @media (max-width: 400px) { .card { padding: 0.9rem 1rem 1.1rem; } .container { margin: 0.6rem auto; } .topbar { padding: 0.4rem 0.9rem; } #game-title { font-size: 1.3rem; } .question { font-size: 1.15rem; } .round-image { margin: 0.55rem 0; } .status-symbols { gap: 0.6rem; font-size: 0.88rem; } .duel-handover-name { font-size: 2.1rem; } .duel-handover { min-height: 50vh; } .duel-turnbar { flex-direction: column; align-items: flex-start; } .duel-finished-winner-name { font-size: 1.75rem; } }