html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ===== Elyndor – Grimdark-Look ===================================== */
:root { --elyndor-accent: #b5832e; }

body { background-color: #15130f; }

h1, h2, h3, h4, h5, .navbar-brand { font-family: Georgia, "Times New Roman", serif; }
.navbar-brand { color: var(--elyndor-accent) !important; letter-spacing: .04em; }

.page { min-height: 100vh; }
.sidebar { background-color: #1d1a14; border-right: 1px solid #322c20; }

/* Eintrags-Karten */
.entry-card { background-color: #211d16; border: 1px solid #322c20; transition: border-color .15s; color: inherit; }
.entry-card:hover { border-color: var(--elyndor-accent); }
.entry-card-img { height: 150px; background-size: cover; background-position: center top; border-bottom: 1px solid #322c20; }
.entry-card-img-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; font-family: Georgia, serif; color: #4a4030; background: #2a251b;
}
.text-truncate-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Porträt-Galerie auf der Detailseite */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.gallery-item { position: relative; border: 2px solid transparent; border-radius: .25rem; overflow: hidden; }
.gallery-item.is-primary { border-color: var(--elyndor-accent); }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gallery-actions { position: absolute; top: .25rem; right: .25rem; display: flex; gap: .25rem; opacity: 0; transition: opacity .15s; }
.gallery-item:hover .gallery-actions { opacity: 1; }

/* Geheim-Bereich */
.secret-content { background-color: #2a2113; border: 1px dashed var(--elyndor-accent); }

/* Verlauf-Timeline */
.timeline { list-style: none; padding-left: 1rem; border-left: 2px solid #322c20; }
.timeline li { position: relative; padding: .25rem 0 .25rem 1rem; }
.timeline li::before {
    content: ""; position: absolute; left: -1.45rem; top: .7rem;
    width: .6rem; height: .6rem; border-radius: 50%; background: var(--elyndor-accent);
}

/* Markdown-Inhalt */
.markdown-body { line-height: 1.6; }
.markdown-body img { max-width: 100%; }

/* Touch-freundlich am Tablet */
.nav-link { font-size: 1.05rem; padding: .6rem 1rem; }

/* ===== Einheitliches Theme – Feinschliff ============================ */
h1, h2, h3 { color: #e7d6b0; }
h4, h5, h6 { color: #cdbf9e; }
a { color: #cda35a; }
a:hover { color: #e7c074; }

.content { max-width: 1300px; }

.card { background-color: #211d16; border: 1px solid #322c20; }
.card-header {
    background-color: #1a160f; border-bottom: 1px solid #322c20;
    color: #e7d6b0; font-family: Georgia, serif; letter-spacing: .02em;
}
.list-group-item { background-color: transparent; border-color: #2a251b; }

.form-control, .form-select, .form-control:focus, .form-select:focus {
    background-color: #1a160f; border-color: #3a3326; color: #e9e2d2;
}
.form-control:focus, .form-select:focus { border-color: var(--elyndor-accent); box-shadow: 0 0 0 .2rem rgba(181,131,46,.25); }
.form-control::placeholder { color: #6b6353; }

/* Primär-/Erfolg-Buttons in Bronze/Gold statt Bootstrap-Blau/Grün */
.btn-primary, .btn-success {
    background-color: var(--elyndor-accent); border-color: var(--elyndor-accent); color: #1a140a;
}
.btn-primary:hover, .btn-success:hover { background-color: #cda35a; border-color: #cda35a; color: #1a140a; }
.btn-outline-primary { color: #cda35a; border-color: #8a6a2a; }
.btn-outline-primary:hover { background-color: var(--elyndor-accent); border-color: var(--elyndor-accent); color: #1a140a; }

.badge.bg-light { color: #1a140a; }
.bg-primary-subtle { background-color: rgba(181,131,46,.18) !important; }

/* ===== Vollbild / Spieler-Ansicht (Spotlight) ====================== */
.spotlight {
    position: fixed; inset: 0; background: #0a0908;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 2000;
}
.spotlight-img {
    max-width: 96vw; max-height: 88vh; object-fit: contain;
    border: 3px solid var(--elyndor-accent); border-radius: 6px;
    box-shadow: 0 0 60px rgba(0,0,0,.8);
}
.spotlight-name {
    margin-top: 1rem; font-family: Georgia, serif; color: #e7d6b0;
    font-size: 2rem; text-align: center; text-shadow: 0 2px 8px #000;
}
.spotlight-title { color: #b9a979; font-size: 1.2rem; }
.spotlight-bar {
    position: fixed; top: 1rem; right: 1rem; display: flex; gap: .5rem; z-index: 2100;
}
.spotlight-thumbs {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .5rem; z-index: 2100; max-width: 96vw; overflow-x: auto; padding: .25rem;
}
.spotlight-thumbs img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 4px; cursor: pointer;
    border: 2px solid transparent; opacity: .6;
}
.spotlight-thumbs img.active { border-color: var(--elyndor-accent); opacity: 1; }

/* Heldenbogen */
.stat-box {
    background: #1a160f; border: 1px solid #3a3326; border-radius: 6px;
    text-align: center; padding: .5rem .25rem;
}
.stat-box .stat-name { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #9a8f78; }
.stat-box .stat-score { font-size: 1.5rem; font-weight: bold; color: #e7d6b0; line-height: 1; }
.stat-box .stat-mod { font-size: .9rem; color: #b9a979; }
.xp-bar { height: 1.4rem; background: #1a160f; border: 1px solid #3a3326; border-radius: 4px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, #8a6a2a, var(--elyndor-accent)); }

/* ===== Kampf (DM) =================================================== */
.hp-bar { height: .5rem; background: #1a160f; border: 1px solid #3a3326; border-radius: 3px; overflow: hidden; }
.hp-bar-fill { height: 100%; transition: width .2s; }

.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.map-thumb { position: relative; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; }
.map-thumb.active { border-color: var(--elyndor-accent); }
.map-thumb img { width: 100%; height: 70px; object-fit: cover; display: block; }
.map-name { position: absolute; bottom: 0; left: 0; right: 0; font-size: .7rem; padding: 1px 4px;
    background: rgba(0,0,0,.6); color: #e7d6b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Beamer-Ansicht (/play) ====================================== */
.play-stage { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.play-map { width: 100%; height: 100%; object-fit: contain; }
.play-empty { color: #2e2a20; font-family: Georgia, serif; font-size: 6vw; }

.play-initiative {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: .75rem;
    padding: .4rem 1rem; background: rgba(10,9,8,.78);
    overflow-x: auto; font-size: 1.2rem;
}
.play-round { color: var(--elyndor-accent); font-family: Georgia, serif; font-weight: bold; padding-right: .5rem; border-right: 1px solid #444; }
.play-combatant { white-space: nowrap; padding: .1rem .4rem; border-radius: 4px; }
.play-combatant.active { background: rgba(181,131,46,.35); box-shadow: 0 0 0 2px var(--elyndor-accent); }
.play-combatant.down { opacity: .4; text-decoration: line-through; }
.play-hp { height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.play-hp > div { height: 100%; background: #4a8a3a; }

/* ===== Token & Karten-Container ==================================== */
.map-wrap { position: relative; display: inline-block; line-height: 0; }

.dm-map-stage { display: flex; justify-content: center; max-height: 46vh; overflow: hidden; }
.dm-map-stage .map-wrap img:first-child { max-width: 100%; max-height: 44vh; width: auto; height: auto; display: block; }

.play-wrap { line-height: 0; }
.play-wrap .play-map { max-width: 100vw; max-height: 100vh; width: auto; height: auto; display: block; object-fit: unset; }

.token {
    position: absolute; transform: translate(-50%, -50%);
    width: 7%; aspect-ratio: 1; border-radius: 50%;
    border: 3px solid #888; overflow: hidden; cursor: grab;
    box-shadow: 0 2px 6px rgba(0,0,0,.6); background: #211d16;
    touch-action: none; user-select: none;
}
.token.ally { border-color: #5b8fd6; }
.token.enemy { border-color: #c0492f; }
.token.down { opacity: .5; filter: grayscale(1); }
.token.dragging { cursor: grabbing; z-index: 10; box-shadow: 0 0 0 3px rgba(181,131,46,.7); }
.token img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.token-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #e7d6b0; font-weight: bold;
    font-family: Georgia, serif; font-size: 1rem;
}

/* ===== Login ======================================================= */
.login-stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 30%, #1d1a14, #0a0908); }
.login-card { width: 320px; max-width: 92vw; padding: 2rem 1.75rem; background: #211d16;
    border: 1px solid #3a3326; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.login-brand { font-family: Georgia, serif; font-size: 2rem; color: var(--elyndor-accent); text-align: center; }