:root{--teal:#08716f;--line:#d4dfe2}
#viewport{width:100%;aspect-ratio:1;overflow:hidden;position:relative;border:1px solid var(--line);border-radius:6px;touch-action:pan-y;background:#e9dfb9}#viewport.zoomed{touch-action:none;cursor:grab}#plane{position:absolute;left:0;top:0;transform-origin:0 0;width:100%;height:100%}#map-image{display:block;width:100%;height:100%;user-select:none}#markers{position:absolute;inset:0;pointer-events:none}.marker{position:absolute;width:44px;height:50px;min-height:0;border:0;background:none;padding:0;pointer-events:auto;transform:translate(-50%,-50%) scale(var(--inverse));display:flex;align-items:center;flex-direction:column;justify-content:end}.marker:hover{background:transparent}.marker .number{position:absolute;bottom:32px;border:1px solid #766244;border-radius:4px;background:#fffef5;font-size:13px;line-height:19px;min-width:26px;color:#293f42}.marker .cross{font-size:36px;font-weight:650;line-height:36px;color:#b92636;text-shadow:1px 1px #fff,-1px -1px #fff,1px -1px #fff,-1px 1px #fff;position:absolute;top:7px}.marker[aria-pressed=true] .number{background:var(--teal);color:#fff;border-color:var(--teal)}.marker[aria-pressed=true] .cross{color:var(--teal)}
#map-error{position:absolute;inset:10px;background:#fff;padding:20px}
.source-badge{padding:1px 7px;border-radius:4px;background:#e6f4ef;color:#086357}.source-badge.game8{background:#fff0cc;color:#775118}
.fragment{height:auto}
.marker .number{bottom:40px}
.marker .leader{position:absolute;left:22px;top:25px;height:1px;background:#665f4c;transform-origin:0 0;pointer-events:none}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}.hint{font-size:14px;color:#536a76}.area-picker{display:flex;align-items:center;gap:8px;margin-bottom:12px}.area-picker select{min-width:0;width:100%}.source-badge{display:inline-block;font-size:11px!important;margin:0 3px 3px}.fragment-choices .empty{display:grid;place-items:center;aspect-ratio:430/365;font-size:14px}footer{max-width:1320px;margin:auto;padding:1rem 1.5rem;font-size:13px;color:#637984}

/* Keep the template layout. The supplied crop and its coordinate cross share one box. */
.detail-frame{position:relative;width:100%;aspect-ratio:430/365;background:#e8dfc7;border-radius:5px;overflow:hidden}
.fragment-choices .detail-frame img,.fragment-reference .detail-frame img,.detail-frame svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;margin:0;max-width:none;max-height:none}
.detail-frame svg{pointer-events:none}
.map-toolbar .quiet[aria-pressed=true]:hover{background:var(--teal);color:#fff}
.fragment-reference .detail-frame{max-width:430px;margin:.7rem auto}
@media(min-width:1100px){.fragment-choices .detail-frame{max-height:155px}}
@media(max-width:420px){.fragment-choices .detail-frame{max-height:112px}}