* { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #111318;
  --surface: #191c22;
  --surface2: #20242c;
  --border: #343945;
  --text: #f1f3f5;
  --muted: #a9b0bb;
  --accent: #8bd3a8;
  --accentText: #102016;
  --light: #f0d9b5;
  --dark: #b58863;
  --danger: #d96c6c;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f5f6f8; --surface:#fff; --surface2:#f0f2f5; --border:#d9dde3; --text:#18202a; --muted:#69717d; }
}
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.app { max-width:1180px; margin:0 auto; padding:28px 18px 42px; }
.topbar { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-bottom:22px; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:4px; font-size:clamp(1.7rem,4vw,2.5rem); }
.topbar p { color:var(--muted); margin-bottom:0; }
.status-pill { border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 12px; white-space:nowrap; font-size:.9rem; }
.layout { display:grid; grid-template-columns:minmax(300px,720px) minmax(270px,350px); gap:24px; align-items:start; }
.game-column,.side { min-width:0; }
.game-head,.actions,.panel-title,.engine-line,.range-row,.scale { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-head { margin-bottom:10px; flex-wrap:wrap; }
.board-toggles { display:flex; flex-wrap:wrap; gap:8px; }
.game-head button[aria-pressed="false"] { color:var(--muted); text-decoration:line-through; }
.game-head span { display:block; color:var(--muted); font-size:.9rem; }
.board-wrap { position:relative; width:min(100%,680px); aspect-ratio:1; margin:0 auto; }
.board { position:relative; width:100%; height:100%; display:grid; grid-template-columns:repeat(8,1fr); border:2px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 14px 36px #0004; }
.square { position:relative; border:0; padding:0; aspect-ratio:1; display:grid; place-items:center; font-size:clamp(28px,7vw,62px); line-height:1; }
.square.light { background:var(--light); }
.square.dark { background:var(--dark); }
.square:focus-visible { outline:4px solid #6aa8ff; outline-offset:-4px; z-index:2; }
.legal::after { content:""; position:absolute; width:20%; aspect-ratio:1; border-radius:50%; background:#2228; }
 .capture::after { content:""; position:absolute; inset:8%; border:5px solid #2228; border-radius:50%; }
.enemy-capturable::before {
  content:""; position:absolute; inset:12%; border:4px solid #e53935; border-radius:50%; z-index:1; pointer-events:none;
}
.enemy-attacker::before {
  content:""; position:absolute; inset:17%; border:4px solid #f39c12; border-radius:50%; z-index:1; pointer-events:none;
}
.enemy-capturable.enemy-attacker::before {
  inset:10%; border:4px solid #e53935; box-shadow:inset 0 0 0 4px var(--light), inset 0 0 0 8px #f39c12;
}
.enemy-capturable.enemy-attacker.dark::before {
  box-shadow:inset 0 0 0 4px var(--dark), inset 0 0 0 8px #f39c12;
}
.piece {
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.selected { box-shadow:inset 0 0 0 5px #68a7ff; }
.hint-from { box-shadow:inset 0 0 0 5px #43a36a; }
.hint-to { box-shadow:inset 0 0 0 6px #43a36a; }
.in-check { box-shadow:inset 0 0 0 6px var(--danger); }
.coord { position:absolute; font-size:10px; font-weight:700; opacity:.7; pointer-events:none; }
.rank { left:4px; top:3px; }
.file { right:4px; bottom:3px; }
.light .coord { color:#222; }
.dark .coord { color:#fff; }
.actions { justify-content:flex-start; flex-wrap:wrap; margin:14px 0; }
.actions button,.game-head button,.panel button,.modal button { min-height:44px; border:1px solid var(--border); border-radius:9px; padding:9px 13px; background:var(--surface); color:var(--text); }
.actions .primary { background:var(--accent); color:var(--accentText); border-color:var(--accent); }
button:disabled { opacity:.45; cursor:not-allowed; }
.hint-box,.panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px; }
.hint-box { margin-top:10px; }
.label,.small,.scale { color:var(--muted); font-size:.9rem; }
.hint-box .label { font-weight:700; margin-bottom:4px; }
.side { display:grid; gap:12px; }
.panel h2 { font-size:1rem; margin-bottom:12px; }
.panel-title h2 { margin-bottom:0; }
.panel-title button { min-height:36px; padding:6px 9px; font-size:.85rem; }
.range-row { margin-top:8px; }
.range-row input { width:100%; }
.range-row output { min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.scale { margin-top:4px; }
.engine-line { padding:8px 0; border-top:1px solid var(--border); }
.engine-line:first-of-type { margin-top:8px; }
.moves { max-height:320px; overflow:auto; margin-top:12px; }
.move-row { display:grid; grid-template-columns:36px 1fr 1fr; gap:6px; padding:4px 0; font-variant-numeric:tabular-nums; }
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; background:#0008; display:grid; place-items:center; padding:20px; z-index:20; }
.modal-card { width:min(380px,100%); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; }
.promotion-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (max-width:850px) {
  .layout { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .board { width:100%; }
}

.explanation-box { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.explanation-box .label { font-weight:700; margin-bottom:4px; }
#hintExplanation { color:var(--text); line-height:1.5; }
.variation { margin-top:8px; color:var(--muted); font-size:.92rem; line-height:1.45; }
.variation { margin-top:8px; color:var(--muted); font-size:.88rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.checklist-box { margin-top:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 15px; }
.checklist-box > div:not(.label) { padding:3px 0; }
.spoiler { margin-top:4px; }
.spoiler summary { cursor:pointer; font-weight:650; padding:6px 0; }
.spoiler-content { margin-top:8px; padding:10px; background:var(--surface2); border-radius:8px; line-height:1.5; }

.move-arrow-layer { position:absolute; inset:0; width:100%; height:100%; z-index:20; pointer-events:none; overflow:visible; }
.explanation-box .idea { font-weight:700; margin:8px 0 4px; }
.explanation-box .reasons { margin:0; padding-left:20px; line-height:1.5; }
.explanation-box .reasons li + li { margin-top:4px; }
.explanation-box .lesson { margin:8px 0 0; padding:8px 10px; border-left:3px solid var(--accent); background:var(--surface2); line-height:1.45; }
.explanation-box .scoreline { margin:0; color:var(--muted); font-size:.9rem; }
.variation { white-space:pre-line; }

/* Ansichten, Tabs und Lernmodule */
[hidden] { display:none !important; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.icon-btn { min-height:40px; min-width:40px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); }
.tabs { display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--border); overflow-x:auto; }
.tabs button { min-height:44px; padding:8px 14px; border:1px solid transparent; border-bottom:0; border-radius:9px 9px 0 0; background:transparent; color:var(--muted); font-weight:650; white-space:nowrap; }
.tabs button[aria-selected="true"] { background:var(--surface); border-color:var(--border); color:var(--text); margin-bottom:-1px; }
.tabs button:disabled { opacity:.45; cursor:not-allowed; }

.board-row { display:flex; gap:8px; width:min(100%,716px); margin:0 auto; align-items:stretch; }
.board-row .board-wrap { flex:1; min-width:0; width:auto; margin:0; }
.board { touch-action:none; }
.eval-bar { position:relative; width:22px; flex:none; border-radius:6px; overflow:hidden; background:#2b2f38; border:1px solid var(--border); }
.eval-fill { position:absolute; left:0; right:0; bottom:0; height:50%; background:#f1f3f5; transition:height .3s ease; }
.eval-bar[data-flipped] .eval-fill { top:0; bottom:auto; }
.eval-label { position:absolute; left:0; right:0; font-size:9px; font-weight:700; text-align:center; color:#fff; text-shadow:0 0 3px #000; z-index:1; top:3px; writing-mode:horizontal-tb; }
.eval-bar[data-flipped] .eval-label { top:auto; bottom:3px; }
.opening-name { display:block; min-height:1.4em; margin:8px auto 0; padding:0 6px; border:0; background:none; text-align:center; color:var(--muted); font:inherit; font-size:.92rem; }
.opening-name:not(:disabled) { cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.opening-name:not(:disabled):hover { color:var(--text); }
.modal-card.wide { width:min(640px,100%); max-height:85vh; overflow:auto; }
.modal-card h3 { margin:14px 0 6px; font-size:1rem; }
.modal-notes { margin:10px 0 0; padding:8px 10px; border-left:3px solid var(--accent); background:var(--surface2); line-height:1.45; }
.line-explain { margin:0; padding-left:0; list-style:none; }
.line-explain li { display:grid; grid-template-columns:3.2em 4.6em 1fr; gap:6px; padding:5px 0; border-top:1px solid var(--border); line-height:1.4; }
.line-explain .no { color:var(--muted); font-variant-numeric:tabular-nums; }
.line-explain .san { font-weight:700; }
.modal-card .panel-title button { min-height:36px; min-width:36px; padding:4px 8px; }
.keys { margin-top:12px; }
kbd { border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; padding:0 5px; font:inherit; font-size:.85em; background:var(--surface2); }
.drag-ghost { position:fixed; z-index:50; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 6px 8px #0006); }
.square.drag-origin .piece { opacity:.3; }

.filter-row { display:grid; gap:4px; margin-bottom:10px; }
.filter-row label { color:var(--muted); font-size:.9rem; }
.filter-row select,.filter-row input,.filter-row textarea { width:100%; min-height:40px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); color:var(--text); font:inherit; }
.filter-row textarea { resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; }
.inline-row { display:flex; gap:8px; }
.inline-row input { flex:1; min-width:0; }
.progress-line { margin:-4px 0 12px; color:var(--muted); font-size:.9rem; }
.puzzle-task { font-weight:650; margin:12px 0 8px; }
.puzzle-feedback { min-height:3.2em; padding:10px; border-radius:8px; background:var(--surface2); line-height:1.45; }
.puzzle-feedback[data-state="ok"] { border-left:4px solid var(--accent); }
.puzzle-feedback[data-state="bad"] { border-left:4px solid var(--danger); }
.puzzle-actions,.nav-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.puzzle-actions .primary,.nav-row .primary { background:var(--accent); color:var(--accentText); border-color:var(--accent); }
.nav-row button { min-width:44px; }
#puzzleInfo { margin-bottom:8px; }
.panel a { color:var(--accent); }
.danger-btn { margin-top:10px; }
.rush-box { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:8px 0; padding:10px; border:1px solid var(--accent); border-radius:8px; }
.rush-box button { min-height:36px; padding:4px 10px; }

.opening-list { list-style:none; margin:0 0 8px; padding:0; max-height:240px; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.opening-list li + li { border-top:1px solid var(--border); }
.opening-list button { width:100%; min-height:40px; border:0; border-radius:0; text-align:left; background:transparent; color:var(--text); padding:6px 10px; }
.opening-list button:hover,.opening-list button[aria-current="true"] { background:var(--surface2); }
.opening-list .eco { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:6px; }
.opening-list .empty { padding:10px; color:var(--muted); }

.eval-graph { width:100%; height:70px; margin:6px 0; background:var(--surface2); border-radius:8px; cursor:pointer; }
.analysis-moves { max-height:300px; }
.analysis-moves .move-row { grid-template-columns:36px 1fr 1fr; }
.analysis-moves button { min-height:0; border:0; border-radius:6px; padding:3px 6px; background:transparent; color:var(--text); text-align:left; }
.analysis-moves button[aria-current="true"] { background:var(--surface2); outline:1px solid var(--accent); }
.analysis-moves .inaccuracy { color:#e0b341; }
.analysis-moves .mistake { color:#e8883a; }
.analysis-moves .blunder { color:var(--danger); }

/* Uhr */
.clock { display:flex; justify-content:space-between; align-items:center; width:min(100%,716px); margin:0 auto 8px; padding:6px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--muted); }
#clockBottom { margin:8px auto 0; }
.clock .time { font-size:1.35rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.clock[data-running="true"] { border-color:var(--accent); box-shadow:inset 4px 0 0 var(--accent); }
.clock[data-running="true"][data-low="true"] .time { color:var(--danger); }

/* Themen-Statistik */
#weakestThemeBtn { width:100%; margin:6px 0 8px; text-align:left; }
.theme-stats { display:grid; gap:2px; }
.theme-stat { display:grid; grid-template-columns:minmax(0,1fr) 70px auto; gap:8px; align-items:center; width:100%; min-height:32px !important; padding:4px 6px !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:var(--text) !important; text-align:left; font-size:.88rem; }
.theme-stat:hover { background:var(--surface) !important; }
.theme-stat .bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.theme-stat .bar > span { display:block; height:100%; background:var(--accent); }
.theme-stat .bar[data-level="low"] > span { background:var(--danger); }
.theme-stat .bar[data-level="mid"] > span { background:#e0b341; }
.theme-stat .pct { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Repertoire-Stern */
.opening-list li { display:flex; }
.opening-list li > button:first-child { flex:1; min-width:0; }
.opening-list .star { flex:none; width:44px; min-height:40px; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; color:var(--muted); font-size:1.1rem; }
.opening-list .star[aria-pressed="true"] { color:#e0b341; }

/* Meine Partien */
.accuracy-graph { height:62px; cursor:default; }
.game-list { max-height:320px; margin-top:8px; }
.game-list button { display:grid; gap:2px; font-size:.88rem; }
.game-list .outcome { font-weight:700; }
.game-list .outcome[data-outcome="win"] { color:var(--accent); }
.game-list .outcome[data-outcome="loss"] { color:var(--danger); }
#ownPuzzlesBtn { width:100%; margin-top:10px; }
.modal .danger-btn { border-color:var(--danger); color:var(--danger); }

/* Touch und schmale Bildschirme */
.board { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.square.drag-over { box-shadow:inset 0 0 0 4px #68a7ffcc; }
/* Auf Touch sitzt die gezogene Figur über dem Finger statt darunter. */
.drag-ghost.touch { transform:translate(-50%,-85%); }
.tabs { scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs[data-more] { -webkit-mask-image:linear-gradient(to right,#000 80%,transparent); mask-image:linear-gradient(to right,#000 80%,transparent); }
@media (hover:none) and (pointer:coarse) {
  .keys { display:none; }
}
@media (max-width:600px) {
  .app { padding:12px 16px 32px; }
  .topbar { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
  .topbar p { display:none; }
  h1 { font-size:1.4rem; margin:0; }
  .topbar-right { gap:6px; }
  .icon-btn { min-height:36px; min-width:36px; }
  .status-pill { padding:6px 10px; font-size:.8rem; }
  .tabs { margin-bottom:12px; }
  .tabs button { padding:8px 10px; }
  /* Bedienknöpfe direkt unter das Brett, Auswahl und Einstellungen darunter. */
  .panel.reorder { display:flex; flex-direction:column; }
  .panel.reorder > .setup { order:1; }
  .panel.reorder > p.small,.panel.reorder > details { order:2; }
}