:root {
  --app-bg: #020303;
  --app-panel: #151719;
  --app-panel-2: #202225;
  --app-text: #f7f7f4;
  --app-muted: #a8abb2;
  --app-soft: #6f7479;
  --toolbar-symbol: #d1d5d8;
  --board-light: #7d997f;
  --board-dark: #4c6b58;
  --board-mark: #5aa5bd;
  --glass-fill: rgba(255, 255, 255, 0.16);
  --glass-fill-strong: rgba(255, 255, 255, 0.24);
  --glass-border: rgba(255, 255, 255, 0.2);
  --accent-blue: #22a7ff;
  --accent-green: #46e07b;
  --library-width: 360px;
  --notation-width: 320px;
  --board-max-size: 560px;
  --control-gap: clamp(0.45rem, 1.2vw, 0.8rem);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.site-frame {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--app-bg);
}

.site-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1560px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0 1rem 1rem;
  overflow: hidden;
}

.app-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left brand right";
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
}

.brand-lockup {
  --brand-size: 64px;
  grid-area: brand;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

@font-face {
  font-family: "ChessIQ Cochin Bold";
  src: local("Cochin Bold"), local("Cochin-Bold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.brand-lockup h1 {
  margin: 0;
  font-family: "ChessIQ Cochin Bold", Cochin, Georgia, serif;
  font-size: calc(var(--brand-size) * 1.0875);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .brand-lockup { --brand-size: 48px; }
}

@media (max-width: 360px) {
  .brand-lockup { --brand-size: 40px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.toolbar-left { grid-area: left; justify-content: flex-start; }
.toolbar-right { grid-area: right; }

.toolbar-actions .glass-icon {
  width: 56px;
  height: 56px;
  font-size: 1.8rem;
}

.toolbar-actions .toolbar-button {
  display: grid;
  width: 74px;
  height: auto;
  min-height: 74px;
  place-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.toolbar-actions .toolbar-button .sf-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--toolbar-symbol);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(150%);
  font-size: 1.55rem;
}

.toolbar-actions .toolbar-label {
  width: auto;
  height: auto;
  color: var(--app-text);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.toolbar-actions .toolbar-button:hover {
  background: transparent;
}

.toolbar-actions .toolbar-button:hover .sf-symbol {
  background: var(--app-text);
}

.study-shell {
  --library-track: minmax(220px, var(--library-width));
  --notation-track: minmax(220px, var(--notation-width));
  display: grid;
  grid-template-columns:
    var(--library-track) 10px minmax(360px, 1fr) 10px var(--notation-track);
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
}

.study-shell.library-collapsed {
  --library-track: 0px;
}

.study-shell.notation-collapsed {
  --notation-track: 0px;
}

.library-panel,
.import-panel,
.board-stage {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(19, 21, 23, 0.78);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px) saturate(140%);
}

.library-panel,
.import-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  padding: 1rem;
}

.import-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.study-shell.library-collapsed .library-panel,
.study-shell.notation-collapsed .import-panel {
  overflow: hidden;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

.panel-resizer {
  position: relative;
  min-height: 0;
  cursor: col-resize;
  touch-action: none;
}

.panel-resizer::before {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  content: "";
  transform: translateX(-50%);
  transition:
    background 160ms ease,
    width 160ms ease;
}

.panel-resizer:hover::before,
.panel-resizer.is-dragging::before {
  width: 4px;
  background: rgba(34, 167, 255, 0.72);
}

body.resizing-panels {
  cursor: col-resize;
  user-select: none;
}

body.resizing-board {
  cursor: nwse-resize;
  user-select: none;
}

.busy-indicator {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  display: inline-flex;
  max-width: min(520px, calc(100vw - 2rem));
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    rgba(26, 28, 31, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 0.72rem 1rem;
  color: var(--app-text);
  font-size: 0.92rem;
  line-height: 1.1;
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(28px) saturate(150%);
}

.busy-indicator[hidden] {
  display: none;
}

.busy-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-top-color: var(--accent-green);
  border-radius: 999px;
  animation: busy-spin 850ms linear infinite;
}

@keyframes busy-spin {
  to {
    transform: rotate(360deg);
  }
}

.board-stage {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(0.55rem, 1.25vw, 1rem);
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.panel-heading h2 {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0;
}

.library-panel .panel-heading { flex-wrap: wrap; gap: 0.65rem; }
.library-heading-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; }
.library-clear { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 8px; border: 1px solid var(--glass-border); border-radius: 50%; background: var(--glass-fill); color: var(--app-text); cursor: pointer; }
.library-clear .sf-symbol { width: 20px; height: 20px; }
.library-clear:disabled { opacity: 0.35; cursor: default; }
.library-clear:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.library-empty { color: var(--app-muted); font-size: 0.875rem; margin: 16px 0; }
#library-storage-notice { flex: 0 0 auto; color: var(--app-text); border-top: 1px solid var(--glass-border); padding-top: 10px; font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; }
#library-storage-notice[hidden], #clear-library-error:empty { display: none; }
#clear-library-confirm { color: #fff; background: #a33131; border-color: #a33131; }
#clear-library-dialog button:disabled { opacity: 0.5; cursor: default; }
.library-sort { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.library-sort button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.5rem;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: var(--glass-fill);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.library-sort button span { width: 0.75rem; }
.library-sort button[aria-pressed="true"] { background: #365c46; border-color: #71d593; }
.library-sort button:focus-visible { outline: 2px solid #71d593; outline-offset: 2px; }

.eyebrow {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muted-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--app-muted);
  font-size: 1.35rem;
  line-height: 1;
}

.sf-symbol {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-image: var(--symbol);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--symbol);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.sf-rotated {
  transform: rotate(180deg);
}

.sf-slider-horizontal-3 {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M9 17h18M38 17h17M9 32h7M27 32h28M9 47h31M51 47h4'/%3E%3Ccircle cx='33' cy='17' r='5'/%3E%3Ccircle cx='21' cy='32' r='5'/%3E%3Ccircle cx='46' cy='47' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-questionmark-circle {
  --symbol: url("/icons/questionmark.circle.png");
}

.sf-puzzlepiece {
  --symbol: url("/icons/puzzlepiece.png");
}

.sf-person-3 {
  --symbol: url("/icons/person.3.png");
}

.sf-cpu {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='17' width='30' height='30' rx='5'/%3E%3Crect x='25' y='25' width='14' height='14' rx='2'/%3E%3Cpath d='M24 5v8M32 5v8M40 5v8M24 51v8M32 51v8M40 51v8M5 24h8M5 32h8M5 40h8M51 24h8M51 32h8M51 40h8'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-backward-end-fill {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='9' y='13' width='6' height='38' rx='3' fill='black'/%3E%3Cpath d='M51 13 31 32l20 19V13ZM31 13 11 32l20 19V13Z' fill='black'/%3E%3C/svg%3E");
}

.sf-forward-end-fill {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='49' y='13' width='6' height='38' rx='3' fill='black'/%3E%3Cpath d='M13 13 33 32 13 51V13ZM33 13l20 19-20 19V13Z' fill='black'/%3E%3C/svg%3E");
}

.sf-play-fill {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M19 12v40c0 4 4 6 7 4l31-20c3-2 3-6 0-8L26 8c-3-2-7 0-7 4Z' fill='black'/%3E%3C/svg%3E");
}

.sf-play-circle {
  --symbol: url("/icons/play.circle.png");
}

.sf-stop-circle {
  --symbol: url("/icons/stop.circle.png");
}
.sf-stop-fill { --symbol: url('/icons/stop.fill.png'); }
.sf-square-circle { --symbol: url('/icons/square.circle.png'); }

.sf-doc-on-doc {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M24 7h21l10 10v33H24V7Z'/%3E%3Cpath d='M45 7v12h10'/%3E%3Cpath d='M10 19h9v36h31v5H10V19Z'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-document-on-document {
  --symbol: url("/icons/document.on.document.png");
}

.sf-chart-xyaxis-line {
  --symbol: url("/icons/chart.xyaxis.line.png");
}

.sf-arrow-trianglehead-2-clockwise-rotate-90 {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 22a20 20 0 0 1 30-4'/%3E%3Cpath d='M47 18h-12'/%3E%3Cpath d='M47 18v-12'/%3E%3Cpath d='M47 42a20 20 0 0 1-30 4'/%3E%3Cpath d='M17 46h12'/%3E%3Cpath d='M17 46v12'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-arrow-clockwise-circle {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M43 20a16 16 0 1 0 3 18'/%3E%3Cpath d='M43 20h-12'/%3E%3Cpath d='M43 20V8'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-arrow-up-arrow-down-circle-fill {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4a28 28 0 1 0 0 56 28 28 0 0 0 0-56Zm-8 11 9 9a3 3 0 0 1-4 4l-4-4v21a3 3 0 0 1-6 0V24l-4 4a3 3 0 0 1-4-4l9-9a3 3 0 0 1 4 0Zm28 25-9 9a3 3 0 0 1-4 0l-9-9a3 3 0 0 1 4-4l4 4V19a3 3 0 0 1 6 0v21l4-4a3 3 0 0 1 4 4Z' fill='black'/%3E%3C/svg%3E");
}

.sf-arrow-up-arrow-down {
  --symbol: url("/icons/arrow.up.arrow.down.png");
}

.sf-book {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 52c-5-5-13-8-24-8V10c11 0 19 3 24 8v34Z'/%3E%3Cpath d='M32 52c5-5 13-8 24-8V10c-11 0-19 3-24 8v34Z'/%3E%3Cpath d='M32 18v34'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-crown {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 47h44l3-28-15 12-10-18-10 18L7 19l3 28Z'/%3E%3Cpath d='M14 55h36'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-folder {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M7 18c0-4 3-7 7-7h13l7 8h16c4 0 7 3 7 7v21c0 4-3 7-7 7H14c-4 0-7-3-7-7V18Z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sf-xmark {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M16 16l32 32M48 16 16 48'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-magnifyingglass {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Ccircle cx='28' cy='28' r='18'/%3E%3Cpath d='m42 42 14 14'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-chevron-left {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M40 12 20 32l20 20' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sf-chevron-right {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='m24 12 20 20-20 20' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sf-person-circle {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='25'/%3E%3Ccircle cx='32' cy='25' r='8'/%3E%3Cpath d='M18 49c3-10 9-15 14-15s11 5 14 15'/%3E%3C/g%3E%3C/svg%3E");
}

.sf-info-circle {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='25'/%3E%3Cpath d='M32 29v17'/%3E%3C/g%3E%3Ccircle cx='32' cy='19' r='3.8' fill='black'/%3E%3C/svg%3E");
}

.sf-globe {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='25'/%3E%3Cpath d='M7 32h50M32 7c8 7 12 15 12 25s-4 18-12 25M32 7c-8 7-12 15-12 25s4 18 12 25'/%3E%3C/g%3E%3C/svg%3E");
}

.button-logo {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.search-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 0 0.8rem;
}

.search-clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--app-muted);
  cursor: pointer;
}

.search-clear-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--app-text);
}

.search-clear-button[hidden] {
  display: none;
}

.search-clear-button .sf-symbol {
  width: 0.72rem;
  height: 0.72rem;
}

.search-control .sf-symbol {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--app-muted);
}

.search-control input,
.inline-fields input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--app-text);
  outline: none;
}

.search-control input::placeholder,
.inline-fields input::placeholder {
  color: var(--app-soft);
}

.game-list {
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  padding-right: 0.2rem;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.games-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.games-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50;
  display: flex;
  width: min(410px, calc(100vw - 2rem));
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(22, 24, 27, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 30px 80px rgba(0, 0, 0, 0.48);
  padding: 1.05rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 18px)) scale(0.96);
  transition:
    opacity 200ms ease,
    transform 220ms ease;
  backdrop-filter: blur(28px) saturate(145%);
}

.games-menu.grandmaster-mode {
  width: min(540px, calc(100vw - 2rem));
  max-height: min(84vh, 760px);
  overflow: hidden;
}

.games-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.games-menu-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: 0;
}

.menu-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill);
  color: var(--app-text);
  font-size: 1.9rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.28);
}

