/* =============================================================
   GAME: Color Flood
   ============================================================= */
.board-colorflood {
  --size: min(calc(100vw - 72px), 470px);
  --cell: calc(var(--size) / var(--n, 14));
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cf-c0 { --cc: #ff4d6d; --ci: #3a0010; }
.cf-c1 { --cc: #ffa526; --ci: #3a1e00; }
.cf-c2 { --cc: #ffe94d; --ci: #3a3000; }
.cf-c3 { --cc: #3ddc84; --ci: #00301a; }
.cf-c4 { --cc: #3dc8ff; --ci: #002a3a; }
.cf-c5 { --cc: #9a6bff; --ci: #ffffff; }
.cf-c6 { --cc: #f2f0ff; --ci: #2a2350; }

.cf-field {
  display: grid; grid-template-columns: repeat(var(--n, 14), var(--cell)); grid-auto-rows: var(--cell);
  width: var(--size); height: var(--size); padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 3px #1b1438, 0 0 0 5px #ff6bd6, 0 0 30px rgba(255, 107, 214, .35), 0 14px 30px rgba(0, 0, 0, .45);
  transition: box-shadow .4s ease;
}
.cf-cell {
  position: relative; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--cc) 75%, #fff) 0, var(--cc) 45%, color-mix(in srgb, var(--cc) 70%, #000) 100%);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18), inset 1px 1px 0 rgba(255, 255, 255, .25);
  transition: background .25s ease;
}
/* the flood: smooth, glossy surface without seams */
.cf-cell.cf-in { background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 82%, #fff), var(--cc) 55%, color-mix(in srgb, var(--cc) 82%, #000)); box-shadow: none; }
.cf-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border: 0 solid rgba(255, 255, 255, .9); border-width: var(--eT, 0) var(--eR, 0) var(--eB, 0) var(--eL, 0);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
}
.cf-eT { --eT: 2px; } .cf-eR { --eR: 2px; } .cf-eB { --eB: 2px; } .cf-eL { --eL: 2px; }
.cf-cell svg { width: 62%; height: 62%; fill: var(--ci); opacity: .55; pointer-events: none; }
.cf-in svg { opacity: .3; }
.cf-pop { animation: cfpop .42s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0) * 22ms) backwards; z-index: 1; }
@keyframes cfpop { from { transform: scale(.35); filter: brightness(1.8); } 60% { transform: scale(1.12); } }
.cf-loading { opacity: .4; pointer-events: none; }
.cf-won { box-shadow: 0 0 0 3px #1b1438, 0 0 0 5px #fff, 0 0 50px rgba(255, 107, 214, .7); animation: cfwon 1s ease-in-out 2; }
@keyframes cfwon { 50% { filter: brightness(1.25) saturate(1.2); } }

.cf-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: var(--size); }
.cf-key {
  position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--cc) 55%, #fff) 0, var(--cc) 45%, color-mix(in srgb, var(--cc) 60%, #000) 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(0, 0, 0, .4);
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
.cf-key svg { width: 46%; height: 46%; fill: var(--ci); opacity: .75; }
.cf-key small { position: absolute; right: -2px; bottom: -4px; font: 700 .7rem/1 var(--font-body); color: var(--muted); background: var(--surface); border-radius: 6px; padding: 2px 4px; box-shadow: inset 0 0 0 1px var(--line); }
.cf-key:hover:not(:disabled) { transform: translateY(-3px) scale(1.06); }
.cf-key:active:not(:disabled) { transform: scale(.94); }
.cf-key:disabled { opacity: .3; cursor: default; }
.cf-key.cf-cur { opacity: .55; box-shadow: 0 0 0 2px #fff, inset 0 -4px 0 rgba(0, 0, 0, .25); }
.cf-key.cf-hint { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--cc), 0 0 30px var(--cc); animation: cfhint 1s ease-in-out infinite; }
@keyframes cfhint { 50% { transform: translateY(-4px) scale(1.08); } }
@media (max-width: 420px) { .cf-pad { gap: 6px; } .cf-key { width: 38px; height: 38px; } }

.cf-dot { background: var(--cc); box-shadow: 0 0 8px var(--cc); }
.cf-meter { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.cf-meter span { display: block; height: 100%; background: linear-gradient(90deg, #ff6bd6, #ffe94d); border-radius: inherit; transition: width .3s ease; }
.cf-warn { box-shadow: 0 0 0 2px #ff4d6d; color: #ffd0d8; }
.cf-note { color: #ffe08a; font-weight: 600; }
.cf-sym-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--glow, #ff6bd6); color: #fff; }
.cf-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
@media (prefers-reduced-motion: reduce) { .cf-pop, .cf-won, .cf-key.cf-hint { animation: none; } }