/* GuessWhere – game styles, scoped to .tng-root so themes don't collide */
.tng-root {
  --tng-ink: #0f1a17;
  --tng-panel: #17241f;
  --tng-line: #2c3d36;
  --tng-paper: #eef2ee;
  --tng-muted: #9fb2aa;
  --tng-sign: #1f6b45;
  --tng-maple: #d52b1e;
  --tng-lake: #3d8fd1;
  --tng-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --tng-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  width: 100%;
  height: var(--tng-h, 80vh);
  min-height: 460px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--tng-ink);
  color: var(--tng-paper);
  font: 15px/1.5 var(--tng-body);
  color-scheme: dark;
  isolation: isolate;
}
.tng-root *, .tng-root *::before, .tng-root *::after { box-sizing: border-box; }
.tng-root [hidden] { display: none !important; }
.tng-root:fullscreen { border-radius: 0; height: 100vh; }
.tng-root.is-max { position: fixed; inset: 0; z-index: 99999; height: 100%; border-radius: 0; }

.tng-root button, .tng-root input, .tng-root select {
  font: inherit; margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; line-height: normal;
}
.tng-root button { cursor: pointer; }
.tng-root :focus-visible { outline: 2px solid var(--tng-lake); outline-offset: 2px; }

.tng-viewer { position: absolute; inset: 0; background: #000; }

/* Header */
.tng-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px 24px;
  background: linear-gradient(to bottom, rgba(15,26,23,.92), rgba(15,26,23,0));
  pointer-events: none;
}
.tng-bar > * { pointer-events: auto; }
.tng-brand {
  display: flex; align-items: center; gap: 8px;
  font: 800 20px/1 var(--tng-display); letter-spacing: .02em; text-transform: uppercase;
  background: var(--tng-sign); color: #fff; padding: 6px 10px 5px; border: 2px solid #fff; border-radius: 6px;
}
.tng-brand svg { width: 18px; height: 18px; fill: var(--tng-maple); background: #fff; border-radius: 3px; padding: 1px; flex: none; }
.tng-stats { margin-left: auto; display: flex; gap: 8px; align-items: stretch; }
.tng-stat { background: rgba(15,26,23,.85); border: 1px solid var(--tng-line); border-radius: 6px; padding: 4px 10px; text-align: center; }
.tng-stat b { display: block; font: 700 19px/1.1 var(--tng-display); font-variant-numeric: tabular-nums; }
.tng-stat span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tng-muted); }
.tng-icon { background: rgba(15,26,23,.85); border: 1px solid var(--tng-line); border-radius: 6px; width: 44px; padding: 0; display: grid; place-items: center; color: var(--tng-paper); }
.tng-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Guess map */
.tng-guess {
  position: absolute; z-index: 15; right: 14px; bottom: 14px;
  width: 320px; max-width: calc(100% - 28px);
  display: flex; flex-direction: column; gap: 8px; transition: width .2s ease;
}
.tng-guess:hover, .tng-guess.is-pinned { width: 600px; }
.tng-map { height: 210px; border-radius: 8px; border: 2px solid var(--tng-paper); background: #cfd8d3; transition: height .2s ease; }
.tng-guess:hover .tng-map, .tng-guess.is-pinned .tng-map { height: min(380px, calc(var(--tng-h, 80vh) - 170px)); }
.tng-btn {
  border: 0; border-radius: 6px; padding: 12px 16px;
  font: 700 18px/1 var(--tng-display) !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  background: var(--tng-sign); color: #fff;
}
.tng-btn:hover { filter: brightness(1.1); }
.tng-btn:disabled { background: #3a4a44; color: #8a9a93; cursor: not-allowed; filter: none; }
.tng-btn.tng-alt { background: transparent; color: var(--tng-paper); border: 1px solid var(--tng-line); }
.tng-maptoggle { display: none; }

/* Start and end screens */
.tng-screen {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: 20px 16px; overflow-y: auto;
  background: rgba(10,18,15,.9);
}
.tng-card { width: min(500px, 100%); background: var(--tng-panel); border: 1px solid var(--tng-line); border-radius: 12px; padding: 24px; display: grid; gap: 16px; margin: auto; }
.tng-root .tng-h1 { font: 800 42px/0.95 var(--tng-display); text-transform: uppercase; margin: 0; color: var(--tng-paper); text-wrap: balance; letter-spacing: 0; }
.tng-root .tng-h1 em { font-style: normal; color: var(--tng-maple); }
.tng-root .tng-h2 { font: 700 26px/1 var(--tng-display); text-transform: uppercase; margin: 0; color: var(--tng-paper); }
.tng-card p { margin: 0; color: var(--tng-muted); }
.tng-card label { display: grid; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tng-muted); margin: 0; }
.tng-card select { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--tng-line); background: var(--tng-ink); color: var(--tng-paper); font-size: 15px; height: auto; width: 100%; }
.tng-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tng-row > * { flex: 1 1 160px; min-width: 0; }
.tng-card .tng-check { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tng-paper); }
.tng-check input { width: 18px; height: 18px; accent-color: var(--tng-sign); }
.tng-small { font-size: 12px; color: var(--tng-muted); }
.tng-meta { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

/* Result */
.tng-result { position: absolute; inset: 0; z-index: 30; display: grid; grid-template-rows: 1fr auto; background: var(--tng-ink); }
.tng-resultmap { width: 100%; height: 100%; min-height: 0; }
.tng-resultbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--tng-panel); border-top: 1px solid var(--tng-line); padding: 16px; }
.tng-place { flex: 1 1 200px; min-width: 0; }
.tng-place b { display: block; font: 700 22px/1.1 var(--tng-display); text-transform: uppercase; }
.tng-meter { flex: 1 1 200px; display: grid; gap: 4px; }
.tng-track { height: 10px; border-radius: 5px; background: var(--tng-line); overflow: hidden; }
.tng-fill { height: 100%; width: 0; background: var(--tng-maple); transition: width .6s ease; }
.tng-nums { display: flex; justify-content: space-between; font-size: 13px; color: var(--tng-muted); font-variant-numeric: tabular-nums; }
.tng-nums b { color: var(--tng-paper); font: 700 20px var(--tng-display); }

