.dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 6px; }
.dots i { width: 26px; height: 8px; border-radius: 6px; background: var(--line); }
.dots i.done { background: var(--leaf); } .dots i.now { background: var(--sun); box-shadow: 0 0 0 2px var(--gold-edge) inset; }
.meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .88rem; font-weight: 600; }
.ask { margin: 8px 0 0; text-align: center; color: var(--muted); font-weight: 600; font-size: .95rem; }
.place { text-align: center; font-size: 1.7rem; margin: 2px 0 8px; color: var(--ink); overflow-wrap: anywhere; }
.mapbox { overflow-x: auto; overflow-y: hidden; border-radius: 14px; border: 2px solid var(--edge); margin: 6px 0; -webkit-overflow-scrolling: touch; background: var(--sky-bg); }
.mapbox:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
svg.pmap { display: block; height: auto; max-width: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; background: var(--sky-bg); }
svg.pmap.live { cursor: crosshair; }
svg.pmap .grat { fill: none; stroke: color-mix(in srgb, var(--sky) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
svg.pmap .land { fill: color-mix(in srgb, var(--leaf) 42%, var(--card)); stroke: color-mix(in srgb, var(--leaf-ink) 70%, transparent); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
svg.pmap .pin { stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
svg.pmap .pin.you { fill: var(--accent); } svg.pmap .pin.ans { fill: var(--ok); }
svg.pmap .dot { fill: #fff; }
svg.pmap .ripple { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; }
svg.pmap .ripple.ans { stroke: var(--ok); }
svg.pmap .hit { fill: transparent; cursor: grab; touch-action: none; }
svg.pmap .link { stroke-width: 2.4; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; opacity: 0; animation: fadein .4s .45s forwards; }
svg.pmap .tip { font: 700 13px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; opacity: 0; animation: fadein .3s .6s forwards; }
svg.pmap .mk.plop .bounce { animation: plop .55s cubic-bezier(.3, 1.2, .5, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
svg.pmap .mk.plop .ripple { animation: ripple .7s .18s ease-out both; transform-box: fill-box; transform-origin: center; }
svg.pmap .mk.late.plop .bounce { animation-delay: .3s; } svg.pmap .mk.late.plop .ripple { animation-delay: .48s; }
svg.pmap .mk.late .bounce { opacity: 0; } svg.pmap .mk.late.plop .bounce { opacity: 1; }
@keyframes plop { 0% { transform: translateY(-60px) scale(.9, 1.15); opacity: 0; } 45% { opacity: 1; } 62% { transform: translateY(0) scale(1.18, .78); } 80% { transform: translateY(-9px) scale(.96, 1.05); } 100% { transform: none; opacity: 1; } }
@keyframes ripple { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }
.tools { display: flex; gap: 10px; margin: 6px 0; }
.tools .btn { flex: 1; }
.hintline { text-align: center; margin: 4px 0 8px; }
.reveal { text-align: center; font-weight: 700; margin: 10px 0 4px; font-size: 1.05rem; }
.reveal .pts { color: var(--ok); }
.rounds { list-style: none; margin: 10px 0; padding: 0; }
.rounds li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 6px; align-items: baseline; padding: 8px 10px; border-radius: 12px; background: var(--soft); margin: 4px 0; }
.rounds li span.pl { font-weight: 600; overflow-wrap: anywhere; }
.rounds li small { color: var(--muted); display: block; font-weight: 500; }
.rounds li b { font-variant-numeric: tabular-nums; }
.about { font-size: .78rem; color: var(--muted); margin-top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.legend { display: flex; gap: 14px; justify-content: center; font-size: .82rem; color: var(--muted); margin: 4px 0 8px; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; background: var(--accent); }
.legend span.t::before { background: var(--ok); }
svg.pmap .link.b0, svg.pmap .link.b1 { stroke: var(--ok); } svg.pmap .link.b2 { stroke: var(--gold-edge); } svg.pmap .link.b3 { stroke: var(--accent); }
svg.pmap.still .link, svg.pmap.still .tip { animation: none; opacity: 1; }