/* tooltip.css (agent #6): hover / tap tooltip for picking.js. */

/* Flag glyphs: Noto Color Emoji is injected by picking.js only when the OS has no flag emoji (Windows). */
.ge-flag {
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Twemoji Mozilla", sans-serif;
  font-style: normal; font-weight: 400; line-height: 1;
}

.ge-tip {
  position: fixed; left: 0; top: 0; z-index: 40;
  min-width: 168px; max-width: min(300px, calc(100vw - 20px));
  padding: 10px 14px 11px;
  pointer-events: none; user-select: none;
  color: var(--text, #EAE3D0); font-family: var(--font-ui, system-ui, sans-serif); font-size: 13px; line-height: 1.35;
  background:
    linear-gradient(180deg, rgba(242, 199, 102, 0.10), rgba(242, 199, 102, 0) 46%),
    var(--glass, rgba(8, 18, 34, 0.72));
  border: 1px solid var(--glass-border, rgba(242, 199, 102, 0.28));
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 22px rgba(242, 199, 102, 0.08), inset 0 1px 0 rgba(255, 235, 190, 0.08);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  will-change: transform, opacity;
}
.ge-tip.is-on { opacity: 1; visibility: visible; transition: opacity 0.12s ease, visibility 0s; }
.ge-tip.is-on .ge-tip__head, .ge-tip.is-on .ge-tip__row, .ge-tip.is-on .ge-tip__vids { animation: ge-tip-in 0.22s ease-out both; }
.ge-tip.is-on .ge-tip__row { animation-delay: 0.03s; }
.ge-tip.is-on .ge-tip__vids { animation-delay: 0.06s; }
@keyframes ge-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* gold hairline along the top edge */
.ge-tip::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #F2C766), transparent); opacity: 0.85;
}

.ge-tip__head { display: flex; align-items: center; gap: 9px; }
.ge-tip__flag { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.ge-tip__name {
  font-family: var(--font-title, Georgia, serif); font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
  color: var(--gold, #F2C766); text-shadow: 0 0 12px rgba(242, 199, 102, 0.35);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ge-tip__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.ge-tip__time { font-size: 18px; font-weight: 600; color: var(--cream, #F4E7C5); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ge-tip__off { font-size: 11.5px; color: var(--muted, #9AA3AE); font-variant-numeric: tabular-nums; }
.ge-tip__dn {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.ge-tip__dn[data-state="day"] { color: #FFD97A; background: rgba(242, 199, 102, 0.14); border-color: rgba(242, 199, 102, 0.35); }
.ge-tip__dn[data-state="twilight"] { color: #F6B07A; background: rgba(240, 140, 80, 0.13); border-color: rgba(240, 150, 90, 0.32); }
.ge-tip__dn[data-state="night"] { color: #A9C4F0; background: rgba(110, 150, 230, 0.13); border-color: rgba(140, 170, 240, 0.30); }

.ge-tip__vids {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(242, 199, 102, 0.18);
  font-weight: 600; color: var(--gold, #F2C766);
}
.ge-tip__vids[hidden], .ge-tip__off[hidden], .ge-tip__flag[hidden] { display: none; }
.ge-tip__play {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 8px; padding-left: 1px; color: var(--navy-0, #04080F); background: var(--gold, #F2C766);
  box-shadow: 0 0 10px rgba(242, 199, 102, 0.55);
}
.ge-tip__cta { margin-left: auto; font-weight: 500; font-size: 11px; color: var(--muted, #9AA3AE); }
.ge-tip.has-vids { border-color: rgba(242, 199, 102, 0.45); }

@media (max-width: 600px) {
  .ge-tip { min-width: 150px; padding: 9px 12px 10px; }
  .ge-tip__name { font-size: 15px; }
  .ge-tip__time { font-size: 17px; }
}