/* MAP GUESS (mg-) — wall / phone / admin styles.
   Tokens only; gold/orange appear exclusively inside the brand gradients
   (pin fill, points) or as soft warm glows. */

/* ========================= PHONE ========================= */
.play-body .mg-meta { text-align: center; margin-bottom: 4px; }
.play-body .mg-play-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 30px; line-height: 1; color: var(--text); text-align: center; margin: 6px 0 10px;
}
/* ONE flex column that fills the phone stage — the interactive MAP grows to
   take all remaining height, everything else keeps its natural size. So the
   whole map is visible without scrolling on any phone. */
.play-body .mg-play-asking { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.play-body .mg-play-asking > * { flex-shrink: 0; }
.play-body .mg-play-photowrap {
  display: flex; align-items: center; justify-content: center;
  max-height: 18vh; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: rgba(8, 6, 7, 0.9);
  margin-bottom: 8px;
}
.play-body .mg-play-photo { max-width: 100%; max-height: 18vh; object-fit: contain; display: block; }
.play-body .mg-play-hint {
  font-family: var(--font-narrow); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
  text-align: center; margin: 6px 0;
}

/* Interactive map viewport — FLEX-fills the remaining stage height (was a fixed
   40vh that pushed the button/score off-screen and cut the map). */
.play-body .mg-view {
  position: relative; width: 100%; height: 40vh;
  overflow: hidden; touch-action: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(8, 6, 7, 0.9);
  cursor: crosshair;
}
.play-body .mg-play-asking .mg-view { flex: 1 1 auto; height: auto; min-height: 150px; }
.play-body .mg-view-inner {
  position: relative; width: 100%;
  transform-origin: 0 0; will-change: transform;
}
.play-body .mg-view-img {
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* The pin — gradient core (the one warm spark on the phone). The sharp
   corner is the TIP: origin at that corner + rotate folds into the transform
   so the tip lands exactly on the tapped/scored coordinate. */
.play-body .mg-pin {
  position: absolute; width: 24px; height: 24px;
  transform: translate(0, -100%) rotate(-45deg);
  transform-origin: 0 100%;
  border-radius: 50% 50% 50% 0;
  background: var(--grad-warm);
  border: 2px solid var(--ewc-off-white);
  box-shadow: 0 4px 14px -2px var(--orange-glow);
  pointer-events: none; z-index: 4;
}
.play-body .mg-pin::after {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%; background: var(--ewc-off-white);
}
.play-body .mg-lock { margin-top: 10px; }
.play-body .mg-lock:disabled { opacity: 0.45; cursor: default; }

/* Reveal mini-map + result. */
.play-body .mg-play-mapwrap {
  position: relative; width: 100%; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: rgba(8, 6, 7, 0.9);
  margin-bottom: 12px;
}
.play-body .mg-play-mapwrap .mg-mapimg { display: block; width: 100%; height: auto; }
.play-body .mg-target {
  position: absolute; width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ewc-off-white);
  border: 3px solid rgba(var(--tint-ink), 0.9);
  box-shadow: 0 0 0 5px rgba(247, 247, 247, 0.25), 0 0 22px 2px var(--orange-glow);
  z-index: 5;
}
.play-body .mg-result { text-align: center; padding: 14px; }
.play-body .mg-result-line {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 16px; color: var(--text);
}
.play-body .mg-result-big { font-family: var(--font-display); font-weight: 900; font-size: 28px; }
.play-body .mg-result-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.play-body .mg-result-pts {
  font-family: var(--font-display); font-weight: 900; font-size: 30px; margin-top: 6px;
  background: var(--grad-num);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ========================= ADMIN ========================= */
#dash .mg-hidden-store { display: none; }
#dash .mg-adm-maps, #dash .mg-adm-builder { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
#dash .mg-adm-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
#dash .stage-config .mg-adm-toolbar { margin-bottom: 0; }
#dash .mg-adm-maprow {
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: 10px; align-items: center;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2); padding: 12px 14px;
}
#dash .mg-adm-thumb {
  width: 64px; height: 48px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 6px;
}
#dash .mg-adm-thumb-broken { opacity: 0.25; }
#dash .mg-adm-row {
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2); padding: 12px 14px;
}
#dash .mg-adm-rowmain {
  display: grid; grid-template-columns: 26px 110px 1fr auto auto; gap: 12px; align-items: start;
}
#dash .mg-adm-num {
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  color: var(--text-dim); text-align: center; padding-top: 8px;
}
#dash .mg-adm-photocol { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#dash .mg-adm-photocol .mg-adm-thumb { width: 100%; height: 64px; }
#dash .mg-adm-mapcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#dash .mg-adm-tgtcol { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#dash .mg-adm-tgt {
  font-family: var(--font-narrow); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--warning); text-align: center; white-space: nowrap;
}
#dash .mg-adm-tgt-set { color: var(--success); }
#dash .mg-adm-setter { margin-top: 12px; }
#dash .mg-adm-setter .hint { margin: 8px 0 0; }
#dash .mg-adm-mapwrap {
  position: relative; max-width: 560px; cursor: crosshair;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
