/* Retro sunset look shared by the mix designs: chunky outlines, offset shadows,
   Righteous headings. Each page sets the color variables and its header. */
:root { --outline:#2d1b3d; --pop:#2d1b3d; --card:#fff6e8; --text:#2d1b3d; --muted:#6b5672;
        --accent:#ff5d73; --accent-text:#fff6e8; --hl:#ffd166; --quip:#e8455a; }
body { font: 15px/1.4 "DM Sans", system-ui, sans-serif; color: var(--text); }

header.scene { position: relative; flex: none; height: 196px; overflow: hidden; }
header.scene svg.mtns { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-block { position: absolute; left: 22px; top: 16px; z-index: 2; }
.title-block b { display: block; font: 38px/1 "Righteous", cursive; letter-spacing: .5px; }
.title-block .subtitle { font: 800 14px/1.2 "DM Sans"; margin-top: 5px; letter-spacing: .3px; }
.hud { position: absolute; right: 18px; top: 16px; z-index: 2; display: flex; gap: 8px; align-items: center; }
.stat { background: var(--card); color: var(--text); border: 3px solid var(--outline); box-shadow: 3px 3px 0 var(--pop); border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 14px; }
#helpBtn { width: 38px; height: 38px; border-radius: 50%; background: var(--hl); border: 3px solid var(--outline); box-shadow: 3px 3px 0 var(--pop); font: 20px "Righteous"; color: var(--outline); }

main { margin-top: -12px; }
.map-card { background: var(--card); border: 3px solid var(--outline); border-radius: 36px; box-shadow: 7px 7px 0 var(--pop); }
.photo-card { top: 24px; left: 24px; width: min(34%, 440px); transform: rotate(2.5deg); filter: drop-shadow(5px 5px 0 var(--pop)); }
.photo-card.mini { width: 150px; }
.stamp { --r: 7px; background: var(--card); padding: calc(var(--r) * 2);
  -webkit-mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)), linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)), linear-gradient(#000 0 0) content-box; }
#photo { background: var(--outline); border: 3px solid var(--outline); }
#credit { color: var(--muted); padding: 6px 2px 0; }
#photoToggle { background: var(--hl); color: var(--outline); border: 2px solid var(--outline); top: 20px; right: 20px; }
#bar { background: var(--card); border: 3px solid var(--outline); border-radius: 999px; box-shadow: 5px 5px 0 var(--pop); padding: 8px 10px 8px 22px; }
#msg .big { font-weight: 800; }
#msg .quip { font: 18px/1.15 "Righteous", cursive; color: var(--quip); margin: 2px 0; }
#btn { background: var(--accent); color: var(--accent-text); border: 3px solid var(--outline); box-shadow: 4px 4px 0 var(--pop); border-radius: 999px; padding: 10px 20px; font: 18px "Righteous"; }
#btn:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pop); }

.landmark i { background: var(--outline); box-shadow: 0 0 0 1px var(--outline); }
.landmark span { background: var(--card); border: 1px solid var(--outline); color: var(--outline); }

.modal { background: #2d1b3daa; }
.sheet { background: var(--card); color: var(--text); border: 3px solid var(--outline); border-radius: 20px; box-shadow: 8px 8px 0 var(--pop); }
.sheet h2 { font: 28px "Righteous"; color: var(--accent); }
.sheet .x { color: var(--outline); }
.final { font-family: "Righteous"; font-weight: 400; }
.verdict { font: 20px "Righteous"; color: var(--quip); margin: 0 0 8px; }
#copy { background: var(--accent); color: var(--accent-text); border: 3px solid var(--outline); box-shadow: 4px 4px 0 var(--pop); border-radius: 999px; padding: 9px 18px; font: 17px "Righteous"; }
.ghost { background: var(--hl); color: var(--outline); border: 3px solid var(--outline); box-shadow: 4px 4px 0 var(--pop); border-radius: 999px; padding: 9px 18px; font: 17px "Righteous"; }

@media (max-width: 760px) {
  header.scene { height: 140px; }
  .title-block { left: 12px; top: 10px; }
  .title-block b { font-size: 24px; }
  .title-block .subtitle { font-size: 11.5px; }
  .hud { right: 10px; top: auto; bottom: 30px; }
  .stat { font-size: 11.5px; padding: 2px 8px; }
  #helpBtn { width: 30px; height: 30px; font-size: 16px; }
  main { margin-top: -18px; }
  .photo-card { width: 56%; top: 14px; left: 12px; }
  #bar { border-radius: 22px; padding-left: 14px; }
}

/* leaderboard button next to the help button */
.round-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 3px solid var(--outline); box-shadow: 3px 3px 0 var(--pop); font-size: 17px; line-height: 1; }
/* end-of-game thumbnails: tap to see the photo full size */
.thumbs { display: flex; gap: 6px; margin: 6px 0 10px; }
.thumb { position: relative; flex: 1; min-width: 0; padding: 0; border: 2px solid var(--outline); border-radius: 8px; overflow: hidden; background: var(--outline); cursor: zoom-in; aspect-ratio: 4 / 3; max-width: 92px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { position: absolute; top: 2px; left: 2px; background: #fff; color: var(--outline); border-radius: 999px; font: 800 11px/1 "DM Sans"; padding: 2px 5px; }
.thumb em { position: absolute; bottom: 1px; right: 2px; font-style: normal; font-size: 14px; }
#msg .thumbs { margin: 4px 0 0; }
#msg .thumb { max-width: 70px; }
/* leaderboard */
.sheet { max-height: calc(100vh - 32px); overflow: auto; }
.sheet h3 { font: 20px "Righteous"; color: var(--outline); margin: 16px 0 6px; }
.post-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post-row input { flex: 1; min-width: 150px; font: inherit; padding: 9px 12px; border: 3px solid var(--outline); border-radius: 999px; background: #fff; color: var(--text); }
.post-row button { background: var(--accent); color: var(--accent-text); border: 3px solid var(--outline); box-shadow: 3px 3px 0 var(--pop); border-radius: 999px; padding: 8px 16px; font: 16px "Righteous"; }
.post-row .note { flex-basis: 100%; margin: 0; color: var(--quip); }
.board-tabs { display: flex; gap: 6px; margin: 10px 0 6px; }
.board-tabs button { border: 2px solid var(--outline); background: var(--card); color: var(--outline); border-radius: 999px; padding: 3px 12px; font-weight: 800; }
.board-tabs button.on { background: var(--hl); }
.board-list { margin: 0; padding: 0 0 0 26px; }
.board-list li { padding: 4px 0; border-bottom: 1px dashed #d8cbb8; }
.board-list li span { font-weight: 700; }
.board-list li b { float: right; }
.board-list li small { font-weight: 500; opacity: .7; }
@media (max-width: 760px) { .round-btn { width: 30px; height: 30px; font-size: 14px; } }
/* link-preview still frame (index.html?og) */
.og .photo-card, .og #bar, .og .hud, .og .maplibregl-ctrl { display: none !important; }
/* preview frame: sign height (top to post bottoms) equals the space below it; header grows to fit */
.og header.scene { height: 330px; }
.og .sign { width: 445px; top: 12px; left: 22px; }
.og .og-tag { display: block; }
.og-tag { display: none; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; background: var(--card);
  border: 3px solid var(--outline); box-shadow: 5px 5px 0 var(--pop); border-radius: 999px; padding: 8px 24px; font: 22px "Righteous"; color: var(--outline); white-space: nowrap; }
.percentile { font: 800 15px/1.3 "DM Sans"; color: var(--outline); margin: -4px 0 8px; }
.percentile:empty { display: none; }