.menu-close-button:hover {
  background: var(--glass-fill-strong);
}

.games-source-list {
  display: grid;
  gap: 0.55rem;
}

.game-source-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.7rem;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.game-source-button:hover,
.game-source-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  transform: translateY(-1px);
}

.game-source-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.game-source-button:disabled:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}

.source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 26px rgba(0, 0, 0, 0.24);
  font-size: 1.75rem;
}

.source-icon .sf-symbol,
.source-icon .button-logo {
  width: 62%;
  height: 62%;
  font-size: 1.75rem;
}

.source-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.18rem;
}

.source-copy strong {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-copy span {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-source-list[hidden],
.grandmaster-panel[hidden],
.opening-panel[hidden] {
  display: none;
}

.grandmaster-panel,
.opening-panel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
}

.picker-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.picker-title-row h3 {
  margin: 0.18rem 0 0;
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: 0;
}

.menu-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill);
  color: var(--app-text);
  font-size: 2rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.28);
}

.menu-back-button:hover,
.menu-back-button:focus-visible {
  background: var(--glass-fill-strong);
  outline: none;
}

.menu-close-button .sf-symbol,
.menu-back-button .sf-symbol {
  width: 46%;
  height: 46%;
}

.grandmaster-search-control,
.opening-search-control {
  flex: 0 0 auto;
}

