/* Type the Countries: styles only this game uses (shared look lives in core/styles.css) */
/* After the game: tap a country to see its name */
.study-hint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%) rotate(-1.5deg);
  background: var(--sun); border: var(--line); border-radius: 999px; box-shadow: var(--drop-small);
  padding: 5px 14px; font-weight: 900; font-size: 16px; white-space: nowrap; pointer-events: none;
}
.name-tag {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  background: #fff; border: var(--line); border-radius: 14px; box-shadow: var(--drop-small);
  padding: 5px 12px; font-weight: 900; font-size: 18px; white-space: nowrap;
  pointer-events: none;
  animation: tag-in 0.2s ease-out;
}
.name-tag.below { transform: translate(-50%, 16px); }
.name-tag.got { background: var(--leaf-light); color: var(--leaf-ink); }
.name-tag.miss { background: var(--pink-light); color: var(--pink-ink); }
.name-tag[hidden], .study-hint[hidden] { display: none; }
@keyframes tag-in { from { opacity: 0; } to { opacity: 1; } }
.hint-bubble { background: var(--land); }
.hint-bubble mark { background: var(--pink); color: #fff; border-radius: 4px; padding: 0 2px; }