/* Településtippelő (towns) — prefix tg- */
.tg-frame {
  width: min(520px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px;
  touch-action: manipulation;              /* the page must scroll over the map and the list */
  --tg-land: #fbfaff;
  --tg-land-edge: color-mix(in srgb, var(--game) 55%, #1c1847);
  --tg-county: rgba(60, 50, 140, .16);
  --tg-water: #8fc9f2;
  --tg-river: #74b5e8;
  --tg-hl: color-mix(in srgb, var(--game) 16%, transparent);
  --tg-label: #1c1847;
  --tg-halo: rgba(255, 255, 255, .92);
  --tg-pin: #e0294f;
}
@media (prefers-color-scheme: dark) {
  .tg-frame {
    --tg-land: #2c2968;
    --tg-land-edge: color-mix(in srgb, var(--game) 60%, #ffffff);
    --tg-county: rgba(255, 255, 255, .13);
    --tg-water: #2f6fae;
    --tg-river: #3f7fbf;
    --tg-hl: color-mix(in srgb, var(--game) 30%, transparent);
    --tg-label: #f2f0ff;
    --tg-halo: rgba(20, 18, 58, .9);
    --tg-pin: #ff6b8a;
  }
}
.tg-frame input, .tg-frame .tg-suggest { user-select: text; -webkit-user-select: text; }

/* --- Map --------------------------------------------------------------------------------- */
.tg-map-card {
  position: relative;
  padding: 10px 10px 8px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -20px rgba(40, 30, 120, .45);
  background-image: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--game) 9%, transparent), transparent 60%);
}
.tg-map-wrap { position: relative; aspect-ratio: 478 / 301; }
.tg-map { display: block; width: 100%; height: 100%; overflow: visible; }
.tg-map-loading {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-weight: 650; font-size: .92rem;
  border-radius: 16px; background: var(--surface-2);
  animation: tg-breathe 1.4s ease-in-out infinite alternate;
}
.tg-retry { font: inherit; font-weight: 750; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; }
@keyframes tg-breathe { from { opacity: .55; } to { opacity: 1; } }

