/* The Stratego board and pieces, shared by games/stratego.html and the profile preview.
   The look comes from CSS variables set by js/shared/stratego-look.js:
   --sb-bg, --sb-line, --sb-water, --piece-black (Red's army), --piece-white (Blue's army), and .s3d (3D pieces). */
.sboard{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;width:100%;max-width:600px;margin:0 auto;aspect-ratio:1;padding:3px;background:var(--sb-line,#4e7a33);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.4);touch-action:manipulation;user-select:none;-webkit-user-select:none;container-type:inline-size}
.ssq{position:relative;border:0;padding:0;margin:0;aspect-ratio:1;min-width:0;background:var(--sb-bg,#7fae57);cursor:pointer;font:inherit}
.ssq:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:3}
.ssq.lake{background:var(--sb-water,#3f86c9);cursor:default;background-image:repeating-linear-gradient(160deg,rgba(255,255,255,.12) 0 3px,transparent 3px 11px)}
.ssq .co{position:absolute;z-index:2;font-size:max(7px,1.7cqw);font-weight:700;line-height:1;color:var(--sb-line,#4e7a33);opacity:.95;pointer-events:none}
.ssq .co.rk{left:5%;top:4%}
.ssq .co.fl{right:6%;bottom:4%}

/* Pieces: a block in the army's colour; your own and seen pieces show their rank */
.ssq .piece{position:absolute;inset:9%;border-radius:18%;pointer-events:none;transform:scale(0);transition:transform .12s;display:grid;place-items:center}
.ssq.pb .piece,.ssq.pw .piece{transform:scale(1)}
.ssq.pb .piece{background:var(--piece-black,#c62828)}
.ssq.pw .piece{background:var(--piece-white,#1f5fd6)}
.ssq .piece{box-shadow:inset 0 -3px 0 rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.45)}
.ssq .piece b{font-size:max(10px,3.6cqw);font-weight:900;line-height:1;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
/* An enemy piece you have not seen: its back, with a little emblem */
.ssq.unknown .piece::after{content:'';width:34%;height:34%;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
/* An enemy piece that has moved (so it is no Bomb or Flag), and one of yours the enemy has seen */
.ssq.moved .piece::before{content:'';position:absolute;right:8%;bottom:8%;width:14%;height:14%;border-radius:50%;background:rgba(255,255,255,.85)}
.ssq.seen .piece::before{content:'👁';position:absolute;right:4%;top:2%;font-size:max(7px,1.6cqw);line-height:1}

/* 3D pieces (reward for a win on Medium) */
.s3d .ssq.pb .piece{background:linear-gradient(160deg,color-mix(in srgb,var(--piece-black,#c62828),#fff 30%) 0,var(--piece-black,#c62828) 45%,color-mix(in srgb,var(--piece-black,#c62828),#000 40%) 100%);box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),2px 4px 5px rgba(0,0,0,.55)}
.s3d .ssq.pw .piece{background:linear-gradient(160deg,color-mix(in srgb,var(--piece-white,#1f5fd6),#fff 30%) 0,var(--piece-white,#1f5fd6) 45%,color-mix(in srgb,var(--piece-white,#1f5fd6),#000 40%) 100%);box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),2px 4px 5px rgba(0,0,0,.55)}

/* Your set-up area, the chosen piece, where it can go, the last move, a battle */
.sboard.setup .ssq.home{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.ssq.sel{background:color-mix(in srgb,var(--green) 55%,var(--sb-bg,#7fae57))}
.sboard.mine .ssq.to::after{content:'';position:absolute;inset:38%;border-radius:50%;background:rgba(0,0,0,.35);pointer-events:none;z-index:2}
.sboard.mine .ssq.to.pb::after,.sboard.mine .ssq.to.pw::after{inset:6%;border-radius:18%;background:none;border:3px solid rgba(255,235,59,.9)}
.ssq.from{box-shadow:inset 0 0 0 2px rgba(229,57,53,.5)}
.ssq.last{box-shadow:inset 0 0 0 3px rgba(229,57,53,.85)}
.ssq.fight .piece{animation:sb-fight .5s ease}
@keyframes sb-fight{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
.ssq.pending .piece{opacity:.6}
@media (prefers-reduced-motion:reduce){.ssq .piece{transition:none}.ssq.fight .piece{animation:none}}

/* The board turned so that you look from the enemy's side (.behind, after the 3D unlock):
   your own pieces show their backs, as in the real game */
.sboard.behind:not(.white) .ssq.pb .piece b,.sboard.behind.white .ssq.pw .piece b{display:none}
.sboard.behind:not(.white) .ssq.pb .piece::after,.sboard.behind.white .ssq.pw .piece::after{content:'';width:34%;height:34%;border-radius:50%;border:2px solid rgba(255,255,255,.55)}