/* ============================================================
   Flood — what differs from the shared game screen
   ============================================================ */

:root{ --accent:#8E24AA }

.board-wrap{position:relative;line-height:0}
canvas#board{
  display:block;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.08);
  touch-action:manipulation;
}

/* ---------- the colours you can play ---------- */
/* Below the board, not above it: this is the only control in the game and it
   belongs under the thumb, not under the header. */
.swatches{
  flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  padding:13px 0 2px;
}
.swatch{
  width:46px;height:46px;border:0;padding:0;cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s,opacity .2s;
}
.swatch:active{transform:scale(.92)}
/* The colour the blob already is. Playing it would do nothing, so it is shown
   as already yours rather than left looking available. */
.swatch.current{opacity:.32;cursor:default}
.swatch.current::after{
  content:'';position:absolute;inset:0;
  background:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- moves ---------- */
.moves{
  flex:none;display:flex;align-items:baseline;justify-content:center;gap:7px;
  padding:0 0 11px;font-size:12.5px;font-weight:620;color:var(--dim);
  transition:filter .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease;
}
.moves b{font-size:17px;font-weight:760;color:var(--txt-2);font-variant-numeric:tabular-nums}
/* Two left is a warning worth giving before the board is lost, not after. */
.moves.low b{color:#E5A03A}
.moves.out b{color:#dc2626}
body.settling .moves,body.settling .swatches{filter:blur(5px);opacity:.45}
@media (prefers-reduced-motion:reduce){
  body.settling .moves,body.settling .swatches{filter:none;opacity:1}
}

@media (max-width:380px){ .swatch{width:40px;height:40px} }