/* WICHTIG: @import MUSS als erste Anweisung stehen – sonst ignoriert
   der Browser die Regel und die Schriftart wird nie geladen. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ================================================================
   MYSTERADO – BRAND & LESBARKEIT (brand.css)
   ----------------------------------------------------------------
   Zentrale Marken-Styles für ALLE Seiten (nach generals.css /
   landing.css / mysterado.css einbinden):
     1. Mysterado-Logo (images/mysterado-logo.png) statt Schriftzug
        – Navigation, Game-Header, Footer, Hero (mit Gold-Glow)
     2. Abgeschwächte Gold-Buttons (passend zum bronzenen Logo)
     3. Lesbarkeit: Serifenschrift (Cormorant Garamond) größer/kräftiger
   generals.css wird NICHT verändert – nur überschrieben.
   ================================================================ */

/* ── 1) LOGO ──────────────────────────────────────────────────── */

/* Navigations-Logo (Landing: index/lore/duell-lobby) */
.ms-nav-logo-img{
    height:34px;width:auto;display:block;
    filter:drop-shadow(0 0 6px rgba(212,173,69,0.25));
}
.ms-nav-logo .ms-nav-logo-icon,
.ms-nav-logo .ms-nav-logo-text{display:none}

/* Game-Header-Logo (game.php / tutorial.php) */
.logo-area .logo-img{
    height:30px;width:auto;display:block;
    filter:drop-shadow(0 0 5px rgba(212,173,69,0.22));
}
.logo-area .logo-icon,
.logo-area .logo-text{display:none}
@media(max-width:750px){
    .logo-area .logo-img{height:24px}
    .ms-nav-logo-img{height:28px}
}

/* Footer-Logo */
.ms-footer-brand img{
    height:30px;width:auto;display:block;margin:0 auto;
    opacity:0.9;filter:drop-shadow(0 0 5px rgba(212,173,69,0.2));
}
.ms-footer-brand span{display:none}

/* Hero-Logo (index.php Großansicht) mit edlem Gold-Glow.
   Zwei Ebenen: weicher Grund-Glow + pulsierender Schimmer.
   Compositor-only Animation (opacity auf ::after-Ebene via zweitem img). */
.ms-hero-logo{
    position:relative;display:block;margin:0 auto 1.6rem;
    width:min(560px,86vw);
}
.ms-hero-logo img{
    display:block;width:100%;height:auto;
    filter:
        drop-shadow(0 0 14px rgba(212,173,69,0.38))
        drop-shadow(0 0 42px rgba(212,173,69,0.22))
        drop-shadow(0 4px 18px rgba(0,0,0,0.65));
}
/* Der frühere pulsierende Radial-Glow (::before) war zu stark und
   wurde entfernt – die Drop-Shadows am Logo selbst reichen. */
/* Der alte Text-Titel im Hero wird durch das Logo ersetzt */
.ms-hero-title{display:none}

/* Icon-Video über dem Logo: Endlosschleife. Das gelieferte WebM hat
   KEINEN Alphakanal (VP8, yuv420p, schwarzer Hintergrund) – auf dem
   dunklen Hero macht mix-blend-mode:screen Schwarz optisch transparent,
   ganz ohne Re-Encoding. Ein echtes Alpha-WebM (VP9, yuva420p) würde
   ebenfalls einfach funktionieren, sobald es mit Transparenz exportiert
   wird. */
.ms-hero-video{
    display:block;margin:0 auto 0.3rem;
    width:min(240px,42vw);height:auto;
    mix-blend-mode:screen;pointer-events:none;
}

/* Team-Select-Overlay-Logo (Solo-Lobby) */
.team-select-logo{justify-content:center}
.team-select-logo .ts-logo-img{
    display:block;width:min(280px,64vw);height:auto;margin:0 auto;
    filter:
        drop-shadow(0 0 10px rgba(212,173,69,0.32))
        drop-shadow(0 0 30px rgba(212,173,69,0.16));
}
.team-select-logo .ts-logo-icon,
.team-select-logo .ts-logo-text{display:none}

/* ── 2) GOLD-BUTTONS ABSCHWÄCHEN ─────────────────────────────────
   Die knallgelben Primär-Buttons wirken neben dem bronzenen Logo zu
   grell. Neuer Look: dunkles Bronze-Gold, satinierter Verlauf,
   dezenter Glow. Gilt für Landing (.ms-btn-primary), Solo-Lobby
   (.ts-start-btn) und die gelbe Phase-Taste (.btn-phase). */