.tng-total { font: 800 52px/1 var(--tng-display); font-variant-numeric: tabular-nums; }
.tng-summary { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.tng-summary div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--tng-line); padding-bottom: 6px; }

.tng-toast { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 50; width: max-content; max-width: calc(100% - 32px); background: var(--tng-panel); border: 1px solid var(--tng-maple); padding: 10px 16px; border-radius: 8px; }

/* v1.2: daily challenge, challenges, sharing, leaderboard */
.tng-btn.tng-maple { background: var(--tng-maple); }
.tng-mode b { color: var(--tng-maple); }
.tng-daily, .tng-challenge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--tng-ink); border: 1px solid var(--tng-line); border-left: 4px solid var(--tng-maple);
  border-radius: 8px; padding: 12px 14px;
}
.tng-daily > div { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.tng-daily b, .tng-challenge b { font: 700 20px/1.1 var(--tng-display); text-transform: uppercase; }
.tng-challenge { display: grid; gap: 6px; }
.tng-challenge p { margin: 0; }
.tng-or { display: flex; align-items: center; gap: 10px; color: var(--tng-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tng-or::before, .tng-or::after { content: ""; flex: 1; height: 1px; background: var(--tng-line); }

.tng-endcard { gap: 14px; }
.tng-squares { font-size: 28px; letter-spacing: 4px; line-height: 1; }
.tng-verdict { margin: 0; font-size: 16px; color: var(--tng-paper) !important; }
.tng-verdict b { color: var(--tng-maple); }
.tng-sharebox { width: 100%; min-height: 96px; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--tng-ink); color: var(--tng-paper); border: 1px solid var(--tng-line); border-radius: 6px; padding: 10px; resize: vertical; }
.tng-details summary { cursor: pointer; color: var(--tng-muted); font-size: 13px; }
.tng-details .tng-summary { margin-top: 8px; }

.tng-board { border-top: 1px solid var(--tng-line); padding-top: 12px; display: grid; gap: 8px; }
.tng-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tng-board-head b { font: 700 18px var(--tng-display); text-transform: uppercase; }
.tng-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.tng-board-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 4px; }
.tng-board-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tng-board-list li.is-me { background: rgba(213,43,30,.18); }
.tng-nameform { display: grid; gap: 6px; }
.tng-nameform input { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--tng-line); background: var(--tng-ink); color: var(--tng-paper); font-size: 15px; }
.tng-ad-end { min-height: 90px; display: grid; place-items: center; }
.tng-ad-below { margin-block: 16px; text-align: center; }

/* v1.3: Mapillary community credits */
.tng-credit { margin: 4px 0 0; font-size: 12px; color: var(--tng-muted); line-height: 1.5; }
.tng-root a { color: var(--tng-paper); text-decoration: underline; text-underline-offset: 2px; }
.tng-root a:hover { color: #7fb8e6; }
.tng-gap { color: #f0b27a; }
.tng-community-line { font-size: 13px; margin: 0; }
.tng-community { border-top: 1px solid var(--tng-line); padding-top: 12px; display: grid; gap: 8px; }
.tng-community p { margin: 0; }
.tng-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tng-root a.tng-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--tng-line); background: var(--tng-ink); font-size: 13px; text-decoration: none; }
.tng-root a.tng-chip:hover { border-color: var(--tng-lake); }
.tng-root a.tng-linkbtn { display: inline-block; text-align: center; text-decoration: none; color: var(--tng-paper); }

