/* ==========================================================================
   DAILY PAWS — COMPLETION MOMENTS
   shared/css/completion.css · driven by shared/js/completion.js
   --------------------------------------------------------------------------
   Every layer here is absolutely placed, pointer-transparent and removed
   by the script when it finishes, so nothing in the layout ever moves.
   ========================================================================== */

/* ── Palette: warm candle-light by night, rust-amber by day ─────────── */
body{
  --dpc-line: #F4D6A0;
  --dpc-glow: rgba(244,196,122,.46);
  --dpc-glint: rgba(255,250,238,.52);
  --dpc-e-io: cubic-bezier(.62,.03,.32,1);
}
body.light{
  --dpc-line: #B8521D;
  --dpc-glow: rgba(201,133,38,.34);
  --dpc-glint: rgba(255,255,255,.62);
}

/* ── The seal: the shared Daily Paws signature ──────────────────────── */
.dpc-seal{
  position:absolute;
  pointer-events:none;
  z-index:8;
}
.dpc-seal svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  filter:drop-shadow(0 0 3px var(--dpc-glow));
}
.dpc-seal-line{
  fill:none;
  stroke:var(--dpc-line);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:50 150;
  stroke-dashoffset:50;
  animation:
    dpcTrace .66s var(--dpc-e-io) forwards,
    dpcFade .56s ease .9s forwards;
}
.dpc-seal-bloom{
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:0 0 30px 3px var(--dpc-glow), inset 0 0 18px -6px var(--dpc-glow);
  opacity:0;
  animation:dpcBloom .95s ease-out .52s forwards;
}
/* A shaped board blooms along its outline, never its bounding rectangle. */
.dpc-seal--contour .dpc-seal-bloom{
  fill:none; stroke:var(--dpc-glow); stroke-width:8;
  filter:blur(5px); box-shadow:none;
}
@keyframes dpcTrace{ to{ stroke-dashoffset:0 } }
@keyframes dpcFade{ to{ opacity:0 } }
@keyframes dpcBloom{ 0%{opacity:0} 32%{opacity:1} 100%{opacity:0} }

/* Reduced motion: no drawing, just a quiet outline that comes and goes. */
.dpc-seal--still .dpc-seal-line{
  stroke-dasharray:none; stroke-dashoffset:0; opacity:0;
  animation:dpcBloom 1.3s ease forwards;
}
.dpc-seal--still .dpc-seal-bloom{ animation:dpcBloom 1.3s ease forwards }

/* ── Glint: one pass of light across a surface ──────────────────────── */
.dpc-glint{
  position:absolute; inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.dpc-glint::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 34%,var(--dpc-glint) 50%,transparent 66%);
  transform:translateX(-105%);
  animation:dpcGlint var(--dpc-glint-dur,520ms) cubic-bezier(.4,.1,.3,1) var(--dpc-glint-delay,0ms) forwards;
}
@keyframes dpcGlint{ to{ transform:translateX(105%) } }

/* ── Pawdle: the rest of the board steps back from the winning row ─── */
.pw-grid.dpc-stage .pw-row{ transition:opacity .55s cubic-bezier(.16,.84,.44,1) }
.pw-grid.dpc-focus .pw-row:not(.dpc-win){ opacity:.42 }
.pw-row.dpc-win .pw-tile{ transition:filter .5s ease }
.pw-row.dpc-lit .pw-tile{ filter:brightness(1.07) saturate(1.08) }

/* ── Paw Paths: the light layer above the trails ───────────────────── */
.dpc-trails{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:6;
}

@media (prefers-reduced-motion:reduce){
  .pw-grid.dpc-stage .pw-row,
  .pw-row.dpc-win .pw-tile{ transition:none }
  .dpc-glint{ display:none }
}