.grandmaster-browser,
.opening-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.35rem;
  gap: 0.6rem;
  min-height: 360px;
  overflow: hidden;
}

.grandmaster-list,
.opening-list {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.2rem;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.opening-browser {
  min-height: 120px;
  height: min(48dvh, 480px);
  flex: 1 1 auto;
}

.opening-index { overflow-y: auto; }
.opening-load-status { flex: 0 0 auto; }
#opening-message { margin: 0; font-size: 0.875rem; line-height: 1.35; }
#opening-progress { display: block; width: 100%; height: 8px; margin: 8px 0; accent-color: var(--accent-green); }
#opening-cancel { margin-top: 8px; }
#opening-progress[hidden], #opening-cancel[hidden] { display: none; }

.grandmaster-section,
.opening-section {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.7rem;
}

.grandmaster-section-heading,
.opening-section-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  background:
    linear-gradient(180deg, rgba(22, 24, 27, 0.96), rgba(22, 24, 27, 0.8));
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.4rem 0 0.2rem;
}

.grandmaster-row,
.opening-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.grandmaster-row:hover,
.grandmaster-row:focus-within,
.opening-row:hover,
.opening-row:focus-within {
  border-color: rgba(70, 224, 123, 0.55);
  background: rgba(70, 224, 123, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.grandmaster-load-button:disabled,
.opening-load-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.grandmaster-row.unavailable,
.opening-row.unavailable {
  opacity: 0.58;
}

.grandmaster-row.unavailable:hover,
.grandmaster-row.unavailable:focus-within,
.opening-row.unavailable:hover,
.opening-row.unavailable:focus-within {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.grandmaster-row strong,
.grandmaster-row-copy span,
.opening-row strong,
.opening-row-copy span {
  display: block;
}

.grandmaster-row strong,
.opening-row strong {
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 560;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grandmaster-row-copy span,
.opening-row-copy span {
  color: var(--app-muted);
  font-size: 0.8rem;
  line-height: 1.25;
}

.grandmaster-load-button,
.opening-load-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  min-height: 62px;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.68rem 0 0.68rem 0.75rem;
  text-align: left;
}

.grandmaster-load-button:focus-visible,
.grandmaster-bio-button:focus-visible,
.opening-load-button:focus-visible,
.opening-bio-button:focus-visible {
  outline: 2px solid rgba(70, 224, 123, 0.7);
  outline-offset: 2px;
}

.grandmaster-row-icon,
.opening-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: var(--app-text);
  font-size: 1.1rem;
}

.grandmaster-row-icon .sf-symbol,
.opening-row-icon .sf-symbol {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--app-text);
}

.grandmaster-row-copy,
.opening-row-copy {
  min-width: 0;
}

.grandmaster-bio-button,
.opening-bio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-right: 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-text);
  font-size: 1.55rem;
}

.grandmaster-bio-button:hover,
.opening-bio-button:hover {
  background: rgba(255, 255, 255, 0.11);
}

.grandmaster-bio-button .sf-symbol,
.opening-bio-button .sf-symbol {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--app-text);
}

.grandmaster-index,
.opening-index {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.08rem;
  min-height: 0;
}

.grandmaster-index button,
.opening-index button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.grandmaster-index button:hover,
.grandmaster-index button:focus-visible,
.opening-index button:hover,
.opening-index button:focus-visible {
  background: var(--glass-fill);
  color: var(--app-text);
  outline: none;
}

.grandmaster-empty,
.opening-empty {
  margin: 2rem 0;
  color: var(--app-muted);
  font-size: 0.92rem;
  text-align: center;
}

.menu-lichess-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
  max-height: calc(100dvh - 10rem);
  overflow-y: auto;
  padding: 0.25rem;
}

.menu-lichess-panel > label,
.lichess-dates label {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.9rem;
}

.menu-lichess-panel select,
.menu-lichess-panel input:not([type="radio"]) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.65rem;
  border: 1px solid var(--app-muted);
  border-radius: 8px;
  background: var(--app-background, #17191a);
  color: var(--app-text);
  font: inherit;
  color-scheme: dark;
}

.lichess-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.lichess-segments legend {
  padding: 0 0 0.5rem;
  font-size: 0.9rem;
}

