/* Word Ace — games3.css : Block Blast (+ Snake, Sudoku added later) */

/* ---------- BLOCK BLAST ---------- */
body.blocks-page{
  background-color:#d8d6cb;
  background-image:linear-gradient(rgba(14,39,33,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(14,39,33,.045) 1px,transparent 1px);
  background-size:30px 30px;
}
.blocks-page .bb-intro{text-align:center;}
.blocks-page .bb-intro .lede{margin:0 auto 6px;}
.blocks-page .bb-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 4px;}
.blocks-page .bb-facts span{padding:6px 11px;color:#53625d;background:rgba(255,253,248,.78);border:1px solid #c9c8bf;border-radius:999px;font-size:12px;font-weight:700;}
.blocks-page .bb-facts span:first-child{color:#08715e;border-color:#92cdbf;}

.blocks-page .bb-game{position:relative;background:rgba(244,244,237,.9);border-color:rgba(23,54,47,.18);}
.blocks-page .bb-game-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.blocks-page .bb-status{display:flex;gap:22px;}
.blocks-page .bb-status div{display:flex;flex-direction:column;line-height:1.15;}
.blocks-page .bb-status span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#7c8a84;}
.blocks-page .bb-status strong{font-family:'Fredoka',sans-serif;font-size:22px;color:#17362f;}

.blocks-page .bb-board-wrap{display:flex;justify-content:center;}
.blocks-page .bb-board{
  --n:8;
  display:grid;
  grid-template-columns:repeat(var(--n),1fr);
  grid-template-rows:repeat(var(--n),1fr);
  gap:5px;
  width:100%;
  aspect-ratio:1/1;
  padding:8px;
  background:#cfcdc2;
  border-radius:14px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.12);
  touch-action:none;               /* important for pointer drag on touch */
}
.blocks-page .bb-cell{
  background:rgba(255,255,255,.5);
  border-radius:5px;
  transition:background .1s;
}
.blocks-page .bb-cell.on{box-shadow:inset 0 -2px 0 rgba(0,0,0,.14);}
.blocks-page .bb-cell.ghost{background:rgba(23,54,47,.22)!important;box-shadow:inset 0 0 0 2px rgba(23,54,47,.35);}

.blocks-page .bb-message{text-align:center;min-height:20px;margin:14px 0 4px;font-weight:600;color:#4a5a54;}

.blocks-page .bb-tray{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:6px;min-height:96px;}
.blocks-page .bb-piece{display:flex;align-items:center;justify-content:center;width:92px;height:92px;background:rgba(255,253,248,.6);border-radius:12px;cursor:grab;touch-action:none;}
.blocks-page .bb-piece.used{opacity:.18;cursor:default;}
.blocks-page .bb-piece:active{cursor:grabbing;}
.blocks-page .bb-mini{display:grid;gap:3px;width:auto;height:auto;max-width:76px;max-height:76px;}
.blocks-page .bb-minicell{width:16px;height:16px;border-radius:3px;background:transparent;}
.blocks-page .bb-minicell.on{box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);}

/* the element that follows the pointer while dragging */
.bb-drag{position:fixed;transform:translate(-50%,0);pointer-events:none;z-index:9999;display:grid;gap:4px;opacity:.92;}
.bb-dragcell{border-radius:6px;background:transparent;}
.bb-dragcell.on{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);}

/* game over overlay */
.blocks-page .bb-over{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,30,26,.55);backdrop-filter:blur(3px);border-radius:inherit;z-index:20;}
.blocks-page .bb-over.show{display:flex;}
.blocks-page .bb-over-card{background:#fffdf8;padding:28px 32px;border-radius:18px;text-align:center;max-width:300px;box-shadow:0 18px 50px rgba(0,0,0,.3);}
.blocks-page .bb-over-icon{font-size:40px;}
.blocks-page .bb-over-card h2{margin:6px 0 4px;font-family:'Fredoka',sans-serif;}
.blocks-page .bb-over-card p{margin:0 0 16px;color:#5a6b64;}

@media(max-width:520px){
  .blocks-page .bb-piece{width:74px;height:74px;}
  .blocks-page .bb-minicell{width:13px;height:13px;}
  .blocks-page .bb-tray{gap:10px;}
  .blocks-page .bb-status{gap:16px;}
}

/* ============ JUICE ADD-ONS ============ */

/* board frame holds grid + confetti + fx layers stacked */
.blocks-page .bb-board-frame{position:relative;width:min(88vw,340px);}
.blocks-page .bb-board-frame .bb-board{width:100%;}

/* running-dots border (reference img 2) */
.blocks-page .bb-board-frame::before{
  content:'';position:absolute;inset:-7px;border-radius:18px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,#3ad46b 0 6px,transparent 6px 22px) top/100% 3px no-repeat,
    repeating-linear-gradient(90deg,#3ad46b 0 6px,transparent 6px 22px) bottom/100% 3px no-repeat,
    repeating-linear-gradient(0deg,#3ad46b 0 6px,transparent 6px 22px) left/3px 100% no-repeat,
    repeating-linear-gradient(0deg,#3ad46b 0 6px,transparent 6px 22px) right/3px 100% no-repeat;
  opacity:.55;animation:bb-dots 1s linear infinite;
}
@keyframes bb-dots{to{background-position:top 0 left 22px,bottom 0 left 22px,left 0 top 22px,right 0 top 22px;}}

/* faster, snappier cell response */
.blocks-page .bb-cell{transition:background .06s;}
.blocks-page .bb-cell.on{animation:bb-drop .12s ease;}
@keyframes bb-drop{from{transform:scale(.82);}to{transform:scale(1);}}

/* line-clear flash+scale before empty */
.blocks-page .bb-cell.clearing{animation:bb-clear .26s ease forwards;z-index:2;}
@keyframes bb-clear{
  0%{transform:scale(1);filter:brightness(1);}
  40%{transform:scale(1.18);filter:brightness(1.9);box-shadow:0 0 14px rgba(255,255,255,.8);}
  100%{transform:scale(0);filter:brightness(2.4);opacity:0;}
}

/* confetti canvas sits over the board */
.blocks-page .bb-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;}

/* fx layer for pop text + praise */
.blocks-page .bb-fx{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible;}
.blocks-page .bb-pop{
  position:absolute;transform:translate(-50%,-50%);font-family:'Fredoka',sans-serif;font-weight:700;
  color:#fff;font-size:20px;text-shadow:0 2px 6px rgba(0,0,0,.4);animation:bb-popup 1.05s ease-out forwards;white-space:nowrap;
}
.blocks-page .bb-pop.big{font-size:30px;color:#ffe14d;text-shadow:0 3px 10px rgba(0,0,0,.5);}
@keyframes bb-popup{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  20%{opacity:1;transform:translate(-50%,-60%) scale(1.1);}
  100%{opacity:0;transform:translate(-50%,-130%) scale(1);}
}
.blocks-page .bb-praise{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;
  color:#8ce04a;-webkit-text-stroke:2px #2f5d13;text-shadow:0 4px 0 rgba(0,0,0,.18);
  animation:bb-praise .12s ease-out, bb-praise-out .35s ease-in 0.85s forwards;white-space:nowrap;
}
.blocks-page .bb-praise.hot{color:#ffd23f;-webkit-text-stroke:2px #7a4a00;font-size:44px;}
@keyframes bb-praise{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg);}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg);}}
@keyframes bb-praise-out{to{opacity:0;transform:translate(-50%,-90%) scale(1.05) rotate(-3deg);}}

/* over card: continue button prominence */
.blocks-page .bb-over-card #bb-continue{display:block;width:100%;margin-bottom:10px;background:#2fa84f;color:#fff;}
.blocks-page .bb-over-card #bb-restart{display:block;width:100%;}

/* respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  .blocks-page .bb-board-frame::before{animation:none;}
  .blocks-page .bb-cell.on,.blocks-page .bb-cell.clearing,.blocks-page .bb-pop,.blocks-page .bb-praise{animation-duration:.01s;}
}

/* ============ COSMIC SNAKE ============ */
body.snake-page{
  background:radial-gradient(ellipse at 50% 20%, #1a1440 0%, #0b0a1e 55%, #060512 100%);
}
.snake-page .sk-intro{text-align:center;color:#e9e6ff;}
.snake-page .sk-intro h1{color:#fff;}
.snake-page .sk-intro .lede{margin:0 auto 6px;color:#b3aee0;}
.snake-page .sk-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 4px;}
.snake-page .sk-facts span{padding:6px 11px;color:#b0a9e0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;font-weight:700;}
.snake-page .sk-facts span:first-child{color:#a99bff;border-color:rgba(138,107,255,.45);}

.snake-page .sk-game{background:rgba(14,12,34,.7);border-color:rgba(255,255,255,.1);}
.snake-page .sk-game-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.snake-page .sk-status{display:flex;gap:22px;}
.snake-page .sk-status div{display:flex;flex-direction:column;line-height:1.15;}
.snake-page .sk-status span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8981b5;}
.snake-page .sk-status strong{font-family:'Fredoka',sans-serif;font-size:22px;color:#efeaff;}
.snake-page .sk-controls-top{display:flex;gap:8px;}

.snake-page .sk-canvas-wrap{position:relative;display:flex;justify-content:center;width:min(92vw,420px);margin:0 auto;}
.snake-page #sk-canvas{
  width:100%;height:auto;display:block;
  background:#08061a;border-radius:12px;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.5), 0 0 30px rgba(120,90,255,.15);
  touch-action:none;
}
.snake-page .sk-message{text-align:center;min-height:20px;margin:12px 0 2px;font-weight:600;color:#9a92c8;}

/* combo readout, top-center of board */
.snake-page .sk-combo{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;
  color:#ffd34d;text-shadow:0 0 12px rgba(255,211,77,.7);pointer-events:none;z-index:5;
}


.snake-page .sk-over{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,5,18,.72);backdrop-filter:blur(3px);border-radius:12px;z-index:10;}
.snake-page .sk-over.show{display:flex;}
.snake-page .sk-over-card{background:#fffdf8;padding:26px 30px;border-radius:18px;text-align:center;max-width:290px;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.snake-page .sk-over-icon{font-size:38px;}
.snake-page .sk-over-card h2{margin:6px 0 4px;font-family:'Fredoka',sans-serif;}
.snake-page .sk-over-card p{margin:0 0 16px;color:#5a6b64;}
.snake-page .sk-over-card #sk-rewind{display:block;width:100%;margin-bottom:10px;background:#7d5bff;color:#fff;}
.snake-page .sk-over-card #sk-restart{display:block;width:100%;}
/* in rewind-offer mode, hide the game-over heading vibe slightly */
.snake-page .sk-over-card.rewind-mode h2{color:#7d5bff;}

@media(max-width:520px){
  .snake-page .sk-game-top{gap:10px;}
  .snake-page .sk-status{gap:16px;}
}

/* collapsible how-to (reduces mobile scroll/accidental swipes) */
.snake-page .sk-howto{background:rgba(14,12,34,.55);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:0 18px;margin-top:20px;}
.snake-page .sk-howto summary{cursor:pointer;padding:16px 0;font-family:'Fredoka',sans-serif;font-weight:600;color:#c8c2f0;list-style:none;}
.snake-page .sk-howto summary::-webkit-details-marker{display:none;}
.snake-page .sk-howto summary::after{content:'⌄';float:right;transition:transform .2s;}
.snake-page .sk-howto[open] summary::after{transform:rotate(180deg);}
.snake-page .sk-howto[open]{padding-bottom:18px;}
.snake-page .sk-howto h2,.snake-page .sk-howto h3{color:#e9e6ff;}
.snake-page .sk-howto p,.snake-page .sk-howto li{color:#b3aee0;}

/* lock the game area against page scroll while steering (mobile) */
.snake-page .sk-game{touch-action:none;}
.snake-page .sk-canvas-wrap{touch-action:none;overscroll-behavior:contain;}

/* ---- Word Search: words-above-grid labels ---- */
.ws-find-label{text-align:center;font-family:'Fredoka',sans-serif;font-weight:600;color:var(--ink,#2a2a2a);margin:6px 0 2px;font-size:15px;}
.ws-theme-label{text-align:center;font-weight:700;font-size:13px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.4px;margin:6px 0 6px;}
.ws-theme-hint{font-weight:500;text-transform:none;letter-spacing:0;color:#aaa;font-size:12px;}