/* The Owldoku board, shared by games/owldoku.html, its rules page and the profile preview.
   The look comes from CSS variables set by js/shared/owldoku-look.js: --od-c0..--od-c9 (the regions),
   --od-line, --od-edge (region borders), --od-mark (crosses), --od-owl (the owl's colour, with .otint),
   and .o3d (3D regions). A square: .x crossed, .owl an owl, .wrong a wrong owl, .auto blocked by an owl;
   .et/.eb/.el/.er a region border on that side. The owl is the HAKOO logo. */
.oboard-owl{display:grid;grid-template-columns:repeat(var(--n,8),1fr);width:100%;aspect-ratio:1;border:3px solid var(--od-edge,#26221d);border-radius:8px;overflow:hidden;background:var(--od-edge,#26221d);gap:0;user-select:none;-webkit-user-select:none;touch-action:none}
.ocell{position:relative;min-width:0;aspect-ratio:1;border:0;margin:0;padding:0;cursor:pointer;box-shadow:inset -1px -1px 0 var(--od-line,rgba(0,0,0,.16));touch-action:none;-webkit-tap-highlight-color:transparent}
/* Region borders: a thick line drawn inside the square on the sides where the region changes */
.ocell::before{content:'';position:absolute;inset:0;pointer-events:none;border:0 solid var(--od-edge,#26221d)}
.ocell.et::before{border-top-width:2px}
.ocell.eb::before{border-bottom-width:2px}
.ocell.el::before{border-left-width:2px}
.ocell.er::before{border-right-width:2px}
.ocell:focus-visible{outline:3px solid var(--blue,#58a6ff);outline-offset:-3px;z-index:2}
@media (hover:hover){.ocell:hover:not(.owl):not(.wrong){filter:brightness(1.07)}}

/* A cross, a blocked square (a dot), a wrong owl (a red cross on a broken heart) */
.ocell.x::after,.ocell.wrong::after{content:'';position:absolute;inset:26%;background:
  linear-gradient(45deg,transparent calc(50% - 1.5px),var(--od-mark,#26221d) calc(50% - 1.5px),var(--od-mark,#26221d) calc(50% + 1.5px),transparent calc(50% + 1.5px)),
  linear-gradient(-45deg,transparent calc(50% - 1.5px),var(--od-mark,#26221d) calc(50% - 1.5px),var(--od-mark,#26221d) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.ocell.wrong::after{--od-mark:#d32f2f;inset:18%}
.ocell.wrong{box-shadow:inset 0 0 0 3px rgba(211,47,47,.55)}
.ocell.auto::after{content:'';position:absolute;left:50%;top:50%;width:14%;height:14%;transform:translate(-50%,-50%);border-radius:50%;background:var(--od-mark,#26221d);opacity:.38}

/* The owl: the HAKOO logo, with another colour painted over its purple (.otint) */
.ocell .owl-pic{position:absolute;inset:8%;background:url(../iconer/HAKOO.png) center/contain no-repeat;isolation:isolate;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.otint .ocell .owl-pic::after{content:'';position:absolute;inset:0;background:var(--od-owl,#5900b0);-webkit-mask:url(../iconer/HAKOO.png) center/contain no-repeat;mask:url(../iconer/HAKOO.png) center/contain no-repeat;mix-blend-mode:color}
.ocell.owl .owl-pic{animation:od-land .35s cubic-bezier(.3,1.5,.6,1) both}
@keyframes od-land{0%{transform:scale(.2) translateY(-30%);opacity:0}100%{transform:none;opacity:1}}
.ocell.pending{animation:od-wait .6s ease-in-out infinite alternate}
@keyframes od-wait{to{filter:brightness(1.25)}}
.ocell.shake{animation:od-shake .35s}
@keyframes od-shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}

/* 3D regions (reward for Medium): every square a raised tile */
.o3d .ocell{box-shadow:inset 2px 2px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(0,0,0,.18)}

/* Solved: the owls bob, one after the other */
.oboard-owl.solved .ocell{cursor:default}
.oboard-owl.solved .ocell.owl .owl-pic{animation:od-bob .8s ease both;animation-delay:calc(var(--r,0) * 90ms)}
@keyframes od-bob{0%,100%{transform:none}40%{transform:translateY(-14%) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ocell.owl .owl-pic,.oboard-owl.solved .ocell.owl .owl-pic,.ocell.pending,.ocell.shake{animation:none}}