/* ======================= MATERIAL 3 для IlmNur (01.10.2026) =======================
   Рустам: «примени дизайн m3.material.io для моего проекта… если не понравится —
   вернёмся обратно». Весь новый вид — в этом одном файле, он подключён ПОСЛЕДНИМ
   на каждой странице и лишь переопределяет прежние стили (app.css, chess.css,
   music.css). Убрать строку <link … m3.css> — и страница снова прежняя.
   Точка возврата в git: метка do-m3-01102026.

   Цвета — схема Material 3 (tonal spot, спецификация 2021) из исходного
   зелёного IlmNur #3e8e2a, посчитана библиотекой Material Color Utilities —
   не «на глаз». Прежние имена (--bg, --card, --accent…) переведены на роли
   M3, поэтому весь старый код сразу получает новые цвета. */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root, body[data-theme="light"] {
  --md-primary: #416834; --md-on-primary: #ffffff;
  --md-primary-container: #c2efae; --md-on-primary-container: #2a4f1f;
  --md-secondary: #54624d; --md-on-secondary: #ffffff;
  --md-secondary-container: #d7e8cc; --md-on-secondary-container: #3d4b36;
  --md-tertiary: #386668; --md-tertiary-container: #bcebed; --md-on-tertiary-container: #1e4e50;
  --md-error: #ba1a1a; --md-on-error: #ffffff; --md-error-container: #ffdad6; --md-on-error-container: #93000a;
  --md-surface: #f8faf0; --md-on-surface: #191d17; --md-on-surface-variant: #43483f;
  --md-outline: #73796e; --md-outline-variant: #c3c8bc;
  --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f2f5eb;
  --md-surface-container: #ecefe5; --md-surface-container-high: #e7e9df;
  --md-surface-container-highest: #e1e4da;
  --md-inverse-surface: #2e322b; --md-inverse-on-surface: #eff2e8; --md-inverse-primary: #a6d394;
  --md-scrim: #000000;
}
body[data-theme="dark"] {
  --md-primary: #a6d394; --md-on-primary: #13380a;
  --md-primary-container: #2a4f1f; --md-on-primary-container: #c2efae;
  --md-secondary: #bccbb1; --md-on-secondary: #273421;
  --md-secondary-container: #3d4b36; --md-on-secondary-container: #d7e8cc;
  --md-tertiary: #a0cfd1; --md-tertiary-container: #1e4e50; --md-on-tertiary-container: #bcebed;
  --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
  --md-surface: #11140f; --md-on-surface: #e1e4da; --md-on-surface-variant: #c3c8bc;
  --md-outline: #8d9387; --md-outline-variant: #43483f;
  --md-surface-container-lowest: #0c0f0a; --md-surface-container-low: #191d17;
  --md-surface-container: #1d211b; --md-surface-container-high: #272b25;
  --md-surface-container-highest: #32362f;
  --md-inverse-surface: #e1e4da; --md-inverse-on-surface: #2e322b; --md-inverse-primary: #416834;
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme]) {
    --md-primary: #a6d394; --md-on-primary: #13380a;
    --md-primary-container: #2a4f1f; --md-on-primary-container: #c2efae;
    --md-secondary-container: #3d4b36; --md-on-secondary-container: #d7e8cc;
    --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
    --md-surface: #11140f; --md-on-surface: #e1e4da; --md-on-surface-variant: #c3c8bc;
    --md-outline: #8d9387; --md-outline-variant: #43483f;
    --md-surface-container-low: #191d17; --md-surface-container: #1d211b;
    --md-surface-container-high: #272b25; --md-surface-container-highest: #32362f;
    --md-inverse-surface: #e1e4da; --md-inverse-on-surface: #2e322b;
  }
}

/* Прежние имена — на роли M3. Карточки чуть прозрачные: под ними фон игрока.
   body[data-theme] — чтобы перебить прежние цвета тем из app.css */
:root, body, body[data-theme], body[data-theme="light"], body[data-theme="dark"], body:not([data-theme]) {
  --bg: var(--md-surface);
  --card: color-mix(in srgb, var(--md-surface-container-low) 90%, transparent);
  --text: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --line: var(--md-outline-variant);
  --accent: var(--md-primary);
  --accent-text: var(--md-on-primary);
  --warn: var(--md-error);
  --field: var(--md-surface-container-highest);
  /* Формы M3 */
  --md-shape-xs: 4px; --md-shape-s: 8px; --md-shape-m: 12px; --md-shape-l: 16px;
  --md-shape-xl: 28px; --md-shape-full: 999px;
  /* Слой состояния: наведение 8 %, нажатие 12 % */
  --md-hover: 8%; --md-press: 12%;
  --md-elev-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
  --md-elev-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
  --md-elev-3: 0 4px 8px 3px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .3);
}