.lichess-segments label { flex: 1 0 auto; position: relative; }
.lichess-segments input { position: absolute; opacity: 0; }
.lichess-segments span {
  display: block;
  padding: 0.6rem 0.4rem;
  text-align: center;
  border-radius: 6px;
  background: var(--glass-fill);
  font-size: 0.875rem;
}
.lichess-segments input:checked + span { background: #365c46; color: white; }
.lichess-segments input:focus-visible + span { outline: 2px solid #71d593; outline-offset: 2px; }
.lichess-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
#lichess-message { margin: 0; font-size: 0.9rem; color: var(--app-muted); }
#lichess-message:empty { display: none; }

.menu-lichess-panel[hidden] {
  display: none;
}

body.games-menu-open {
  overflow: hidden;
}

body.games-menu-open .games-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.games-menu-open .games-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.player-bio-backdrop,
.opening-bio-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  border: 0;
  background: rgba(0, 0, 0, 0.64);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.player-bio-sheet,
.opening-bio-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 70;
  display: flex;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(88vh, 820px);
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(22, 24, 27, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 34px 86px rgba(0, 0, 0, 0.55);
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 18px)) scale(0.96);
  transition:
    opacity 200ms ease,
    transform 220ms ease;
  backdrop-filter: blur(30px) saturate(145%);
}

body.player-bio-open {
  overflow: hidden;
}

body.player-bio-open .player-bio-backdrop,
body.opening-bio-open .opening-bio-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.player-bio-open .player-bio-sheet,
body.opening-bio-open .opening-bio-sheet {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  border: 0;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.settings-sheet {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  width: min(390px, calc(100vw - 2rem));
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(22, 24, 27, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 34px 86px rgba(0, 0, 0, 0.55);
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 1.5rem));
  transition:
    opacity 200ms ease,
    transform 220ms ease;
  backdrop-filter: blur(30px) saturate(145%);
}

body.settings-open {
  overflow: hidden;
}

body.settings-open .settings-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.settings-open .settings-sheet {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.settings-header,
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-header h2 {
  margin: 0.25rem 0 0;
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}

.settings-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0.9rem;
}

.settings-row label {
  color: var(--app-text);
  font-size: 0.95rem;
  font-weight: 560;
}

.settings-row output {
  color: var(--app-muted);
  font-size: 0.86rem;
}

.settings-slider {
  width: 100%;
  margin-top: 0.9rem;
  accent-color: var(--accent-green);
}

.player-bio-close-row {
  display: flex;
  justify-content: flex-end;
}

.player-bio-image,
.opening-bio-image {
  width: 100%;
  max-height: 340px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.18);
}

