:root {
  --bg: #0B0F14;
  --panel: #111820;
  --line: #1B2634;
  --text: #E6EDF3;
  --muted: #8B98A5;
  --accent: #7CE0C3;
  --you: #FFB547;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: 'Instrument Sans', system-ui, sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
button { font-family: inherit; cursor: pointer; }

#app {
  height: 100dvh; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* header */
#top .row { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.brand { font-weight: 600; letter-spacing: 0.02em; width: 72px; }
.round { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.round small { color: var(--muted); font-weight: 400; }
.score-mini { width: 72px; text-align: right; color: var(--muted); font-size: 13px; }
.progress { display: flex; gap: 6px; margin-top: 8px; }
.progress div { flex: 1; height: 3px; border-radius: 2px; background: #243040; }
.progress div.done { background: var(--accent); }
.progress div.current { background: var(--accent); opacity: 0.5; }
.notice { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* crop */
.crop { position: relative; flex: 0 0 clamp(220px, 38dvh, 360px); border-radius: 16px; overflow: hidden; background: #0A2240; }
.crop-btn { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.crop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.crop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chips { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.chip { font-size: 11px; line-height: 1; padding: 6px 8px; border-radius: 6px; background: rgba(11,15,20,0.78); color: var(--text); }
.chip-meta { position: absolute; right: 12px; bottom: 12px; color: var(--muted); }
.hint-btn { position: absolute; left: 12px; bottom: 12px; border: 1px solid #243040; font-family: inherit; cursor: pointer; }
.hint-btn:hover { border-color: var(--accent); }
.hint-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint-btn[hidden] { display: none; }
.crop.hinted img { object-fit: contain; }
.hint-box { position: absolute; pointer-events: none; border: 2px solid var(--you); border-radius: 3px; box-shadow: 0 0 0 1px rgba(11,15,20,0.6); }
.hint-box[hidden] { display: none; }
.crop.hinted .chip-meta { display: none; }

/* map */
.map-wrap { position: relative; flex: 1; min-height: 160px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0F1620; }
#map { position: absolute; inset: 0; background: #0F1620; }
.map-hint { position: absolute; left: 12px; top: 12px; z-index: 500; pointer-events: none; font-size: 12px; color: var(--muted); background: rgba(11,15,20,0.78); padding: 6px 8px; border-radius: 6px; }
.leaflet-container { font-family: inherit; cursor: crosshair; }
.leaflet-control-attribution { background: rgba(11,15,20,0.7) !important; color: var(--muted) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--muted) !important; }

/* result */
.result { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; row-gap: 6px; padding: 0 2px; }
.result[hidden] { display: none; }
.result .right { text-align: right; }
.label { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.big { font-size: 30px; font-weight: 600; line-height: 1.1; }
.big.accent { color: var(--accent); }
.of { font-size: 15px; color: var(--muted); font-weight: 400; }

/* score quips */
.quip { flex: 1 0 100%; order: 3; margin: 0; font-size: 14px; line-height: 1.35; color: var(--text); text-align: center; text-wrap: balance; }
.quip:empty { display: none; }
.quip-sum { margin: 0 0 14px; color: var(--muted); }

/* buttons */
.bar { display: flex; gap: 10px; }
.primary { flex: 1; height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: #0B0F14; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
.primary:disabled { background: #243040; color: #6B7886; cursor: not-allowed; }
.primary:focus-visible, .ghost:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.summary-card .primary { width: 100%; flex: none; }
.ghost { width: 100%; height: 48px; margin-top: 8px; border-radius: 14px; border: 1px solid #243040; background: transparent; color: var(--text); font-size: 15px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(5,8,12,0.96); }
.lightbox[hidden], .summary[hidden] { display: none; }
.lightbox-scroll { position: absolute; inset: 0; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.lightbox-scroll img { display: block; width: min(220vw, 1400px); max-width: none; margin: 0 auto; }
.lightbox-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 2001; width: 44px; height: 44px; border-radius: 22px; border: 1px solid #243040; background: rgba(11,15,20,0.85); color: var(--text); font-size: 26px; line-height: 1; }

/* summary */
.summary { position: fixed; inset: 0; z-index: 3000; background: rgba(5,8,12,0.88); display: flex; align-items: center; justify-content: center; padding: 20px; }
.summary-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.total { font-size: 56px; font-weight: 600; line-height: 1.1; color: var(--accent); margin: 4px 0 12px; }
.sum-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sum-list li { display: flex; justify-content: space-between; font-size: 15px; padding: 10px 12px; border-radius: 10px; background: #0F1620; }
.sum-list .mono { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: no-preference) {
  .primary { transition: background 0.15s; }
}

/* ---------- wide screens (laptops, desktops, tablets in landscape) ----------
   Image and map sit side by side. The image panel is a square sized from the viewport height
   so the whole picture shows without cropping; the map takes the rest of the width.
   Phones and portrait tablets keep the stacked layout above. */
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  #app {
    --panel: max(320px, min(calc(100dvh - 250px), calc(50vw - 40px)));
    max-width: 1560px;
    display: grid;
    grid-template-columns: var(--panel) minmax(0, 1fr);
    grid-template-rows: auto var(--panel) auto auto;
    align-content: center;
    column-gap: 20px;
    row-gap: 14px;
    padding-left: 24px;
    padding-right: 24px;
  }
  #top { grid-column: 1 / -1; }
  .crop { grid-column: 1; grid-row: 2; flex: none; }
  .map-wrap { grid-column: 2; grid-row: 2; min-height: 0; }
  .result { grid-column: 1 / -1; width: min(860px, 100%); justify-self: center; flex-wrap: nowrap; align-items: center; }
  .quip { flex: 1 1 auto; order: 1; padding: 0 20px; font-size: 15px; }
  .result .right { order: 2; }
  .bar { grid-column: 1 / -1; width: min(420px, 100%); justify-self: center; }
  .chip, .map-hint { font-size: 12px; }
  .summary-card { max-width: 460px; }
}