.mylas-app { --mylas-board-size: min(82vw, 640px); max-width: 1180px; margin: 0 auto; }
.mylas-header { margin-bottom: 1rem; }
.mylas-layout { display: grid; grid-template-columns: minmax(320px, 680px) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.mylas-board-panel { min-width: 0; }
.mylas-board { width: var(--mylas-board-size); max-width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); border: 3px solid #4a3a2a; box-shadow: 0 4px 16px rgba(0,0,0,.18); touch-action: none; user-select: none; }
.mylas-square { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: clamp(28px, 7.2vw, 62px); line-height: 1; cursor: pointer; }
.mylas-square.light { background: #f0d9b5; }
.mylas-square.dark { background: #b58863; }
.mylas-square.selected { outline: 4px solid rgba(255,215,0,.95); outline-offset: -4px; }
.mylas-square.legal::after { content: ""; width: 22%; height: 22%; border-radius: 50%; background: rgba(25,90,35,.52); position: absolute; }
.mylas-square.capture::after { content: ""; position: absolute; inset: 5%; border: 5px solid rgba(150,20,20,.55); border-radius: 50%; }
.mylas-square.last { box-shadow: inset 0 0 0 999px rgba(246,246,105,.28); }
.mylas-piece { position: relative; display: block; max-width: 100%; max-height: 100%; line-height: 1; z-index: 2; cursor: grab; font-family: "DejaVu Sans", "Segoe UI Symbol", sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.mylas-piece:active { cursor: grabbing; }
.mylas-coord-file, .mylas-coord-rank { position: absolute; z-index: 3; font-size: 11px; font-weight: 700; opacity: .8; pointer-events: none; }
.mylas-coord-file { right: 3px; bottom: 1px; }
.mylas-coord-rank { left: 3px; top: 1px; }
.mylas-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.mylas-side-panel { display: grid; gap: 1rem; }
.mylas-card { padding: 1rem; border: 1px solid #d4d4d4; border-radius: .5rem; background: rgba(255,255,255,.7); }
.mylas-card h2 { font-size: 1.2rem; margin-top: 0; }
.mylas-card textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin-bottom: .6rem; }
.mylas-status { min-height: 2.2rem; padding: .45rem .7rem; margin-bottom: .6rem; border-radius: .35rem; background: #eef3f7; font-weight: 600; }
.mylas-status.check { background: #fff0d8; }
.mylas-status.end { background: #f7dddd; }
.mylas-error { color: #b00020; margin-top: .5rem; min-height: 1.2em; }
.mylas-moves { max-height: 300px; overflow: auto; }
.mylas-move-row { display: grid; grid-template-columns: 3.2em 1fr 1fr; gap: .4rem; padding: .18rem .2rem; border-bottom: 1px solid #eee; }
.mylas-promotion { border: 0; border-radius: .6rem; padding: 1.2rem; box-shadow: 0 10px 35px rgba(0,0,0,.3); }
.mylas-promotion::backdrop { background: rgba(0,0,0,.45); }
.mylas-promotion-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.mylas-promotion-buttons button { padding: .6rem .9rem; }
@media (max-width: 900px) {
  .mylas-layout { grid-template-columns: 1fr; }
  .mylas-app { --mylas-board-size: min(94vw, 640px); }
}

.mylas-card input[type="file"] {
  display: block;
  width: 100%;
  margin: .5rem 0 1rem;
}
.mylas-import-report {
  margin-top: 1rem;
  padding: .75rem;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  background: #f8f9fa;
}
.mylas-import-report ul { margin-bottom: 0; }

.mylas-startbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.mylas-results-card{max-height:430px;overflow:auto}.mylas-result{display:flex;width:100%;justify-content:space-between;gap:.5rem;text-align:left;padding:.55rem;border:0;border-bottom:1px solid #ddd;background:transparent}.mylas-result:hover{background:#eef3f7}.mylas-result span{white-space:nowrap}.mylas-pgn-preview{max-height:220px;overflow:auto;white-space:pre-wrap;font-size:.85rem}.mylas-manager{max-width:900px;margin:auto}.mylas-game-list{display:grid;gap:.6rem}.mylas-game-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem;border:1px solid #ddd;border-radius:.4rem;background:#fff}@media(max-width:650px){.mylas-game-row{align-items:flex-start;flex-direction:column}}

/* Stockfish 1.1.0 */
.mylas-engine-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;margin-bottom:.35rem}.mylas-engine-controls label{display:grid;gap:.25rem;font-weight:600}.mylas-engine-controls input,.mylas-engine-controls select{min-width:5.5rem;padding:.35rem}.mylas-engine-status{margin:.8rem 0 .45rem;padding:.5rem .65rem;background:#eef3f7;border-radius:.35rem}.mylas-engine-lines{display:grid;gap:.45rem}.mylas-engine-line{display:grid;grid-template-columns:5.5rem 5.5rem 1fr;gap:.5rem;align-items:start;padding:.45rem 0;border-bottom:1px solid #e3e3e3}.mylas-engine-line code{white-space:normal;overflow-wrap:anywhere}.mylas-engine-note{font-size:.85rem;opacity:.75;margin:.7rem 0 0}@media(max-width:600px){.mylas-engine-line{grid-template-columns:4.8rem 1fr}.mylas-engine-line code{grid-column:1/-1}}

/* MyLAS 1.1.7 – vollständige, anklickbare Stockfish-Varianten */
.mylas-engine-line { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #ddd; }
.mylas-engine-head { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.45rem; }
.mylas-pv-full { white-space:normal; overflow:visible; line-height:2.05; word-break:normal; }
.mylas-pv-move {
  border:0; background:transparent; padding:.12rem .22rem; margin:0 .06rem;
  font:inherit; color:inherit; cursor:pointer; border-radius:.2rem;
}
.mylas-pv-move:hover, .mylas-pv-move:focus { background:#e9ecef; text-decoration:underline; }
.mylas-pv-uci { white-space:normal; overflow-wrap:anywhere; }


/* MyLAS 1.1.11 – zwei kontrastoptimierte Brettdarstellungen */
.mylas-displaybar{display:flex;align-items:center;gap:.55rem;margin:0 0 .75rem}
.mylas-displaybar select{padding:.35rem .5rem;max-width:260px}
.mylas-app[data-theme="light"] .mylas-square.light{background:#f2e5c8}
.mylas-app[data-theme="light"] .mylas-square.dark{background:#b9916c}
.mylas-app[data-theme="dark"] .mylas-board{border-color:#20252a;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.mylas-app[data-theme="dark"] .mylas-square.light{background:#b9c4c9}
.mylas-app[data-theme="dark"] .mylas-square.dark{background:#46555e}
.mylas-piece.white-piece{
  color:#fff;
  -webkit-text-stroke:1.4px #1d2328;
  text-shadow:0 1px 0 #111,1px 0 0 #111,0 -1px 0 #111,-1px 0 0 #111,0 2px 3px rgba(0,0,0,.35);
}
.mylas-piece.black-piece{
  color:#171b1e;
  -webkit-text-stroke:.35px #000;
  text-shadow:0 1px 1px rgba(255,255,255,.18);
}
.mylas-app[data-theme="dark"] .mylas-piece.white-piece{
  -webkit-text-stroke:1.7px #101417;
  text-shadow:0 1px 0 #000,1px 0 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 2px 4px rgba(0,0,0,.55);
}
.mylas-analysis-save-card input{width:100%;margin:.35rem 0 .2rem}
.mylas-save-status{min-height:1.4em;margin-top:.6rem;font-weight:600}

/* MyLAS 1.1.12 – echte SVG-Figuren statt Unicode-Zeichen */
.mylas-piece{
  width:88%;
  height:88%;
  object-fit:contain;
  font-size:0;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
}
.mylas-app[data-theme="dark"] .mylas-piece.white-piece{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.mylas-app[data-theme="dark"] .mylas-piece.black-piece{
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.18));
}

/* 1.1.14 – kontrastreichere helle Brettdarstellung */
.mylas-app[data-theme="light"] .mylas-square.light{background:#f4e2bd !important}
.mylas-app[data-theme="light"] .mylas-square.dark{background:#9b6a43 !important}

/* MyLAS 1.1.15 – weiße Figuren auf hellen Feldern besser abgesetzt */
.mylas-app[data-theme="light"] .mylas-square.light{background:#f2e5c8 !important}
.mylas-app[data-theme="light"] .mylas-square.dark{background:#b9916c !important}
.mylas-app[data-theme="light"] .mylas-piece.white-piece{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.45));
}

/* MyLAS 1.1.16 – Bernstein-Hellbrett + reinweiße Figuren */
.mylas-app[data-theme="light"] .mylas-square.light{background:#d8b26e !important}
.mylas-app[data-theme="light"] .mylas-square.dark{background:#9b6a2f !important}
.mylas-app[data-theme="light"] .mylas-piece.white-piece{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}