/* Xadrez guiado: tela própria por cima do app, com tabuleiro em 3D (perspectiva CSS) */
body.cx-open{overflow:hidden}
.cx{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:var(--bg,#DCEBFF);color:var(--ink,#1D2B53);overflow:auto;-webkit-overflow-scrolling:touch}
.cx[hidden]{display:none}
.cx-top{display:flex;align-items:center;gap:10px;padding:12px 14px 4px;max-width:720px;margin:0 auto}
.cx-top h2{flex:1;min-width:0;margin:0;font-size:24px;text-align:center;overflow-wrap:break-word}
.cx-top .cx-btn.ico{flex:none}   /* palavra longa no título ("Desenvolvimento") espremia os botões redondos */
@media (max-width:480px){.cx-top{gap:6px;padding:10px 10px 4px}.cx-top h2{font-size:20px}.cx-top .cx-btn.ico{width:46px;height:46px;font-size:20px}}
.cx-body{max-width:720px;margin:0 auto;padding:6px 14px 40px;display:flex;flex-direction:column;gap:12px}
.cx-btn{font:inherit;font-weight:800;border:0;border-radius:18px;padding:10px 16px;background:var(--card,#fff);color:inherit;box-shadow:0 5px 0 var(--press,rgba(29,43,83,.28));cursor:pointer;min-height:48px}
.cx-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--press,rgba(29,43,83,.28))}
.cx-btn.ico{width:52px;height:52px;padding:0;border-radius:50%;font-size:22px}
.cx-btn.small{min-height:44px;font-size:17px}
.cx-btn.big{background:var(--sun,#FFC23D);color:#1D2B53;font-size:22px;min-height:68px}
.cx-say{margin:0;text-align:center;font-weight:800;font-size:21px}
.cx-info{margin:0;text-align:center;font-weight:700;min-height:1.4em}
.cx-info.good{color:var(--okink,#0F7C70)}.cx-info.bad{color:#C0392B}
.cx-muted{margin:0;text-align:center;opacity:.75;font-size:15px}
.cx-row{display:flex;gap:10px;justify-content:center}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cx-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:0;border-radius:22px;background:var(--card,#fff);color:inherit;font:inherit;box-shadow:0 6px 0 var(--press,rgba(29,43,83,.28));text-align:center;min-height:132px;justify-content:center;cursor:pointer}
.cx-card .e{font-size:44px;line-height:1.1}.cx-card b{font-size:19px}.cx-card small{opacity:.75;font-weight:700}
.cx-card.lock{opacity:.5}
.cx-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink,#1D2B53);color:var(--bg,#fff);padding:10px 18px;border-radius:16px;font-weight:800;z-index:90}
.cx-host{width:100%}
/* tabuleiro */
.cx-wrap{perspective:900px;width:100%;max-width:min(560px,calc(100vh - 270px));min-width:min(100%,300px);margin:0 auto}
.cx-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;border-radius:10px;box-shadow:0 18px 30px rgba(0,0,0,.35),0 0 0 3px #fff,0 0 0 11px #3A3A3A;transition:transform .5s;transform-style:preserve-3d}
.cx-wrap.v3d .cx-board{transform:rotateX(30deg) scale(.96);margin:-3% 0 -1%}
.cx-wrap.v2d .cx-board{transform:none}
.cx-sq{position:relative;border:0;padding:0;margin:0;display:grid;place-items:center;font:inherit;cursor:pointer;min-width:0;min-height:0}
.cx-sq.lt{background:#FFFFFF}.cx-sq.dk{background:#2B2B2B}   /* preto e branco, como o tabuleiro de verdade */
.cx-sq.sel{background:#F6F669!important}.cx-sq.last{box-shadow:inset 0 0 0 4px #FFC23D,inset 0 0 0 100px rgba(255,194,61,.22)}
.cx-sq.mark{box-shadow:inset 0 0 0 4px #22B8A7}
.cx-sq.dot::after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:#22B86A;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.35)}
.cx-sq.cap::after{content:"";position:absolute;inset:6%;border-radius:50%;border:5px solid rgba(200,40,40,.7)}
.cx-sq .pc{font-size:min(9vw,52px,calc((100vh - 270px)/9.5));line-height:1;pointer-events:none;transition:transform .5s}
.cx-wrap.v3d .cx-sq .pc{transform:translateY(-18%) rotateX(-30deg) scale(1.25);text-shadow:0 12px 10px rgba(0,0,0,.45)}
.pc.w{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000}
.pc.b{color:#141414;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 1px #fff}
.cx-wrap.v3d .pc.w{text-shadow:0 0 2px #000,0 0 2px #000,0 10px 8px rgba(0,0,0,.5)}
.cx-wrap.v3d .pc.b{text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 1px #fff,0 10px 8px rgba(0,0,0,.5)}   /* no 3D a peça preta na casa preta sumia */
.cx-sq .rk,.cx-sq .fl,.cx-sq .nm{position:absolute;font-style:normal;font-weight:900;pointer-events:none;line-height:1}
.cx-sq .rk,.cx-sq .fl{font-size:clamp(12px,2.8vw,17px)}
.cx-sq .rk{top:3px;left:4px}.cx-sq .fl{bottom:3px;right:4px}
.cx-sq .nm{left:3px;bottom:3px;font-size:clamp(9px,2.3vw,14px);letter-spacing:.02em}
.cx-sq.lt .rk,.cx-sq.lt .fl,.cx-sq.lt .nm{color:#111}
.cx-sq.dk .rk,.cx-sq.dk .fl,.cx-sq.dk .nm{color:#fff}
.cx-sq.sel .nm,.cx-sq.sel .rk,.cx-sq.sel .fl{color:#111}
body.tv .cx-sq .nm{font-size:16px}body.tv .cx-sq .rk,body.tv .cx-sq .fl{font-size:20px}
@media (max-width:560px){.cx-sq .pc{font-size:9.5vw}}
/* rating, trilha, relógio, histórico, PGN */
.cx-rating{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px;border-radius:18px;background:var(--card,#fff);box-shadow:0 5px 0 var(--press,rgba(29,43,83,.28))}
.cx-rating b{font-size:22px}.cx-rating small{opacity:.75;font-weight:700}
.cx-bar{display:inline-block;width:90px;height:10px;border-radius:6px;background:rgba(29,43,83,.15);vertical-align:middle;overflow:hidden}
.cx-bar i{display:block;height:100%;background:var(--okink,#0F7C70);border-radius:6px}
.cx-ladder{display:flex;flex-direction:column-reverse;gap:6px}
.cx-step{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:var(--card,#fff);opacity:.7}
.cx-step span{font-size:26px}.cx-step.got{opacity:.9}.cx-step.now{opacity:1;outline:3px solid var(--sun,#FFC23D)}
.cx-list{display:flex;flex-direction:column;gap:8px}
.cx-li{font:inherit;text-align:left;border:0;border-radius:14px;padding:10px 14px;background:var(--card,#fff);color:inherit;min-height:48px;cursor:pointer;box-shadow:0 3px 0 var(--press,rgba(29,43,83,.28))}
.cx-li.bad{border-left:6px solid #C0392B}
.cx-clocks{display:flex;justify-content:center;gap:12px}
.cx-clk{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums;padding:6px 14px;border-radius:14px;background:var(--card,#fff);opacity:.6}
.cx-clk.on{opacity:1;outline:3px solid var(--sun,#FFC23D)}
.cx-moves{margin:0;font-size:15px;line-height:1.5;text-align:center;word-break:break-word}
.cx-pgn{width:100%;box-sizing:border-box;min-height:160px;font:14px/1.4 ui-monospace,monospace;border-radius:14px;padding:10px;border:2px solid rgba(29,43,83,.2);background:var(--card,#fff);color:inherit}
.cx-btn:focus-visible,.cx-card:focus-visible,.cx-li:focus-visible,.cx-sq:focus-visible{outline:4px solid var(--sun,#FFC23D);outline-offset:3px;z-index:2}
.cx-card[disabled]{cursor:not-allowed}
.cx-row.wrap{flex-wrap:wrap}
.cx-btn.on{background:var(--sun,#FFC23D);color:#1D2B53}
.cx-card.hi{outline:3px solid var(--sun,#FFC23D)}
/* 🙋 ajuda / 🎓 tutorial: as ideias aparecem num cartão logo abaixo do aviso */
.cx-tip{background:var(--card,#fff);border-radius:18px;padding:10px 14px;box-shadow:0 4px 0 var(--press,rgba(29,43,83,.28));border-left:6px solid var(--sun,#FFC23D)}
.cx-tip b{display:block;margin-bottom:4px}
.cx-tip ul{margin:0;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:16px;line-height:1.35}
body.tv .cx-tip ul{font-size:22px}