@import url('progress.css');
:root { --chess-ivory:#f2e3c4; --chess-gold:#e8c37d; --chess-blue:#9cb7cd; }
body::before { background:radial-gradient(ellipse at 50% 5%,#263746 0,#111d2a 44%,#080e18 100%); }
body { color:#e8edf4; }
[hidden] { display:none!important; }
.chess-eyebrow { margin:0;color:#b6c5d0;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase; }
.chess-intro { margin:0;color:#c9c4b5;font-size:.9rem; }
.chess-development { margin:0;color:#a7b9ca;font-size:.72rem;max-width:340px;line-height:1.5; }
.chess-settings { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px;box-sizing:border-box;width:min(100%,380px);border:1px solid #b69b5d50;border-radius:13px;background:linear-gradient(135deg,#223344,#152334);text-align:left; }
.chess-settings .chess-compact-setting { position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:46px;padding:0 5px;border:1px solid #7b919c80;border-radius:8px;background:#0e1c2b;color:#fff0cd;cursor:pointer; }
.chess-compact-setting > svg { width:18px;height:20px;flex:none;color:#e9ce92; }
.chess-compact-setting > strong { min-width:0;overflow:hidden;white-space:normal;text-align:center;font:600 .7rem/1.15 system-ui; }
.chess-settings select { position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-height:44px;opacity:0;cursor:pointer; }
.chess-compact-setting:has(select:focus-visible) { outline:2px solid #ffe1a0;outline-offset:2px; }
.chess-piece-preview { display:none!important; }
.chess-style-setting,.chess-piece-preview,.chess-piece-status { grid-column:1/-1; }
.chess-piece-preview { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:6px 0;border-radius:9px;background:#0a142080; }
.chess-piece-preview img { width:100%;height:70px;object-fit:contain;align-self:end; }
.chess-piece-status { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;color:#b9c9d7;font-size:.69rem;line-height:1.5; }
.chess-piece-status.error { position:static;width:auto;height:auto;clip-path:none;max-width:360px; }
.chess-piece-status:empty { display:none; }
.chess-pause-style { display:grid;gap:8px;margin:16px auto 0;max-width:260px;font-size:.85rem;color:#e4d3ac; }
.chess-pause-style select { min-height:44px;padding:9px;border:1px solid #8eabbd77;border-radius:9px;background:#122438;color:#fff0cd;font:inherit; }
.chess-pause-style small { font-size:.7rem;line-height:1.5;font-weight:400; }
.chess-pause-style small:empty { display:none; }
.chess-promote-piece img { display:block;width:100%;height:86px;object-fit:contain; }
.chess-settings select:focus-visible,.chess-pause-style select:focus-visible { outline:2px solid #ffe1a0;outline-offset:2px; }
.chess-text-action { min-height:44px;padding:6px 10px;border:0;background:transparent;color:#c9d9e5;font:inherit;font-size:.75rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
#screen-title.screen .title-logo { width:min(100%,460px);max-height:none;aspect-ratio:40/21; }
.chess-human.chess-mate-review { flex-wrap:wrap; }
.chess-human.chess-mate-review #chess-status { flex-basis:100%;grid-column:1 / -1;grid-row:auto;order:5;padding:10px 12px;border:1px solid #ffbe78;border-radius:10px;background:#3a2425;color:#fff0bd;font-weight:750;line-height:1.4;text-align:center; }
.chess-human.chess-check-alert { flex-wrap:wrap; }
.chess-human.chess-check-alert #chess-status { flex-basis:100%;grid-column:1 / -1;grid-row:auto;order:5;padding:9px 12px;border:1px solid #f78170;border-radius:10px;background:#4a2027;color:#ffe0cb;font-weight:750;line-height:1.4;text-align:center; }
#screen-title .game-follow-x { margin-top:3px; }
#chess-history { max-height:150px;overflow:auto;white-space:pre-line;color:#bfcedc;font-size:.75rem; }
#gamepad-status { font-size:.7rem;margin:0; }
#screen-play { --chess-toolbar:var(--game-footer-space,calc(76px + env(safe-area-inset-bottom,0px)));--chess-ui:200px;box-sizing:border-box;width:100%;max-width:800px;min-height:100dvh;justify-content:center;padding:max(6px,env(safe-area-inset-top)) 10px var(--chess-toolbar); }
#game-frame { display:flex;flex-direction:column;align-items:stretch;width:100%;height:auto;min-height:0;overflow:visible;background:transparent;touch-action:manipulation; }
.chess-sidebar { display:contents; }
#game { order:2;align-self:center;display:block;flex:none;width:min(100%,max(250px,calc((100dvh - var(--chess-ui) - var(--chess-toolbar)) * 1.18)));height:auto;aspect-ratio:1.18;min-width:0;touch-action:none;border:0;border-radius:12px;outline:0;box-shadow:0 20px 40px #0006; }
#game:focus-visible { outline:2px solid #e8c37d;outline-offset:3px; }
@media (max-width:760px) { #game:not([data-view="classic2d"]) { aspect-ratio:1.04;width:100%; } }
#game[data-view="classic2d"] { aspect-ratio:1;width:min(100%,max(250px,calc(100dvh - var(--chess-ui) - var(--chess-toolbar)))); }
@media(hover:none) and (pointer:coarse){ .chess-compact-setting:has(select:focus-visible) { outline:none; } }
.chess-top { order:0;display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 5px;text-align:left; }
.chess-top strong { display:block;color:#efcf8c;font-size:.98rem;letter-spacing:.15em; }
.chess-top span { display:block;color:#99b1c3;font-size:.64rem; }
.chess-top button { color:#b9cbd8; }
.chess-player { display:flex;align-items:center;gap:10px;min-height:36px;padding:3px 8px;text-align:left; }
.chess-opponent { order:1; }
.chess-human { order:3; }
.chess-player strong { display:block;font-size:.8rem; }
.chess-player small { display:block;color:#9bb1c3;font-size:.66rem; }
.chess-color-token { width:23px;height:23px;flex:none;border:1px solid #a58b59;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff8df,#dbc79a 65%,#998665);box-shadow:inset 0 0 0 3px #e6d5ad,0 2px 3px #0006; }
.chess-color-token.dark { border-color:#747d85;background:radial-gradient(circle at 35% 20%,#5a626b,#181d25 65%,#060c13);box-shadow:inset 0 0 0 3px #282f37,0 2px 3px #0006; }
.chess-clock { margin-left:auto;min-width:70px;box-sizing:border-box;padding:5px 10px;border:1px solid #71889b55;border-radius:7px;color:#b7c5d4;background:#142231;font:700 1.12rem ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:center; }
.chess-clock.active { color:#28313b;background:#f1dfb4;border-color:#e5c57f; }
.chess-clock.urgent { color:#ff9691; }
.chess-clock.active.urgent { color:#fff3e5;background:#793b3b;border-color:#e79788; }
.chess-status { flex:1;min-width:0;margin:0;padding:0 4px;box-sizing:border-box;color:#f0d49b;font-size:.74rem;line-height:1.35;text-align:right;overflow-wrap:anywhere; }
.chess-human { gap:8px; }
.chess-human > div { flex:none; }
.chess-human .chess-clock { margin-left:0;min-width:58px;padding:5px 6px; }
.chess-record-toggle { display:grid;place-items:center;flex:none;width:44px;height:44px;padding:10px;border:1px solid #8497a94d;border-radius:9px;background:#192a3b;color:#e9cf98;cursor:pointer; }
.chess-record-toggle svg { width:22px;height:22px; }
.chess-record-toggle[aria-expanded="true"] { background:#354839;border-color:#e9cf98; }
.chess-record-toggle:focus-visible { outline:2px solid #ffe1a0;outline-offset:2px; }
.chess-actions { display:flex;gap:6px; }
#game-frame > .chess-actions,.chess-sidebar > .chess-actions { order:5; }
.chess-actions button,.chess-promote-piece { min-height:44px;flex:1;min-width:0;padding:7px 6px;border:1px solid #8497a94d;border-radius:9px;background:linear-gradient(#243749,#192a3b);color:#d6e0e9;font:600 .71rem system-ui;cursor:pointer; }
.chess-actions button:hover { border-color:#e4c886; }
.chess-actions button:disabled { opacity:.4;cursor:default; }
.chess-actions button:focus-visible,.chess-text-action:focus-visible { outline:2px solid #ffe1a0;outline-offset:2px; }
#chess-online-controls { order:6;margin-top:5px; }
#chess-network { min-height:18px;margin:5px 2px 0;font-size:.65rem;color:#a6bfd0; }
#screen-play:has(#chess-online-controls:not([hidden])) { --chess-ui:270px; }
.chess-record { order:7;color:#b7c8d5;text-align:left;font-size:.75rem; }
.chess-record:not([open]) { display:none; }
.chess-record summary { cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px; }
.chess-record summary::before { content:'⌄';font-size:1.1rem;color:#e9cf98; }
.chess-record[open] { padding:10px 12px;margin-top:6px;border:1px solid #7b9bac40;border-radius:12px;background:#142333; }
#chess-moves { display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px 22px;max-height:160px;overflow:auto;padding-left:24px;font: .76rem ui-monospace,monospace; }
#chess-captures { font-size:.7rem;color:#9fb4c4; }
#screen-play .game-controls { position:fixed; }
.chess-sr { position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.chess-sr:focus-within { position:static!important;width:auto;height:auto;clip-path:none;white-space:normal;order:8;display:grid;grid-template-columns:repeat(8,1fr);gap:2px; }
.chess-sr button { min-height:36px;font-size:.55rem;background:#142434;color:#f6e6c4;border:1px solid #7d947b; }
.chess-dialog { box-sizing:border-box;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:24px;border:1px solid #c3a56c99;border-radius:20px;background:linear-gradient(135deg,#253747,#142130);color:#eaf0f5;text-align:center;box-shadow:0 24px 100px #0009; }
.chess-dialog::backdrop { background:#040b16ce;backdrop-filter:blur(5px); }
.chess-dialog h2 { margin-top:0;color:#f4db9f;font-size:1.3rem; }
.chess-dialog p { color:#bacbd9;font-size:.83rem;line-height:1.55; }
#chess-promotion-options { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0; }
.chess-promote-piece { display:grid;place-items:center;padding:10px 4px;color:#f5e5c3; }
.chess-promote-piece svg { width:48px;height:48px; }
.chess-promote-piece span { margin-top:5px;font-size:.65rem; }
.chess-result-title { margin:0;color:#ffdf9b;font-size:2rem; }
#chess-result-score { margin:0;padding:10px 22px;border:1px solid #d3ad614d;border-radius:12px;background:#273b494d;color:#ffe4a1;font-size:1.25rem;font-weight:800; }
#chess-result-reason { max-width:480px;color:#d2deea;line-height:1.6; }
#chess-result-details,#chess-persistence { font-size:.78rem;color:#9eb8cd; }
/* The shared help dialog remains the only How to play surface. */
#game-help-dialog[data-game="xadrez"] { width:min(820px,calc(100vw - 20px));max-width:820px;text-align:left;max-height:calc(100dvh - 24px);padding:24px; }
#game-help-dialog[data-game="xadrez"] > h2 { color:#f6db9e; }
.chess-handbook { text-align:left;color:#c8d5df;font-size:.9rem;line-height:1.7; }
.chess-help-intro { color:#f8e5bd;font-size:1.05rem;font-weight:700; }
.chess-sfx-credit { color:#a4b7c8;font-size:.72rem;line-height:1.6; }
.chess-sfx-credit a { color:#c8deea;text-underline-offset:3px; }
.chess-lesson { margin:12px 0;border:1px solid #8ca4b442;border-radius:13px;background:#132539;overflow:hidden; }
.chess-lesson > summary { padding:15px 16px;min-height:44px;box-sizing:border-box;font-weight:700;color:#f2dca9;cursor:pointer; }
.chess-lesson[open] > summary { border-bottom:1px solid #8ca4b42b;background:#243b50; }
.chess-lesson-content { padding:4px 17px 14px; }
.chess-lesson-content h4 { margin:18px 0 6px;color:#f1dcaa; }
.chess-lesson-content p { margin:12px 0; }
.chess-lesson-content li { margin:9px 0; }
.chess-piece-lessons { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.chess-piece-lesson { padding:14px;border:1px solid #92acbd38;border-radius:12px;background:linear-gradient(130deg,#22394a,#132336);overflow:hidden; }
.chess-piece-lesson header { display:flex;gap:8px;align-items:center;min-height:72px; }
.chess-piece-lesson header > svg { width:42px;height:48px;flex:none;color:#f5dfaa; }
.chess-piece-lesson h4 { margin:0!important;font-size:1.06rem; }
.chess-piece-lesson strong { display:block;color:#b8d0df;font-size:.75rem;line-height:1.4;font-weight:500; }
.chess-lesson-board { display:block;width:min(100%,190px);height:auto;margin:12px auto;border:5px solid #71573e;border-radius:5px;box-shadow:0 8px 20px #0004; }
.chess-piece-lesson p { font-size:.79rem;line-height:1.65; }
/* The avatar is centered in the Xadrez medal's own ring, not the Damas layout. */
.xadrez-medal-face,.xadrez-medal-initial,.xadrez-medal-lock { top:28.5%; }
@media(min-width:760px){ #screen-title.screen .title-logo { width:100%;max-width:500px; } #screen-play { --chess-ui:200px; } .chess-player { padding-left:calc((100% - min(100%,max(250px,calc((100dvh - var(--chess-ui) - var(--chess-toolbar)) * 1.18)))) / 2 + 8px);padding-right:calc((100% - min(100%,max(250px,calc((100dvh - var(--chess-ui) - var(--chess-toolbar)) * 1.18)))) / 2 + 8px); } }
@media(max-width:500px){ .chess-piece-lessons { grid-template-columns:1fr; }.chess-piece-lesson { display:grid;grid-template-columns:104px 1fr;gap:4px 12px; }.chess-piece-lesson header { grid-column:1/-1;min-height:55px; }.chess-piece-lesson .chess-lesson-board { width:94px;margin:9px auto; }.chess-piece-lesson p { margin:4px 0; }.chess-handbook { font-size:.84rem; }#game-help-dialog[data-game="xadrez"] { padding:18px 12px; }.chess-lesson-content { padding:2px 10px 12px; } }
@media(max-height:680px){ #screen-play { --chess-ui:185px; }.chess-player { min-height:30px;padding-block:2px; }.chess-top { min-height:32px; }.chess-top .chess-text-action { min-height:36px; }.chess-record summary { min-height:30px; }.chess-status { font-size:.69rem; } }
@media(min-width:860px) and (hover:hover) and (pointer:fine){
  #screen-play { max-width:none;--chess-board-ratio:1.18;--chess-board-height:calc(100dvh - var(--chess-toolbar) - 24px);--chess-panel:clamp(230px,24vw,290px);--chess-gap:clamp(16px,2vw,28px); }
  #screen-play:has(#game[data-view="classic2d"]) { --chess-board-ratio:1; }
  #game-frame { display:grid;grid-template-columns:minmax(0,1fr) var(--chess-panel);gap:var(--chess-gap);align-items:start;max-width:calc(var(--chess-board-height) * var(--chess-board-ratio) + var(--chess-panel) + var(--chess-gap));margin-inline:auto; }
  #game,#game[data-view="classic2d"] { grid-column:1;grid-row:1;width:100%;justify-self:center;align-self:start; }
  .chess-player { box-sizing:border-box;width:100%;min-width:0;padding:3px 0; }
  .chess-player > div { min-width:0;overflow-wrap:anywhere; }
  .chess-human { display:grid;grid-template-columns:23px minmax(0,1fr) auto; }
  .chess-human > .chess-color-token { grid-column:1;grid-row:1; }
  .chess-human > div { grid-column:2;grid-row:1; }
  .chess-human .chess-clock { grid-column:3;grid-row:1; }
  .chess-human .chess-status { grid-column:1/3;grid-row:2;text-align:left;padding:0; }
  .chess-human .chess-record-toggle { grid-column:3;grid-row:2; }
  .chess-sidebar { display:flex;flex-direction:column;gap:14px;grid-column:2;grid-row:1;align-self:start;max-height:var(--chess-board-height);overflow:auto;box-sizing:border-box;padding:14px;border:1px solid #93a6b53d;border-radius:15px;background:linear-gradient(145deg,#223446cc,#101d2bd9); }
  .chess-sidebar > * { flex-shrink:0; }
  .chess-sidebar .chess-top { order:0;gap:6px;padding:0; }
  .chess-sidebar .chess-actions { flex-direction:column;order:4; }
  .chess-sidebar #chess-online-controls { order:5; }
  .chess-sidebar .chess-record { order:6; }
  .chess-sr:focus-within { grid-column:1/-1;grid-row:2; }
}
@media(prefers-reduced-motion:reduce){ * { scroll-behavior:auto!important;animation:none!important;transition:none!important; } }
@media(max-width:500px){.chess-piece-lesson{display:block;}.chess-piece-lesson .chess-lesson-board{width:150px;margin:12px auto;}.chess-piece-lesson p{font-size:.86rem;line-height:1.7;}.chess-piece-lesson header{min-height:55px;}}