.sf-panel {
  padding: 14px;
  border: 1px solid #776343;
  border-radius: 10px;
  background: #28241d;
  color: #f0e9dd;
  font-size: 13px;
  line-height: 1.5;
}
.sf-panel h2 { margin: 0 0 8px; font-size: 16px; color: #f0d28e; }
.sf-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.sf-toggle input { accent-color: #9bc780; width: 16px; height: 16px; }
.sf-panel p { margin: 9px 0; color: #d2c9b8; }
.sf-output:empty { display: none; }
.sf-output { padding: 10px 0; display: grid; gap: 5px; overflow-wrap: anywhere; }
.sf-output strong { color: #c4e5a9; font-size: 16px; }
.sf-output small { color: #c0b39b; }
.sf-panel .btn { width: 100%; font-size: 13px; padding: 8px; }
.sf-transfer { margin-top: 10px; border-top: 1px solid #514736; padding-top: 8px; }
.sf-transfer summary { cursor: pointer; color: #d4c5a6; }
.sf-transfer .btn { margin-top: 7px; }
.sf-file { display: block; cursor: pointer; text-align: center; }
.sf-file input { display: none; }
.sf-panel a { color: #d4c5a6; }
.sf-licence { display: block; margin-top: 9px; font-size: 12px; }

/* Živá partie s trenérem: řádek vlastního tahu a řádek soupeře. */
.sf-live-row + .sf-live-row { margin-top:3px; padding-top:6px; border-top:1px solid var(--ui-border,#39492f); }
.sf-live-head { display:flex; flex-wrap:wrap; gap:0 6px; align-items:baseline; min-width:0; }
.sf-live-who { flex:none; font-size:12px; color:var(--ui-muted,var(--muted)); }
.sf-live-head .sf-grade { font-size:14px; }
/* Lepší tah na požádání je přímo v řádku: nepřidá kartě výšku a na telefonu je vidět bez posouvání. */
.sf-live-head .btn.sf-live-better { flex:none; display:inline-block; width:auto; margin:-3px 0 -3px auto; padding:2px 8px; font-size:12px; line-height:1.35; }
.sf-live-row { container-type:inline-size; }
/* Trenér je zvětšený, aby v okénku byla vidět hlava a gesto, podstavec nebo trup zůstává dole mimo okénko. */
.sf-live-row,.sf-detail-coach { --coach-size:96px; }
.coach-face { display:block; width:var(--coach-size); height:var(--coach-size); overflow:hidden; }
.coach-face[hidden],.coach-face:not(:has(.konik)) { display:none; }
.coach-face .konik { display:block; width:150%; height:150%; max-width:none; margin:-5% 0 0 -25%; }
/* Koník v saku (konik-v2) má gesta až u okraje obrázku: menší přiblížení, ať je vidět dlaň, ukazováček i bublina. Ostatní trenéři beze změny. */
.coach-face[data-coach="konik"] .konik { width:122%; height:122%; margin:-1% 0 0 -19%; }
/* Trenér stojí vedle známky a textu přes všechny jejich řádky. Popisek „Tvůj tah“ zůstává pro čtečku. Bez obrázku je řádek obyčejný. */
.sf-live-row:has(> .coach-face:not([hidden]) .konik) { display:grid; grid-template-columns:var(--coach-size) minmax(0,1fr); grid-template-rows:1fr auto auto 1fr; column-gap:10px; }
.sf-live-row > .coach-face { grid-area:1 / 1 / -1 / 2; align-self:center; }
.sf-live-row:has(> .coach-face:not([hidden]) .konik) > .sf-live-head { grid-area:2 / 2; }
.sf-live-row:has(> .coach-face:not([hidden]) .konik) > p { grid-area:3 / 2; }
.sf-live-row:has(> .coach-face:not([hidden]) .konik) .sf-live-who { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Detail tahu: stejný trenér, klepnutím otevře podrobnosti rozboru. */
.sf-detail-coach:has(.konik) { display:grid; grid-template-columns:var(--coach-size) minmax(0,1fr); column-gap:10px; align-items:center; }
.coach-details { display:block; padding:0; border:0; border-radius:10px; background:none; color:inherit; cursor:pointer; }
.coach-details:not(:has(.konik)) { display:none; }
.coach-details:hover { background:var(--ui-hover,#30392c); }
.coach-details:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.sf-panel .btn.details-toggle { display:none; }
/* Detail tahu: vlevo trenér a pod ním mřížka 2 × 2 (ⓘ, 🔍, 📝 a kolik hráčů by tah zahrálo). Sloupec má pevnou šířku,
   trenéra zmenšuje fitCoach (stockfish-analysis.js), aby levý sloupec nebyl vyšší než text. Každé tlačítko má své pole, mřížka se nemění. */
.sf-detail-coach.with-tools { --side-w:92px; display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); column-gap:10px; align-items:start; }
.coach-side { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.sf-detail-coach.coach-inline .coach-words > .coach-details { float:left; margin:0 6px 0 0; border-radius:7px; }
#sfOutput .sf-detail-coach.coach-inline .coach-words > .sf-grade { min-height:28px; }   /* věta pod známkou má celou šířku, neobtéká trenéra */
.coach-tools { display:grid; grid-template-columns:repeat(2,44px); grid-template-rows:repeat(2,44px); gap:4px; }
.coach-tools .icon-help { grid-area:1 / 1; } .coach-tools .details-toggle { grid-area:1 / 2; } .coach-tools #noteToggle { grid-area:2 / 1; } .coach-tools .coach-share { grid-area:2 / 2; }
.coach-tools .btn:not([hidden]) { display:grid; place-items:center; align-content:center; width:44px; height:44px; min-width:0; min-height:44px; margin:0; padding:0; font-size:18px; line-height:1; }
.sf-panel .coach-tools .btn.details-toggle { display:none; }
.review-flow-active[data-review-step="detail"] .sf-panel .coach-tools .btn.details-toggle:not([hidden]) { display:grid; }
.coach-tools .coach-share { gap:2px; }
.coach-share b { font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.coach-share small { font-size:10.5px; line-height:1; color:var(--ui-muted,var(--muted)); }
.coach-share.none b { font-weight:600; color:var(--ui-muted,var(--muted)); }
@media (min-width:1201px) { .sf-detail-coach.with-tools { --side-w:96px; } }
.details-toggle[aria-expanded="true"] { background:var(--ui-selected,rgba(255,255,255,.14)); }
.review-flow-active[data-review-step="detail"] .sf-panel .btn.details-toggle:not([hidden]) { display:inline-block; }
.review-flow-active[data-review-step="detail"] .sf-engine-details > summary { display:none; }
.review-flow-active[data-review-step="detail"] .sf-engine-details:not([open]) { display:none; }
@media (min-width:901px) and (max-width:1200px) { .sf-live-row,.sf-detail-coach { --coach-size:72px; } }
@media (min-width:901px) {
  .sf-live-row p,.sf-detail-coach p { font-size:14px; line-height:1.4; }
  /* Lepší tah je na počítači vpravo v řádku soupeře, vedle trenéra by zalomil známku. */
  .sf-live-row:has(+ .sf-live-row) { position:relative; z-index:1; }
  .sf-live-row:has(+ .sf-live-row) .sf-live-head .btn.sf-live-better { position:absolute; right:0; top:calc(100% + 13px); margin:0; }
}
@media (max-width:900px) {
  .sf-live-row,.sf-detail-coach { --coach-size:62px; }
  .sf-live-row:has(> .coach-face:not([hidden]) .konik) { column-gap:8px; grid-template-rows:0 auto auto 1fr; }
  .sf-live-row > .coach-face { align-self:start; margin-top:-3px; }
  .sf-detail-coach:has(.konik) { column-gap:8px; align-items:start; }
  @media (max-height:680px) { .sf-detail-coach { --coach-size:48px; } }   /* na malém telefonu má přednost text */
  @media (max-height:660px),(max-width:340px) { .sf-live-row { --coach-size:48px; } }
  /* Na telefonu zůstává Lepší tah v prvním řádku, na menším displeji je jinak pod spodní lištou. */
  .sf-live-row:has(> .coach-face:not([hidden]) .konik) > .sf-live-head { flex-wrap:nowrap; gap:0 4px; align-items:flex-start; }
  .sf-live-row:has(> .coach-face:not([hidden]) .konik) .sf-grade { flex:1 1 auto; min-width:0; font-size:13.5px; }
  .sf-live-row:has(> .coach-face:not([hidden]) .konik) .sf-live-head .btn.sf-live-better { padding-inline:8px; }
}
@container (max-width:329px) { .sf-live-better .nav-full { display:none; } .sf-live-better .nav-short { display:inline; } }   /* v užší kartě by se plný popisek zalomil */
@media (max-width:900px) { .sf-live-head .btn.sf-live-better { position:relative; top:-2px; margin-block:-7px; padding:6px 10px; } }
.sf-live-pending { font-size:13px; color:var(--ui-muted,var(--muted)); }
.sf-live-row p { margin:1px 0 0; font-size:13px; line-height:1.35; }
.sf-panel p.sf-live-hint { margin:0; color:var(--accent); font-weight:650; }

/* Slova ve vysvětlení, která ukazují na desce, o čem mluví. */
.coach-link { display:inline; margin:0; padding:1px 2px; border:0; border-radius:3px; background:none; color:var(--accent); font:inherit; font-weight:650; text-decoration:underline dotted 1px; text-underline-offset:2px; cursor:pointer; }
.coach-link[aria-pressed="true"] { background:var(--ui-selected,rgba(255,255,255,.14)); text-decoration:none; }
.coach-link:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* Tahy propočtené řady: zápis se nezalomí uprostřed a na telefonu je dost místa pro prst. */
.coach-link.line-move { white-space:nowrap; }
.sf-panel p.sf-line,.sf-output p.sf-line { margin-top:4px; }
@media (max-width:900px),(pointer:coarse) {
  .coach-link.line-move { display:inline-block; min-width:26px; padding:2px 3px; line-height:20px; text-align:center; }
}
/* Lepší pokračování na telefonu: jeden řádek, který se posouvá prstem, aby čtyři tlačítka pod kartou zůstala na obrazovce. */
@media (max-width:900px) {
  .sf-panel p.sf-line,.sf-output p.sf-line { display:flex; align-items:center; gap:2px; margin:0; padding-right:16px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent); }
  .sf-line::-webkit-scrollbar { display:none; }
  .sf-line .line-move { flex:none; }
  .sf-line-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
.square.coach-mark { box-shadow:inset 0 0 0 3px rgba(235,150,40,.95); }

/* Trenér: otázka před tahem, plán Co dál? a odhad z Maii. */
.sf-live-row.sf-ask { display:flex; align-items:center; gap:8px; }
.sf-ask p { flex:1 1 0; min-width:0; margin:0; }
.sf-panel .btn.sf-trainer-btn { flex:none; display:inline-block; width:auto; min-height:32px; margin:0; padding:2px 10px; font-size:12.5px; line-height:1.3; white-space:nowrap; position:relative; }
.sf-trainer-btn::after { content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
.sf-live-head .btn.sf-plan-btn { margin:-3px 0 -3px auto; }
.sf-live-row.sf-plan p { margin:0; }
@media (min-width:901px) { .sf-live-row:has(.sf-live-better) + .sf-live-row .sf-plan-btn { margin-right:calc(var(--better-width,122px) + 8px); } }
.trainer-threat { pointer-events:none; }
@media (max-width:900px) { .sf-panel .btn.sf-trainer-btn { padding-inline:8px; } .sf-live-head .btn.sf-plan-btn { top:-5px; } }