/* Schach (schach.domain-root.de; T33, 29.10.2026): Spielbrett für /spielen/ und /spielen/zu-zweit/, Aufgabenbretter für
   /spielen/aufgaben/. Rahmen, Knöpfe und Farben der Oberfläche aus domainroot.css (Variablen des Hosts); die Brettfarben sind fest,
   damit Figuren in jedem Farbschema gleich gut zu sehen sind. */
.dr-sc, .dr-sca-liste { --sc-hell: #ecd6b0; --sc-dunkel: #a87a55; --sc-rand: #3d2c2c; --sc-auswahl: rgba(232, 194, 75, .7);
    --sc-letzter: rgba(205, 170, 60, .42); --sc-schach: rgba(220, 50, 50, .75); --sc-ziel: rgba(30, 20, 10, .28); }

.dr-sc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1.4rem; align-items: start; margin: .4rem 0 .6rem; }
@media (max-width: 860px) { .dr-sc { grid-template-columns: minmax(0, 1fr); } }

.dr-sc-brettspalte { position: relative; min-width: 0; }
.dr-sc-brettrahmen { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-rows: auto 1.5rem; max-width: 34rem; margin: 0 auto; }
.dr-sc-reihen { display: grid; grid-template-rows: repeat(8, 1fr); }
.dr-sc-linien { display: grid; grid-template-columns: repeat(8, 1fr); grid-column: 2; }
.dr-sc-reihen span, .dr-sc-linien span { display: flex; align-items: center; justify-content: center; font: 700 .78rem/1 var(--dr-mono); color: var(--dr-tinte-2); }
.dr-sc-ecke { display: none; }

.dr-sc-brett { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1 / 1; width: 100%;
    border: 3px solid var(--sc-rand); border-radius: 6px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dr-sc-feld { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 0;
    min-width: 0; min-height: 0; aspect-ratio: 1 / 1; cursor: pointer; font-size: clamp(1.45rem, 6.2vw, 2.7rem); line-height: 1; color: inherit; }
.dr-sc-hell { background: var(--sc-hell); }
.dr-sc-dunkel { background: var(--sc-dunkel); }
.dr-sc-feld:focus { outline: none; }
.dr-sc-feld:focus-visible { outline: 3px solid var(--dr-marke); outline-offset: -3px; z-index: 2; }
.dr-sc-letzter::before { content: ''; position: absolute; inset: 0; background: var(--sc-letzter); pointer-events: none; }
.dr-sc-auswahl::before { content: ''; position: absolute; inset: 0; background: var(--sc-auswahl); pointer-events: none; }
.dr-sc-schach { background-image: radial-gradient(circle, var(--sc-schach) 0%, rgba(220, 50, 50, .35) 45%, transparent 72%); }
.dr-sc-ziel::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--sc-ziel); pointer-events: none; }
.dr-sc-schlagziel::after { width: 86%; height: 86%; background: transparent; border: .3rem solid var(--sc-ziel); box-sizing: border-box; }

