@font-face {font-family:Inter;src:url('/challenge-assets/fonts/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
/* Layout recipes for the web surface. All branded values come from design.js. */
:root { color-scheme: dark; --bg:Canvas; --ink:CanvasText; --muted:GrayText; --accent:ButtonFace; --onAccent:ButtonText; --accentText:LinkText; --panel:Canvas; --raised:ButtonFace; --line:GrayText; --display:system-ui; --gutter:18px; --space:1; --type:1; --weight:700; --ratio:1.18; --radius:10px }
* {box-sizing:border-box}
[hidden] {display:none!important}
body {background:var(--bg); color:var(--ink); margin:0; font:calc(1rem * var(--type))/1.45 var(--body,system-ui,sans-serif)}
main {max-width:34rem; margin:auto; padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
.mast {font:var(--weight) 1.7rem/1.1 var(--display); letter-spacing:-.055em; text-align:center; padding:calc(1.1rem * var(--space)) 0; border-bottom:1px solid var(--line)}
h1 {font:var(--weight) clamp(1.85rem, 6.5vw, 2.65rem)/1.06 var(--display); letter-spacing:-.047em; margin:.38rem 0}
p {margin:.45rem 0 .95rem; color:var(--muted)}
section {margin:calc(1.5rem * var(--space)) 0 calc(1rem * var(--space))}
.byline {display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem .75rem; margin:calc(1.15rem * var(--space)) 0 .55rem}
#author {font-weight:650; overflow-wrap:anywhere}
#hint,.kicker,.legend {color:var(--muted); font-size:.89em}
#photo {display:block; width:100%; aspect-ratio:var(--ratio); max-height:54vh; background:var(--mediaBg); object-fit:cover; border-radius:var(--radius)}
#map {height:clamp(16rem,42svh,23rem); width:100%; isolation:isolate; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); font-family:inherit}
.leaflet-container .leaflet-control-zoom a {color:var(--ink); background:var(--raised); border-color:var(--line); width:36px; height:36px; line-height:36px}
.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-attribution a {background:var(--panel); color:var(--muted)}
.place-label {color:var(--ink); white-space:nowrap; width:max-content!important; text-shadow:0 1px 3px var(--bg); font:500 11px/1 system-ui; pointer-events:none}
.map-actions,.legend {display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 .65rem}
.legend span:first-child {color:var(--accentText)}
label {display:block; font-weight:650; margin:calc(1rem * var(--space)) 0 .4rem}
input,button,.install {font:inherit; min-height:46px; border-radius:var(--radius)}
input {background:var(--panel); border:1px solid var(--line); padding:.65rem .8rem; color:var(--ink); width:100%; font-size:max(16px,1em)}
button,.install {display:inline-flex; align-items:center; justify-content:center; font-weight:650; padding:.65rem 1rem; border:0; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--onAccent)}
form>button {width:100%; margin:calc(.9rem * var(--space)) 0 0}
button:disabled {background:var(--raised); color:var(--muted); cursor:default}
button.text-button {background:transparent; color:var(--accentText); font-size:.86em; padding:.3rem 0; min-height:44px}
:focus-visible {outline:2px solid var(--accentText); outline-offset:2px}
#delivered {margin-top:1rem; overflow-wrap:anywhere}
#name,#author,#points,#hint {overflow-wrap:anywhere}
.invitation code {display:block; font:650 1.5em/1.2 monospace; padding:.7rem 0 1.2rem}

.photo-frame {position:relative; display:block; width:100%; padding:0; background:var(--mediaBg)}
.photo-frame span {position:absolute; right:.55rem; bottom:.55rem; border-radius:50%; width:1.7rem; height:1.7rem; line-height:1.7rem; background:var(--overlay); color:var(--mediaInk)}
dialog {position:fixed; inset:0; width:100vw; height:100dvh; max-width:100%; max-height:100%; padding:0; border:0; background:var(--mediaBg); color:var(--mediaInk)}
dialog[open] {display:grid; grid-template-rows:auto 1fr}
.viewer-bar {text-align:right; padding:max(.8rem, env(safe-area-inset-top)) 1rem 0}
dialog button {width:auto; background:var(--overlay); color:var(--mediaInk)}
dialog img {width:100%; height:100%; min-height:0; object-fit:contain}
.place-label.label-probe {position:absolute;visibility:hidden;display:inline-block}

/* Privater Fotobrief im Hochformat. */
.photo-story {
  display:grid;
  grid-template-areas:"credit" "photo" "heading";
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  margin-bottom:1.25rem;
}
.photo-story .byline {grid-area:credit; min-width:0}
.photo-story .photo-frame {grid-area:photo; min-width:0}
.photo-story #guess-heading,.photo-story #result {grid-area:heading; min-width:0}
.photo-credit {display:grid; min-width:0; gap:.05rem}
#initial {display:none}
#hint:empty {display:none}
.photo-story .photo-frame {align-self:stretch; overflow:hidden}

/* Moment: portrait photo directly below its sender. */
[data-feed=social] .mast {text-align:left}
[data-feed=social] .byline {justify-content:flex-start; gap:.65rem}
[data-feed=social] #initial {
  display:grid; place-items:center; flex:none; width:2.5rem; height:2.5rem;
  border-radius:50%; background:var(--accent); color:var(--onAccent); font-weight:700;
}
[data-photo=portrait] #photo {aspect-ratio:var(--ratio); max-height:68svh}
[data-feed=social] .invitation section {background:var(--panel); border-radius:var(--radius); padding:1.25rem}

body {min-height:100svh; background:radial-gradient(ellipse at 92% 4%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 58vh),var(--bg)}
.mast {background:color-mix(in srgb,var(--panel) 62%,transparent); border:1px solid var(--line); border-radius:var(--radius); margin-top:.65rem; padding:.75rem 1rem; backdrop-filter:blur(12px)}
[data-feed=social] .invitation section {border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 85%,transparent)}

.help-links {margin:1.25rem 0}
.help-links a,.test-info a {color:var(--accentText);padding:.35rem 0;text-underline-offset:.16em}
.test-info h2 {font-size:1.18rem;line-height:1.3;margin:1.75rem 0 .55rem}

.map-viewport {position:relative}
.place-search {position:absolute; z-index:2; top:.6rem; right:.6rem; width:min(11.5rem,calc(100% - 4rem))}
.place-search:focus-within {width:min(18rem,calc(100% - 4rem))}
.place-search input {min-height:44px; border:1px solid var(--line); border-radius:2rem; background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(10px)}
.place-options {margin-top:.3rem; max-height:min(12rem,24svh); overflow:auto; overscroll-behavior:contain; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:.3rem}
.place-options button {width:100%; align-items:flex-start; flex-direction:column; background:transparent; color:var(--ink); text-align:left}
.place-options button:is(:hover,:focus-visible) {background:var(--raised)}
.place-options small {color:var(--muted); font-weight:400}

#locked {max-width:28rem;margin:2rem auto;text-align:center}
#qr {display:block;max-width:100%;height:auto;margin:1.5rem auto .5rem;border-radius:var(--radius)}
#phone {color:var(--accentText);text-underline-offset:.2em}
#copy-code {background:var(--panel);color:var(--ink)}
#pins {list-style:none;padding:0}
#pins li {padding:.6rem 0;border-bottom:1px solid var(--line)}