/* The chess board and pieces, shared by games/chess.html and the profile preview.
   The look comes from CSS variables set by js/shared/chess-look.js:
   --sq-light, --sq-dark, --piece-white, --piece-black, --pw-edge, --pb-edge, and .p3d (3D pieces). */
.cboard{position:relative;display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:560px;margin:0 auto;aspect-ratio:1;border-radius:6px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.4);container-type:inline-size;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.sq{position:relative;border:0;padding:0;margin:0;aspect-ratio:1;min-width:0;background:var(--sq-light,#f0d9b5);cursor:pointer;display:flex;align-items:center;justify-content:center;font:inherit}
.sq.dk{background:var(--sq-dark,#b58863)}
.sq:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:2}

/* Coordinates in the corner squares, in the other square colour */
.sq .co{position:absolute;font-size:max(9px,2.3cqw);font-weight:800;line-height:1;pointer-events:none;color:var(--sq-dark,#b58863)}
.sq.dk .co{color:var(--sq-light,#f0d9b5)}
.co.rk{top:3%;left:4%}
.co.fl{bottom:3%;right:5%}

/* Pieces: filled chess symbols in the member's colours, with an edge so they show on every square */
.pc{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans","Apple Symbols","Arial Unicode MS",serif;font-variant-emoji:text;line-height:1;pointer-events:none;display:inline-block}
.sq .pc{position:relative;z-index:1;font-size:10.6cqw;transform:translateY(-2%)}
.pc.pw{color:var(--piece-white,#f4f1ea);text-shadow:0 0 1px var(--pw-edge,#000),0 0 1px var(--pw-edge,#000),0 0 1px var(--pw-edge,#000)}
.pc.pb{color:var(--piece-black,#1c1c1c);text-shadow:0 0 1px var(--pb-edge,#fff),0 0 1px var(--pb-edge,#fff)}

/* 3D pieces (reward for a win on Medium): shaded fill and a shadow on the board */
.p3d .pc.pw,.p3d .pc.pb{color:transparent;text-shadow:none;-webkit-background-clip:text;background-clip:text}
.p3d .pc.pw{background-image:linear-gradient(160deg,color-mix(in srgb,var(--piece-white,#f4f1ea),#fff 55%) 15%,var(--piece-white,#f4f1ea) 50%,color-mix(in srgb,var(--piece-white,#f4f1ea),#000 38%) 90%);filter:drop-shadow(0 0 .6px var(--pw-edge,#000)) drop-shadow(0 0 .4px var(--pw-edge,#000)) drop-shadow(.3cqw .6cqw .4cqw rgba(0,0,0,.45))}
.p3d .pc.pb{background-image:linear-gradient(160deg,color-mix(in srgb,var(--piece-black,#1c1c1c),#fff 42%) 15%,var(--piece-black,#1c1c1c) 50%,color-mix(in srgb,var(--piece-black,#1c1c1c),#000 45%) 90%);filter:drop-shadow(0 0 .6px var(--pb-edge,#fff)) drop-shadow(.3cqw .6cqw .4cqw rgba(0,0,0,.5))}

/* Last move, selection, where the selected piece can go, check */
.sq.from::before,.sq.to::before{content:'';position:absolute;inset:0;background:rgba(255,213,0,.38)}
.sq.sel::before{content:'';position:absolute;inset:0;background:rgba(88,166,255,.5)}
.sq.target::after{content:'';position:absolute;inset:36%;border-radius:50%;background:rgba(0,0,0,.28);z-index:2;pointer-events:none}
.sq.target.cap::after{inset:4%;background:none;border:.8cqw solid rgba(0,0,0,.3)}
.sq.check::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,40,40,.95) 0,rgba(230,0,0,.55) 45%,rgba(160,0,0,0) 75%)}
.sq.pending .pc{opacity:.6}
.cboard.mine .sq{cursor:pointer}

/* Fog of War: a square the player cannot see */
.cboard .sq.fog{cursor:default}
.sq.fog::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 30% 35%,rgba(150,160,175,.25),transparent 60%),repeating-linear-gradient(135deg,#4a525e 0 7%,#434a55 7% 14%);opacity:.96}
.sq.fog .co{position:absolute;z-index:2;color:#9aa3ae}
/* Fog of War memory: a piece last seen here, shown as a faint shadow with a "?" until the square is in sight again */
.sq.ghost .pc{z-index:2;opacity:.42;filter:grayscale(.6) blur(.3px)}
.sq.ghost::after{content:'?';position:absolute;z-index:3;top:5%;right:8%;font:800 max(11px,3.4cqw)/1 system-ui,sans-serif;color:#e6edf3;text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none}
/* Where one of my pieces was just taken (the shadow there is what took it) */
.sq.took::before{content:'';position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 .8cqw #f85149;animation:took 1.2s ease-in-out 2}
@keyframes took{50%{box-shadow:inset 0 0 0 1.5cqw #f85149}}
@media (prefers-reduced-motion:reduce){.sq.took::before{animation:none}}

/* Captured pieces next to the player names */
.caps{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0;font-size:15px;line-height:1;margin-left:4px;min-width:0}
.caps .pc{font-size:17px}
.caps .adv{font-size:12px;color:var(--muted);margin-left:4px;font-weight:700}