/* ------------------------------ ШРИФТ ------------------------------
   Roboto и шкала M3: body-large 16/24, title-large 22/28, label-large 14/20 */
body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  font-size: 16px; line-height: 24px; letter-spacing: .5px;
  color: var(--md-on-surface);
}
h1, h2, h3, .page-title { letter-spacing: 0; font-weight: 500; }
.page-title { font-size: 22px; line-height: 28px; }
h2 { font-size: 22px; line-height: 28px; }
h3 { font-size: 16px; line-height: 24px; letter-spacing: .15px; }
.facts { color: var(--md-on-surface-variant); font-size: 14px; line-height: 20px; letter-spacing: .25px; }
small { letter-spacing: .4px; }

/* ------------------------- ВЕРХНЯЯ ПАНЕЛЬ -------------------------
   Small top app bar M3: закреплена сверху, «назад» — стрелкой; при прокрутке
   длинной страницы назад и настройки всегда под рукой */
main { --pad: 16px; padding-top: 0 !important; padding-left: var(--pad) !important; padding-right: var(--pad) !important; }
@media (max-width: 560px) { main { --pad: 10px; } }
@media (max-height: 500px) and (orientation: landscape) { main { --pad: 10px; } }
.bar {
  position: sticky; top: 0; z-index: 40;
  margin: 0 calc(-1 * var(--pad)) 12px; padding: 8px 12px; min-height: 64px;
  border-radius: 0 0 var(--md-shape-l) var(--md-shape-l);
  background: color-mix(in srgb, var(--md-surface-container) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-variant) 60%, transparent);
}
.bar a.back, .bar .btn.back {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px;
  border: 0; border-radius: var(--md-shape-full); background: transparent;
  color: var(--md-on-surface); font: 500 16px/24px "Roboto", system-ui, sans-serif; letter-spacing: .15px;
  max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar a.back::before {
  content: ""; flex: none; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--icon-back) center / 24px no-repeat; mask: var(--icon-back) center / 24px no-repeat;
}
.bar a.back:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.bar button.gear {
  width: 48px; height: 48px; border: 0; border-radius: var(--md-shape-full);
  background: transparent; color: var(--md-on-surface-variant);
}
.bar button.gear:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.gear-menu {
  border-radius: var(--md-shape-xs); padding: 8px 0; min-width: 240px;
  background: var(--md-surface-container); border: 0; box-shadow: var(--md-elev-2);
}
.bar .gear-menu .gear-item { border-radius: 0; height: 48px; padding: 0 16px; font-size: 16px; }
.bar .gear-menu .gear-item:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
@media (max-width: 560px) { .bar { margin-bottom: 10px; padding: 4px 6px; min-height: 56px; border-radius: 0; } }
@media (max-height: 500px) and (orientation: landscape) { .bar { min-height: 48px; padding: 2px 8px; } }

/* ------------------------------ КНОПКИ ------------------------------
   Filled (главная), outlined (.plain), tonal (плитки, меню) — высота 40,
   форма «таблетка», подпись label-large 14/20, слой состояния */
.btn {
  min-height: 40px; padding: 10px 24px; border-radius: var(--md-shape-full);
  background: var(--md-primary); color: var(--md-on-primary); border: 0;
  font: 500 14px/20px "Roboto", system-ui, sans-serif; letter-spacing: .1px;
  box-shadow: none; transition: box-shadow .2s, background-color .2s;
}
.btn:hover { background: color-mix(in srgb, var(--md-on-primary) var(--md-hover), var(--md-primary)); box-shadow: var(--md-elev-1); }
.btn:active { background: color-mix(in srgb, var(--md-on-primary) var(--md-press), var(--md-primary)); box-shadow: none; }
.btn.plain {
  background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline);
}
.btn.plain:hover { background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); box-shadow: none; }
.btn.small { min-height: 32px; padding: 6px 16px; font-size: 14px; }
.btn:disabled { background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); color: color-mix(in srgb, var(--md-on-surface) 38%, transparent); border-color: transparent; box-shadow: none; opacity: 1; }
.btn:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--md-primary); outline-offset: 2px;
}

