/* Spiele-Framework (G0): Widget-Karte + Vollbild-Overlay. Statisch (kein Vite-Build), Farben über die
   Theme-Variablen des Profils (--color-surface, --color-border, --color-primary, --color-text-*). */

/* --- Karte im Profil ------------------------------------------------------------------------ */
/* WS: Farben über die Stil-Variablen der Instanz (--w-*, gesetzt in widgets/games/_shell), Fallback Theme-Variablen.
   Stil „surface“ entspricht der bisherigen Karte. --w-line = Trennlinien (gemeinsam aus WidgetStyles::cssVars()). */
.zc-game-card { height: 100%; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: 1rem;
    border: var(--w-border-width, 1px) solid var(--w-border, var(--color-border, #eee)); background: var(--w-bg, var(--color-surface, #fff));
    color: var(--w-fg, var(--color-text-primary, #111)); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.zc-game-card[data-width="third"] { padding: 0; border: 0; background: none; }
.zc-game-card__head { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.zc-game-card__icon { flex: none; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center;
    border-radius: 1rem; font-size: 1.5rem; color: var(--w-on-accent, var(--color-on-primary, #fff)); background: var(--w-accent, var(--color-primary, #ec4899)); }
.zc-game-card__title { flex: 1; min-width: 0; }
.zc-game-card__title h2 { margin: 0; font-weight: 700; color: var(--w-fg, var(--color-text-primary, #111)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-game-card__title p { margin: .125rem 0 0; font-size: .8125rem; line-height: 1.25rem; color: var(--w-fg-muted, var(--color-text-secondary, #666)); }
.zc-game-card__record { font-weight: 600; color: var(--w-fg, var(--color-text-primary, #111)) !important; }
.zc-game-card__top { border-top: 1px solid var(--w-line, var(--color-border, #eee)); padding-top: .625rem; }
.zc-game-card__top-title { margin: 0 0 .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--w-fg-muted, var(--color-text-secondary, #666)); }
.zc-game-card__top-empty { margin: 0; font-size: .8125rem; color: var(--w-fg-muted, var(--color-text-secondary, #666)); }
.zc-game-card__top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.zc-game-card__top li, .zc-go-board li { display: flex; align-items: center; gap: .625rem; font-size: .875rem; min-height: 1.75rem; }
/* Platz 1–3: Medaillenfarben (Gold/Silber/Bronze) mit eigener Textfarbe – bewusst fest, in jedem Theme lesbar */
.zc-game-rank { flex: none; min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    font-size: .75rem; font-weight: 800; background: var(--w-line, var(--color-border, #eee)); color: var(--w-fg, var(--color-text-primary, #111)); }
.zc-game-rank[data-rank="1"] { background: #facc15; color: #422006; }
.zc-game-rank[data-rank="2"] { background: #d4d4d8; color: #27272a; }
.zc-game-rank[data-rank="3"] { background: #f59e0b; color: #451a03; }
.zc-game-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.zc-game-player { color: inherit; text-decoration: none; }
a.zc-game-player:hover, a.zc-game-player:focus-visible { text-decoration: underline; }
.zc-game-score { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.zc-game-card__actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.zc-game-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.5rem;
    border: 0; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer; touch-action: manipulation;
    background: var(--w-accent, var(--color-primary, #ec4899)); color: var(--w-on-accent, var(--color-on-primary, #fff)); }
.zc-game-card[data-width="half"] .zc-game-btn { width: 100%; }
.zc-game-btn:focus-visible, .zc-go button:focus-visible, .zc-go a:focus-visible, .zc-game-card [data-zc-game-play]:focus-visible { outline: 3px solid var(--w-accent, var(--color-primary, #ec4899)); outline-offset: 2px; }
.zc-game-link { font-size: .8125rem; font-weight: 600; color: var(--w-accent, var(--color-primary, #ec4899)); text-decoration: underline; text-underline-offset: 2px; }

/* --- Vollbild-Overlay ------------------------------------------------------------------------ */
.zc-go, .zc-go *, .zc-go *::before, .zc-go *::after, .zc-game-card, .zc-game-card * { box-sizing: border-box; }
html.zc-go-open, html.zc-go-open body { overflow: hidden !important; }
.zc-go { position: fixed; inset: 0; z-index: 10000; height: 100dvh; display: flex; flex-direction: column;
    background: var(--color-surface, #fff); color: var(--color-text-primary, #111); overscroll-behavior: contain;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    font-family: inherit; -webkit-tap-highlight-color: transparent; }
.zc-go[hidden] { display: none; }
.zc-go__bar { flex: none; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--color-border, #eee); }
.zc-go__title { flex: 1; min-width: 0; margin: 0; font-size: 1rem !important; line-height: 1.5rem !important; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-go__hud { flex: none; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.zc-go__icon-btn { flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px;
    background: transparent; color: var(--color-text-secondary, #666); font-size: 1.125rem; cursor: pointer; touch-action: manipulation; }
.zc-go__body { position: relative; flex: 1; min-height: 0; display: flex; }
.zc-go__screen { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; padding: 1.5rem 1.25rem; text-align: center; width: 100%; overflow-x: hidden; max-width: 32rem; margin: 0 auto; }
.zc-go__screen[hidden] { display: none; }
.zc-go__stage { flex: 1; min-height: 0; position: relative; width: 100%; max-width: 40rem; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.zc-go__stage[hidden] { display: none; }
.zc-go__big-icon { width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; border-radius: 1.5rem;
    font-size: 2.25rem; color: #fff; background: var(--color-primary, #ec4899); }
.zc-go__rules { margin: 0; font-size: 1rem; line-height: 1.5rem; white-space: pre-line; color: var(--color-text-secondary, #555); }
.zc-go__note { margin: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--color-text-secondary, #666); }
.zc-go__start { width: 100%; min-height: 9rem; border: 0; border-radius: 1.5rem; font-size: 1.375rem; font-weight: 800; cursor: pointer; touch-action: manipulation;
    background: var(--color-primary, #ec4899); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; }
.zc-go__start small { font-size: .8125rem; font-weight: 600; opacity: .85; }
.zc-go__countdown { font-size: 6rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-primary, #ec4899); }
.zc-go__score { margin: 0; font-size: 3.25rem; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; }
.zc-go__rating { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--color-primary, #ec4899); }
.zc-go__record { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border-radius: 999px; font-weight: 800; background: #facc15; color: #422006; }
.zc-go__muted { margin: 0; font-size: .875rem; color: var(--color-text-secondary, #666); }
.zc-go__warn { margin: 0; padding: .625rem .875rem; border-radius: .75rem; font-size: .875rem; background: #fff7ed; color: #9a3412; }
.zc-go__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.zc-go__actions button, .zc-go__actions a, .zc-go__secondary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    border-radius: .875rem; border: 1px solid var(--color-border, #e5e7eb); background: var(--color-surface, #fff); color: var(--color-text-primary, #111);
    font-weight: 700; font-size: .875rem; cursor: pointer; touch-action: manipulation; text-decoration: none; padding: 0 .75rem; }
.zc-go__actions .is-primary { background: var(--color-primary, #ec4899); border-color: transparent; color: #fff; }
.zc-go__nick { width: 100%; text-align: start; display: grid; gap: .375rem; }
.zc-go__nick label { font-size: .875rem; font-weight: 700; }
.zc-go__nick-row { display: flex; gap: .5rem; }
.zc-go__nick input { flex: 1; min-width: 0; min-height: 48px; padding: 0 .875rem; border-radius: .875rem; border: 1px solid var(--color-border, #d1d5db);
    background: #fff; color: #111; font-size: 1rem; }
.zc-go__nick-error { margin: 0; font-size: .8125rem; color: #dc2626; }
.zc-go__tabs { display: flex; gap: .25rem; padding: .25rem; border-radius: .875rem; background: var(--color-border, #f3f4f6); width: 100%; }
.zc-go__tabs button { flex: 1; min-height: 44px; border: 0; border-radius: .625rem; background: transparent; color: var(--color-text-secondary, #555); font-weight: 700; font-size: .875rem; cursor: pointer; }
.zc-go__tabs button[aria-selected="true"] { background: var(--color-surface, #fff); color: var(--color-text-primary, #111); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.zc-go-board { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; text-align: start; }
.zc-go-board li { padding: .375rem .5rem; border-radius: .625rem; }
.zc-go-board li.is-me { background: color-mix(in srgb, var(--color-primary, #ec4899) 14%, transparent); font-weight: 700; }
.zc-go-board li.is-gap { justify-content: center; min-height: 1rem; color: var(--color-text-secondary, #888); }
.zc-go-board .zc-game-profile { display: block; font-size: .75rem; font-weight: 500; color: var(--color-text-secondary, #666); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-go-board a.zc-game-profile { color: var(--color-primary, #ec4899); }
.zc-go__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zc-go__confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; }
.sr-only-zc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (orientation: landscape) and (min-width: 640px) {
    .zc-go__stage { max-width: min(40rem, 70vh * 1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .zc-go *, .zc-game-card * { transition: none !important; animation: none !important; }
}