/* games/blockdoku.html: what only the Blockdoku page needs (the page: board-game.css + puzzle.css). */
.hero{background:linear-gradient(135deg,rgba(88,166,255,.24),var(--card) 62%)}
.hero .sub{color:var(--blue)}
.bd-play{border-color:color-mix(in srgb,var(--green) 60%,var(--border))}
.choice[hidden]{display:none}

/* The colours of the blocks, as in Tetris; x: a square whose block is not known (after a reload) */
.c-i{--bk:#3ec5e0}.c-o{--bk:#f2c94c}.c-t{--bk:#a371f7}.c-s{--bk:#56c271}.c-z{--bk:#ec5b5b}.c-j{--bk:#4b7bec}.c-l{--bk:#f2994a}.c-x{--bk:#7d8ba1}

/* Today's high scores */
.bd-top{list-style:none;padding:8px 10px;margin:8px 0 6px;display:flex;flex-direction:column;gap:2px;max-width:560px}
.bd-top li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px}
.bd-top li.you{background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.bd-top li.gap{justify-content:center;padding:0;color:var(--muted)}
.bd-top .pl{min-width:28px;text-align:center;font-weight:800;color:var(--muted)}
.bd-top .podium .pl{font-size:18px}
.bd-top .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-top .nm .title{font-weight:900;color:var(--purple)}
.bd-top b{font-variant-numeric:tabular-nums;font-size:16px}
.bd-login{font-size:13px}
.bd-yesterday{font-size:13px;color:var(--muted);margin:4px 0 10px}
.bd-yesterday b{color:var(--text)}

/* The game */
.bd-score{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.bd-score small{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.bd-streak{font-weight:800;color:var(--accent)}
.bd-play-area{display:flex;flex-direction:column;align-items:center;gap:16px}
.bd-board-wrap{position:relative;width:min(100%,460px)}
.bd-board{display:grid;grid-template-rows:repeat(9,1fr);aspect-ratio:1;width:100%;border:3px solid #39424f;border-radius:10px;overflow:hidden;
  background:#39424f;gap:1px;touch-action:none;user-select:none;-webkit-user-select:none}
.bd-board:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bd-row{display:grid;grid-template-columns:repeat(9,1fr);gap:1px}
.bd-sq{background:#1d2430;position:relative;transition:background .12s}
.bd-sq.alt{background:#252e3c}
.bd-sq.on,.bd-sq.ghost{background:var(--bk);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),inset 0 -4px 0 rgba(0,0,0,.18)}
.bd-sq.ghost{opacity:.55}
.bd-sq.bad{background:color-mix(in srgb,#e5534b 45%,#1d2430)}
.bd-sq.glow::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.28);pointer-events:none}
.bd-sq.clear{animation:bd-clear .26s ease-in forwards}
.bd-sq.cur{outline:2px solid var(--blue);outline-offset:-2px;z-index:1}
.g-i{--bk:#3ec5e0}.g-o{--bk:#f2c94c}.g-t{--bk:#a371f7}.g-s{--bk:#56c271}.g-z{--bk:#ec5b5b}.g-j{--bk:#4b7bec}.g-l{--bk:#f2994a}
@keyframes bd-clear{to{background:#fff;transform:scale(.4);opacity:0}}

/* The three blocks */
.bd-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,460px);container-type:inline-size}
.bd-slot{display:flex;align-items:center;justify-content:center;aspect-ratio:1.25;background:var(--card);border:1px solid var(--border);border-radius:12px;
  cursor:grab;touch-action:none;padding:6px;font:inherit;color:inherit;--cell:min(22px,4.6cqw)}   /* the tray's width, so a larger text size fits */
.bd-slot.empty{border-style:dashed;background:none;cursor:default}
.bd-slot[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.bd-slot.stuck{opacity:.4}
.bd-slot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bd-piece{display:grid;grid-template-columns:repeat(var(--w),var(--cell));grid-template-rows:repeat(var(--h),var(--cell));gap:2px;pointer-events:none}
.bd-piece i{background:var(--bk);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.2)}
/* The block being dragged, at the board's size */
.bd-float{position:fixed;left:0;top:0;z-index:50;pointer-events:none;opacity:0}
.bd-float.show{opacity:.92}
.bd-float .bd-piece{gap:1px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}

/* The points of a move */
.bd-pop{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;z-index:5;
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
.bd-pop span{font-weight:800;color:#fff}
.bd-pop .pts{font-size:34px;font-weight:900;color:var(--accent)}
.bd-pop.go{animation:bd-pop 1.1s ease-out}
@keyframes bd-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%)}}
@media (prefers-reduced-motion:reduce){.bd-pop.go{animation:none;opacity:1}.bd-sq.clear{animation:none}}
#tip.on{color:var(--text)}

/* A rules picture (js/shared/rules-diagrams.js): the block just placed has a white edge */
.bd-sq.just{box-shadow:inset 0 0 0 2px #fff}
.rdiag .bd-board{border-width:2px}
/* The points table on the rules page */
.bd-points{border-collapse:collapse;margin:10px 0;font-size:14px;width:100%;max-width:560px}
.bd-points th,.bd-points td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left}
.bd-points th{color:var(--muted);font-weight:700;font-size:12px}
.bd-yesterday .yw{margin-right:12px;white-space:nowrap}.bd-yesterday .sc{font-weight:700;color:var(--text)}