/* CH960 Chess Widget (/embed, task-960-widget): нейтральная обёртка поверх web.css.
 * Тема: data-theme="light|dark" на <html> перекрывает системную; "auto" — как у сайта. */
html[data-theme="light"] {
  --bg: var(--cream); --fg: var(--ink); --muted: #6b6354;
  --card: rgba(255, 255, 255, 0.55); --accent: var(--teal);
}
html[data-theme="dark"] {
  --bg: #14110e; --fg: #ece5da; --muted: #9b9283;
  --card: rgba(255, 255, 255, 0.06); --accent: var(--sand);
}
.wg-body {
  background: var(--bg); background-image: none; color: var(--fg);
  padding: 10px; max-width: 1100px; margin: 0 auto; min-height: 0;
}
.wg-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.wg-seg { display: inline-flex; border: 1px solid var(--accent); border-radius: 22px; overflow: hidden; }
.wg-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: 15px;
}
.wg-tab.current { background: var(--accent); color: var(--bg); }
.wg-tab:focus-visible, .wg-chip:focus-visible, .wg-icon:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.wg-icon {
  margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 22px; font-size: 20px;
  background: transparent; color: var(--fg); border: 1px solid var(--muted); cursor: pointer;
}
.wg-main, .wg-friend { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.wg-friend > .board-wrap { margin: 0; flex: 1 1 320px; }
/* Доска: на телефоне — почти вся ширина, управление под ней; на широком — слева. */
.wg-board, .wg-friend .board-host {
  flex: 1 1 300px; max-width: min(100%, 640px, calc(100vh - 150px)); min-width: 260px;
}
.wg-panel { flex: 1 1 240px; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.wg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wg-chip {
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 22px; cursor: pointer;
  background: transparent; color: var(--fg); border: 1px solid var(--muted); font-size: 15px;
}
.wg-chip.current { border-color: var(--accent); background: var(--accent); color: var(--bg); font-weight: 600; }
.wg-panel .btn-primary, .wg-panel .btn-secondary { min-height: 44px; }
.wg-panel select { min-height: 40px; }
.wg-pos { font-weight: 600; }
.wg-link {
  background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer;
  font: inherit; min-height: 44px; padding: 0 4px;
}
.wg-think { min-height: 1.2em; }
.wg-foot { margin-top: 12px; text-align: center; }
.wg-foot a { color: var(--muted); }
.wg-ended { padding: 24px 8px; text-align: center; }
.wg-ended .wg-row { justify-content: center; margin-top: 12px; }
.wg-friend .friend-qr img { width: 180px; height: 180px; }
/* Полный экран: доска по высоте экрана. */
.wg-fs { max-width: none; height: 100vh; overflow: auto; }
.wg-fs .wg-board, .wg-fs .wg-friend .board-host { max-width: min(100%, calc(100vh - 110px)); }
@media (max-width: 560px) {
  .wg-body { padding: 6px; }
  .wg-board, .wg-friend .board-host { max-width: 100%; min-width: 0; flex-basis: 100%; }
  .wg-panel { min-width: 0; flex-basis: 100%; }
  .wg-tab { padding: 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-body * { transition: none !important; animation: none !important; }
}
/* Партия с другом началась (online.js ставит rs-in-game): выбор времени и цвета больше не нужен.
   На телефоне — как на сайте: часы, доска, свои часы, затем ссылка/QR и кнопки (порядок из web.css). */
body.rs-in-game .wg-friend .wg-panel > .wg-row, body.rs-in-game .wg-friend .wg-pos { display: none; }
@media (max-width: 768px) {
  body.rs-in-game .wg-friend { flex-direction: column; flex-wrap: nowrap; }
  body.rs-in-game .wg-friend .wg-panel { display: contents; }
}