/* ── chess against Skoli (shell + HUD come from games.css) ── */
.ch-stage{position:relative;isolation:isolate;flex:1;min-height:0;container-type:size;padding:0 clamp(12px,1.6vw,32px) clamp(12px,1.6vw,32px)}
.ch-play{--g:clamp(14px,1.6vw,32px);--pw:clamp(170px,16vw,290px);--bd:min(100cqh / 1.08,100cqw - 2 * var(--pw) - 2 * var(--g));
  height:100%;display:grid;grid-template:"me board cpu" auto / var(--pw) var(--bd) var(--pw);gap:var(--g);place-content:center;align-items:center}

/* the two players, one on each side of the board */
.ch-side{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(14px,1.2vw,22px);border-radius:24px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);text-align:center;transition:background .35s,border-color .35s}
.ch-side.me{grid-area:me}.ch-side.cpu{grid-area:cpu}
.ch-side.on{background:rgba(255,255,255,.16);border-color:var(--sun)}
.ch-side .av{flex:none;width:clamp(64px,5.4vw,96px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;transition:scale .4s cubic-bezier(.34,1.56,.64,1)}
.ch-side.on .av{scale:1.06}
.ch-side.me .av img{height:92%;width:auto}
.ch-side.cpu .av img{width:100%;height:100%;object-fit:cover}
.ch-side .tx{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;width:100%}
.ch-side .ch-hd{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.ch-side b{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(24px,1.9vw,36px);line-height:1;color:#fff}
.ch-side p{font-size:clamp(15px,1.05vw,19px);line-height:1.35;color:rgba(255,255,255,.92);min-height:2.7em;margin:0}
.ch-side .caps{display:flex;flex-wrap:wrap;justify-content:center;min-height:clamp(35px,2.9vw,51px);direction:ltr}
.ch-side .caps img{width:clamp(22px,1.8vw,32px);aspect-ratio:5/8;margin-inline-end:-6px;animation:chIn .35s cubic-bezier(.34,1.56,.64,1)}
.ch-dots{display:inline-flex;gap:4px;margin-inline-start:6px;vertical-align:middle}
.ch-dots i{width:6px;height:6px;border-radius:50%;background:var(--sun);animation:chDot 1.1s ease-in-out infinite}
.ch-dots i:nth-child(2){animation-delay:.16s}.ch-dots i:nth-child(3){animation-delay:.32s}
@keyframes chDot{0%,70%,100%{opacity:.35;translate:0 0}35%{opacity:1;translate:0 -4px}}
@keyframes chIn{from{scale:.3;opacity:0}}

/* board: always a-file on the left, whatever the page direction */
.ch-board{grid-area:board;position:relative;width:var(--bd);aspect-ratio:1;margin-top:calc(var(--bd) * .08);touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}
.ch-sqs{position:absolute;inset:0;border-radius:clamp(12px,1vw,20px);overflow:hidden;background:#fff;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.ch-sq{position:relative;border:0;padding:0;margin:0;background:#fff;font:inherit;cursor:inherit;transition:background .22s}
.ch-sq.d{background:#23232b}
.ch-sq.last{background:color-mix(in srgb,var(--sun) 55%,#fff)}
.ch-sq.d.last{background:color-mix(in srgb,var(--sun) 55%,#23232b)}
.ch-sq.sel{background:var(--sun)}
.ch-sq.chk{background:color-mix(in srgb,var(--flame) 80%,#fff);animation:chChk 1.2s ease-in-out infinite alternate}
@keyframes chChk{to{background:color-mix(in srgb,var(--flame) 50%,#fff)}}
.ch-sq.mine{cursor:grab}
.ch-sq.to{cursor:pointer}
.ch-sq:focus-visible{outline:3px solid var(--flame);outline-offset:-3px}
.ch-sq i{position:absolute;font-style:normal;font-weight:700;font-size:clamp(9px,calc(var(--bd) * .021),15px);line-height:1;color:#fff;opacity:.9;pointer-events:none}
.ch-sq:not(.d) i{color:#23232b}
.ch-sq i.f{bottom:6%;right:7%}
.ch-sq i.r{top:6%;left:7%}

/* legal-move hints: a dot on a free square, a ring around a piece that can be taken */
.ch-sq::after{content:"";position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--sun);opacity:0;scale:.3;transition:opacity .18s,scale .28s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:40}
.ch-sq.to::after{opacity:.95;scale:1}
.ch-sq.to.cap::after{width:88%;background:none;border:clamp(4px,calc(var(--bd) * .011),8px) solid var(--flame);opacity:1}
.ch-sq.to.hov::after{scale:1.35;opacity:1}
.ch-sq.to.cap.hov::after{scale:1.06}
.ch-sq.to:hover::after{scale:1.25}
.ch-sq.to.cap:hover::after{scale:1.05}

.ch-pcs{position:absolute;inset:0;pointer-events:none}
/* 3D pieces are 1.6 squares tall: they stand on their square, and nearer ranks paint over the ones behind */
.ch-pc{position:absolute;top:0;left:0;width:12.5%;height:20%;translate:calc(var(--x) * 100%) calc((var(--y) * .625 - .375) * 100%);z-index:calc(var(--y) + 1);transform-origin:50% 76%;transform-box:border-box;transition:translate .32s cubic-bezier(.3,.85,.3,1),scale .22s cubic-bezier(.34,1.56,.64,1),opacity .25s;will-change:translate}
.ch-pc.sel{scale:1.12}
.ch-pc.top{z-index:20}
.ch-pc.new{opacity:0;scale:.5}
.ch-pc.gone{opacity:0;scale:.55;transition-delay:.1s}
.ch-pc.drag{transition:scale .15s;scale:1.22;z-index:30}
.ch-pc.nope{animation:chNope .4s}
@keyframes chNope{25%{rotate:-8deg}50%{rotate:8deg}75%{rotate:-4deg}}

/* pawn promotion */
.ch-promo{position:absolute;inset:0;z-index:50;border-radius:clamp(12px,1vw,20px);display:grid;place-items:center;padding:6%;background:rgba(3,40,140,.6);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;touch-action:manipulation}
.ch-promo.show{opacity:1;visibility:visible}
.ch-promo .box{direction:rtl;background:#fff;border-radius:20px;padding:clamp(14px,4%,26px);text-align:center;color:var(--ink);width:100%;max-width:560px}
.ch-promo p{font-weight:700;font-size:clamp(15px,calc(var(--bd) * .036),22px);line-height:1.3;margin:0 0 .7em}
.ch-promo .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ch-promo button{border:2px solid var(--line);border-radius:16px;background:var(--soft);padding:6px 2px 8px;font:inherit;font-weight:700;font-size:clamp(13px,calc(var(--bd) * .027),17px);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,translate .3s cubic-bezier(.34,1.56,.64,1)}
.ch-promo button:hover,.ch-promo button:focus-visible{background:var(--sky);border-color:var(--blue);translate:0 -3px;outline:0}
.ch-promo img{display:block;width:62%;aspect-ratio:5/8;margin:0 auto}

.ch-credit{font-size:12px;line-height:1.3;color:var(--mute)}
.ch-credit a{color:inherit;text-decoration:underline}
.ch-resume{display:none}
.ch-resume.show{display:inline-flex;height:auto;padding:12px 26px;font-size:17px}
#ovDone .sg-modes{margin-top:6px}

.ch-spark{position:fixed;z-index:40;width:12px;height:12px;pointer-events:none;background:var(--c,var(--sun))}
.ch-spark.r{border-radius:50%}
.ch-spark.t{clip-path:polygon(50% 0,100% 100%,0 100%)}

/* tall screens: Skoli above the board, the player below */
@media (max-aspect-ratio:5/4){
  .ch-play{--g:clamp(8px,1.2vh,16px);--sh:clamp(66px,8vh,92px);--bd:min(100cqw,(100cqh - 2 * var(--sh) - 2 * var(--g)) / 1.08);
    grid-template:"cpu" var(--sh) "board" auto "me" var(--sh) / var(--bd)}
  .ch-side{flex-direction:row;gap:10px;padding:8px 12px;border-radius:18px;text-align:start;height:100%;min-width:0}
  .ch-side .av{width:calc(var(--sh) - 22px)}
  .ch-side .tx{align-items:stretch;gap:3px}
  .ch-side .ch-hd{flex-direction:row;justify-content:space-between;gap:8px}
  .ch-side b{font-size:clamp(19px,2.8vh,26px)}
  .ch-side p{min-height:0;font-size:clamp(13.5px,1.8vh,17px);line-height:1.2}
  .ch-side .caps{justify-content:flex-end;flex-wrap:nowrap;min-height:0;min-width:0;max-height:28px;overflow:hidden}
  .ch-side .caps img{width:clamp(15px,2vh,20px);margin-inline-end:-5px;flex:none}
}
@media (max-width:720px){
  .ch-stage{padding:2px 10px 10px}
  .sg-stats{justify-content:space-around}
}
/* short landscape phones */
@media (max-height:520px) and (min-aspect-ratio:5/4){
  .ch-play{--pw:clamp(130px,20vw,190px)}
  .ch-side{gap:6px;padding:10px;border-radius:18px}
  .ch-side .av{width:44px}
  .ch-side b{font-size:20px}
  .ch-side p{font-size:13.5px}
  .ch-side .caps img{width:16px}
  .ch-stage{padding-bottom:8px}
  .sg-hud{height:52px}
}
@media (prefers-reduced-motion:reduce){
  .ch-pc,.ch-sq,.ch-side .av{transition-duration:.01s}
  .ch-sq.chk,.ch-dots i,.ch-pc.nope{animation:none}
}