.dr-sc-figur { position: relative; z-index: 1; pointer-events: none; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', 'Arial Unicode MS', serif;
    line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.dr-sc-w { color: #faf6ee; -webkit-text-stroke: 1.4px #1a1010; text-shadow: 0 0 1px #1a1010; }
.dr-sc-s { color: #111; text-shadow: 0 0 1px #000; }

/* Umwandlung */
.dr-sc-umw { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    max-width: 92%; padding: .9rem; background: var(--dr-flaeche); border: 1px solid var(--dr-linie-2); border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, .28); }
.dr-sc-umw[hidden] { display: none; }
.dr-main .prose .dr-sc-umw-titel, .dr-sc-umw-titel { flex-basis: 100%; margin: 0 0 .2rem; text-align: center; font-weight: 700; }
.dr-sc-umw-knopf { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 4.4rem; padding: .45rem .2rem; border: 1.5px solid var(--dr-linie-2);
    border-radius: 10px; background: var(--sc-hell); cursor: pointer; font-size: 2.2rem; color: inherit; }
.dr-sc-umw-knopf:hover, .dr-sc-umw-knopf:focus-visible { border-color: var(--dr-marke); outline: 3px solid var(--dr-marke-tint); }
.dr-sc-umw-name { font: 600 .74rem/1.1 var(--dr-sans); color: #2a2018; }
.dr-sc-umw-ab { flex-basis: 100%; }

/* Seitenleiste */
.dr-sc-seite { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.dr-main .prose .dr-sc-ergebnis, .dr-sc-ergebnis { margin: 0; padding: .7rem .9rem; border-radius: 10px; font-weight: 700; border: 1px solid var(--dr-linie-2); background: var(--dr-flaeche-2); }
.dr-sc-ergebnis[hidden] { display: none; }
.dr-main .prose .dr-sc-sieg, .dr-sc-sieg { background: var(--dr-tipp-tint); border-color: var(--dr-tipp-linie); }
.dr-main .prose .dr-sc-niederlage, .dr-sc-niederlage { background: var(--dr-warn-tint); border-color: var(--dr-warn-linie); }
.dr-main .prose .dr-sc-remis, .dr-sc-remis { background: var(--dr-info-tint); border-color: var(--dr-linie-2); }

.dr-sc-stufen { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: .45rem .7rem .65rem; border: 1px solid var(--dr-linie); border-radius: 12px; min-width: 0; }
.dr-sc-stufen legend { font-weight: 700; font-size: .9rem; padding: 0 .3rem; }
.dr-sc-stufe { flex: 1 1 auto; padding: .4rem .6rem; border: 1.5px solid var(--dr-linie-2); border-radius: 999px; background: var(--dr-flaeche); color: var(--dr-tinte);
    font: 600 .86rem/1.2 var(--dr-sans); cursor: pointer; }
.dr-sc-stufe:hover { border-color: var(--dr-marke); }
.dr-sc-stufe[aria-pressed="true"] { background: var(--dr-marke); border-color: var(--dr-marke); color: #fff; }
.dr-sc-stufe:focus-visible { outline: 3px solid var(--dr-marke-tint); outline-offset: 1px; }

.dr-main .prose .dr-sc-engine, .dr-sc-engine { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; color: var(--dr-tinte-2); }
.dr-sc-punkt { width: .65rem; height: .65rem; border-radius: 50%; background: var(--dr-tinte-3); flex: none; }
.dr-sc-engine[data-zustand="bereit"] .dr-sc-punkt { background: var(--dr-tipp); }
.dr-sc-engine[data-zustand="denkt"] .dr-sc-punkt { background: var(--dr-vorsicht); animation: dr-sc-puls .9s ease-in-out infinite; }
.dr-sc-engine[data-zustand="offline"] .dr-sc-punkt { background: var(--dr-warn); }
@keyframes dr-sc-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dr-sc-engine[data-zustand="denkt"] .dr-sc-punkt { animation: none; } }

.dr-sc-status { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .85rem; border-radius: 10px; background: var(--dr-flaeche-2); }
.dr-sc-status-titel { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dr-tinte-2); }
.dr-sc-status-wert { font-size: 1.05rem; }
.dr-sc-imschach { color: var(--dr-warn); }
.dr-sc-ende { color: var(--dr-marke); }

.dr-sc-liste { max-height: 15rem; overflow-y: auto; padding: .5rem .85rem; border: 1px solid var(--dr-linie); border-radius: 10px; background: var(--dr-flaeche); }
.dr-main .prose .dr-sc-h, .dr-sc-h { margin: 0 0 .35rem; font-size: .95rem; }
.dr-main .prose .dr-sc-zuege, .dr-sc-zuege { margin: 0; padding-left: 2.4rem; font: .9rem/1.6 var(--dr-mono); }
.dr-main .prose .dr-sc-zuege li, .dr-sc-zuege li { margin: 0; padding: 0; }
.dr-sc-zug { display: inline-block; min-width: 4.6rem; }
.dr-sc-luecke { color: var(--dr-tinte-3); }
.dr-main .prose .dr-sc-leer, .dr-sc-leer { margin: 0; font-size: .9rem; color: var(--dr-tinte-3); }
.dr-sc-leer[hidden] { display: none; }

.dr-main .prose .dr-sc-knoepfe, .dr-sc-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0; }
.dr-sc-knoepfe .dr-btn { width: 100%; justify-content: center; }
.dr-sc-knoepfe .dr-sc-neu { grid-column: 1 / -1; }
.dr-sc-knoepfe .dr-btn:disabled { opacity: .5; cursor: default; }

.dr-main .prose .dr-sc-lizenz, .dr-sc-lizenz { margin: .8rem 0 0; color: var(--dr-tinte-2); }

/* Aufgaben: Bretter ohne Skript */
.dr-sca-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; margin: .5rem 0; }
.dr-sca-aufgabe { margin: 0; padding: .8rem .8rem .7rem; border: 1px solid var(--dr-linie); border-radius: 12px; background: var(--dr-flaeche); min-width: 0; }
.dr-main .prose .dr-sca-titel, .dr-sca-titel { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.3; }
.dr-sca-brettrahmen { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); grid-template-rows: auto 1.2rem; }
.dr-sca-reihen { display: grid; grid-template-rows: repeat(8, 1fr); }
.dr-sca-linien { display: grid; grid-template-columns: repeat(8, 1fr); grid-column: 2; }
.dr-sca-reihen span, .dr-sca-linien span { display: flex; align-items: center; justify-content: center; font: 700 .68rem/1 var(--dr-mono); color: var(--dr-tinte-2); }
.dr-sca-brett { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1 / 1; border: 2px solid var(--sc-rand); border-radius: 4px; overflow: hidden; }
.dr-sca-brett span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: clamp(1.1rem, 4.6vw, 1.6rem); line-height: 1; }
.dr-sca-brett .dr-sc-hell { background: var(--sc-hell); }
.dr-sca-brett .dr-sc-dunkel { background: var(--sc-dunkel); }
.dr-main .prose .dr-sca-zug, .dr-sca-zug { margin: .5rem 0 .35rem; font-size: .92rem; }
.dr-sca-loesung { font-size: .92rem; }
.dr-sca-loesung summary { cursor: pointer; font-weight: 700; color: var(--dr-marke); }
.dr-main .prose .dr-sca-loesung p, .dr-sca-loesung p { margin: .35rem 0 0; }

@media print {
    .dr-sc-seite, .dr-sc-umw { display: none; }
    .dr-sc { grid-template-columns: 1fr; }
    .dr-sc-hell, .dr-sca-brett .dr-sc-hell { background: #f0d9b5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dr-sc-dunkel, .dr-sca-brett .dr-sc-dunkel { background: #b58863 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dr-sca-aufgabe { break-inside: avoid; }
    .dr-sca-loesung:not([open]) { display: none; }
}