.ms-btn-primary,
.ts-start-btn{
    background:linear-gradient(180deg,#f8da9e 0%,#f1c059 55%,#947a45 100%) !important;
    color:#16120a !important;
    border:none !important;
    box-shadow:0 0 14px rgba(184,147,63,0.22), inset 0 1px 0 rgba(255,235,180,0.35) !important;
    text-shadow:none !important;
    font-weight:600 !important;
}
.ms-btn-primary:hover,
.ts-start-btn:hover{
    background:linear-gradient(180deg,#ffe9b6 0%,#f7cd72 55%,#a3894f 100%) !important;
    box-shadow:0 0 24px rgba(232,190,95,0.42), inset 0 1px 0 rgba(255,246,210,0.5) !important;
    filter:brightness(1.03);
}
.btn-phase{
    background:linear-gradient(180deg,#f8da9e 0%,#f1c059 60%,#947a45 100%) !important;
    color:#16120a !important;
    border:none !important;
    text-shadow:none !important;
    font-weight:600 !important;
}

/* ── 3) LESBARKEIT ───────────────────────────────────────────────
   Cormorant Garamond läuft optisch deutlich kleiner als eine normale
   Serifenschrift. Bisher wurden nur einzelne Klassen angehoben – alles
   andere hing weiter an der Browser-Basisgröße von 16px und blieb klein.
   Jetzt wird die WURZEL-Schriftgröße erhöht: damit skaliert jede
   rem-Angabe im gesamten Projekt automatisch mit. Zusätzlich werden die
   Serifen-Textblöcke gezielt angehoben und auf Gewicht 500 gestellt. */
/* SCHRIFTART: Cormorant Garamond hat einen sehr feinen Strich und wirkt
   dadurch klein und blass. Spectral ist ebenfalls eine Serifenschrift,
   läuft aber kräftiger und deutlich besser lesbar – Cinzel bleibt als
   Display-Schrift für Überschriften erhalten. */

:root{
    --font-body:'Spectral', Georgia, serif !important;
    --fb:'Spectral', Georgia, serif !important;
}
body,
.ms-hero-tagline,.ms-section-subtitle,.ms-feature-text,.ms-pack-body p,
.ms-final-cta-text,.ms-lore-grid .ms-lore-card p,.ms-lore-intro,.ms-lore-body p,
.ts-admin-hint,.ts-sudden-hint,#ts-diff-hint,.ts-name-input,.ts-preview-name,
.dl-subtitle,.dl-sudden-hint,.dl-invite-label,
.notice-inner,.card-desc,.cl-desc,.info,label,select,input,textarea,button{
    font-family:'Spectral', Georgia, serif !important;
}
/* Überschriften bleiben Cinzel */
h1,h2,h3,h4,.ms-hero-title,.ms-section-title,.team-select-title,
.logo-text,.ts-col-label,.phase-badge,.btn-phase,.ts-start-btn,
.ms-btn,.ms-btn-primary,.hd h1,.box h2{
    font-family:var(--font-display,'Cinzel',serif) !important;
}

html{ font-size:16px }
@media(max-width:900px){ html{ font-size:15px } }
@media(max-width:520px){ html{ font-size:14px } }

body{ font-size:1.06rem; line-height:1.65; font-weight:400 }

/* Fließtexte in Serifenschrift generell größer und kräftiger */
.ms-hero-tagline,
.ms-section-subtitle,
.ms-feature-text,
.ms-pack-body p,
.ms-final-cta-text,
.ms-lore-grid .ms-lore-card p,
.ts-admin-hint,
.ts-sudden-hint,
.dl-subtitle,
.dl-sudden-hint,
.dl-invite-label,
.ms-lore-intro,
.ms-lore-body p{
    font-weight:500 !important;
    line-height:1.6 !important;
}
.ms-hero-tagline{ font-size:clamp(1.2rem,2.2vw,1.5rem) !important }
.ms-section-subtitle{ font-size:clamp(1.1rem,1.9vw,1.38rem) !important }
.ms-feature-text,
.ms-pack-body p,
.ms-final-cta-text,
.ms-lore-grid .ms-lore-card p,
.ms-lore-intro,
.ms-lore-body p{ font-size:clamp(1.06rem,1.7vw,1.24rem) !important }

/* Kleine Beschriftungen: Mindestgrößen, damit nichts unter ~14px fällt */
.ts-admin-hint,.ts-sudden-hint,#ts-diff-hint{ font-size:1rem !important; font-style:normal !important }
.ts-col-label,.ts-preview-label{ font-size:.86rem !important; letter-spacing:.14em }
.dl-subtitle,.dl-sudden-hint,.dl-invite-label{ font-size:1.06rem !important }
.klf-label{ font-size:.82rem !important; letter-spacing:.1em }
.hcb-text{ font-size:.84rem !important }
.phase-badge{ font-size:.9rem !important }
.notice-inner{ font-size:1.02rem !important }

/* Konfigurator: Formulare und Hinweise mitziehen */
.info{ font-size:.95rem !important; line-height:1.55 !important }
label{ font-size:.88rem !important }
select,input[type=text],input[type=number],textarea{ font-size:.98rem !important }

/* ── 4) LOBBY-MODUS-MENÜ (Spiel / Training) ──────────────────────
   Styles für die neue zweistufige Solo-Lobby in game.php. */
.ts-mode-menu{
    display:flex;flex-direction:column;gap:1rem;align-items:center;
    margin:1.4rem 0 0.6rem;width:100%;
}
.ts-mode-btn{
    display:flex;flex-direction:column;align-items:center;gap:0.3rem;
    width:min(360px,88%);padding:1.05rem 1.4rem;cursor:pointer;
    font-family:var(--font-display,'Cinzel',serif);
    font-size:1.05rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
    color:#e8d9ae;background:rgba(14,14,22,0.72);
    border:1px solid rgba(212,173,69,0.4);border-radius:8px;
    transition:all .25s;text-decoration:none;
}
.ts-mode-btn .ts-mode-sub{
    font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:500;
    letter-spacing:0.03em;text-transform:none;color:#b9ad8d;
}
.ts-mode-btn:hover{
    border-color:rgba(212,173,69,0.75);background:rgba(212,173,69,0.08);
    color:#f2e2b0;transform:translateY(-2px);
    box-shadow:0 6px 22px rgba(0,0,0,0.5), 0 0 16px rgba(212,173,69,0.18);
}
.ts-mode-btn.ts-mode-secondary{border-style:dashed;font-size:0.95rem}
.ts-panel-back{
    display:inline-flex;align-items:center;gap:0.4rem;margin-top:1.1rem;
    background:rgba(14,14,22,0.72);border:none;cursor:pointer;
    color:rgba(212,173,69,0.75);font-family:var(--font-display,'Cinzel',serif);
    font-size:0.8rem;letter-spacing:0.16em;text-transform:uppercase;
    padding:0.45rem 0.9rem;border:1px solid rgba(212,173,69,0.28);border-radius:4px;
    transition:all .2s;text-decoration:none;
}
.ts-panel-back:hover{color:#e8c56d;border-color:rgba(212,173,69,0.6)}
.ts-panel{width:100%;display:flex;flex-direction:column;align-items:center}
.ts-panel.d-none,.ts-mode-menu.d-none{display:none}
.d-none{display:none}

/* "Spiel starten" ist der Primärweg – goldene Gewichtung gegenüber
   dem dezenteren "Training starten" */
.ts-mode-btn.ts-mode-primary{
    background:linear-gradient(180deg,#f8da9e 0%,#f1c059 55%,#947a45 100%);
    color:#16120a;border:none;font-weight:700;
    box-shadow:0 0 14px rgba(184,147,63,0.25), inset 0 1px 0 rgba(255,235,180,0.35);
}
.ts-mode-btn.ts-mode-primary .ts-mode-sub{color:#3d3013}
.ts-mode-btn.ts-mode-primary:hover{
    background:linear-gradient(180deg,#ffe9b6 0%,#f7cd72 55%,#a3894f 100%);
    color:#16120a;box-shadow:0 6px 22px rgba(0,0,0,0.45), 0 0 22px rgba(232,190,95,0.4);
}

/* ── Overlay beginnt UNTER dem Header ──
   Damit überlappt das große Lobby-Logo nicht mehr mit der Kopfzeile
   und die Sprachauswahl im Header bleibt klickbar. */
#team-select-overlay{top:var(--header-h,52px) !important}

/* ── Spiel-Panel zweispaltig: links Team, rechts Spieldetails ──
   Macht die Lobby deutlich kompakter (kein Endlos-Scrollen mehr). */
.ts-panel-cols{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0.8rem 2.6rem;width:100%;align-items:start;justify-items:center;
    margin-top:0.4rem;
}
.ts-col-team,.ts-col-details{
    display:flex;flex-direction:column;align-items:center;
    gap:0.9rem;width:100%;min-width:0;
}
.ts-col-details .ts-start-btn{margin-top:0.4rem}
@media(max-width:860px){
    .ts-panel-cols{grid-template-columns:1fr;gap:0.9rem}
}

/* ── 5) LOBBY-FEINSCHLIFF ────────────────────────────────────────
   "Erstelle dein Team" ist jetzt die Überschrift der linken Spalte,
   der Startbutton sitzt zentriert unter beiden Spalten. Dadurch wirkt
   der Aufbau symmetrisch statt rechtslastig. */
.ts-title-left{
    align-self:flex-start;
    text-align:left !important;
    margin:0 0 .3rem !important;
    font-size:clamp(1.1rem,2vw,1.5rem) !important;
}
.ts-panel-cols{ align-items:start }
.ts-col-team,.ts-col-details{ align-items:center }
/* Rechte Spalte optisch auf Höhe der linken Überschrift beginnen lassen */
.ts-col-details{ padding-top:2.6rem }
@media(max-width:860px){
    .ts-col-details{ padding-top:0 }
    .ts-title-left{ align-self:center; text-align:center !important }
}
.ts-start-row{
    display:flex;flex-direction:column;align-items:center;gap:.7rem;
    width:100%;margin-top:1.6rem;
}
.ts-start-row .ts-start-btn{
    min-width:min(320px,80%);
    font-size:1.05rem !important;
    padding:.85rem 2.2rem !important;
}