/* ============================================================
   플러드잇 전용 스타일
   - 색이 주인공인 게임이라 판은 라이트/다크 상관없이 차분한 딥 슬레이트
     패널로 고정한다(도구 자율). 그 위에서 6색 타일이 또렷하게 뜬다.
   - 타일 크기는 격자 수(--n)에 맞춰 board 폭을 나눠 자동으로 맞춘다.
   - 색 구분 보조(.is-aid)를 켜면 타일과 팔레트에 색 번호가 겹쳐 보인다.
   ============================================================ */

:root {
  --fi-panel: #171a24;
  --fi-panel-edge: #262b3a;
  --fi-gap: #10121a;
  --fi-accent: #4f7cf0;     /* 이 도구 포인트(팔레트에 없는 톤) */
}

/* ---- 도입부 ---- */
.tool-intro { padding: clamp(30px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.tool-intro h1 { margin: 0 0 var(--space-4); }
.tool-intro .accent { color: var(--fi-accent); }
.tool-intro .lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 56ch;
  margin: 0;
}
.tool-intro .lead strong { color: var(--color-text); }
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- 설정 ---- */
.fi-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.fi-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fi-lab {
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-text-sub);
  min-width: 56px;
}
.fi-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fi-chip {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.fi-chip:hover:not([aria-pressed="true"]) { border-color: var(--fi-accent); }
.fi-chip[aria-pressed="true"] {
  background: var(--fi-accent);
  border-color: var(--fi-accent);
  color: #fff;
  font-weight: 700;
}
.fi-aid {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fi-toggle {
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.fi-toggle:hover { border-color: var(--fi-accent); }
.fi-toggle .fi-dot {
  width: 34px; height: 18px;
  border-radius: 999px;
  background: var(--color-border);
  position: relative;
  transition: background .15s ease;
  flex: none;
}
.fi-toggle .fi-dot::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.fi-toggle[aria-pressed="true"] { color: var(--color-text); border-color: var(--fi-accent); }
.fi-toggle[aria-pressed="true"] .fi-dot { background: var(--fi-accent); }
.fi-toggle[aria-pressed="true"] .fi-dot::after { transform: translateX(16px); }

/* ---- 무대 ---- */
.fi-stage { max-width: 560px; margin: 0 auto; }

/* ---- 상태 줄 ---- */
.fi-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.fi-stat {
  text-align: center;
  font-size: .82rem;
  color: var(--color-text-sub);
  line-height: 1.2;
}
.fi-stat b {
  display: block;
  font-size: 1.7rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-serif);
}

/* ---- 게임판 ---- */
.fi-board-wrap { position: relative; display: grid; }
.fi-board {
  --n: 12;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 2px;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: var(--fi-panel);
  border: 1px solid var(--fi-panel-edge);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.fi-cell {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fi-cell:active { filter: brightness(1.12); }
.fi-mark {
  font-size: clamp(8px, calc(52vw / var(--n, 12)), 15px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, .7), 0 1px 1px rgba(0, 0, 0, .55);
  line-height: 1;
  pointer-events: none;
}
.fi-board.is-aid .fi-cell { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }

/* ---- 팔레트 ---- */
.fi-palette {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 14px);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.fi-swatch {
  position: relative;
  width: clamp(46px, 13vw, 64px);
  height: clamp(46px, 13vw, 64px);
  border-radius: 14px;
  border: 2px solid rgba(0, 0, 0, .12);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .08s ease, box-shadow .12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fi-swatch:hover { transform: translateY(-2px); }
.fi-swatch:active { transform: scale(.94); }
.fi-swatch:focus-visible { outline: 3px solid var(--fi-accent); outline-offset: 3px; }
.fi-swatch .fi-mark { font-size: 1.25rem; }
.fi-swatch.is-current {
  cursor: default;
  opacity: .45;
  transform: none;
}
.fi-swatch.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px #fff;
}
.fi-swatch.is-hint {
  animation: fi-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--color-primary), 0 2px 10px rgba(0, 0, 0, .25);
}
@keyframes fi-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 6px rgba(194, 59, 48, .4); }
  50% { box-shadow: 0 0 0 5px var(--color-primary), 0 0 16px rgba(194, 59, 48, .6); }
}

/* ---- 액션 줄 ---- */
.fi-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.fi-btn {
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.fi-btn:hover:not(:disabled) { border-color: var(--fi-accent); color: var(--fi-accent); }
.fi-btn:active:not(:disabled) { transform: scale(.97); }
.fi-btn:disabled { opacity: .4; cursor: default; }

/* ---- 완주/실패 오버레이 ---- */
.fi-board-wrap > .fi-overlay,
.fi-board-wrap > .fi-board { grid-area: 1 / 1; }
.fi-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  z-index: 3;
  background: rgba(20, 23, 33, .92);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.fi-overlay-panel {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  max-width: 100%;
  color: #fff;
}
.fi-ov-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.fi-ov-title.is-lose { color: #ffb4a0; }
.fi-ov-moves { margin: 0 0 var(--space-2); font-size: 1.15rem; color: rgba(255,255,255,.85); }
.fi-ov-moves b { font-size: 2.4rem; color: var(--fi-accent); font-family: var(--font-serif); }
.fi-ov-line { margin: 0 0 var(--space-3); font-size: .95rem; color: rgba(255,255,255,.82); min-height: 1.2em; }
.fi-ov-line b { color: #fff; }
.fi-new { color: #7dd48b; font-weight: 700; }
.fi-btn-big {
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 14px 38px;
  border-radius: 999px;
  border: 0;
  background: var(--fi-accent);
  color: #fff;
  box-shadow: var(--shadow);
}
.fi-btn-big:hover { filter: brightness(1.06); }
.fi-btn-big:active { transform: scale(.97); }

/* ---- 안내 문구 ---- */
.fi-msg {
  min-height: 1.7em;
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.fi-msg b { color: var(--fi-accent); }

/* ---- 본문 ---- */
.prose { max-width: 720px; margin: clamp(40px, 6vw, 64px) auto 0; }
.prose h2 { margin: 0 0 var(--space-3); }
.prose p { margin: 0 0 var(--space-3); color: var(--color-text); }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose li strong { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .fi-cell, .fi-swatch { transition: none; }
  .fi-swatch.is-hint { animation: none; }
}

@media (max-width: 440px) {
  .fi-lab { min-width: 100%; }
  .fi-aid { margin-left: 0; }
  .fi-status { gap: var(--space-4); }
  .fi-stat b { font-size: 1.45rem; }
}