.player-bio-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.player-bio-title-row h2 {
  min-width: 0;
  margin: 0;
  color: var(--app-text);
  font-size: clamp(1.35rem, 1vw + 1.1rem, 1.9rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: 0;
}

.player-bio-flag {
  flex: 0 0 auto;
  font-size: 1.55rem;
  line-height: 1;
}

.player-bio-text,
.opening-bio-text {
  overflow-y: auto;
  min-height: 0;
  color: #e2e4e7;
  font-size: 1rem;
  line-height: 1.55;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}

.player-bio-text p,
.opening-bio-text p {
  margin: 0 0 0.9rem;
}

.player-bio-text p:last-child,
.opening-bio-text p:last-child {
  margin-bottom: 0;
}

.player-bio-loading {
  color: var(--app-muted);
}

.player-bio-wikipedia {
  flex: 0 0 auto;
  text-decoration: none;
}

.player-bio-wikipedia[hidden],
.player-bio-image[hidden],
.opening-bio-image[hidden],
.opening-bio-link[hidden] {
  display: none;
}

.player-bio-wikipedia .sf-symbol,
.opening-bio-link .sf-symbol,
.opening-bio-link .button-logo {
  width: 1.25rem;
  height: 1.25rem;
}

.opening-bio-links {
  display: grid;
  gap: 0.65rem;
}

body.opening-bio-open {
  overflow: hidden;
}

.game-row {
  display: flex;
  width: 100%;
  min-height: 66px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem 0.6rem;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.game-row:hover {
  border-color: rgba(70, 224, 123, 0.5);
  background: rgba(70, 224, 123, 0.09);
}

.game-row.selected {
  border-color: rgba(70, 224, 123, 0.75);
  background: rgba(70, 224, 123, 0.13);
  box-shadow: inset 4px 0 0 var(--accent-green);
}

.load-more-games {
  width: 100%;
  grid-column: 1 / -1;
  min-height: 46px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--app-text);
  font-size: 0.9rem;
  font-weight: 650;
}

.load-more-games:hover {
  background: var(--glass-fill);
}

.game-title {
  max-width: 100%;
  overflow: hidden;
  color: var(--app-text);
  font-size: 0.86rem;
  font-weight: 560;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-meta {
  max-width: 100%;
  overflow: hidden;
  margin-top: 0.2rem;
  color: var(--app-muted);
  font-size: 0.72rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-summary {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: 56px;
  flex: 0 0 auto;
  justify-content: center;
  padding-bottom: 0.55rem;
  text-align: center;
}

.game-summary p {
  display: -webkit-box;
  width: 100%;
  max-width: min(620px, calc(100% - 0.4rem));
  overflow: clip;
  margin: 0;
  font-size: clamp(0.86rem, 1vw + 0.56rem, 1.45rem);
  font-weight: 560;
  line-height: 1.14;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.game-summary span {
  display: block;
  max-width: min(620px, calc(100% - 0.4rem));
  overflow: hidden;
  margin-top: 0.3rem;
  color: var(--app-muted);
  font-size: clamp(0.72rem, 0.4vw + 0.68rem, 0.9rem);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-wrap {
  position: relative;
  width: min(100%, calc(100vh - 430px), var(--board-max-size));
  min-width: 320px;
  flex: 0 1 auto;
}

.board-resizer {
  position: absolute;
  right: -7px;
  bottom: -7px;
  z-index: 4;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill-strong);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
  cursor: nwse-resize;
  touch-action: none;
  backdrop-filter: blur(16px) saturate(150%);
}

.board-resizer::before,
.board-resizer::after {
  position: absolute;
  right: 5px;
  bottom: 6px;
  width: 9px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--app-text);
  content: "";
  transform: rotate(-45deg);
  transform-origin: right center;
}

.board-resizer::after {
  right: 7px;
  bottom: 8px;
  width: 5px;
}

.board-resizer:hover,
.board-resizer.is-dragging {
  background: var(--move-highlight-color, var(--accent-blue));
}

.chess-board {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.coordinate-frame { position: relative; width: 100%; min-width: 0; }
.coordinate-frame.coordinates-visible { --coordinate-border: 20px; padding: var(--coordinate-border); background: #fff; box-sizing: border-box; }
.coordinate-labels { display: none; position: absolute; color: #1b2023; font: 600 12px/1 system-ui, sans-serif; pointer-events: none; }
.coordinates-visible > .coordinate-labels { display: grid; }
.coordinate-labels span { display: grid; place-items: center; min-width: 0; min-height: 0; }
.coordinate-top, .coordinate-bottom { left: var(--coordinate-border); right: var(--coordinate-border); height: var(--coordinate-border); grid-template-columns: repeat(8, minmax(0, 1fr)); }
.coordinate-top { top: 0; }
.coordinate-bottom { bottom: 0; }
.coordinate-left, .coordinate-right { top: var(--coordinate-border); bottom: var(--coordinate-border); width: var(--coordinate-border); grid-template-rows: repeat(8, minmax(0, 1fr)); }
.coordinate-left { left: 0; }
.coordinate-right { right: 0; }
.coordinates-visible > .chess-board { border: 0; box-shadow: none; }
.engine-note { color: var(--app-muted); font-size: 0.875rem; line-height: 1.45; margin: 8px 0 16px; }
#computer-form [hidden], .analysis-options [hidden] { display: none; }

.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.light-square {
  background: var(--board-light);
  background-image: var(--board-light-image, none);
  background-size: 100% 100%;
}

.dark-square {
  background: var(--board-dark);
  background-image: var(--board-dark-image, none);
  background-size: 100% 100%;
}

.appearance-backdrop { position: fixed; inset: 0; z-index: 80; background: #0009; border: 0; }
.appearance-sheet {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  background: var(--app-panel);
  color: var(--app-text);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.appearance-sheet[hidden], .appearance-backdrop[hidden] { display: none; }
.appearance-sheet h2 { margin: 0; font-size: 1.35rem; }
.appearance-preview { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: min(300px, 100%); aspect-ratio: 1; justify-self: center; }
.appearance-preview > div { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; }
.appearance-preview img { width: 99%; height: 99%; object-fit: contain; }
.appearance-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appearance-tabs button, .appearance-picker-heading button {
  font: inherit; font-size: 0.875rem; padding: 8px;
  border: 1px solid var(--glass-border); border-radius: 6px;
  background: var(--glass-fill); color: var(--app-text); cursor: pointer;
}
.appearance-tabs button[aria-selected="true"] { border-color: var(--accent-green); background: var(--glass-fill-strong); }
.appearance-picker-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.appearance-picker-heading h3 { font-size: 0.95rem; margin: 0; }
.appearance-grid { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; padding: 3px; }
.piece-style-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.board-style-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.appearance-grid button { aspect-ratio: 1; min-width: 0; padding: 3px; border: 2px solid transparent; border-radius: 6px; background: var(--glass-fill); cursor: pointer; }
.appearance-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }
.appearance-grid button[aria-pressed="true"] { border-color: var(--accent-green); }
.appearance-sheet button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.custom-square-colors { margin-top: 12px; font-size: 0.875rem; }
@media (max-height: 700px) { .appearance-preview { width: min(220px, 100%); } }

.last-move {
  box-shadow: inset 0 0 0 999px var(--move-highlight, rgba(34, 167, 255, 0.36));
}

.king-in-check::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 25, 35, 0.9) 0%, rgba(235, 0, 15, 0.65) 40%, rgba(220, 0, 10, 0) 75%);
}
.king-in-check .piece-image { z-index: 1; filter: drop-shadow(0 0 4px rgba(255, 20, 30, 0.95)); }
.king-in-check .piece-fallback { position: relative; z-index: 1; }

.settings-content {
  min-width: 0;
  min-height: 0;
  padding: 0 0.75rem 2.5rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.settings-section { min-width: 0; padding: 0.8rem 0; border-top: 1px solid var(--glass-border); }
.settings-section h3 {
  margin: 0 0 0.8rem;
  color: var(--move-highlight-color, var(--accent-blue));
  font-size: 1rem;
}
.settings-section .settings-row { min-width: 0; margin: 0.75rem 0; font-size: 0.9rem; }
.settings-row input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent-green); }
.settings-row input[type="color"] { width: 44px; height: 32px; padding: 2px; flex-shrink: 0; }
.settings-row select { max-width: 50%; min-width: 0; border: 1px solid var(--glass-border); border-radius: 6px; padding: 0.4rem; background: var(--app-panel-2); color: var(--app-text); font: inherit; }
.settings-content .settings-slider { display: block; max-width: 100%; }
:root[data-theme="light"] {
  --toolbar-symbol: #535a61;
  color-scheme: light;
  --app-bg: #f3f5f6;
  --app-panel: #ffffff;
  --app-panel-2: #e6eaed;
  --app-text: #182023;
  --app-muted: #535d63;
  --app-soft: #647078;
  --glass-fill: rgba(35, 48, 54, 0.09);
  --glass-fill-strong: rgba(35, 48, 54, 0.16);
  --glass-border: rgba(35, 48, 54, 0.22);
  --accent-blue: #0069aa;
  --accent-green: #157b3c;
}
[data-theme="light"] .panel-resizer::before { background: rgba(24, 32, 36, 0.42); }
[data-theme="light"] .panel-resizer:hover::before,
[data-theme="light"] .panel-resizer.is-dragging::before { background: var(--accent-blue); }
[data-theme="light"] :is(.settings-sheet, .games-menu, .player-bio-sheet, .opening-bio-sheet) { background: #f7f9fb; }
[data-theme="light"] :is(.library-panel, .notation-panel, .board-stage) { background: var(--app-panel); }
[data-theme="light"] :is(.game-row, .pgn-move, .search-control, .fen-card) { color: var(--app-text); }
[data-theme="light"] .game-row.selected { background: #d8efdf; }
[data-theme="light"] .menu-lichess-panel :is(select, input:not([type="radio"])) { color-scheme: light; background: #fff; }
[data-theme="light"] .button-logo { filter: invert(1); }
[data-theme="light"] :is(.pgn-move-list, .fen-box p) { color: var(--app-text); }
[data-theme="light"] .pgn-move-link.current { background: #c7e9d1; color: #102c1a; }

.piece-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 108%;
  height: 108%;
  opacity: 1;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.28));
  pointer-events: none;
  user-select: none;
}

.piece-move-ghost {
  position: fixed;
  z-index: 80;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.28));
  pointer-events: none;
  user-select: none;
}

.piece-image[hidden],
.piece-fallback[hidden] {
  display: none;
}

.piece-fallback {
  display: block;
  width: 100%;
  font-family:
    "Arial Unicode MS", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: clamp(2rem, 6.2vw, 4.95rem);
  line-height: 1;
  text-align: center;
}

.piece-fallback.white-piece {
  color: #f7f7f4;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 1px rgba(0, 0, 0, 0.8);
}

.piece-fallback.black-piece {
  color: #1b1715;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 1px rgba(255, 255, 255, 0.2);
}

.rank-label,
.file-label {
  position: absolute;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.62rem;
  font-weight: 700;
}

.rank-label {
  top: 0.2rem;
  left: 0.25rem;
}

.file-label {
  right: 0.25rem;
  bottom: 0.12rem;
}

.move-strip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, calc(100vh - 430px), var(--board-max-size));
  min-width: 320px;
  min-height: 28px;
  flex: 0 0 auto;
  padding-top: 0.3rem;
  color: var(--app-muted);
  font-size: 0.95rem;
}

