:root{
  --bg:#14110f; --panel:#1d1a17; --ink:#f2ece4; --muted:#a49a8d;
  --accent:#c8873f; --good:#5f9e63; --line:#332e29;
  --header:44px; --foot:26px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 "Iowan Old Style",Georgia,"Times New Roman",serif;
  overflow:hidden;
}
button{
  font:inherit; font-size:15px; cursor:pointer; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  padding:.5em 1.1em;
}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.4; cursor:default}

/* ---- header / footer ---- */
#bar{
  height:var(--header); display:flex; align-items:center; gap:1.2rem;
  padding:0 1rem; border-bottom:1px solid var(--line); background:var(--panel);
}
#brand{font-weight:700; letter-spacing:.06em; color:var(--accent)}
#progress{color:var(--muted); font-size:14px}
#decade{margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums}
#foot{
  position:fixed; bottom:0; left:0; right:0; height:var(--foot);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 1rem; font-size:11px; color:var(--muted);
  background:var(--panel); border-top:1px solid var(--line);
}

/* ---- split layout ---- */
#game{display:flex; height:calc(100% - var(--header) - var(--foot))}
#photo-pane{position:relative; flex:1 1 60%; background:#0b0908; overflow:hidden}
#map-pane{
  flex:0 0 38%; display:flex; flex-direction:column;
  border-left:1px solid var(--line); min-width:280px;
}
#map{flex:1}
#map-actions{padding:.7rem 1rem; border-top:1px solid var(--line); background:var(--panel)}
#prompt{margin:0 0 .6rem; font-size:13px; color:var(--muted)}
#confirm{width:100%}
#rule{margin:-.3rem 0 .6rem; font-size:11.5px; color:var(--muted); opacity:.8}

/* ---- deep zoom ---- */
/* Positioning is entirely the transform's job — no flex centering here,
   or the two fight and the image lands off-centre. */
#viewport{
  position:absolute; inset:0; cursor:grab; overflow:hidden;
  touch-action:none;
}
#photo{position:absolute; top:0; left:0}
#viewport.dragging{cursor:grabbing}
#photo{
  transform-origin:0 0; user-select:none; -webkit-user-drag:none;
  image-rendering:auto; max-width:none;
}
#zoom-hint{
  position:absolute; left:12px; bottom:12px; font-size:11px; color:var(--muted);
  background:rgba(0,0,0,.55); padding:.3em .7em; border-radius:3px;
  pointer-events:none; transition:opacity .5s;
}
#zoom-controls{position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:6px}
#zoom-controls button{width:34px; height:34px; padding:0; line-height:1; background:rgba(0,0,0,.6)}

/* ---- overlays ---- */
[hidden]{display:none!important}
#reveal,#summary{
  position:fixed; inset:0; z-index:1000; display:flex;
  align-items:flex-start; justify-content:center; padding:2.2rem 1rem;
  background:rgba(10,8,7,.93); overflow-y:auto;
}
#reveal-card,#summary-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:1.4rem 1.6rem; max-width:620px; width:100%;
}
#reveal-distance{margin:0; font-size:26px}
#reveal-score{margin:.2rem 0 1rem; color:var(--accent)}
#reveal-map{height:230px; border-radius:4px; margin-bottom:1.1rem}
#credit{
  display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem;
  margin:0 0 1.2rem; font-size:13.5px;
}
#credit dt{color:var(--muted)}
#credit dd{margin:0}
#credit a{color:var(--accent)}
#next,#share{width:100%}
#summary-card{text-align:center}
#summary-card h1{margin:.2rem 0 1rem; font-size:22px; font-weight:normal}
#summary-squares{font-size:30px; letter-spacing:.14em; margin:.4rem 0}
#summary-total{font-size:20px; color:var(--accent); margin:0 0 1.3rem}
#share-note{color:var(--good); font-size:13px}
#comeback{color:var(--muted); font-size:13px}

/* ---- shared result (#r= link) ----
   Placeholder look; the real card is a design parameter, see docs/design-brief.md. */
#shared{
  position:fixed; inset:0; z-index:1100; overflow-y:auto; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1rem; text-align:center;
}
#shared h1{margin:0 0 .6rem; font-size:22px; font-weight:normal; color:var(--accent)}
.shared-squares{font-size:30px; letter-spacing:.14em; margin:.2rem 0 .8rem}
#shared ol{list-style:decimal inside; padding:0; margin:0 0 .8rem; color:var(--muted); font-size:14px}
.shared-total{font-size:20px; margin:0 0 1.4rem}
.shared-play{
  color:var(--ink); background:var(--panel); border:1px solid var(--accent);
  border-radius:4px; padding:.7em 1.4em; text-decoration:none;
}

/* ---- mobile ---- */

@media (max-width:760px){
  #game{flex-direction:column}
  #foot{font-size:10px}
  #foot span:last-child{display:none}
  #photo-pane{flex:1 1 auto; min-height:46vh}
  #map-pane{flex:0 0 42vh; border-left:none; border-top:1px solid var(--line)}
  #progress{display:none}
}