/* The Othello board and discs, shared by games/othello.html and the profile preview.
   The look comes from CSS variables set by js/shared/othello-look.js:
   --ob-bg, --ob-line, --disc-black, --disc-white, and .d3d (3D discs).
   A disc has two faces like a real one (.fa black side, .fb white side; js/shared/othello-look.js):
   a white disc is the same disc turned over, so a flip is a real half turn. --move-ms: css/games/board-game.css. */
.oboard{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1;padding:2px;background:var(--ob-line,#174a2c);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.4);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.osq{position:relative;border:0;padding:0;margin:0;aspect-ratio:1;min-width:0;background:var(--ob-bg,#2e7d4f);cursor:pointer}
.osq:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:2}
/* The four small marks of a real Othello board, at the corners of the middle 4x4 */
.osq.dotc::before{content:'';position:absolute;left:-4px;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--ob-line,#174a2c);z-index:1}
.osq{perspective:70cqw}
.osq .disc{position:absolute;inset:9%;pointer-events:none;transform-style:preserve-3d;scale:0;transition:scale calc(var(--move-ms,600ms) * .4) ease-out;translate:0 0 var(--dz,0px)}
.disc i{position:absolute;inset:0;border-radius:50%}
.disc .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.disc .fa{background:var(--disc-black,#161616);transform:translateZ(var(--dz,0px))}
.disc .fb{background:var(--disc-white,#f4f4f4);transform:rotateY(180deg) translateZ(var(--dz,0px))}
.disc .edge{display:none}

.oboard{container-type:inline-size}
.osq .co{position:absolute;top:3%;z-index:2;font-size:max(8px,2.1cqw);font-weight:700;line-height:1;color:#fff;opacity:.8;text-shadow:0 0 2px rgba(0,0,0,.9);pointer-events:none}
.osq .co.rk{left:5%}
.osq .co.fl{right:6%}

/* Flat discs (default): black side up, or turned over to show the white side */
.osq.b .disc,.osq.w .disc{scale:1}
.osq.w .disc{transform:rotate3d(var(--fx,0),var(--fy,1),0,180deg)}
.disc .face{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.25)}

/* 3D discs (reward for a win on Medium): a thick disc, half black and half white, like the real one */
.d3d .oboard{--dz:.95cqw}
.d3d .disc .fa{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--disc-black,#161616),#fff 22%) 0,var(--disc-black,#161616) 62%,color-mix(in srgb,var(--disc-black,#161616),#000 35%) 100%)}
.d3d .disc .fb{background:radial-gradient(circle at 50% 45%,#fff 0,var(--disc-white,#f4f4f4) 55%,color-mix(in srgb,var(--disc-white,#f4f4f4),#000 18%) 100%)}
.d3d .disc .face{box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.d3d .disc .edge{display:block;transform:translateZ(calc(var(--k) * var(--dz,0px)))}
.d3d .disc .ea{background:color-mix(in srgb,var(--disc-black,#161616),#000 25%)}
.d3d .disc .eb{background:color-mix(in srgb,var(--disc-white,#f4f4f4),#000 22%)}

/* A flip: the disc lifts, turns over (half a turn, away from the disc that was played) and lands.
   The page sets --flip-delay (a wave outwards from the played disc), --fx/--fy (the axis) and .flip. */
.osq.flip .disc{animation:var(--move-ms,600ms) ease-in-out var(--flip-delay,0ms) both}
.osq.flip.w .disc{animation-name:ob-to-white}
.osq.flip.b .disc{animation-name:ob-to-black}
@keyframes ob-to-white{0%{transform:rotate3d(var(--fx,0),var(--fy,1),0,0deg)}50%{transform:translateZ(5cqw) rotate3d(var(--fx,0),var(--fy,1),0,90deg)}100%{transform:rotate3d(var(--fx,0),var(--fy,1),0,180deg)}}
@keyframes ob-to-black{0%{transform:rotate3d(var(--fx,0),var(--fy,1),0,180deg)}50%{transform:translateZ(5cqw) rotate3d(var(--fx,0),var(--fy,1),0,270deg)}100%{transform:rotate3d(var(--fx,0),var(--fy,1),0,360deg)}}
/* Less motion (prefers-reduced-motion): the page sets --move-ms to 0ms until the visitor picks a speed */

/* Where the player may move (only on their turn), the last disc, a disc being sent */
.oboard.mine .osq.hint::after{content:'';position:absolute;inset:40%;border-radius:50%;background:rgba(0,0,0,.28);pointer-events:none}
.oboard.mine.white .osq.hint::after{background:rgba(255,255,255,.35)}
.osq.last .disc .face::after{content:'';position:absolute;inset:40%;border-radius:50%;background:#e53935}
.osq.pending .disc .face{opacity:.6}