/* Sprachspiele (app/Views/play.php, js/play.js) — Quizkarte im Hero, Ergebnis, Tagesquiz. */
.pl-quiz { min-height: 360px; align-content: start; }
.pl-intro { display: grid; justify-items: center; gap: var(--space-4); text-align: center; padding: var(--space-4) 0; }
.pl-ear { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--accent-soft, var(--surface-sunken)); color: var(--accent-text, var(--text)); }
.pl-introtext { font: 700 20px/1.3 var(--font-display); margin: 0; }
.pl-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.pl-langbtn { cursor: pointer; font: inherit; }
.pl-langbtn[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.pl-loading { min-height: 240px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover, var(--surface)) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: pl-shimmer 1.2s linear infinite; }
@keyframes pl-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pl-loading { animation: none; } }
.pl-stage { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-3) 0; }
.pl-play { --_s: 88px; }
.pl-optname { display: inline-flex; align-items: center; gap: var(--space-2); }
.pl-fb { display: grid; gap: var(--space-3); }
.pl-verdict { margin: 0; font: 700 18px/1.3 var(--font-display); }
.pl-verdict.is-ok { color: var(--success-text); } .pl-verdict.is-bad { color: var(--danger-text); }
.pl-said { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.pl-said__t { margin: var(--space-1) 0 0; font: 600 19px/1.4 var(--font-text); }
.pl-said__m { margin: var(--space-1) 0 0; color: var(--text-muted); }
.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pl-result { display: grid; gap: var(--space-3); }
.pl-result > p { margin: 0; }
.pl-score { display: flex; align-items: center; gap: var(--space-3); color: var(--accent-text, var(--text)); }
.pl-score b { font: 800 56px/1 var(--font-display); color: var(--text); }
.pl-score small { font-size: 24px; color: var(--text-muted); }
.pl-conf ul, .pl-review ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.pl-conf li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pl-conf a { display: inline-flex; align-items: center; gap: 6px; }
.pl-dhead { display: flex; align-items: center; gap: var(--space-2); }
.pl-dhead .lg-btn { margin-inline-start: auto; }
.pl-wotd { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.pl-wotd__row, .pl-qterm { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.pl-term { margin: 0; font: 700 28px/1.2 var(--font-display); overflow-wrap: anywhere; }
.pl-ph { margin: 2px 0 0; font-size: 15px; }
.pl-wm { margin: var(--space-1) 0 0; font-weight: 600; }
.pl-qq { font-size: 17px; }
.pl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; }
.pl-stats > div { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.pl-stats dt { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); }
.pl-stats dd { margin: 4px 0 0; font: 800 22px/1.2 var(--font-display); }
.pl-review li { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.pl-review li.is-ok > svg { color: var(--success); } .pl-review li.is-bad > svg { color: var(--danger); }
.pl-toast { position: fixed; inset-inline: 0; bottom: 96px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--radius-sm); background: var(--text); color: var(--surface); font-weight: 600; z-index: 1000; }
/* Wochenliga (app/Views/league.php) */
.lgl-me { gap: var(--space-3); }
.lgl-form { display: grid; gap: var(--space-2); }
.lgl-form__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lgl-note { margin: 0; font-size: 14px; }
.lgl-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 720px; }
.lgl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lgl-row b { font: 800 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lgl-row.is-me { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lgl-rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunken); font: 800 14px/1 var(--font-display); }
.lgl-board li:nth-child(1) .lgl-rank { background: var(--highlight, #f5c542); color: #1a1a1a; }
.lgl-name { overflow-wrap: anywhere; }
.lgl-name small { color: var(--text-muted); }
.lgl-h3 { margin: var(--space-6) 0 var(--space-2); font: 700 18px/1.3 var(--font-display); }
/* Konjugation (app/Views/conj.php) */
.cj-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.cj-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-4); }
.cj-card__h { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.cj-card__h h3 { margin: 0; font: 700 16px/1.3 var(--font-display); }
.cj-table { width: 100%; border-collapse: collapse; }
.cj-table td, .cj-table th { padding: 6px 0; border-top: 1px solid var(--line); text-align: start; font-size: 16px; }
.cj-table th { width: 90px; color: var(--text-muted); font-weight: 500; }
.cj-table tr:first-child td, .cj-table tr:first-child th { border-top: 0; }
.cj-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cj-ex li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.cj-ex p { margin: 0; grid-column: 1; }
.cj-ex .lg-audio { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* Zahlen (app/Views/num.php) */
.nm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.nm-grid li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "n w a" "n r a"; align-items: center; column-gap: var(--space-2); padding: 8px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.nm-n { grid-area: n; font: 800 18px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.nm-w { grid-area: w; font-weight: 600; overflow-wrap: anywhere; }
.nm-r { grid-area: r; font-size: 13px; color: var(--text-muted); }
.nm-grid .lg-audio { grid-area: a; }
.nm-big { font-size: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.cj-table td.cj-play { width: 40px; text-align: end; }