/* Fizik Oyunları — tüm kurallar .fa-game altında, tema stillerine karışmaz. */
.fa-game {
  --fa-ink: #1b1f2a;
  --fa-muted: #5f6675;
  --fa-line: #dfe3ea;
  --fa-card: #ffffff;
  --fa-soft: #f4f6fa;
  --fa-accent: #2f5bea;
  --fa-accent-ink: #ffffff;
  --fa-ok: #1f9d55;
  --fa-ok-soft: #e3f5ea;
  --fa-bad: #d64545;
  --fa-bad-soft: #fbe7e7;
  max-width: 560px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid var(--fa-line);
  border-radius: 14px;
  background: var(--fa-card);
  color: var(--fa-ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
.fa-game *, .fa-game *::before, .fa-game *::after { box-sizing: border-box; }

.fa-game .fa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fa-game .fa-title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--fa-ink); }
.fa-game .fa-no { color: var(--fa-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-game .fa-sub { margin: 6px 0 16px; color: var(--fa-muted); font-size: 14px; }

.fa-game .fa-clues { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.fa-game .fa-clue {
  display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; align-items: start;
  margin: 0; padding: 12px; border-radius: 10px; background: var(--fa-soft);
}
.fa-game .fa-clue.is-new { animation: fa-in .25s ease-out; }
.fa-game .fa-clue.is-locked { color: var(--fa-muted); background: transparent; border: 1px dashed var(--fa-line); }
.fa-game .fa-clue-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fa-accent); color: var(--fa-accent-ink); font-size: 13px; font-weight: 700;
}
.fa-game .is-locked .fa-clue-n { background: var(--fa-line); color: var(--fa-muted); }
.fa-game .fa-clue-t { padding-top: 3px; }
.fa-game .fa-guess {
  grid-column: 2; justify-self: start; font-size: 13px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.fa-game .fa-guess.is-ok { background: var(--fa-ok-soft); color: var(--fa-ok); }
.fa-game .fa-guess.is-bad { background: var(--fa-bad-soft); color: var(--fa-bad); }

.fa-game .fa-form { display: flex; gap: 8px; }
.fa-game .fa-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; font-size: 16px;
  border: 1px solid var(--fa-line); border-radius: 10px; background: #fff; color: var(--fa-ink);
}
.fa-game .fa-input:focus { outline: 2px solid var(--fa-accent); outline-offset: 1px; border-color: transparent; }
.fa-game .fa-btn {
  height: 44px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--fa-accent); color: var(--fa-accent-ink); font-size: 15px; font-weight: 600;
}
.fa-game .fa-btn:hover { filter: brightness(1.08); }
.fa-game .fa-btn:focus-visible { outline: 2px solid var(--fa-ink); outline-offset: 2px; }
.fa-game .fa-msg { min-height: 1.5em; margin: 8px 0 0; font-size: 14px; color: var(--fa-muted); }

.fa-game .fa-card { margin-top: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--fa-line); animation: fa-in .3s ease-out; }
.fa-game .fa-card.is-won { background: var(--fa-ok-soft); border-color: transparent; }
.fa-game .fa-card.is-lost { background: var(--fa-bad-soft); border-color: transparent; }
.fa-game .fa-verdict { margin: 0; font-size: 20px; font-weight: 700; }
.fa-game .fa-answer { margin: 4px 0 8px; }
.fa-game .fa-read { font-weight: 600; color: var(--fa-accent); text-decoration: none; }
.fa-game .fa-read:hover { text-decoration: underline; }

.fa-game .fa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 12px; text-align: center; }
.fa-game .fa-stat-v { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-game .fa-stat-l { display: block; font-size: 12px; color: var(--fa-muted); }

.fa-game .fa-dist { display: grid; gap: 4px; margin-bottom: 14px; }
.fa-game .fa-dist-row { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.fa-game .fa-dist-bar {
  display: block; min-width: 24px; padding: 1px 6px; border-radius: 4px; text-align: right;
  background: #aab2c2; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fa-game .fa-dist-bar.is-today { background: var(--fa-ok); }
.fa-game .fa-share { width: 100%; }
.fa-game .fa-next { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--fa-muted); font-variant-numeric: tabular-nums; }

@keyframes fa-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fa-game .fa-clue.is-new, .fa-game .fa-card { animation: none; } }
@media (max-width: 480px) {
  .fa-game { padding: 16px; margin: 16px 0; border-radius: 12px; }
  .fa-game .fa-title { font-size: 20px; }
  .fa-game .fa-stat-v { font-size: 20px; }
}