#dash .mg-adm-mapimg { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
#dash .mg-adm-cross {
  position: absolute; width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ewc-off-white);
  border: 3px solid rgba(var(--tint-ink), 0.9);
  box-shadow: 0 0 0 4px rgba(247, 247, 247, 0.3), 0 0 16px 2px var(--orange-glow);
  pointer-events: none;
}
#dash .mg-adm-remove { flex-shrink: 0; }
#dash .mg-adm-live { display: flex; flex-direction: column; gap: 12px; }
#dash .mg-adm-livehead { display: flex; gap: 12px; align-items: center; }
#dash .mg-adm-answerline { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

@media (max-width: 980px) {
  #dash .mg-adm-rowmain { grid-template-columns: 26px 1fr auto; }
  #dash .mg-adm-photocol { grid-column: 2 / 3; flex-direction: row; }
  #dash .mg-adm-mapcol { grid-column: 2 / 3; }
  /* explicit placement — keeps the target column stacked with the inputs and
     the trash button pinned top-right (auto-placement wrapped it bottom-left) */
  #dash .mg-adm-rowmain .mg-adm-tgtcol { grid-column: 2 / 3; }
  #dash .mg-adm-rowmain .mg-adm-remove { grid-column: 3; grid-row: 1; justify-self: end; }
  /* .mg-adm-maprow keeps its 4-track template — collapsing to 3 wrapped the
     trash button under the thumbnail */
}

/* Shared hide helper (all surfaces). */
.play-body .mg-hidden, #dash .mg-hidden { display: none !important; }
.play-body .mg-map-broken .mg-view-img { opacity: 0.15; }