/* v1.4: language switch on the start screen */
.tng-lang {
  justify-self: end; margin-bottom: -6px;
  background: transparent; color: var(--tng-paper); border: 1px solid var(--tng-line); border-radius: 999px;
  padding: 5px 12px; font: 700 13px/1 var(--tng-display) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
}
.tng-lang:hover { border-color: var(--tng-lake); }

/* Scroll-wheel hint, shown when the wheel is used before the player has clicked into the game */
.tng-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 45;
  background: rgba(15,26,23,.88); color: var(--tng-paper); border: 1px solid var(--tng-line);
  padding: 10px 16px; border-radius: 8px; font-size: 14px; pointer-events: none;
  opacity: 0; transition: opacity .2s ease; width: max-content; max-width: calc(100% - 32px); text-align: center;
}
.tng-root.show-hint .tng-hint { opacity: 1; }

/* Width options: alignwide / alignfull come from the theme; full width drops the rounded corners */
.tng-root.alignfull { border-radius: 0; }
.tng-root.alignwide, .tng-root.alignfull { margin-top: 0; }

/* Leaflet pins and theme guards */
.tng-root .leaflet-container img { max-width: none !important; box-shadow: none !important; }
.tng-pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tng-pin.tng-you { background: var(--tng-lake); }
.tng-pin.tng-truth { background: var(--tng-maple); }

@media (max-width: 640px) {
  .tng-brand { font-size: 16px; }
  .tng-brand span { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tng-guess, .tng-guess:hover, .tng-guess.is-pinned { left: 12px; right: 12px; width: auto; max-width: none; bottom: 12px; }
  .tng-guess .tng-map { display: none; }
  .tng-guess.is-open .tng-map { display: block; height: 55%; height: min(55vh, calc(var(--tng-h, 80vh) - 190px)); }
  .tng-maptoggle { display: block; }
  .tng-root .tng-h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .tng-root * { transition: none !important; } }

/* v1.4.1: loading overlay while a location is found and the first photo arrives */
.tng-loading {
  position: absolute; inset: 0; z-index: 15;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(23,36,31,.92), rgba(15,26,23,.98));
  color: var(--tng-paper); font: 700 18px/1.2 var(--tng-display); letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none;
}
.tng-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--tng-line); border-top-color: var(--tng-maple);
  animation: tng-spin .8s linear infinite;
}
@keyframes tng-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tng-spinner { animation-duration: 2.4s; } }

/* v2.0.1: the viewer's own credit names the photographer and links to the photo on Mapillary,
   which shows its location. Keep the Mapillary logo, hide the name and date, and make the credit
   unclickable. Players get the full credit, with links, after each guess. */
.tng-root .mapillary-attribution-container { pointer-events: none; }
.tng-root .mapillary-attribution-image-container,
.tng-root .mapillary-attribution-username,
.tng-root .mapillary-attribution-date { display: none !important; }

/* v2.1: streak, countdown, province battle and class board on the final screen */
.tng-streak { margin: -4px 0 0; font: 700 20px var(--tng-display); letter-spacing: .02em; text-transform: uppercase; color: #e8b63a; }
.tng-promo { display: grid; gap: 14px; }
.tng-countdown { margin: 0; padding: 8px 12px; border: 1px dashed var(--tng-line); border-radius: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.tng-teampick { padding: 12px 14px; border-radius: 10px; background: rgba(31,107,69,.22); border: 1px solid rgba(31,107,69,.6); display: grid; gap: 8px; }
.tng-teampick b { font: 700 18px var(--tng-display); text-transform: uppercase; }
.tng-teampick p { margin: 0; }
.tng-teampick select { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--tng-line); background: var(--tng-ink); color: var(--tng-paper); font: inherit; }
.tng-battle { border-top: 1px solid var(--tng-line); padding-top: 12px; display: grid; gap: 8px; }
.tng-battle .tng-board-list small { color: var(--tng-muted); font-size: 11px; margin-left: 4px; }
.tng-linkbtn { background: none; border: 0; padding: 0; color: var(--tng-lake); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; text-transform: none; }
.tng-classbadge { margin: 0; font-size: 13px; color: var(--tng-paper); padding: 6px 10px; border-radius: 6px; background: rgba(31,107,69,.22); }

/* Highlight when a link opens free play with No moving ticked */
.tng-check.tng-flash { outline: 2px solid var(--tng-sign); outline-offset: 4px; border-radius: 4px; transition: outline-color .3s; }