/* ------------------------------ КАРТОЧКИ ------------------------------ */
.card {
  background: var(--card); border: 0; border-radius: var(--md-shape-l);
  box-shadow: var(--md-elev-1);
}
.sheet-body.card, .sheet .card { border-radius: var(--md-shape-xl); background: var(--md-surface-container-high); box-shadow: var(--md-elev-3); }
.sheet { background: color-mix(in srgb, var(--md-scrim) 40%, transparent); }
.close { border-radius: var(--md-shape-full); border: 0; background: transparent; color: var(--md-on-surface-variant); }
.close:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }

/* ------------------------------ ПОЛЯ ВВОДА ------------------------------
   Outlined text field M3: форма extra-small (4), рамка outline, в фокусе —
   primary толщиной 2; поиск — search bar M3: таблетка на surface-container-high */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea {
  border-radius: var(--md-shape-xs) !important; border: 1px solid var(--md-outline) !important;
  background: transparent !important; color: var(--md-on-surface) !important;
  font-family: "Roboto", system-ui, sans-serif; font-size: 16px; letter-spacing: .5px;
  min-height: 48px;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
select:focus, textarea:focus {
  border-color: var(--md-primary) !important; box-shadow: inset 0 0 0 1px var(--md-primary); outline: none;
}
select option { background: var(--md-surface-container); color: var(--md-on-surface); }
input.search, #m-search, .search {
  border-radius: var(--md-shape-full) !important; border: 0 !important;
  background: var(--md-surface-container-high) !important; padding-inline: 20px !important; min-height: 48px;
}
input.search:focus, .search:focus { box-shadow: inset 0 0 0 2px var(--md-primary); }
label { color: var(--md-on-surface-variant); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--md-primary); }
input.bad { border-color: var(--md-error) !important; }
.message { color: var(--md-error); font-size: 14px; letter-spacing: .25px; }
.message.good { color: var(--md-primary); }

/* ------------------------------ ЧИПЫ И ВКЛАДКИ ------------------------------
   Filter chip M3: высота 32, форма small (8), выбранный — secondary-container */
.tab, .chips button, .seg button, .fav-toggle {
  min-height: 32px; border-radius: var(--md-shape-s) !important; padding: 6px 16px;
  border: 1px solid var(--md-outline) !important; background: transparent !important;
  color: var(--md-on-surface-variant) !important; font: 500 14px/20px "Roboto", system-ui, sans-serif; letter-spacing: .1px;
}
.tab.on, .seg button.on, .fav-toggle.on, .level-chips button.on {
  background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important;
  border-color: transparent !important;
}
.fav-toggle { min-height: 48px; }

/* ------------------------------ СПИСКИ ------------------------------
   List item M3: строки без рамок на поверхности, выбранная — secondary-container */
