:root {
  --glass-border: rgba(228, 236, 240, 0.28);
  --glass-edge: rgba(255, 255, 255, 0.44);
  --glass-fill: rgba(198, 208, 215, 0.14);
  --glass-fill-strong: rgba(214, 222, 228, 0.23);
  --glass-surface: rgba(32, 36, 39, 0.82);
  --glass-sheet: rgba(37, 41, 44, 0.9);
  --glass-sheen: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.025) 52%, rgba(255, 255, 255, 0.07));
  --glass-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 5px 14px rgba(0, 0, 0, 0.22);
}
:root[data-theme="light"] {
  --glass-border: rgba(85, 100, 110, 0.25);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-fill: rgba(255, 255, 255, 0.56);
  --glass-fill-strong: rgba(255, 255, 255, 0.82);
  --glass-surface: rgba(234, 239, 242, 0.85);
  --glass-sheet: rgba(242, 245, 247, 0.93);
  --glass-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(100, 115, 125, 0.12), 0 5px 14px rgba(30, 45, 55, 0.1);
}

/* Keep the two content columns flat; glass is a material, not another card layer. */
:root :is(.library-panel, .import-panel, .board-stage) {
  background: var(--glass-sheen), var(--glass-surface);
  border-color: var(--glass-border);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}
:root :is(.games-menu, .settings-sheet, .appearance-sheet, .player-bio-sheet, .opening-bio-sheet, .forum-page dialog) {
  background: var(--glass-sheen), var(--glass-sheet);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow), 0 24px 64px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  backdrop-filter: blur(32px) saturate(150%);
}

:root :is(.playback-controls .glass-icon, .action-icon, .toolbar-icon, .menu-close-button, .menu-back-button, .full-glass-button, .game-source-button, .library-sort button, .appearance-tabs button, .forum-page button) {
  border: 1px solid var(--glass-border);
  background: var(--glass-sheen), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.toolbar-actions .toolbar-button .toolbar-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.toolbar-actions .toolbar-button .toolbar-icon .sf-symbol {
  display: block;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: var(--toolbar-symbol);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Offset copies of the original mask add weight without changing its size or color. */
.toolbar-actions .forum-button .sf-person-3 {
  -webkit-mask-image: var(--symbol), var(--symbol), var(--symbol), var(--symbol), var(--symbol);
  mask-image: var(--symbol), var(--symbol), var(--symbol), var(--symbol), var(--symbol);
  -webkit-mask-position: center, calc(50% - 0.5px) 50%, calc(50% + 0.5px) 50%, 50% calc(50% - 0.5px), 50% calc(50% + 0.5px);
  mask-position: center, calc(50% - 0.5px) 50%, calc(50% + 0.5px) 50%, 50% calc(50% - 0.5px), 50% calc(50% + 0.5px);
}
:root :is(.full-glass-button, .game-source-button, .library-sort button, .forum-page button) { border-radius: 8px; }
:root :is(.menu-close-button, .menu-back-button, .forum-close) { border-radius: 50%; }
:root :is(.search-control, .fen-box, .pgn-move-list) {
  background: var(--glass-sheen), var(--glass-fill);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
:root :is(.game-row, .grandmaster-row, .opening-row) {
  background: var(--glass-sheen), var(--glass-fill);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
:root .game-row.selected {
  background: linear-gradient(145deg, rgba(80, 215, 128, 0.2), rgba(80, 215, 128, 0.09)), var(--glass-surface);
  border-color: var(--accent-green);
  box-shadow: inset 4px 0 0 var(--accent-green), inset 0 1px 0 var(--glass-edge);
}
:root :is(.library-sort button, .appearance-tabs button, .forum-page button)[aria-pressed="true"] {
  border-color: var(--accent-green);
  background: linear-gradient(145deg, rgba(65, 175, 110, 0.36), rgba(65, 175, 110, 0.18)), var(--glass-fill);
  color: var(--app-text);
}
:root :is(.settings-row select, .inline-fields input, .menu-lichess-panel input:not([type="radio"]), .menu-lichess-panel select, .forum-page input, .forum-page textarea, .forum-page select) {
  background: var(--glass-fill);
  color: var(--app-text);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.13);
}
select option { background: var(--app-panel); color: var(--app-text); }
.settings-slider { accent-color: var(--accent-green); }
.forum-page .forum-header { background: var(--glass-sheen), var(--glass-surface); }
:root .forum-page button.forum-primary,
:root .forum-page button.forum-primary:hover:not(:disabled) {
  border-color: #5ba575;
  background: linear-gradient(145deg, #39825a, #245d3e);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
:root .pgn-primary-button.full-glass-button,
:root .pgn-primary-button.full-glass-button:hover:not(:disabled) {
  border-color: #5ba575;
  background: linear-gradient(145deg, #39825a, #245d3e);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
:root[data-theme="light"] .forum-page button:not(.forum-primary) { color: var(--app-text); }
.forum-topic:hover { background: var(--glass-fill); }
:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}
@media (hover: hover) {
  :root :is(.playback-controls .glass-icon, .menu-close-button, .menu-back-button, .full-glass-button, .game-source-button, .library-sort button, .forum-page button):hover:not(:disabled),
  :root .action-button:hover .action-icon,
  :root .toolbar-button:hover .toolbar-icon {
    background-color: var(--glass-fill-strong);
    border-color: var(--glass-edge);
  }
}
:root :is(.playback-controls .glass-icon, .full-glass-button, .menu-close-button, .forum-page button):active:not(:disabled),
.action-button:active .action-icon, .toolbar-button:active .toolbar-icon { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  :root :is(.glass-icon, .action-icon, .toolbar-icon, .menu-close-button, .menu-back-button, .full-glass-button, .game-source-button, .library-sort button, .forum-page button) { transition: none; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-fill: var(--app-panel-2); --glass-fill-strong: var(--app-panel); --glass-surface: var(--app-panel); --glass-sheet: var(--app-panel); --glass-sheen: linear-gradient(transparent, transparent); }
}