/* VasatYab */
.midpoint-game { width: min(520px, 100%); display: grid; gap: 14px; }
.mid-track { position: relative; height: 12px; margin: 26px 12px 26px; border-radius: 999px; background: rgba(255,255,255,.14); }
.mid-track i { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); }
.mid-track i::after { content: attr(data-l); position: absolute; top: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.mid-track .mid-a { background: #ff6b6b; }
.mid-track .mid-b { background: #5eb9ff; }
.mid-track .mid-m { width: 8px; height: 34px; border-radius: 4px; background: var(--pc); transition: left .05s; }
.midpoint-game input[type=range] { width: 100%; height: 32px; margin: 0; accent-color: var(--pc); }
.mid-value { text-align: center; font-family: var(--f-display); color: var(--pc); font-size: 30px; }
.map-game { width: min(540px, 100%); display: grid; gap: 12px; }
.map {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); cursor: crosshair;
  background:
    radial-gradient(circle at 22% 72%, #3f9a5a 0 9%, transparent 9.5%),
    radial-gradient(circle at 78% 22%, #3f9a5a 0 7%, transparent 7.5%),
    linear-gradient(transparent 46%, #4a505c 46% 54%, transparent 54%) 0 0 / 100% 25%,
    linear-gradient(90deg, transparent 46%, #4a505c 46% 54%, transparent 54%) 0 0 / 12.5% 100%,
    #86c46d;
}
.map::before { content: ""; position: absolute; left: -10%; right: -10%; top: 58%; height: 5%; background: #2a86d6; transform: rotate(-8deg); }
.map.fair { cursor: default; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-svg line { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.map-svg .la { stroke: #ff5a5f; }
.map-svg .lb { stroke: #3aa7ff; }
.pin {
  position: absolute; z-index: 1; width: 30px; height: 30px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; color: #fff; font-weight: 900; font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); pointer-events: none; animation: pop2 .2s;
}
.pin.pa { background: #ff5a5f; }
.pin.pb { background: #3aa7ff; }
.pin.pm { background: #ffc53d; color: #1d1500; width: 26px; height: 26px; }
.pin.pg { background: var(--pc); width: 18px; height: 18px; }
.cafe {
  position: absolute; z-index: 1; width: 46px; height: 46px; padding: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: #6b4a2e; font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35); transition: transform .12s;
}
.cafe:hover { transform: translate(-50%, -50%) scale(1.08); }
.cafe.right { border-color: #74ff9b; box-shadow: 0 0 0 5px rgba(116,255,155,.5); }
.cafe.wrong { border-color: #ff6b6b; box-shadow: 0 0 0 5px rgba(255,107,107,.5); }
.map.reveal .cafe::after {
  content: attr(data-d); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px;
  white-space: nowrap; font-family: var(--f-mono); font-size: 10px; color: var(--paper); background: rgba(13,22,40,.88); padding: 2px 6px; border-radius: 6px;
}