/* Kampagnenbogen - geteiltes Grundvokabular fuer Blatt, Panel und Pins.      */
/* Genutzt vom Kampagnenbogen (/statistik) und von der Chronik (/timeline);   */
/* Seiten-eigene Regeln bleiben in der jeweiligen CSS-Isolation.              */
/* Kontrastangaben sind WCAG-2.1-Werte gegen #1e160e (Panel) bzw. #140e09.   */
/* .scenario-pin und .map-marker-icon (app.css) teilen Silhouette und die     */
/* Farben fuer abgeschlossen und freigeschaltet - Details am .scenario-pin.   */

/* Blatt */

/* Seitenwurzel - max-width deckelt die Spurbreite des Pin-Rasters */
.campaign-sheet {
    position: relative;
    max-width: 1180px;
    margin-inline: auto;
    padding: 32px 40px 46px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    background-color: #140e09;
    color: #e8d5a3;
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    -webkit-font-smoothing: antialiased;
}

/* Papierkorn als Overlay (feTurbulence als data-URI) */
.campaign-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.campaign-sheet__head {
    position: relative;
}

.campaign-sheet__head .campaign-label {
    margin-bottom: 6px;
}

.campaign-sheet__rules {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Untertitel unter der Zierlinie - kursiv wie die Legende des Kampagnenbogens */
.campaign-sheet__lede {
    margin: 12px 0 0;
    font-size: 16px;
    font-style: italic;
    color: #9a825a;
}

.campaign-title {
    font-family: 'Pirata One', 'Cinzel', Georgia, serif;
    font-weight: 400;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: #E9E3D6;
    text-shadow: 0 2px 0 #0b0704, 0 0 18px rgba(212, 160, 23, 0.18);
}

/* Wimpelband - zugespitzte Enden wie die Titelbanner der Charakter-Tableaus */
.campaign-pennant {
    background: linear-gradient(180deg, #241a11, #17110b);
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
    padding: 10px 44px;
    margin: 0 -12px 14px;
}

/* Kapitaelchen-Marginalie - #9a825a auf #1e160e = 4,86:1 */
.campaign-label {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a825a;
}

.campaign-caps {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #D4A017;
}

/* App-Bar-Branding (MainLayout) - kompaktes Text-Wappen statt Bitmap-Logo,     */
/* bewusst kein Cephalofair-Artwork (siehe Footer-Disclaimer: inoffizielle,     */
/* nicht kommerzielle Fan-Anwendung). Rautensymbol wie in CampaignSheetHead.    */
.campaign-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campaign-brand__text {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e8d5a3;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .campaign-brand__text {
        display: none;
    }
}

.campaign-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.5), rgba(212, 160, 23, 0.08) 70%, rgba(212, 160, 23, 0));
}

.campaign-rule--short {
    flex: 0 0 90px;
    transform: scaleX(-1);
}

/* Panel */

.campaign-panel {
    position: relative;
    padding: 24px 34px 28px;
    background:
        linear-gradient(180deg, rgba(232, 213, 163, 0.04) 0%, rgba(232, 213, 163, 0) 45%),
        #1e160e;
    border: 1px solid rgba(217, 164, 65, 0.18);
    box-shadow:
        inset 0 0 0 3px #1a130c,
        inset 0 0 0 4px rgba(217, 164, 65, 0.10),
        0 12px 34px -20px rgba(0, 0, 0, 0.9);
}

.campaign-panel__corner {
    position: absolute;
    width: 26px;
    height: 26px;
    opacity: 0.5;
}

.campaign-panel__corner--tl {
    top: 8px;
    left: 8px;
}

.campaign-panel__corner--tr {
    top: 8px;
    right: 8px;
    transform: scaleX(-1);
}

.campaign-panel__corner--bl {
    bottom: 8px;
    left: 8px;
    transform: scaleY(-1);
}

.campaign-panel__corner--br {
    bottom: 8px;
    right: 8px;
    transform: scale(-1, -1);
}