.move-strip span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-strip span:first-child {
  text-align: left;
}

.move-strip span:last-child {
  text-align: right;
}

.playback-controls,
.action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  width: 100%;
}

.playback-controls {
  min-height: 68px;
  flex: 0 0 auto;
}

.glass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill);
  color: var(--app-text);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(150%);
  text-decoration: none;
}

.glass-icon:hover {
  background: var(--glass-fill-strong);
}

.glass-icon.small {
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
}

.glass-icon.large {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  font-size: 1.8rem;
}

.glass-icon span,
.glass-icon svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68%;
  height: 68%;
  font-size: 1.7rem;
  line-height: 1;
}

.glass-icon .sf-symbol {
  display: block;
  width: 68%;
  height: 68%;
  font-size: inherit;
}

.toolbar-actions .glass-icon:not(.toolbar-button) .sf-symbol {
  width: 62%;
  height: 62%;
}

.action-row {
  padding-top: 0.2rem;
  flex: 0 0 auto;
}

.action-button {
  display: grid;
  width: 54px;
  padding: 0;
  min-height: 80px;
  place-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--app-text);
}

.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(150%);
  font-size: 1.75rem;
}

.action-button:hover .action-icon {
  background: var(--glass-fill-strong);
}

.action-button span {
  font-size: 0.78rem;
  line-height: 1;
}

.action-button .action-icon {
  font-size: 1.75rem;
}

.action-button .action-icon .sf-symbol,
.action-button .action-icon .button-logo {
  width: 62%;
  height: 62%;
  font-size: 1.75rem;
}

.import-card,
.fen-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0.85rem;
}

.pgn-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 0.65rem;
}

.pgn-move-list {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  padding: 0.75rem;
  color: #d8dbdf;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  overscroll-behavior: contain;
}

.pgn-header-list {
  margin: 0 0 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--app-muted);
  white-space: pre-wrap;
}

.pgn-move-section {
  display: block;
}

.pgn-move-number {
  display: inline-block;
  margin-right: 0.25rem;
  color: var(--app-muted);
}

.pgn-move-link {
  display: inline-flex;
  align-items: center;
  margin: 0.08rem 0.16rem 0.08rem 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--app-text);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  padding: 0.13rem 0.24rem;
}

.pgn-move-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.pgn-move-link.current {
  background: rgba(70, 224, 123, 0.2);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(70, 224, 123, 0.52);
}

.pgn-editor {
  width: 100%;
  min-height: 96px;
  flex: 0 0 112px;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  padding: 0.75rem;
  color: var(--app-text);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}

.import-actions {
  display: block;
  gap: 0.55rem;
  margin-top: 0;
}

.fen-box {
  margin-top: auto;
  width: 100%;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.fen-box:hover {
  background: rgba(255, 255, 255, 0.09);
}

.fen-box span {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fen-box p {
  overflow-wrap: anywhere;
  margin: 0.45rem 0 0.7rem;
  color: #d8dbdf;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
}

.fen-box a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-blue);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.inline-fields label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--app-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.inline-fields input {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 0 0.7rem;
  color: var(--app-text);
  font-size: 0.95rem;
  font-weight: 500;
}

.full-glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  height: 42px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--app-text);
}

.full-glass-button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.full-glass-button.compact {
  height: 38px;
}

.hidden {
  display: none;
}

@media (max-width: 1180px) {
  .study-shell {
    grid-template-columns:
      var(--library-track) 10px minmax(320px, 1fr) 10px var(--notation-track);
  }

  .library-panel {
    max-height: none;
  }

  .game-list {
    display: flex;
  }
}