/* Map Guess operator visuals; workspace surfaces are shared with Trivia/LF. */
#dash #tab-mapguess .lfs-question-empty { grid-template-columns:minmax(0,1fr); gap:0; }
#dash #tab-mapguess .mg-operator-media { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:16px; margin:18px 0; align-items:start; }
#dash #tab-mapguess .mg-operator-media figure { margin:0; min-width:0; }
#dash #tab-mapguess .mg-operator-media figcaption { font-size:10px; color:var(--text-faint); margin-top:8px; }
#dash #tab-mapguess .mg-operator-photo img { display:block; width:100%; max-height:320px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
#dash #tab-mapguess .mg-operator-canvas { width:min(100%,calc(320px * var(--mg-map-aspect,1))); position:relative; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
#dash #tab-mapguess .mg-operator-canvas img { display:block; width:100%; height:auto; border-radius:5px; }
#dash #tab-mapguess .mg-operator-target { position:absolute; width:18px; height:18px; border:3px solid var(--text); border-radius:50%; transform:translate(-50%,-50%); background:var(--bg); box-shadow:0 0 0 2px var(--bg); z-index:2; pointer-events:none; }
#dash #tab-mapguess .mg-operator-dot { position:absolute; width:5px; height:5px; border-radius:50%; transform:translate(-50%,-50%); background:var(--grad-warm); }
#dash #tab-mapguess .mg-operator-dot.is-bullseye { background:var(--success); }
#dash #tab-mapguess .lfs-pulse-row { --outcome-color:var(--text-dim); }
#dash #tab-mapguess .lfs-pulse-row:first-of-type { --outcome-color:var(--success); }
#dash #tab-mapguess .mg-summary-copy { margin:22px 0; font-size:13px; line-height:1.7; color:var(--text-dim); }
@media(max-width:560px) { #dash #tab-mapguess .mg-operator-media { grid-template-columns:minmax(0,1fr); } }

#dash #tab-mapguess .mg-operator-canvas.is-unavailable :is(.mg-operator-target,.mg-operator-dot) { display:none; }
/* Map Guess's photo-to-map broadcast; annotations use actual image geometry. */
.tb-shell .gb-round{display:grid;grid-template-rows:100px minmax(0,1fr);gap:26px}
.tb-shell .gb-head{display:flex;align-items:center;justify-content:space-between;gap:28px}
.tb-shell .gb-heading{display:flex;align-items:center;height:100px;flex:1;min-width:0;font:700 80px/1.15 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .gb-clock{display:grid;place-items:center;width:160px;height:100px;font:700 90px/1 var(--tb-font);font-variant-numeric:tabular-nums}
.tb-shell .gb-clock svg{width:80px;height:80px;fill:currentColor}
.tb-shell .gb-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:minmax(0,1fr) 100px;gap:26px;min-height:0;position:relative}
.tb-shell .gb-well{position:relative;min-height:0;min-width:0;background:var(--tb-base);border:1px solid var(--tb-border);border-radius:24px;overflow:hidden}
.tb-shell .gb-image{width:100%;height:100%;object-fit:contain;display:block}
.tb-shell .gb-fallback{position:absolute;inset:48px;display:flex;align-items:center;justify-content:center;text-align:center;font:600 52px/1.2 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .gb-well[data-media-state='ready'] .gb-fallback{visibility:hidden}
.tb-shell .gb-well:not([data-media-state='ready']) .gb-image{visibility:hidden}
.tb-shell .gb-map-well{display:flex;align-items:center;justify-content:center;grid-row:1/3;grid-column:2;padding:36px}
.tb-shell .gb-map-inner{position:relative;flex:none;max-width:100%;max-height:100%}
.tb-shell .gb-pins{position:absolute;inset:0}
.tb-shell .gb-pin{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);background:var(--tb-blue);border:2px solid var(--tb-base);border-radius:50%}
.tb-shell .gb-heat{width:100%;height:100%;position:absolute;inset:0;opacity:.85}
.tb-shell .gb-target{position:absolute;width:64px;height:64px;transform:translate(-50%,-50%);border:6px solid var(--tb-white);background:var(--tb-base);border-radius:50%;box-shadow:0 0 0 5px var(--tb-base)}
.tb-shell .gb-target::before,.tb-shell .gb-target::after{content:'';position:absolute;left:50%;top:50%;width:80px;height:6px;background:var(--tb-white);transform:translate(-50%,-50%)}
.tb-shell .gb-target::after{transform:translate(-50%,-50%) rotate(90deg)}
.tb-shell .gb-cue{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;height:100px;font:700 72px/1.15 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .gb-results{display:none;min-width:0;min-height:0}
.tb-shell .gb-round[data-phase='intro'] .gb-photo-well{grid-column:1/3;grid-row:1;max-width:1320px;width:100%;justify-self:center}
.tb-shell .gb-round[data-phase='intro'] .gb-map-well{visibility:hidden;position:absolute;inset:0;pointer-events:none}
.tb-shell .gb-round[data-phase='intro'] .gb-cue{grid-column:1/3}
.tb-shell .gb-round[data-phase='asking'] .gb-cue{font-size:44px;--tb-fit-max:44;--tb-fit-min:36}
.tb-shell .gb-round[data-phase='reveal'] .gb-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 150px}
.tb-shell .gb-round[data-phase='reveal'] .gb-map-well{grid-column:1;grid-row:1/3}
.tb-shell .gb-round[data-phase='reveal'] .gb-photo-well{grid-column:2;grid-row:2}
.tb-shell .gb-round[data-phase='reveal'] .gb-cue{display:none}
.tb-shell .gb-round[data-phase='reveal'] .gb-results{display:grid;grid-template-rows:80px minmax(0,1fr);gap:20px;grid-column:2;grid-row:1}
.tb-shell .gb-results-title{height:80px;display:flex;align-items:center;font:700 52px/1.15 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .gb-result-list{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:18px;min-height:0}
.tb-shell .gb-result{display:grid;grid-template-columns:44px minmax(0,1fr) 190px;grid-template-rows:minmax(0,1fr) 60px;gap:12px;padding:24px;min-height:0;min-width:0;background:var(--tb-surface);border:1px solid var(--tb-border);border-radius:16px}
.tb-shell .gb-rank{display:grid;place-items:center;font:700 36px/1 var(--tb-font);color:var(--tb-blue)}
.tb-shell .gb-result-name{grid-column:2/4;display:flex;align-items:center;min-width:0;height:100%;font:700 48px/1.15 var(--tb-font);overflow-wrap:anywhere;unicode-bidi:plaintext}
.tb-shell .gb-distance{grid-column:1/3;display:flex;align-items:center;min-width:0;height:60px;font:600 42px/1.2 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .gb-gain{display:flex;align-items:center;justify-content:flex-end;height:60px;font:700 56px/1 var(--tb-font);font-variant-numeric:tabular-nums}
.tb-shell .gb-empty{grid-row:1/4;display:flex;align-items:center;justify-content:center;text-align:center;font:700 56px/1.2 var(--tb-font);overflow-wrap:anywhere}
.tb-shell[data-mainboard-layout='ewc26'] :is(.gb-heading,.gb-cue,.gb-clock){font-family:var(--tb-display);font-weight:900}
.tb-shell[data-mainboard-layout='ewc26'] :is(.gb-well,.gb-result){border-radius:0}
.tb-shell[data-mainboard-layout='ewc26'] .gb-result{background:var(--tb-white);color:var(--tb-bg)}
.tb-shell[data-mainboard-layout='ewc26'] .gb-rank{color:var(--tb-bg)}
.tb-shell.is-arabic :is(.gb-heading,.gb-cue,.gb-clock){font-family:var(--tb-font)}
#dash #tab-mapguess :is(.mg-title-row,.mg-header-actions){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#dash #tab-mapguess .mg-title-row{margin-top:7px}#dash #tab-mapguess .mg-title-row h1{margin:0}
#dash #tab-mapguess .mg-header-actions{justify-content:flex-end}#dash #mgPrimary{min-width:108px}
#dash #tab-mapguess .lfs-close{width:36px;height:36px;min-width:36px;padding:0}
@media(max-width:850px){#dash #tab-mapguess .mg-header-actions{justify-content:flex-start}}
/* Results reserve room for legible names and units instead of a tiny thumbnail. */
.tb-shell .gb-round[data-phase='reveal'] .gb-photo-well{display:none}
.tb-shell .gb-round[data-phase='reveal'] .gb-results{grid-row:1/3}
.tb-shell .gb-result-list[data-count='1']{grid-template-rows:minmax(0,1fr)}
.tb-shell .gb-result-list[data-count='2']{grid-template-rows:repeat(2,minmax(0,1fr))}
.tb-shell .gb-map-well{padding:48px}

#dash #tab-mapguess .mg-operator-canvas{overflow:visible;margin:12px;width:calc(100% - 24px)}
.tb-shell .gb-clock{width:190px}