/* styles/app/11-play-modes.css — experimental play modes (settings → "플레이 방식").
   ISOLATED on purpose: deleting this file + its <link> reverts all mode visuals. Default ("기본") uses none. */

/* ═══ "소거" (owner's clear mode): a correctly-solved region is REMOVED. The tile goes fully blank
      (transparent — shows the lead field behind, exactly like an off-board void), and edges.js re-bounds
      the surviving blocks with crisp lead lines. So the block truly disappears and the board reads as
      "shrunk", not a dim leftover grid. ═══ */
.cell.cleared {
  background: transparent !important;
  box-shadow: none !important;
}
.cell.cleared::before, .cell.cleared::after { content: none !important; }   /* no glass facet / gem gloss on a removed tile */

/* one-shot release the instant the region clears: the block PUNCHES bright & big, then bursts away */
.cell.clearFlash {
  z-index: 5;
  animation: clearBloom .52s cubic-bezier(.2,.85,.3,1) both !important;
}
@keyframes clearBloom {
  0%   { transform: scale(1);    opacity: 1; background: rgba(255,251,232,1);  box-shadow: 0 0 0 0 rgba(255,230,150,0);   filter: brightness(1.5); }
  30%  { transform: scale(1.46); opacity: 1; background: rgba(255,247,214,.82); box-shadow: 0 0 34px 15px rgba(255,228,150,.98); filter: brightness(2); }
  100% { transform: scale(1.12); opacity: 0; background: transparent;         box-shadow: 0 0 0 0 rgba(255,228,150,0);   filter: brightness(1); }
}

html[data-motion="reduced"] .cell.clearFlash { animation: none !important; }

/* ═══ 「빛 거두기」 gather run — 황혼의 수확 의식 (Model 2). Mood BOOST (오너 승인 2026-07-05, Quiet-Canvas
      제약 해제): a real DUSK — deeper (~−14%), amber-warm, with a soft canvas VIGNETTE so the board + jewels
      hold the light. jewel tokens (--s1..--s5), buttons, HUD stay put (they read relatively BRIGHTER). Both
      the vignette and the twilight are BODY-background layers → behind all content, so tiles/HUD are untouched.
      Paired with the audio mood-shift (audio.js setGatherAmbience) + ambient motes + Sha 입회 below. ═══ */
body.gatherRun[data-screen="game"] {
  background:
    radial-gradient(120% 82% at 50% 42%, rgba(0,0,0,0) 40%, rgba(40,25,6,0.30) 100%),               /* board spotlight / vignette */
    radial-gradient(120% 95% at 50% 6%, #e0d2ac 0%, #ccbb8e 48%, #b09a68 100%) !important;           /* deep amber dusk */
}
/* entry ceremony — "황혼이 내린다": a warm veil DESCENDS from the top over ~1.2s, then clears (one-shot) */
body.gatherRun[data-screen="game"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 43;
  background: linear-gradient(180deg, rgba(255,214,150,0.44) 0%, rgba(255,224,170,0.18) 34%, transparent 60%);
  animation: gatherDescend 1.2s cubic-bezier(.25,.7,.3,1) 1 both;
}
@keyframes gatherDescend {
  0%   { opacity: 0; transform: translateY(-30%); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(6%); }
}
html[data-motion="reduced"] body.gatherRun[data-screen="game"]::after { content: none; }   /* reduced-motion: no descend; the dusk state still applies */

/* ambient light-motes — a slow, sparse dusk-air field for the WHOLE run. Mood as a STATE (remembered), not an
   event. 7 motes, drift up, very dim; body-scoped so they vanish with the class. Suppressed under reduced-motion. */
#gatherAmbient { display: none; }
body.gatherRun[data-screen="game"] #gatherAmbient { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#gatherAmbient i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,218,0.9), rgba(255,216,152,0.5) 55%, transparent 78%);
  opacity: 0; animation: gatherFloat 11s ease-in-out infinite;
}
#gatherAmbient i:nth-child(1) { left: 12%; bottom: -3%; animation-delay: 0s;    animation-duration: 10.5s; }
#gatherAmbient i:nth-child(2) { left: 27%; bottom: -3%; animation-delay: 3.1s;  animation-duration: 12.5s; }
#gatherAmbient i:nth-child(3) { left: 41%; bottom: -3%; animation-delay: 6.4s;  animation-duration: 9.5s;  }
#gatherAmbient i:nth-child(4) { left: 56%; bottom: -3%; animation-delay: 1.7s;  animation-duration: 13s;   }
#gatherAmbient i:nth-child(5) { left: 68%; bottom: -3%; animation-delay: 8.2s;  animation-duration: 11s;   }
#gatherAmbient i:nth-child(6) { left: 81%; bottom: -3%; animation-delay: 4.6s;  animation-duration: 12s;   }
#gatherAmbient i:nth-child(7) { left: 90%; bottom: -3%; animation-delay: 9.4s;  animation-duration: 10s;   }
@keyframes gatherFloat {
  0%   { opacity: 0;   transform: translateY(0) scale(0.8); }
  14%  { opacity: 0.5; }
  70%  { opacity: 0.36; }
  100% { opacity: 0;   transform: translateY(-74vh) scale(1.1); }
}
html[data-motion="reduced"] #gatherAmbient { display: none !important; }

/* Sha 입회 (threshold witness, §4.7) — Sha steps into the bottom corner holding light, looks up at the board,
   fades. One-shot on entry (class re-added each gather). Existing asset; never covers the board or key numbers. */
#gatherSha { display: none; }
body.gatherRun[data-screen="game"] #gatherSha {
  display: block; position: fixed; left: 8px; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  width: 92px; height: auto; pointer-events: none; z-index: 41; transform-origin: bottom left;
  animation: gatherShaIn 3.4s ease-in-out 1 both;
}
@keyframes gatherShaIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.9); }
  14%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(1); }
}
html[data-motion="reduced"] body.gatherRun[data-screen="game"] #gatherSha { display: none; }

/* ═══ 빛의 메아리 (P0-2) — gather-win replay renders the solved picture as a GLOWING GHOST (low-saturation,
      luminous) rather than a solid re-paint, then dissolves UPWARD into light. The picture you solved-and-
      released passes by once more, then is gone. JS render logic is unchanged; this is CSS-only. ═══ */
#board.lightEcho .cell {
  filter: brightness(1.28) saturate(0.5);
  box-shadow: 0 0 9px 2px rgba(255,236,182,0.5) !important;
  opacity: 0.9;
}
#board.lightEcho .cell::before, #board.lightEcho .cell::after { opacity: 0.5 !important; }   /* soften gem facet/gloss → ghost read */
#board.lightEcho.lightEchoOut { animation: lightEchoDissolve 1s ease-in 1 forwards; }
@keyframes lightEchoDissolve {
  0%   { transform: translateY(0) scale(1);        opacity: 1; filter: brightness(1.15); }
  100% { transform: translateY(-24px) scale(1.02); opacity: 0; filter: brightness(1.7); }
}
html[data-motion="reduced"] #board.lightEcho.lightEchoOut { animation: none; opacity: 0; }   /* reduced-motion: skip the rise, just clear */