@media (max-width: 760px) {
  html,
  body {
    height: auto;
    overflow: auto;
  }

  .site-frame {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .site-container {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    padding: 1rem;
  }

  .app-toolbar {
    --mobile-toolbar-icon-size: 50px;
    grid-template-columns: auto auto;
    grid-template-areas: "brand brand" "left right";
    gap: 0.75rem 0;
    padding: 0.6rem 0 1rem;
  }
  .app-toolbar .brand-lockup { justify-self: center; }

  .toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    gap: 0;
  }
  .toolbar-actions.toolbar-left { justify-self: start; }
  .toolbar-actions.toolbar-right { justify-self: end; }

  .toolbar-actions .toolbar-button {
    width: calc(var(--mobile-toolbar-icon-size) + var(--control-gap));
    min-width: 0;
    flex: 0 0 auto;
  }

  .app-toolbar .toolbar-actions .toolbar-button .toolbar-icon {
    width: var(--mobile-toolbar-icon-size);
    height: var(--mobile-toolbar-icon-size);
  }

  .toolbar-actions .toolbar-label {
    font-size: 0.75rem;
  }

  .study-shell {
    display: flex;
    flex-direction: column;
  }

  .panel-resizer {
    display: none;
  }

  .library-panel {
    order: 3;
    max-height: 380px;
  }

  .library-panel .import-actions {
    flex: 0 0 auto;
  }

  .board-stage {
    order: 1;
  }

  .import-panel {
    order: 2;
    min-height: 500px;
  }

  .board-wrap {
    width: min(100%, calc(100vw - 32px));
    min-width: 0;
  }

  .board-resizer {
    display: none;
  }

  .move-strip {
    width: min(100%, calc(100vw - 32px));
    min-width: 0;
  }

  .game-summary {
    min-height: 76px;
  }

  .game-summary p {
    white-space: normal;
  }

  .glass-icon.large {
    width: 52px;
    height: 52px;
    font-size: 1.68rem;
  }

  .action-button {
    width: 50px;
    min-height: 82px;
  }

  .action-icon {
    width: 50px;
    height: 50px;
  }

  .games-menu {
    top: auto;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: min(82vh, 660px);
    overflow: auto;
    transform: translateY(calc(100% + 1.5rem));
  }

  .games-menu.grandmaster-mode {
    max-height: min(88vh, 720px);
  }

  .player-bio-sheet {
    top: auto;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: min(88vh, 720px);
    transform: translateY(calc(100% + 1.5rem));
  }

  .settings-sheet {
    top: auto;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: min(88vh, 520px);
    transform: translateY(calc(100% + 1.5rem));
  }

  body.settings-open .settings-sheet {
    transform: translateY(0);
  }

  body.player-bio-open .player-bio-sheet {
    transform: translateY(0);
  }

  .player-bio-image {
    max-height: 300px;
  }

  .grandmaster-browser {
    min-height: 420px;
  }

  body.games-menu-open .games-menu {
    transform: translateY(0);
  }
}
@media (max-width: 360px) {
  .app-toolbar { --mobile-toolbar-icon-size: 44px; }
  .toolbar-actions .toolbar-label { font-size: 0.67rem; }
}
.lichess-exit-dialog, .help-dialog, .position-editor, .computer-dialog {
  width: min(420px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-sheet);
  color: var(--app-text);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.lichess-exit-dialog::backdrop, .help-dialog::backdrop, .position-editor::backdrop, .computer-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.lichess-exit-dialog h2 { margin: 0 0 12px; font-size: 1.25rem; }
.lichess-exit-dialog p { margin: 0 0 24px; font-size: 1rem; line-height: 1.5; }
.lichess-exit-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lichess-exit-actions > * {
  flex: 1 1 auto;
  padding: 12px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--glass-fill-strong);
  color: var(--app-text);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.lichess-exit-actions > :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

.help-dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }
.computer-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; }
.computer-dialog h2 { font-size: 1.3rem; margin: 0; }
.computer-dialog .help-header { gap: 12px; }
.computer-dialog .help-header .glass-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.computer-field { display: grid; gap: 8px; margin: 20px 0 0; font-size: 0.9rem; min-width: 0; }
.computer-field > span { display: flex; justify-content: space-between; gap: 12px; }
.computer-field output, .computer-range-labels { color: var(--app-muted); }
.computer-field input, .computer-field select { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
.computer-field select, .computer-field input[type="number"] { padding: 10px; border: 1px solid var(--glass-border); border-radius: 6px; background: var(--app-panel); color: var(--app-text); }
.computer-field input[type="range"] { accent-color: var(--accent-green); }
.computer-range-labels { display: flex; justify-content: space-between; font-size: 0.75rem; margin-top: 4px; }
.computer-side { display: flex; padding: 0; margin: 20px 0 0; gap: 6px; border: 0; min-width: 0; }
.computer-side legend { font-size: 0.9rem; margin-bottom: 8px; }
.computer-side label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--glass-border); border-radius: 6px; background: var(--glass-fill); font-size: 0.875rem; cursor: pointer; }
.computer-side label:has(:checked) { background: #157843; color: #fff; }
.computer-side input { accent-color: #157843; margin: 0; }
.computer-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.computer-field[hidden], .computer-time-fields[hidden], .computer-clocks[hidden], .computer-controls[hidden] { display: none; }
#computer-setup-error { font-size: 0.875rem; }
.computer-active .playback-controls, .computer-active #setup-button { display: none; }
.computer-active .board-stage { overflow-y: auto; }
.computer-active .board-wrap, .computer-active .move-strip { width: min(100%, max(200px, calc(100dvh - 540px)), var(--board-max-size)); }
.computer-clocks { display: flex; justify-content: space-between; width: min(100%, 420px); gap: 12px; margin: 8px 0; flex: 0 0 auto; }
.computer-clock { display: grid; gap: 3px; min-width: 0; flex: 1; padding: 7px 10px; background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: 6px; }
.computer-clock span { font-size: 0.75rem; overflow-wrap: anywhere; }
.computer-clock strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.computer-clock.clock-active { border-color: #27894d; box-shadow: inset 3px 0 #27894d; }
.computer-clock.clock-low strong { color: #ec5f58; }
[data-theme="light"] .computer-clock.clock-low strong { color: #b7221a; }
.computer-controls { width: 100%; flex: 0 0 auto; margin-bottom: 12px; }
#computer-status { text-align: center; min-height: 1.25em; margin: 4px 0 10px; font-size: 0.875rem; overflow-wrap: anywhere; }
#computer-speed { text-align: center; min-height: 1.25em; margin: 0 0 10px; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--app-muted); }
.engine-busy::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busy-spin 850ms linear infinite; }
.computer-game-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.computer-game-actions button, #computer-promotion-cancel { font: inherit; font-size: 0.8rem; color: var(--app-text); background: var(--glass-fill-strong); border: 1px solid var(--glass-border); border-radius: 6px; padding: 8px; min-height: 36px; cursor: pointer; }
.computer-game-actions button:disabled { opacity: 0.4; cursor: default; }
.computer-pgn { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.85rem/1.7 ui-monospace, monospace; }
.computer-active #chess-board { touch-action: none; }
#chess-board, #chess-board *, .piece-move-ghost, .piece-drag-preview {
  -webkit-user-select: none;
  user-select: none;
}
#chess-board img, .piece-move-ghost, .piece-drag-preview { -webkit-user-drag: none; }
#computer-exit { border-color: var(--accent-blue); font-weight: 600; }
.computer-active .square { cursor: pointer; }
.square.computer-selected { box-shadow: inset 0 0 0 4px var(--move-highlight-color, #22a7ff); }
.square.computer-legal::after { content: ''; position: absolute; inset: 35%; border-radius: 50%; background: rgba(0, 0, 0, 0.38); pointer-events: none; z-index: 2; }
.computer-active .square:focus-visible { outline: 3px solid var(--move-highlight-color, #22a7ff); outline-offset: -3px; z-index: 2; }
.computer-drag-source .piece-image, .computer-drag-source .piece-fallback { opacity: 0; }
.piece-drag-preview {
  position: fixed; inset: auto; left: 0; top: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; max-width: none; max-height: none;
  background: transparent; box-shadow: none; opacity: 1;
  object-fit: contain; pointer-events: none; z-index: 1000;
  will-change: transform; transition: none;
}
.piece-drag-preview::backdrop { background: transparent; pointer-events: none; }
.computer-promotion-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.computer-promotion-options button { min-width: 0; padding: 4px; background: #91a297; border: 1px solid var(--glass-border); border-radius: 6px; cursor: pointer; }
.computer-promotion-options img { width: 100%; aspect-ratio: 1; display: block; }
@media (max-width: 760px) {
  .computer-active .board-wrap, .computer-active .move-strip { width: min(100%, var(--board-max-size)); }
}
.sf-pencil { --symbol: url('/icons/pencil.png'); }
.sf-undo { --symbol: url('/icons/arrow.uturn.backward.png'); }
.sf-trash { --symbol: url('/icons/trash.png'); }
.position-editor { width: min(960px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; }
.position-editor[open] { display: flex; flex-direction: column; overflow: hidden; }
.position-editor > .help-header, .editor-footer { flex: 0 0 auto; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); gap: 24px; align-items: start; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 3px; }
.editor-board-column, .editor-options { min-width: 0; }
.editor-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; overflow: hidden; }
.editor-square { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; position: relative; display: grid; place-items: center; touch-action: none; cursor: grab; }
.editor-square img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; }
.editor-tray { display: grid; gap: 6px; }
.editor-tray-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.editor-tray button { aspect-ratio: 1; min-width: 0; padding: 2px; border: 1px solid var(--glass-border); border-radius: 6px; background: #a1aaa5; cursor: grab; touch-action: none; }
.editor-tray img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.position-editor [aria-pressed="true"] { outline: 3px solid var(--move-highlight-color, #22a7ff); outline-offset: -3px; }
.position-editor :focus-visible { outline: 3px solid var(--move-highlight-color, #22a7ff); outline-offset: -3px; }
.editor-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.editor-tools button, .editor-footer button, #return-to-game { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 0.875rem; color: var(--app-text); background: var(--glass-fill-strong); border: 1px solid var(--glass-border); border-radius: 6px; cursor: pointer; }
.editor-tools .editor-icon-button { width: 40px; padding: 8px; }
.editor-tools .sf-symbol { width: 22px; height: 22px; flex-shrink: 0; }
.position-editor button:disabled { opacity: 0.4; cursor: default; }
.editor-field { display: grid; gap: 6px; font-size: 0.875rem; margin: 12px 0 6px; min-width: 0; }
.position-editor select, .position-editor input[type="number"], #editor-fen { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--app-text); background: var(--app-panel); border: 1px solid var(--glass-border); border-radius: 6px; padding: 8px; }
#editor-fen { font-family: ui-monospace, monospace; font-size: 0.875rem; resize: vertical; overflow-wrap: anywhere; }
.editor-castling { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; padding: 0; border: 0; font-size: 0.875rem; }
.editor-castling legend { margin-bottom: 8px; }
.editor-castling label { display: flex; gap: 6px; align-items: center; }
.editor-castling input { accent-color: var(--accent-green); width: 18px; height: 18px; flex-shrink: 0; }
.editor-advanced { font-size: 0.875rem; }
.editor-advanced summary { cursor: pointer; }
.editor-counters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#editor-error { font-size: 0.875rem; line-height: 1.5; margin: 8px 0; min-height: 1.5em; overflow-wrap: anywhere; }
.editor-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--glass-border); margin-top: 16px; padding-top: 16px; }
.editor-footer #editor-use { background: #157843; color: #fff; }
.editor-drag-piece { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; object-fit: contain; z-index: 100; pointer-events: none; }
#return-to-game { min-height: 30px; margin-top: 6px; }
#return-to-game[hidden] { display: none; }
@media (max-width: 700px) {
  .position-editor { padding: 14px; }
  .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .editor-board-column { width: min(100%, 440px); justify-self: center; }
  .editor-tray { max-width: 380px; margin-inline: auto; }
  .editor-tools { gap: 6px; }
}
.help-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.help-header h2 { margin: 0; font-size: 1.4rem; }
.help-header .chessiq-wordmark { font-family: "ChessIQ Cochin Bold", Cochin, Georgia, serif; font-weight: 700; }
.help-header button { flex-shrink: 0; }
.help-content section + section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--glass-border); }
.help-content h3 { margin: 0 0 12px; font-size: 1.05rem; color: var(--move-highlight-color, #22a7ff); }
.help-content p { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; }
.help-content .stockfish-notice { font-size: 0.875rem; font-style: italic; }
.help-content a { color: var(--accent-blue); text-underline-offset: 0.15em; }
.help-shortcuts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px 16px; font-size: 0.95rem; line-height: 1.5; }
.help-shortcuts dt { font-weight: 600; }
.help-shortcuts dd { margin: 0; }