/* Blockburst board. Loaded after assets/css/game-base.css.

   The board is a CSS grid of 81 cells. Its width follows the card (capped so it
   stays comfortable on a desktop), and every cell is square, so one measurement
   — a cell's width, read by ui.js at the start of a drag — sizes the shape that
   follows the finger. Colours are tokens, so both themes track. */

  body.g-blockburst{
    --b1:#ff5a5f; --b2:#ffb020; --b3:#22c55e; --b4:#22d3ee; --b5:#3b82f6; --b6:#a855f7; --b7:#ff4d8d;
    --stone:#5b5382;
    --cell-empty:rgba(255,255,255,.055);
    --cell-box:rgba(255,255,255,.11);
  }
  html[data-theme="light"] body.g-blockburst{
    --stone:#9a93b8;
    --cell-empty:rgba(40,20,90,.06);
    --cell-box:rgba(40,20,90,.13);
  }

  /* ---------------- goal ---------------- */
  .bb-goal{
    position:relative; height:26px; border-radius:99px; background:var(--surface-2);
    border:1px solid var(--border); overflow:hidden; margin:-4px 0 16px;
  }
  .bb-goal-bar{
    position:absolute; inset:0 auto 0 0; width:0%; border-radius:99px;
    background:var(--grad); transition:width .45s cubic-bezier(.2,.8,.3,1);
  }
  .bb-goal-bar.done{background:linear-gradient(90deg,#22c55e,#2ee6a0)}
  .bb-goal-text{
    position:relative; display:block; text-align:center; line-height:24px;
    font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em;
  }
  .bb-goal.off .bb-goal-bar{display:none}
  .bb-goal.off .bb-goal-text{color:var(--muted); font-weight:650}
  .stat.goal .v{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

  /* ---------------- board ---------------- */
  .bb-play{position:relative; display:flex; justify-content:center}
  .bb-grid{
    --gap:3px;
    width:min(100%, 468px); aspect-ratio:1/1;
    display:grid; grid-template-columns:repeat(9, 1fr); grid-template-rows:repeat(9, 1fr); gap:var(--gap);
    padding:6px; border-radius:16px; background:var(--surface-2); border:1px solid var(--border);
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .bb-cell{
    border-radius:6px; background:var(--cell-empty); position:relative;
    transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  /* Alternate 3×3 boxes are shaded, like a Sudoku grid, so the boxes read at a glance. */
  .bb-cell.box{background:var(--cell-box)}

  .bb-cell[data-c], .bb-block{
    background:var(--bc);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18);
  }
  [data-c="1"]{--bc:var(--b1)} [data-c="2"]{--bc:var(--b2)} [data-c="3"]{--bc:var(--b3)}
  [data-c="4"]{--bc:var(--b4)} [data-c="5"]{--bc:var(--b5)} [data-c="6"]{--bc:var(--b6)}
  [data-c="7"]{--bc:var(--b7)}
  [data-c="8"]{--bc:var(--stone)}
  .bb-cell[data-c="8"]{
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.18) 0 18%, transparent 20%),
      radial-gradient(circle at 70% 65%, rgba(0,0,0,.18) 0 14%, transparent 16%),
      var(--stone);
  }

  /* Where the shape would land, and what would burst. */
  .bb-cell.ghost{background:color-mix(in srgb, var(--gc) 45%, transparent); box-shadow:inset 0 0 0 2px var(--gc)}
  .bb-cell.ghost.bad{--gc:#f87171}
  .bb-cell.hot{box-shadow:inset 0 0 0 2px #fff, 0 0 14px 1px color-mix(in srgb, var(--accent-2) 80%, transparent)}
  html[data-theme="light"] .bb-cell.hot{box-shadow:inset 0 0 0 2px var(--accent), 0 0 12px 1px color-mix(in srgb, var(--accent) 60%, transparent)}
  .bb-cell.hint{animation:bbHint 1s ease-in-out 2}
  @keyframes bbHint{50%{box-shadow:inset 0 0 0 3px #ffe14d, 0 0 16px 2px #ffe14d}}
  .bb-cell.cursor{outline:2px dashed var(--accent); outline-offset:1px}

  .bb-cell.burst{animation:bbBurst .36s ease-in forwards; z-index:2}
  @keyframes bbBurst{
    0%{transform:scale(1); filter:brightness(1)}
    40%{transform:scale(1.14); filter:brightness(1.8)}
    100%{transform:scale(.2); opacity:0}
  }
  .bb-cell.drop{animation:bbDrop .22s cubic-bezier(.2,1.4,.4,1)}
  @keyframes bbDrop{0%{transform:scale(.6)} 100%{transform:scale(1)}}

  .bb-grid.frozen{opacity:.75}

  /* Points that float up after a burst. */
  .bb-pop{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); pointer-events:none; z-index:5; text-align:center}
  .bb-pop span{
    display:block; font-weight:900; font-size:30px; letter-spacing:-.02em; color:#fff;
    text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 22px color-mix(in srgb, var(--accent-2) 90%, transparent);
    animation:bbPop 1.1s ease-out forwards;
  }
  .bb-pop span.small{font-size:17px; font-weight:800}
  html[data-theme="light"] .bb-pop span{color:var(--accent); text-shadow:0 2px 0 rgba(255,255,255,.9)}
  @keyframes bbPop{0%{opacity:0; transform:translateY(12px) scale(.8)} 15%{opacity:1; transform:translateY(0) scale(1.08)} 70%{opacity:1} 100%{opacity:0; transform:translateY(-34px)}}

  /* ---------------- tray ---------------- */
  .bb-tray{
    --mini:18px;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:16px auto 0; max-width:468px;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .bb-slot{
    height:112px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2);
    display:grid; place-items:center; cursor:grab; padding:0; transition:.15s; position:relative;
  }
  .bb-slot:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}
  .bb-slot.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--glow); background:var(--accent-soft)}
  .bb-slot.used{cursor:default}
  .bb-slot.nofit .bb-shape{opacity:.3; filter:grayscale(.8)}
  .bb-slot.dragging .bb-shape{opacity:.15}
  .bb-slot:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .bb-shape{display:grid; gap:2px; pointer-events:none}
  .bb-shape i{display:block; width:var(--mini, 18px); height:var(--mini, 18px); border-radius:4px}
  .bb-shape i.bb-block{border-radius:4px}
  @media(max-width:480px){ .bb-slot{height:96px} .bb-tray{gap:8px; --mini:15px} }

  /* The shape that follows the pointer. */
  .bb-float{
    position:fixed; left:0; top:0; z-index:60; pointer-events:none; display:grid;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); will-change:transform;
  }
  .bb-float i{display:block; border-radius:6px}

  /* ---------------- perks ---------------- */
  .bb-perks{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; min-height:0}
  .bb-perks:empty{display:none}
  .btn.perk{font-size:13px; padding:8px 12px}
  .btn.perk span{font-weight:800; margin-left:2px}
  .perk-x2{font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:99px; background:var(--accent-soft); color:var(--text)}
  .perk-x2[hidden], .btn.perk[hidden]{display:none}

  .bb-slot .bb-rot{
    position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); color:var(--text); font-size:14px; line-height:1; display:grid; place-items:center; cursor:pointer;
  }

  @media (prefers-reduced-motion: reduce){
    .bb-cell, .bb-cell.burst, .bb-cell.drop, .bb-pop span{animation:none !important; transition:none !important}
  }

  /* On a phone the four numbers share one row, so the board and the tray both
     fit on the screen without scrolling. */
  @media(max-width:520px){
    body.g-blockburst .hud{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:12px}
    body.g-blockburst .stat{padding:8px 8px 8px 11px; min-width:0}
    body.g-blockburst .stat .k{font-size:9.5px; letter-spacing:.06em}
    body.g-blockburst .stat .v{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    body.g-blockburst .bb-goal{margin:0 0 12px}
  }

  /* .btn sets a display value, which would otherwise beat the hidden attribute. */
  .controls .btn[hidden]{display:none}