/* Epoch Clash: Thema und eigene Bausteine. Gemeinsame Bausteine stehen in css/product.css.
   Farben aus dem Spiel (lib/ui/tokens.dart): Navy #141B2E, Gold #F2B233, Creme #F6EBD3.
   Auch die Hilfe-Seite /epoch-clash/ lädt diese Datei (nur style.css davor), deshalb ist
   alles auf .theme-epoch (Produktseite) bzw. .ec-… (beide Seiten) begrenzt. */

.theme-epoch {
    --p-accent: #f2b233;
    --p-accent-ink: #141b2e;
    --p-panel: #141b2e;
    --p-line: #2a3556;
    --p-glow: #f2b23366;
    --p-media: #0a0f1d;
    --p-shot-line: #33416a;
}
.theme-epoch .pp-feature-grid .hp-project { border-color: #232d4a; }
.theme-epoch .pp-plan--plus { background: linear-gradient(180deg, #1f2a48, #141b2e); }
.theme-epoch .pp-plan h3 b { text-transform: uppercase; }
.theme-epoch .hp-launch { border-color: #2f3d63; background: linear-gradient(180deg, #1b2540, #0f1526); }
.theme-epoch .hp-launch:hover { border-color: #b47d16; }
.theme-epoch .ec-shot-media { background: radial-gradient(70% 80% at 30% 20%, #22305a88, transparent 70%), #0a0f1d; }
.theme-epoch .ec-shot-media > img { box-shadow: 0 26px 60px -24px #000c, 0 0 0 5px #0a0f1d; }
.theme-epoch .ec-feature--plus .ec-shot-media { background: radial-gradient(70% 80% at 70% 30%, #f2b23326, transparent 70%), #0f1424; }
.theme-epoch .ec-feature--plus .ec-shot-media > img { border-color: #8a6a2a; }

/* Status statt Store-Knöpfen, bis das Spiel erschienen ist (Muster Row Empire). */
.ec-status {
    display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 16px;
    border: 1px solid #3a4a74; border-radius: 999px; background: #141b2e;
    color: #f6ebd3; font: 500 14px/1.35 var(--display);
}
.ec-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f2b233; box-shadow: 0 0 0 4px #f2b23326; }

/* Erweiterung kennzeichnen wie in den Store-Bildern: goldenes Schloss mit Namen. */
.ec-lock {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px 6px 10px;
    border: 1px solid #8a6a2a; border-radius: 999px; background: #f2b23314;
    color: #ffd98a; font: 600 13px/1.3 var(--display);
}
.ec-lock svg { flex: none; width: 13px; height: 13px; }

/* Hilfe-Seite: Trailer-Fassade aus style.css. Ohne YouTube-ID kein Abspielknopf, dafür ein Hinweis. */
.ec-start .ec-trailer { margin-top: 22px; }
.ec-trailer[data-trailer=""] .trailer-play { display: none; }
.ec-trailer:not([data-trailer=""]) .ec-trailer-soon { display: none; }
.ec-trailer-soon {
    position: absolute; left: 50%; bottom: 18px; z-index: 1; transform: translateX(-50%); margin: 0;
    padding: 9px 16px; border: 1px solid #ffffff2a; border-radius: 999px; background: #0c0d10e0;
    color: #f4f2ec; font: 500 14px/1.3 var(--display); white-space: nowrap;
}
.ec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }

@media (max-width: 700px) {
    .ec-trailer-soon { left: 12px; right: 12px; bottom: 12px; transform: none; white-space: normal; text-align: center; border-radius: 14px; }
}