/* Layout der Arena: sichtbares Raster aus Haarlinien */
.frame { max-width: 1280px; margin: var(--s-4) auto; border: 1px solid var(--c-line);
         display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; }
@media (max-width: 1320px) { .frame { margin: var(--s-4) var(--s-4); } }
@media (max-width: 1024px) { .frame { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .frame { margin: 0; border-left: 0; border-right: 0; } }

/* Kopfzeile */
.head { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end;
        padding: var(--s-4); border-bottom: 1px solid var(--c-line); }
.head .t-display { font-size: clamp(36px, 6vw, 64px); }
.head-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
@media (max-width: 640px) {
  .head { grid-template-columns: 1fr; padding: var(--s-3); }
  .head-meta { align-items: flex-start; }
}

/* Brettbereich */
.stage { display: flex; flex-direction: column; border-right: 1px solid var(--c-line); min-width: 0; }
@media (max-width: 1024px) { .stage { border-right: 0; border-bottom: 1px solid var(--c-line); } }
.board-wrap { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); }
@media (max-width: 640px) { .board-wrap { padding: var(--s-2) var(--s-3) var(--s-3); } }
#board { width: 100%; max-width: 720px; aspect-ratio: 1; display: block; }
#board.busy { cursor: progress; }
.readout { width: 100%; max-width: 720px; min-height: 1.4em; display: flex; justify-content: space-between; gap: var(--s-3); }
.readout span:last-child { text-align: right; }

/* Statusleiste aus vier Kennzahlen */
.statusbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
.statusbar .stat .t-mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .statusbar { grid-template-columns: 1fr 1fr; }
  .statusbar .stat:nth-child(2) { border-right: 0; }
  .statusbar .stat:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
}
.stone-glyph { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .45em; vertical-align: -0.05em;
               border: 1px solid var(--c-stone-w-edge); }
.stone-glyph.b { background: var(--c-stone-b); border-color: var(--c-stone-b-edge); }
.stone-glyph.w { background: var(--c-stone-w); }
.status-live { color: var(--c-text); text-transform: uppercase; letter-spacing: .04em; }

/* Seitenspalte aus nummerierten Abschnitten */
.side { display: flex; flex-direction: column; min-width: 0; }
.panel { padding: var(--s-4); border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; gap: var(--s-3); }
.panel:last-child { border-bottom: 0; }
@media (max-width: 640px) { .panel { padding: var(--s-3); } }
.panel-head { display: flex; gap: var(--s-3); align-items: baseline; }
.panel-head h2 { font: 400 13px/1.4 var(--f-label); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field-row { display: flex; justify-content: space-between; align-items: baseline; }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.seg--full { display: flex; }
.seg--full button { flex: 1; }

/* Select ohne Systemoptik */
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; width: 100%; padding: 10px 32px 10px 12px;
                 background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius);
                 font: 400 12px/1.3 var(--f-label); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
                 border-right: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); transform: rotate(45deg); pointer-events: none; }
.select select:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 2px; }

/* Slider: Haarlinie mit quadratischem Griff */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 1px; background: var(--c-text-2); }
.range::-moz-range-track { height: 1px; background: var(--c-text-2); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4.5px; background: var(--c-ink); border: 0; border-radius: 0; }
.range::-moz-range-thumb { width: 10px; height: 10px; background: var(--c-ink); border: 0; border-radius: 0; }
.range:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }

/* Bewertung */
.gauge { width: 100%; display: block; }
.value-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.value-row .t-value { font-size: 44px; }
.stats-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.muted { opacity: .35; }

/* Zugliste */
.moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px var(--s-3); max-height: 220px; overflow-y: auto; }
.moves span { font: 400 12px/1.7 var(--f-label); white-space: nowrap; }
.moves span i { font-style: normal; color: var(--c-text-2); margin-right: 6px; }
.moves span.last { background: var(--c-ink); color: var(--c-on-ink); padding: 0 4px; margin: 0 -4px; }
.moves span.last i { color: inherit; opacity: .6; }
.empty { color: var(--c-text-2); }

/* Einklappbare Erklärung */
.collapse summary { list-style: none; cursor: pointer; width: fit-content; }
.collapse summary::-webkit-details-marker { display: none; }
.collapse summary::before { content: "+ "; }
.collapse[open] summary::before { content: "− "; }
.collapse summary:hover { color: var(--c-text); }
.collapse p { margin: var(--s-2) 0 0; }