.tg-land { fill: var(--tg-land); }
.tg-land-shadow { fill: color-mix(in srgb, var(--game) 22%, transparent); }
.tg-outline { fill: none; stroke: var(--tg-land-edge); stroke-width: calc(1.4px * var(--k, 1)); stroke-linejoin: round; }
.tg-counties path { fill: transparent; stroke: var(--tg-county); stroke-width: .8; stroke-linejoin: round; transition: fill .5s; }
.tg-counties path.tg-hl { fill: var(--tg-hl); stroke: color-mix(in srgb, var(--game) 60%, transparent); stroke-width: 1.2; }
.tg-rivers path { fill: none; stroke: var(--tg-river); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.tg-lake { fill: var(--tg-water); }
.tg-capital { transform-origin: var(--x) var(--y); transform: scale(var(--k, 1)); }
.tg-capital rect { fill: var(--tg-label); opacity: .55; }
.tg-capital text {
  font: 700 8.5px var(--body); fill: var(--tg-label); opacity: .5; letter-spacing: .02em;
  paint-order: stroke; stroke: var(--tg-halo); stroke-width: 2.5px;
}

.tg-dot-core { fill: var(--c); stroke: #fff; stroke-width: calc(1.6px * var(--k, 1)); }
.tg-dot-ring { fill: var(--c); opacity: .22; }
.tg-dot-label {
  font: 800 calc(10.5px * var(--k, 1)) var(--body); fill: var(--tg-label);
  paint-order: stroke; stroke: var(--tg-halo); stroke-width: calc(3px * var(--k, 1)); stroke-linejoin: round;
}
.tg-pop .tg-dot-core, .tg-pop .tg-dot-ring { transform-origin: var(--x) var(--y); animation: tg-drop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.tg-pop .tg-dot-ring { animation: tg-ripple 1.1s ease-out both; }
.tg-pop .tg-dot-label { animation: tg-fade .4s .2s both; }
.tg-dot-hit .tg-dot-ring { opacity: .35; }
@keyframes tg-drop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tg-ripple { 0% { transform: scale(.2); opacity: .7; } 100% { transform: scale(1); opacity: .22; } }
@keyframes tg-fade { from { opacity: 0; } to { opacity: 1; } }

.tg-trail line { stroke: var(--tg-pin); stroke-width: calc(1.6px * var(--k, 1)); stroke-dasharray: 4 3.5; stroke-linecap: round; animation: tg-dash 1s linear infinite; }
@keyframes tg-dash { to { stroke-dashoffset: -15; } }
.tg-pin { transform-origin: var(--x) var(--y); animation: tg-pin .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.tg-pin path { fill: var(--tg-pin); stroke: #fff; stroke-width: 1.4; }
.tg-pin circle { fill: #fff; }
@keyframes tg-pin { from { transform: translateY(-14px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.tg-target-label {
  font: 800 calc(13px * var(--k, 1)) var(--display); fill: var(--tg-pin); letter-spacing: -.01em;
  paint-order: stroke; stroke: var(--tg-halo); stroke-width: calc(3.5px * var(--k, 1)); stroke-linejoin: round;
  animation: tg-fade .4s .3s both;
}

.tg-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding: 0 4px; }
.tg-legend { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.tg-legend i {
  display: block; width: 74px; height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, rgb(92, 118, 214), rgb(56, 163, 240) 35%, rgb(244, 196, 30) 58%, rgb(249, 115, 22) 78%, rgb(232, 38, 78) 92%);
}
.tg-attrib { font-size: .68rem; color: var(--muted); opacity: .9; }

/* --- Reveal banner --------------------------------------------------------------------- */
.tg-reveal {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--tg-pin);
  animation: tg-rise .45s cubic-bezier(.2, 1.3, .5, 1) both;
}
.tg-reveal-won { border-left-color: var(--good); }
.tg-reveal-ico { font-size: 1.7rem; line-height: 1; }
.tg-reveal > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tg-reveal small { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tg-reveal b { font-family: var(--display); font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.tg-reveal em { font-style: normal; font-size: .86rem; color: var(--muted); }
@keyframes tg-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Clues ------------------------------------------------------------------------------- */
.tg-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tg-clue {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 8px 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px dashed var(--line); color: var(--muted);
}
.tg-clue > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tg-clue small { font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.tg-clue b { font-size: .84rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tg-clue-ico { font-size: 1.15rem; line-height: 1; flex: none; filter: grayscale(.6); opacity: .7; }
.tg-clue-on { background: var(--surface); border: 1px solid color-mix(in srgb, var(--game) 40%, var(--line)); color: var(--text); }
.tg-clue-on small { color: var(--game); }
.tg-clue-on b { font-size: .95rem; font-weight: 800; }
.tg-clue-on .tg-clue-ico { filter: none; opacity: 1; }
.tg-clue-new { animation: tg-wiggle .7s ease-in-out; }
@keyframes tg-wiggle {
  0% { transform: scale(.9); } 30% { transform: scale(1.06) rotate(-1.5deg); }
  55% { transform: scale(.98) rotate(1deg); } 100% { transform: none; }
}

/* --- Input + autocomplete ----------------------------------------------------------------- */
.tg-form { display: flex; gap: 8px; align-items: stretch; }
.tg-field { position: relative; flex: 1; min-width: 0; }
.tg-frame .tg-input {
  height: 100%; min-height: 48px;
  font-size: 1.02rem; font-weight: 650;
  background: var(--surface); border-radius: 999px; padding: 12px 18px;
}
.tg-input:disabled { opacity: .6; }
.tg-go { flex: none; min-width: 84px; font-family: var(--display); font-size: 1rem; letter-spacing: -.01em; }
.tg-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 5px; list-style: none;
  max-height: min(300px, 46vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgba(30, 20, 90, .45);
}
.tg-suggest li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
}
.tg-suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--game) 14%, transparent); }
.tg-s-name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-s-name b { font-weight: 850; }
.tg-s-county { flex: none; max-width: 52%; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-suggest li.tg-done { opacity: .5; cursor: default; }
.tg-suggest li.tg-done .tg-s-county { font-style: italic; }
.tg-suggest .tg-none { color: var(--muted); font-weight: 600; cursor: default; justify-content: center; }

.tg-left { text-align: center; font-size: .9rem; font-weight: 700; color: var(--muted); min-height: 1.4em; margin-top: -2px; }
.tg-left-last { color: var(--warn); }
.tg-left-warn { color: var(--danger); }
.tg-over .tg-left { color: var(--text); }

/* --- Guess list ------------------------------------------------------------------------------ */
.tg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tg-row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 28px 52px; align-items: center; gap: 8px;
  min-height: 50px; padding: 6px 10px 6px 8px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.tg-row::before {      /* proximity fill */
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 16%, transparent));
}
.tg-row > * { position: relative; }
.tg-row-empty { background: transparent; border-style: dashed; min-height: 40px; }
.tg-row-empty::before { display: none; }
.tg-n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: .72rem; font-weight: 800; color: var(--muted); background: var(--surface-2);
}
.tg-row:not(.tg-row-empty) .tg-n { background: var(--c); color: #fff; }
.tg-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tg-name b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-name small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-dist { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .95rem; }
.tg-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, var(--surface)); font-size: 1rem; }
.tg-arrow > span { display: grid; place-items: center; width: 18px; height: 18px; }
.tg-arrow svg { width: 18px; height: 18px; fill: var(--c); }
.tg-prox { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tg-prox b { font-size: .86rem; font-weight: 850; font-variant-numeric: tabular-nums; color: var(--c); line-height: 1; }
.tg-prox i { display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--surface-2); position: relative; overflow: hidden; }
.tg-prox i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--c); border-radius: inherit; }
.tg-row-hit { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.tg-row-hit .tg-dist { color: var(--good); }
.tg-row-new { animation: tg-rise .4s cubic-bezier(.2, 1.3, .5, 1) both; }
.tg-row-new .tg-arrow > span { animation: tg-spin .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes tg-spin { from { rotate: -200deg; } }

@media (max-width: 400px) {
  .tg-frame { gap: 10px; }
  .tg-map-card { padding: 8px 6px 6px; border-radius: 18px; }
  .tg-row { grid-template-columns: 20px minmax(0, 1fr) auto 26px 42px; gap: 6px; padding: 6px 8px 6px 6px; }
  .tg-n { width: 20px; height: 20px; }
  .tg-dist { font-size: .86rem; }
  .tg-arrow { width: 26px; height: 26px; }
  .tg-clue { padding: 7px 9px; gap: 7px; }
  .tg-go { min-width: 70px; padding-inline: 14px; }
}