.rows li {
  border: 0 !important; border-radius: var(--md-shape-m);
  background: var(--md-surface-container-low); min-height: 56px;
}
.rows li:hover { background: color-mix(in srgb, var(--md-on-surface) 5%, var(--md-surface-container-low)); }
.rows li.track.playing { background: var(--md-secondary-container); box-shadow: none; }
.rows li.track.playing .who b { color: var(--md-on-secondary-container); }
.rows img { border-radius: var(--md-shape-full); }
.rows li.track img { border-radius: var(--md-shape-s); }
.c-card, .menu-item, .tile {
  border: 0 !important; background: var(--md-surface-container-high) !important;
  border-radius: var(--md-shape-l) !important; box-shadow: none;
}
.c-card:hover, .menu-item:not(.locked):hover, .tile:hover {
  background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), var(--md-surface-container-high)) !important;
  transform: none; box-shadow: var(--md-elev-1);
}
.tour-open { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.tour-open small { color: var(--md-on-primary-container) !important; opacity: .85; }

/* ------------------------------ ЗНАЧКИ ------------------------------
   Material Symbols (Apache 2.0) — рисунком-маской, цвет берут от текста.
   Без сети шрифт значков не нужен: они вшиты прямо сюда */
:root {
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
  --icon-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
  --icon-music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E");
  --icon-tree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z'/%3E%3C/svg%3E");
  --icon-school: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");
  --icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E");
  --icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E");
  --icon-public: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

/* ------------------------------ ГЛАВНАЯ ------------------------------
   Кнопки разделов — tonal-карточки M3 со значком над подписью; «Выйти» и
   rustamusman.com — outlined; «Мой профиль» — filled tonal во всю ширину */
.actions { gap: 12px; }
.actions .btn {
  flex-direction: column; gap: 8px; min-height: 96px; padding: 14px 10px;
  border-radius: var(--md-shape-l); background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-size: 14px; line-height: 20px; box-shadow: none;
}
.actions .btn:hover { background: color-mix(in srgb, var(--md-on-secondary-container) var(--md-hover), var(--md-secondary-container)); box-shadow: var(--md-elev-1); }
.actions .btn.plain { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline-variant); }
.actions .btn.wide-row { flex-direction: row; min-height: 56px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.actions .btn::before {
  content: ""; width: 28px; height: 28px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
#friends-open { --ic: var(--icon-group); }
#living-open { --ic: var(--icon-heart); }
#talk { --ic: var(--icon-video); }
#leisure-open { --ic: var(--icon-music); }
/* «Досуг» — своя картинка Рустама (05.10.2026): золотые ферзь и нота. Цветная,
   поэтому фоном, а не маской одним цветом, как остальные значки */
#leisure-open::before { background: url("/web/icons/leisure.png") center / contain no-repeat;
  -webkit-mask: none; mask: none; width: 40px; height: 40px; }
#family-open { --ic: var(--icon-tree); }
#school-open { --ic: var(--icon-school); }
#messages-open { --ic: var(--icon-mail); position: relative; }
#logout { --ic: var(--icon-logout); }
.actions .site-link { --ic: var(--icon-public); }
#profile-btn { --ic: var(--icon-person); }
#voice-go { --ic: var(--icon-mic); }
.me-chip {
  height: 40px; padding: 4px 16px 4px 4px !important; border: 0 !important;
  background: var(--md-surface-container-high) !important; color: var(--md-on-surface) !important;
}
#in .card { background: transparent; box-shadow: none; padding: 0; }
.counts { color: var(--md-on-surface-variant); font-size: 14px; }
@media (max-width: 560px) {
  .actions { gap: 8px; }
  .actions .btn { min-height: 84px; padding: 10px 6px; font-size: 13px; line-height: 17px; gap: 6px; }
  .actions .btn::before { width: 24px; height: 24px; }
  .actions .btn.wide-row { min-height: 52px; }
}
@media (max-width: 300px) {
  .actions .btn { min-height: 72px; font-size: 11px; line-height: 14px; }
  .actions .btn::before { width: 20px; height: 20px; }
}

/* ------------------------------ ВХОД ------------------------------ */
.sign { border-radius: var(--md-shape-xl); background: var(--md-surface-container-low); }
.sign h1 { font-size: 24px; line-height: 32px; font-weight: 400; }
.btn.wide { min-height: 48px; }
.switch button { color: var(--md-primary); font-weight: 500; }
.tour-link { border: 1px solid var(--md-outline) !important; }

/* ------------------------------ ПЛЕЕР И ШАХМАТЫ ------------------------------ */
.player { background: var(--md-surface-container); border-top: 0; box-shadow: var(--md-elev-2); }
.player button { border: 0 !important; background: transparent !important; color: var(--md-on-surface-variant); }
.player button:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent) !important; }
#p-play { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; border-radius: var(--md-shape-l) !important; }
.player .p-tool { color: var(--md-primary); }
.chess-status { border-radius: var(--md-shape-m); border: 0; background: var(--md-surface-container-high); }
.chess-status.me { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.chess-status.check { background: var(--md-error-container); color: var(--md-on-error-container); }
.chess-status.good { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.player-bar { border-radius: var(--md-shape-m); }
.player-bar.turn { background: var(--md-secondary-container); }
.pb-clock { border-radius: var(--md-shape-s); border: 0; background: var(--md-surface-container-highest); }
.pb-clock.running { background: var(--md-primary); color: var(--md-on-primary); }
.guest-bar { border: 0; border-radius: var(--md-shape-m); background: var(--md-tertiary-container); }
.guest-bar span { color: var(--md-on-tertiary-container); }
.c-badge { border-radius: var(--md-shape-s); background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Поправки после проверки (01.10.2026) */
.actions { grid-auto-rows: auto; }
.actions .btn.wide-row { min-height: 56px !important; }
.tour-link, .more .btn { background: transparent !important; color: var(--md-primary) !important; border: 1px solid var(--md-outline) !important; }
.filters .search, #m-search { min-width: 0; width: 100%; }
@media (max-width: 300px) { input.search, #m-search, .search { padding-inline: 14px !important; } }
.player-bottom input[type=range] { min-width: 0; }
@media (max-width: 300px) { #p-volume { display: none; } }

/* Предложение включить звонки при закрытой вкладке (02.10.2026) */
.push-offer {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px;
  border-radius: var(--md-shape-l); background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
}
.push-offer .push-icon { font-size: 22px; flex: none; }
.push-offer .push-text { flex: 1; font-size: 14px; line-height: 20px; }
.push-offer .btn { flex: none; }
@media (max-width: 420px) { .push-offer { flex-wrap: wrap; } .push-offer .btn { width: 100%; } }

/* Камера в «Моём профиле» (03.10.2026) */
.profile .me { flex-wrap: wrap; }
.cam-box { display: grid; gap: 10px; margin: 8px 0 4px; }
.cam-box video { width: 100%; max-width: 420px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--md-shape-l); background: #000; transform: scaleX(-1); }

/* ======================= ДОСТУПНОСТЬ (04.10.2026) =======================
   Шаг 1 плана «IlmNur для тех, кто плохо видит или слышит»: крупный режим,
   звонок светом, всё звучащее — ещё и видно, заметный фокус клавиатуры */

/* Галочка у «Крупно» в шестерёнке */
.gear-check { margin-inline-start: auto; font-weight: 700; color: var(--md-primary); }

/* Надпись к звуку: ход соперника, «время вышло», конец песни */
.sound-sign {
  position: fixed; top: 76px; left: 50%; z-index: 90; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(92vw, 560px);
  padding: 12px 20px; border-radius: var(--md-shape-l);
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  font-size: 17px; line-height: 24px; font-weight: 500; box-shadow: var(--md-elev-3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.sound-sign.on { opacity: 1; transform: translate(-50%, 0); }
.sound-sign-icon { font-size: 26px; line-height: 1; }

/* Вызов: карточка крупнее и поверх верхней строки; экран мигает рамкой раз
   в секунду (не чаще трёх вспышек в секунду — правило WCAG об эпилепсии) */
.call { z-index: 97; max-width: 520px; padding: 20px; border-width: 3px; }
.call img { width: 88px; height: 88px; border-radius: var(--md-shape-l); }
.call p { font-size: 22px; line-height: 30px; font-weight: 700; }
.call-buttons .btn { min-height: 56px; font-size: 18px; }
html.ringing body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  border: 14px solid var(--md-error);
  box-shadow: inset 0 0 90px 30px color-mix(in srgb, var(--md-error) 45%, transparent);
  animation: ring-flash 1s ease-in-out infinite;
}
@keyframes ring-flash { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { html.ringing body::after { animation: none; } }

/* Фокус клавиатуры — толстой рамкой, на клетке доски — внутри клетки */
.board .sq:focus-visible { outline: 4px solid #1565ff; outline-offset: -4px; z-index: 2; }
.rows li[role=button]:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* --------------------------- КРУПНЫЙ РЕЖИМ ---------------------------
   В шестерёнке «Крупно». Всё в полтора раза крупнее (zoom — как
   увеличение браузера: порядок на экране сохраняется, строки переносятся),
   одна колонка, два цвета: днём чёрное на жёлтом, ночью белое и жёлтое
   на чёрном. Картинка фона и полупрозрачность убраны — они съедают контраст */
html.large { zoom: 1.5; }
@media (max-width: 560px) { html.large { zoom: 1.35; } }

html.large body, html.large body[data-theme="light"] {
  --md-primary: #000000; --md-on-primary: #ffe500;
  --md-primary-container: #000000; --md-on-primary-container: #ffe500;
  --md-secondary-container: #000000; --md-on-secondary-container: #ffe500;
  --md-tertiary-container: #ffffff; --md-on-tertiary-container: #000000;
  --md-error: #b00000; --md-error-container: #ffffff; --md-on-error-container: #b00000;
  --md-surface: #ffe500; --md-on-surface: #000000; --md-on-surface-variant: #000000;
  --md-outline: #000000; --md-outline-variant: #000000;
  --md-surface-container-lowest: #ffe500; --md-surface-container-low: #ffe500;
  --md-surface-container: #ffe500; --md-surface-container-high: #ffe500;
  --md-surface-container-highest: #ffffff;
  --md-inverse-surface: #000000; --md-inverse-on-surface: #ffe500;
}
html.large body[data-theme="dark"] {
  --md-primary: #ffe500; --md-on-primary: #000000;
  --md-primary-container: #ffe500; --md-on-primary-container: #000000;
  --md-secondary-container: #ffe500; --md-on-secondary-container: #000000;
  --md-tertiary-container: #000000; --md-on-tertiary-container: #ffffff;
  --md-error: #ff6b6b; --md-error-container: #000000; --md-on-error-container: #ff6b6b;
  --md-surface: #000000; --md-on-surface: #ffffff; --md-on-surface-variant: #ffffff;
  --md-outline: #ffffff; --md-outline-variant: #ffffff;
  --md-surface-container-lowest: #000000; --md-surface-container-low: #000000;
  --md-surface-container: #000000; --md-surface-container-high: #000000;
  --md-surface-container-highest: #1a1a1a;
  --md-inverse-surface: #ffe500; --md-inverse-on-surface: #000000;
}
html.large body {
  --card: var(--md-surface); --bg: var(--md-surface);
  background: var(--md-surface) !important; background-image: none !important;
  font-weight: 500;
}
html.large .bar, html.large .gear-menu, html.large .call, html.large .player {
  background: var(--md-surface) !important; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.large .bar { border-bottom: 3px solid var(--md-on-surface); }
/* Карточки, строки, плитки — рамкой, а не тенью и оттенком */
html.large .card, html.large .rows li, html.large .c-card, html.large .menu-item,
html.large .tile, html.large .sign, html.large .player, html.large .call,
html.large .sheet-body, html.large .chess-status, html.large .player-bar {
  border: 2px solid var(--md-on-surface) !important; box-shadow: none !important;
}
html.large .rows li:hover, html.large .c-card:hover, html.large .tile:hover, html.large .menu-item:hover {
  outline: 3px solid var(--md-on-surface); outline-offset: 0;
}
html.large .muted, html.large small, html.large .facts, html.large label, html.large .counts,
html.large .who span, html.large .pb-name span { color: var(--md-on-surface) !important; opacity: 1 !important; }
html.large .btn.plain, html.large .tab, html.large .chips button, html.large .seg button {
  border-width: 2px !important; border-color: var(--md-on-surface) !important; color: var(--md-on-surface) !important;
}
html.large :focus-visible { outline: 4px solid var(--md-on-surface) !important; outline-offset: 3px !important; }
html.large .board .sq:focus-visible { outline: 5px solid #1565ff !important; outline-offset: -5px !important; }
html.large .message { color: var(--md-error); font-weight: 700; }
html.large .dot.on { box-shadow: 0 0 0 2px var(--md-on-surface); }

/* Одна колонка: разделы, плитки, карточки, формы */
html.large .actions, html.large .tiles, html.large .c-grid, html.large .c-cards,
html.large .tour-grid, html.large .music-layout, html.large .fe-layout,
html.large .sch-layout, html.large .person-form, html.large .filters {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.large .actions .btn { flex-direction: row; justify-content: flex-start; min-height: 64px; padding: 12px 20px; text-align: start; }
html.large .person-form .ph { grid-column: auto; }

/* Шахматы: чей ход — толстой рамкой, а не заливкой (заливка съедала имя) */
html.large .player-bar.turn { background: var(--md-surface) !important; border-width: 5px !important; }
html.large .player-bar .pb-name b { color: var(--md-on-surface) !important; }

/* Компьютер, шахматы в крупном режиме: страница увеличена в 1,5 раза, а
   ширина и высота окна (vw, dvh) — нет; делим их на то же 1,5, иначе доска
   и столбцы вылезают за край */
@media (min-width: 1000px) and (min-height: 501px) {
  html.large .chess-wrap { gap: 16px; }
  html.large .board-col { width: min(calc(100vw / 1.5 - 600px), calc(100dvh / 1.5 - 190px)) !important; }
  html.large .history-col { flex: 0 1 170px; min-width: 140px; max-height: calc(100dvh / 1.5 - 120px); }
  html.large .chess-side { flex: 0 1 320px; min-width: 270px; max-height: calc(100dvh / 1.5 - 120px); }
}
/* Поиск: рамка и подсказка тем же цветом, что текст, — серое на чёрном не видно */
html.large input.search, html.large #m-search, html.large .search { border: 2px solid var(--md-on-surface) !important; }
html.large ::placeholder { color: var(--md-on-surface); opacity: .85; }