.chess-page { --chess-win: #8dd4ad; --chess-draw: #a6b5ce; --chess-loss: #ee92a1; }
.chess-owner-dialog { width: min(580px,calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; box-sizing: border-box; padding: clamp(1rem,4vw,2rem); border: 1px solid var(--line-bright); border-radius: 18px; background: var(--bg); color: var(--text); }
.chess-owner-dialog::backdrop { background: rgb(0 0 0 / .72); }
.chess-owner-dialog p { color: var(--muted); line-height: 1.65; font-size: .9rem; }
.chess-owner-form { margin-top: 1.5rem; }
.chess-owner-form label { display: grid; gap: .6rem; font-size: .85rem; }
.chess-owner-form input { box-sizing: border-box; width: 100%; min-height: 44px; padding: .7rem; border: 1px solid var(--line-bright); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.chess-owner-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
:root[data-theme="light"] .chess-page { --chess-win: #26744e; --chess-draw: #69758b; --chess-loss: #b5425c; }
.chess-shell { max-width: 1380px; }
.chess-hero { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 3rem; align-items: center; padding-bottom: 2rem; max-width: none; }
.chess-hero > div > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.chess-shell section+section { margin-top: 0; }
.chess-hero h1 { font-size: clamp(3rem,6vw,5.8rem); line-height: 1.02; }
.chess-account { position: relative; overflow: hidden; padding: 2rem; border: 1px solid var(--line-bright); border-radius: 20px; background: linear-gradient(135deg,var(--surface-strong),var(--surface)); }
.chess-account::after { content: ''; pointer-events: none; position: absolute; width: 180px; height: 180px; right: -35px; top: -25px; transform: rotate(16deg); opacity: .07; background: conic-gradient(var(--accent) 25%,transparent 0 50%,var(--accent) 0 75%,transparent 0) 0 0/44px 44px; }
.chess-knight { display: block; color: var(--solar); font-family: 'Segoe UI Symbol',serif; font-size: 4rem; line-height: 1.15; margin-bottom: 1.6rem; }
.chess-account > a { font-size: 1.45rem; font-weight: 700; color: var(--text); text-decoration: none; position: relative; z-index: 1; }
.chess-account > a:hover { color: var(--accent); }
.chess-account > a span { color: var(--muted); font-size: 1rem; }
.chess-account > p:not(.eyebrow) { font-size: .78rem; line-height: 1.7; color: var(--muted); margin: .9rem 0; }
.chess-snapshot { display: inline-block; padding: .35rem .6rem; font-size: .66rem; letter-spacing: .04em; color: var(--solar); background: color-mix(in srgb,var(--solar) 8%,transparent); border: 1px solid color-mix(in srgb,var(--solar) 25%,transparent); border-radius: 5px; }
.chess-panel,.chess-filter-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: clamp(1rem,2.2vw,1.7rem); min-width: 0; }
.chess-filter-panel { background: var(--glass); }
.chess-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.chess-section-heading h2 { font-size: 1.2rem; margin: .25rem 0 0; letter-spacing: -.025em; }
.chess-section-heading .eyebrow { font-size: .65rem; margin: 0; }
.chess-section-heading > p { margin: 0; color: var(--muted); font-size: .72rem; }
.chess-filters { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .8rem; align-items: end; }
.chess-filters label:has([name="ending"]) { grid-column: span 2; }
.chess-filters label,.chess-series-label { display: grid; gap: .4rem; color: var(--muted); font-size: .7rem; font-weight: 500; min-width: 0; }
.chess-filters input,.chess-filters select,.chess-series-label select { width: 100%; min-width: 0; border: 1px solid var(--line-bright); background: var(--bg); color: var(--text); padding: .7rem .65rem; border-radius: 7px; font: inherit; font-size: .78rem; min-height: 42px; }
.chess-search { grid-column: span 2; }
.chess-filter-actions { display: flex; gap: .5rem; grid-column: span 2; }
.chess-page .button { font-size: .74rem; padding: .72rem .9rem; min-height: 42px; }
.chess-page button:disabled { opacity: .45; cursor: default; }
.chess-page :is(input,select,button,a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chess-status { font-size: .8rem; color: var(--muted); margin: 1rem 0; min-height: 1.4em; }
.chess-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; margin-top: .5rem; }
.chess-metric { text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 1.2rem; color: var(--text); font: inherit; }
.chess-metric span { display: block; color: var(--muted); font-size: .72rem; }
.chess-metric strong { display: block; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 650; letter-spacing: -.05em; margin: .4rem 0; font-variant-numeric: tabular-nums; }
.chess-metric small { color: var(--muted); font-size: .68rem; line-height: 1.55; display: block; }
button.chess-metric { cursor: pointer; }
button.chess-metric:hover { border-color: var(--solar); }
.chess-metric--clock strong { color: var(--solar); }
.chess-results { padding: 1.2rem 0 1.8rem; }
.chess-results-bar { height: 7px; display: flex; overflow: hidden; border-radius: 5px; background: var(--surface-strong); }
.chess-results-bar > span { min-width: 0; }
.chess-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .65rem; font-size: .7rem; color: var(--muted); }
.chess-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--result-color); margin-right: .4rem; }
.chess-chart-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 1rem; }
.chess-caption { font-size: .7rem; color: var(--muted); line-height: 1.65; margin: .5rem 0; }
.chess-series-label { min-width: 125px; }
.chess-chart { margin-top: 1rem; min-height: 180px; }
.chess-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chess-chart text { fill: var(--muted); font: 11px Inter,system-ui,sans-serif; }
.chess-chart .chart-grid { stroke: var(--line); stroke-dasharray: 3 5; }
.chess-chart .rating-line { stroke: var(--accent); stroke-width: 2.7; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chess-chart .rating-area { fill: color-mix(in srgb,var(--accent) 7%,transparent); }
.chess-chart circle { fill: var(--accent); }
.chess-chart-data { color: var(--muted); font-size: .68rem; margin-top: .7rem; }
.chess-chart-data summary { cursor: pointer; padding: .4rem 0; }
.chess-chart-data > div { max-height: 230px; overflow: auto; margin-top: .6rem; }
.chess-chart-data table { width: 100%; text-align: left; border-collapse: collapse; }
.chess-chart-data th,.chess-chart-data td { padding: .5rem; border-bottom: 1px solid var(--line); }
.chess-activity { margin-top: 1rem; }
.chess-detail-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(250px,1fr); gap: 1rem; margin-top: 1rem; }
.chess-bars { display: grid; gap: 1.05rem; padding: .5rem 0; }
.chess-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; font-size: .75rem; }
.chess-bar-label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chess-bar-track { background: var(--surface-strong); border-radius: 3px; height: 5px; margin-top: .5rem; overflow: hidden; }
.chess-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.chess-openings { list-style: none; margin: .5rem 0 0; padding: 0; }
.chess-openings li { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: .75rem; align-items: center; border-bottom: 1px solid var(--line); padding: .9rem 0; }
.chess-openings li:last-child { border-bottom: 0; }
.chess-opening-index { color: var(--muted); font-size: .7rem; }
.chess-opening-name { font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.chess-opening-name small { color: var(--muted); font-size: .65rem; display: block; }
.chess-opening-result { text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; }
.chess-opening-result small { color: var(--muted); font-size: .65rem; display: block; margin-top: .3rem; }
.chess-game-history { margin-top: 1rem; scroll-margin-top: 7rem; }
.chess-table-wrap { overflow-x: auto; max-width: 100%; }
.chess-table-hint { display: none; font-size: .72rem; color: var(--muted); }
.chess-table { border-collapse: collapse; width: 100%; min-width: 920px; font-size: .73rem; }
.chess-table th { color: var(--muted); font-weight: 500; font-size: .65rem; white-space: nowrap; padding: .8rem .6rem; text-align: left; border-bottom: 1px solid var(--line-bright); }
.chess-table td { padding: .95rem .6rem; vertical-align: middle; border-bottom: 1px solid var(--line); }
.chess-table tbody tr:hover { background: color-mix(in srgb,var(--accent) 4%,transparent); }
.chess-table td:first-child { white-space: nowrap; }
.chess-table a { color: var(--accent); text-decoration: none; }
.chess-table a:hover { text-decoration: underline; }
.chess-table td small { color: var(--muted); font-size: .65rem; display: block; margin-top: .25rem; }
.chess-table td:nth-child(7) { max-width: 220px; }
.chess-result { padding: .3rem .5rem; border-radius: 4px; font-size: .65rem; background: color-mix(in srgb,var(--result-color) 10%,transparent); color: var(--result-color); }
.chess-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; }
.chess-pagination p { font-size: .73rem; color: var(--muted); margin: 0; }
.chess-pagination > div { display: flex; gap: .5rem; }
.chess-source { color: var(--muted); font-size: .74rem; line-height: 1.8; padding: 1.2rem .2rem; max-width: 900px; }
.chess-source p { margin: .5rem 0; }
.chess-empty { padding: 2rem .5rem; font-size: .85rem; color: var(--muted); text-align: center; }
@media(max-width:1000px) {
  .chess-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .chess-hero { grid-template-columns: minmax(0,1fr) 270px; gap: 1.5rem; }
  .chess-chart-grid { grid-template-columns: minmax(0,1.6fr) minmax(220px,1fr); }
}
@media(max-width:700px) {
  .chess-table-hint { display: block; }
  .chess-hero { grid-template-columns: 1fr; gap: 1rem; }
  .chess-account { padding: 1.25rem; }
  .chess-knight { float: right; margin: 0 0 .5rem 1rem; font-size: 3.5rem; }
  .chess-account .eyebrow { margin-top: 0; }
  .chess-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
  .chess-metric { padding: 1rem; }
  .chess-chart-grid,.chess-detail-grid { grid-template-columns: 1fr; }
  .chess-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chess-filter-actions { flex-wrap: wrap; }
  .chess-section-heading > p { line-height: 1.6; }
  .chess-chart { min-height: 130px; }
}