/* Flag Overlap - game-specific styles (screen shell reuses mapmaster.css) */

.fo-stage {
  width: min(100%, 460px);
  margin: 0 auto 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lifted);
  border: 1px solid var(--border-subtle);
}
.fo-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* matches the 240x160 comparison matrix */
  image-rendering: auto;
  background: #2a2e4a;
}

.fo-hard-badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--coral-soft);
  background: rgba(255, 107, 94, 0.14);
}
.mm-app .fo-hard-badge { display: block; width: max-content; }

.fo-guesses-left {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 10px;
}
.fo-guesses-left #fo-remaining { color: var(--text); font-weight: 700; }
.fo-pips { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.fo-pip {
  width: 26px; height: 6px; border-radius: 3px;
  background: var(--border-strong);
}
.fo-pip.used { background: var(--coral); }
.fo-pip.won { background: var(--mint); }

.fo-input-row { max-width: 460px; margin: 0 auto; }

/* autocomplete thumbnails (Normal difficulty) */
.autocomplete-item { display: flex; align-items: center; gap: 8px; }
.autocomplete-thumb {
  width: 26px; height: 18px; flex: none;
  object-fit: cover; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--border-subtle);
}

/* guess history */
.fo-history { max-width: 460px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 6px; }
.fo-hrow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.fo-hrow.correct { border-color: var(--mint); background: rgba(61, 220, 151, 0.10); }
.fo-hnum { width: 18px; color: var(--text-muted); font-weight: 700; flex: none; text-align: center; }
.fo-hthumb { width: 30px; height: 20px; flex: none; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--border-subtle); }
.fo-hname { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.fo-hbar { width: 80px; height: 6px; flex: none; border-radius: 3px; background: var(--border-strong); overflow: hidden; }
.fo-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--mint)); }
.fo-hpct { width: 52px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fo-hicon { width: 16px; flex: none; text-align: center; }
.fo-hrow.correct .fo-hicon { color: var(--mint); }

/* how-to modal */
.fo-modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(6, 8, 20, 0.72);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.fo-modal.hidden { display: none; }
.fo-modal-card {
  position: relative;
  width: min(100%, 460px);
  max-height: 90vh; overflow-y: auto;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lifted);
}
.fo-modal-card h2 { font-family: var(--font-display); margin: 0 0 12px; font-size: 20px; }
.fo-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.fo-help-list { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; color: var(--text); font-size: 14px; }
.fo-help-note { color: var(--text-muted); font-size: 13px; margin: 8px 0 0; }

@media (max-width: 640px) {
  .fo-stage { width: 100%; }
  .fo-hbar { width: 56px; }
  .fo-hpct { width: 48px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-hbar-fill { transition: none; }
}

/* battle */
.fo-oppstatus { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }
.fo-result-flag { max-width: 300px; margin: 0 auto 14px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lifted); }
.fo-result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fo-result-cols .fo-hrow { font-size: 12px; padding: 5px 8px; }
@media (max-width: 480px) { .fo-result-cols { grid-template-columns: 1fr; } }