/* Status-Panel (App.razor: 404/Kein Zugriff) - zentrierte Variante des         */
/* Panels fuer die seltenen Faelle, in denen kein eigentlicher Seiteninhalt     */
/* existiert. Nutzt dieselbe Kontur/denselben Schatten wie .campaign-panel.    */
.campaign-panel--status {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    max-width: 420px;
    margin-inline: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

.campaign-status-icon {
    margin-bottom: 8px;
}

/* #c9b587 auf #1e160e = 8,88:1 */
.campaign-status-text {
    margin: 0;
    max-width: 320px;
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.5;
    color: #c9b587;
}

/* Pins */

/* Tropfen-Pins. Synchron mit .map-marker-icon (app.css) bleiben muessen
   border-radius, rotate, box-shadow, der 2px-Rahmen und die Fuellfarben fuer
   abgeschlossen und freigeschaltet. Bewusst verschieden: die Groesse (34px
   hier, 28px auf der Karte), die Rahmenstile (hier solid/dashed/dotted fuer
   WCAG 1.4.1, auf der Karte durchgehend solid) und die Locked-Toene. */
.scenario-pin {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

/* Symbol im Zaehler-Pin - um 45 Grad zurueckgedreht */
.scenario-pin > svg {
    transform: rotate(45deg);
}

.scenario-pin__number {
    transform: rotate(45deg);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    color: #0d0d0d;
    line-height: 1;
    user-select: none;
}

/* Rahmenfuehrung unterscheidet die Zustaende zusaetzlich zur Farbe (WCAG 1.4.1) */

/* Abgeschlossen - Gruen wie auf der Stadtkarte, durchgezogener Rahmen */
.scenario-pin--completed {
    background-color: #4caf50;
    border-style: solid;
    border-color: #2e7d32;
}

/* Freigeschaltet - #6e6e6e statt #757575 wegen 4,55:1, gleich in app.css */
.scenario-pin--available {
    background-color: #6e6e6e;
    border-style: dashed;
    border-color: #424242;
}

.scenario-pin--available .scenario-pin__number {
    color: #f2f2f2;
}

/* Verwehrt - gedaempftes Rot des Entwurfs, gepunkteter und staerkerer Rahmen.
   Die Toene weichen absichtlich von .map-marker--locked in app.css
   (#e53935 / #b71c1c) ab: nicht angleichen. */
.scenario-pin--locked {
    background-color: #3a2018;
    border-style: dotted;
    border-width: 3px;
    border-color: #6b2a20;
}

.scenario-pin--locked .scenario-pin__number {
    color: #c07f72;
}

.scenario-pin--veiled {
    background-color: transparent;
    border-style: solid;
    border-color: #33281c;
    box-shadow: none;
}

/* Hilfsklassen */

.campaign-num {
    font-variant-numeric: tabular-nums;
}

/* Nur fuer Screenreader - Standard-Clip-Rezept */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Breakpoints - der gedrehte Pin braucht das 1,414-fache seiner Kante an Spur */

@media (max-width: 1100px) {
    .scenario-pin {
        width: 30px;
        height: 30px;
    }

    .scenario-pin__number {
        font-size: 10px;
    }
}

/* Schmale Fenster und Handy im Querformat */
@media (max-width: 960px) {
    .campaign-sheet {
        padding: 20px 16px 28px;
        gap: 18px;
    }

    .campaign-title {
        font-size: 30px;
    }

    .campaign-pennant {
        padding: 8px 26px;
        margin: 0 -6px 12px;
    }

    .campaign-panel {
        padding: 18px 18px 20px;
    }

    .campaign-panel__corner {
        display: none;
    }

    .campaign-caps {
        font-size: 17px;
    }

    .scenario-pin {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 600px) {
    .campaign-sheet {
        padding: 14px 10px 22px;
        gap: 14px;
    }

    .campaign-title {
        font-size: 26px;
    }

    .campaign-pennant {
        padding: 6px 20px;
    }

    .campaign-sheet__lede {
        margin-top: 10px;
        font-size: 15px;
    }
}