/* ============================================================
   CONFIG — tuneable feel. Everything cozy lives here.
   ============================================================ */
:root{
  --bg:#0c0b0a;
  --bg-soft:#16140f;
  --ink:#1c1a17;
  --paper:#fdfcf7;
  --paper-edge:#f1eee3;
  --warm:#d8c4a0;
  --warm-deep:#b89a68;
  --line:#7c6f5a;
  --good:#7bae7e;
  --ok:#d6b56a;
  --meh:#cf9b6f;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:radial-gradient(120% 90% at 50% 0%, #1b1813 0%, var(--bg) 70%);
  color:#efe9dc;
  font-family:"EB Garamond",Georgia,serif;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;}

/* ---------- persistent title bar (all screens) ---------- */
#topbar{
  display:none;width:100%;align-items:center;justify-content:center;
  padding:13px 16px;cursor:pointer;position:sticky;top:0;z-index:600;
  background:rgba(12,11,10,.82);backdrop-filter:blur(7px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
#topbar.show{display:flex;}
.topbar-title{font-family:"Caveat",cursive;font-size:30px;line-height:1;color:var(--paper);
  text-shadow:0 1px 10px rgba(0,0,0,.5);}

/* ---------- shared screen scaffolding ---------- */
.screen{min-height:100%;display:none;flex-direction:column;align-items:center;padding:18px 16px 40px;}
.screen.active{display:flex;}

/* ============================================================
   TITLE
   ============================================================ */
#title-screen{justify-content:center;}
.intro{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:34px;max-width:420px;width:100%;
}
/* mobile: stack the text block with a calm, even rhythm */
.intro-text{display:flex;flex-direction:column;align-items:center;width:100%;gap:14px;}
.brand{font-family:"Caveat",cursive;font-size:62px;line-height:.95;color:var(--paper);
  text-shadow:0 2px 18px rgba(0,0,0,.5);}
.tag{font-style:italic;opacity:.7;font-size:18px;max-width:32ch;margin:0;}

/* ---------- hero: a small stack of tilted polaroids ---------- */
.hero-stack{position:relative;width:230px;height:248px;flex:none;}
.hero-pol{position:absolute;left:50%;top:50%;background:var(--paper);
  padding:11px 11px 0;border-radius:3px;
  box-shadow:0 22px 48px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.4) inset;}
.hero-pol .hp-ph{width:172px;height:172px;overflow:hidden;border-radius:1px;background:#ddd;}
.hero-pol .hp-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(.98);}
.hero-pol .hp-cap{font-family:"Caveat",cursive;color:#2a2722;font-size:20px;
  text-align:center;padding:7px 2px 11px;line-height:1;}
.hp3{transform:translate(-50%,-50%) rotate(-9deg) translateX(-30px);z-index:1;}
.hp2{transform:translate(-50%,-50%) rotate(7deg)  translateX(28px);z-index:2;}
.hp1{transform:translate(-50%,-50%) rotate(-2deg);z-index:3;}

/* ---------- intro actions: two matched buttons ---------- */
.intro-actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px;}
.btn-primary,.btn-ghost{
  font-size:17px;font-style:italic;letter-spacing:.3px;
  height:52px;border-radius:40px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--paper);color:var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.45);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,0,0,.55);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent;color:var(--warm);border:1px solid #3a3023;}
.btn-ghost:hover{border-color:var(--warm-deep);color:var(--paper);}
.intro-msg{font-style:italic;font-size:14.5px;color:var(--meh);max-width:34ch;
  margin:0 auto;min-height:0;line-height:1.35;}
.intro-msg.show{min-height:1.4em;}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
/* ---------- check / test roll ---------- */
#check-screen{justify-content:flex-start;}
.check-wrap{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.check-head{text-align:center;}
.check-title{font-family:"Caveat",cursive;font-size:40px;line-height:1;color:var(--paper);}
.check-sub{font-style:italic;font-size:14.5px;color:var(--warm);margin-top:6px;line-height:1.35;}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:560px){.check-grid{grid-template-columns:repeat(3,1fr);}}
.chk{position:relative;background:var(--paper);padding:7px 7px 0;border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);}
.chk-ph{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block;background:#ddd;}
.chk.bad{opacity:.55;}
.chk-badge{position:absolute;top:11px;right:11px;font-size:12px;font-weight:700;
  padding:2px 8px;border-radius:20px;color:#fff;line-height:1.3;}
.chk.good .chk-badge{background:var(--good);}
.chk.bad .chk-badge{background:var(--meh);}
.chk-cap{font-family:"Caveat",cursive;color:#2a2722;text-align:center;font-size:14px;
  padding:5px 2px 7px;line-height:1.05;min-height:1.6em;}
/* tap affordance shown under every cell's caption */
.chk-edit{display:block;width:100%;background:transparent;color:#6a6253;
  font-family:"EB Garamond",serif;font-style:italic;font-size:11.5px;
  padding:0 2px 6px;text-align:center;letter-spacing:.2px;}
.chk.bad .chk-edit{color:#9a5f3f;font-weight:600;}
.chk-edit:hover{color:#2a2722;}

/* ---------- hand-label editor (modal sheet) ---------- */
#label-sheet{position:fixed;inset:0;z-index:800;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(8,7,6,.62);backdrop-filter:blur(3px);}
#label-sheet.show{display:flex;}
.label-card{background:var(--bg-soft);border:1px solid #2a261f;
  border-radius:18px 18px 0 0;width:100%;max-width:480px;
  padding:18px 18px 24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 -16px 50px rgba(0,0,0,.6);animation:rise .3s ease;}
@media (min-width:520px){.label-card{border-radius:18px;margin-bottom:24px;}}
.label-head{display:flex;align-items:center;gap:12px;}
.label-thumb{width:54px;height:54px;border-radius:6px;object-fit:cover;
  background:#ddd;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.4);}
.label-head .lt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.label-head .lt b{font-family:"Caveat",cursive;font-size:24px;color:var(--paper);
  font-weight:700;line-height:1;}
.label-head .lt span{font-style:italic;font-size:12.5px;color:var(--warm);opacity:.85;}
.label-card .save-btn{background:var(--paper);color:var(--ink);font-size:16px;
  font-style:italic;padding:13px;border-radius:30px;width:100%;letter-spacing:.3px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);}
.label-card .save-btn:disabled{opacity:.32;cursor:default;box-shadow:none;}
.label-card .cancel-link{background:transparent;color:var(--warm);font-style:italic;
  font-size:13.5px;padding:2px;opacity:.75;}
.label-card .cancel-link:hover{opacity:1;color:var(--paper);}
.check-note{font-size:12.5px;font-style:italic;color:var(--warm-deep);text-align:center;
  line-height:1.4;max-width:40ch;margin:2px auto 0;opacity:.85;}
.check-title-field{display:flex;flex-direction:column;gap:7px;width:100%;
  max-width:440px;margin:6px auto 2px;text-align:left;}
.check-title-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--warm);opacity:.7;padding-left:2px;}
.check-title-label em{font-style:italic;text-transform:none;letter-spacing:0;opacity:.75;}
.check-title-input{width:100%;box-sizing:border-box;background:#221f19;color:#efe9dc;
  border:1px solid #38332a;border-radius:10px;padding:12px 14px;font-family:inherit;
  font-size:16px;transition:border-color .2s,box-shadow .2s;}
.check-title-input::placeholder{color:#8a8170;font-style:italic;}
.check-title-input:focus{outline:none;border-color:var(--warm-deep);
  box-shadow:0 0 0 3px rgba(184,154,104,.18);}
.check-actions{display:flex;flex-direction:column;gap:10px;}
@media (min-width:560px){.check-actions{flex-direction:row;}}
.subtle{font-size:13px;opacity:.4;font-style:italic;
  border-top:1px solid rgba(255,255,255,.07);padding-top:18px;width:100%;}
/* quiet share affordance (title + end) */
.share-link{background:transparent;color:var(--warm);font-style:italic;font-size:14px;
  opacity:.7;text-decoration:underline;text-underline-offset:3px;padding:4px 2px;}
.share-link:hover{opacity:1;color:var(--paper);}

@media (min-width:820px){
  .intro{
    flex-direction:row;text-align:left;align-items:center;
    gap:54px;max-width:880px;
  }
  .intro .hero-stack{width:300px;height:320px;}
  .hero-pol .hp-ph{width:228px;height:228px;}
  .hero-pol .hp-cap{font-size:24px;}
  .intro-text{display:flex;flex-direction:column;align-items:flex-start;
    max-width:400px;}
  .brand{font-size:74px;}
  .tag{margin-left:0;}
  .intro-actions{flex-direction:row;flex-wrap:wrap;}
  .btn-primary,.btn-ghost{width:auto;padding:0 28px;flex:1;min-width:0;}
  .subtle{text-align:left;}
}

/* ============================================================
   ROUND
   ============================================================ */
#round-screen{width:100%;max-width:560px;margin:0 auto;gap:14px;}

.roll-strip{display:flex;align-items:center;gap:10px;width:100%;justify-content:center;
  font-size:13px;letter-spacing:3px;opacity:.55;text-transform:uppercase;}

/* share bar — quiet footer line under the round; flashes on develop */
.roll-banner{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:520px;margin:14px auto 0;padding:7px 14px;
  background:transparent;border:1px solid transparent;border-radius:12px;
  font-size:12.5px;font-style:italic;color:var(--warm);opacity:.55;
  transition:background .3s,border-color .3s,box-shadow .3s,opacity .3s;}
.roll-banner:hover{opacity:1;}
.roll-banner[hidden]{display:none;}
.roll-banner.flash{background:rgba(123,174,126,.14);border-color:var(--good);
  color:var(--paper);box-shadow:0 8px 26px rgba(0,0,0,.45);opacity:1;}
.roll-banner-btn{flex:0 0 auto;background:transparent;color:var(--warm);border:none;
  border-radius:8px;padding:2px 4px;font-family:inherit;font-style:normal;
  font-size:12.5px;cursor:pointer;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;}
.roll-banner-btn:hover{color:var(--paper);}
.sprockets{display:flex;gap:5px;}
.sprocket{width:8px;height:11px;border-radius:2px;background:#3a3530;}
.sprocket.done{background:var(--warm-deep);}
.sprocket.now{background:var(--paper);box-shadow:0 0 8px var(--warm);}

/* ---------- the polaroid (hero) ---------- */
.polaroid{
  background:var(--paper);
  padding:14px 14px 0;
  border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.4) inset;
  width:min(86vw,360px);
  transform:rotate(-1.1deg);
  transition:transform .6s cubic-bezier(.2,.8,.25,1);
}
.polaroid.revealed{transform:rotate(0.4deg);}
.photo-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#ddd;border-radius:1px;}
.photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(.98);}
.photo-grain{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 30%, transparent 60%, rgba(60,40,20,.12) 100%);
  mix-blend-mode:multiply;}

/* the blank caption strip that gets "written" on reveal */
.caption-strip{
  min-height:74px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:8px 6px 12px;gap:1px;
}
.cap-place,.cap-date{font-family:"Caveat",cursive;color:#2a2722;line-height:1.05;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease, transform .5s ease;}
.cap-place{font-size:27px;font-weight:600;}
.cap-date{font-size:21px;font-weight:500;color:#5a5246;}
.polaroid.revealed .cap-place{opacity:1;transform:none;transition-delay:.35s;}
.polaroid.revealed .cap-date{opacity:1;transform:none;transition-delay:.7s;}

/* ---------- guessing controls (secondary to the photo) ---------- */
.rightcol{width:min(92vw,420px);display:flex;flex-direction:column;gap:12px;}
.controls{display:flex;flex-direction:column;gap:12px;}
/* swap region holds inputs OR reveal — reserve the taller (reveal) height so the
   column never grows/jumps on lock-in. extra top margin gives the section breathing room. */
.swap{min-height:248px;margin-top:6px;}

.panel{background:var(--bg-soft);border:1px solid #2a261f;border-radius:14px;padding:12px 14px;}
.panel-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.5;margin-bottom:8px;}
/* bare section caption sitting above its content box (no surrounding panel) */
.section-label{margin-bottom:0;padding-left:2px;}

/* typed-location guess — alternative to dropping a pin */
.geo-row{display:flex;gap:8px;margin-bottom:10px;}
.geo-row input{flex:1;min-width:0;background:#221f19;color:#efe9dc;border:1px solid #38332a;
  border-radius:9px;height:48px;padding:0 13px;font-size:16px;font-family:inherit;}
.geo-row input::placeholder{color:#8a8170;font-style:italic;}
.geo-row input:focus{outline:none;border-color:var(--warm-deep);}
.geo-btn{background:var(--paper);color:var(--ink);font-style:italic;font-size:15px;
  padding:0 18px;height:48px;border-radius:9px;flex:none;letter-spacing:.2px;}
.geo-btn:disabled{opacity:.4;cursor:default;}
.geo-msg{font-style:italic;font-size:13.5px;color:var(--warm);opacity:0;min-height:0;
  margin:-4px 0 8px;line-height:1.3;transition:opacity .2s;}
.geo-msg.show{opacity:.85;min-height:1.3em;}
.geo-msg.err{color:var(--meh);}

/* map: collapsed by default, expands when placing the pin */
#map-panel{padding:0;overflow:hidden;}
.map-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;}
.map-head .hint{font-style:italic;opacity:.7;font-size:15px;}
.map-head .pin-state{font-size:14px;color:var(--warm);}
#map{height:0;transition:height .4s ease;background:#0f0e0c;}
#map-panel.expanded #map{height:300px;}
#map-panel.expanded .map-head .hint:after{content:" — tap the map";opacity:.5;}
.leaflet-container{font-family:inherit;background:#0f0e0c;}

/* the TRUE-location marker on reveal — a warm teardrop, distinct from the blue guess pin */
.truth-pin{width:20px;height:20px;background:var(--warm-deep);border:2.5px solid #fff;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 9px rgba(0,0,0,.55);}
.truth-tip{background:var(--warm-deep);color:#1a1611;border:none;font-style:italic;
  font-size:12px;font-family:inherit;font-weight:600;padding:3px 8px;border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.45);white-space:nowrap;}
.truth-tip:before{border-top-color:var(--warm-deep)!important;}

/* month / year */
.dt-row{display:flex;gap:10px;align-items:stretch;}
.dt-field{flex:1;display:flex;flex-direction:column;gap:6px;}
.dt-field span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.45;}
select,.year-box{background:#221f19;color:#efe9dc;border:1px solid #38332a;border-radius:9px;
  height:48px;line-height:1;padding:0 12px;font-size:16px;font-family:inherit;box-sizing:border-box;}
.year-box{display:flex;align-items:center;justify-content:space-between;padding:0 6px;}
.year-box button{background:transparent;color:var(--warm);font-size:22px;width:34px;height:34px;border-radius:8px;}
.year-box button:active{background:#2e2a22;}
.year-box .yv{font-size:18px;width:60px;min-width:54px;text-align:center;
  background:transparent;border:none;color:#efe9dc;font-family:inherit;
  padding:2px 0;border-radius:6px;outline:none;-moz-appearance:textfield;}
.year-box .yv:focus{background:#2e2a22;color:#fff;}

.lock-btn{
  background:var(--paper);color:var(--ink);font-size:17px;font-style:italic;
  padding:13px;border-radius:30px;width:100%;letter-spacing:.3px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .15s, opacity .2s;}
.lock-btn:disabled{opacity:.32;cursor:default;box-shadow:none;}
.lock-btn:not(:disabled):active{transform:translateY(2px);}

/* ---------- reveal card ---------- */
.reveal{display:none;flex-direction:column;gap:10px;}
.reveal.show{display:flex;animation:rise .5s ease;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.score-row{background:var(--bg-soft);border:1px solid #2a261f;border-radius:14px;padding:13px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.score-row .meta{display:flex;flex-direction:column;gap:2px;}
.score-row .kind{font-style:italic;font-size:17px;}
.score-row .detail{font-size:13px;opacity:.5;}
.score-row .num{font-family:"Caveat",cursive;font-size:40px;font-weight:700;line-height:1;}
.next-btn{background:var(--warm-deep);color:#1a1611;font-size:17px;font-style:italic;
  padding:13px;border-radius:30px;width:100%;box-shadow:0 10px 26px rgba(0,0,0,.4);}
.next-btn:active{transform:translateY(2px);}

/* ============================================================
   DESKTOP / WEB — two-column round (photo left, controls right)
   ============================================================ */
@media (min-width:820px){
  #round-screen.active{
    display:grid;
    max-width:1040px;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    column-gap:54px;
    row-gap:20px;
    align-items:center;
    padding:34px 28px 48px;
  }
  /* roll strip spans the top; share banner spans the bottom */
  #round-screen.active .roll-strip{grid-column:1 / -1;grid-row:1;}
  #round-screen.active .roll-banner{grid-column:1 / -1;grid-row:3;justify-self:center;}

  /* LEFT — the hero, vertically centered, a touch larger */
  #round-screen.active .polaroid{
    grid-column:1;grid-row:2;
    justify-self:center;align-self:center;
    width:min(40vw,430px);
  }

  /* RIGHT — the whole right column (map + controls/reveal) shares this cell */
  #round-screen.active .rightcol{
    grid-column:2;grid-row:2;
    align-self:center;justify-self:stretch;
    width:100%;max-width:430px;
  }

  /* desktop has room — keep the map open in the right column */
  #map{height:300px;}
  .map-head{cursor:default;}
}

/* ============================================================
   CONTACT SHEET (end)
   ============================================================ */
#end-screen{width:100%;max-width:760px;margin:0 auto;gap:18px;justify-content:center;}
.contact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;
}
.mini{position:relative;background:var(--paper);padding:7px 7px 0;border-radius:2px;
  transform:rotate(var(--r,0deg));box-shadow:0 8px 20px rgba(0,0,0,.5);}
.mini .ph{width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:1px;}
.mini .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);}
.mini .cap{font-family:"Caveat",cursive;color:#2a2722;text-align:center;font-size:15px;
  line-height:1.02;padding:5px 2px 7px;}
.mini .cap small{display:block;color:#6a6253;font-size:13px;}
.mini .pts{position:absolute;top:9px;right:9px;background:rgba(20,17,12,.82);color:var(--paper);
  font-family:"Caveat",cursive;font-size:17px;font-weight:700;padding:1px 8px;border-radius:20px;}

/* the score cell in the center of the roll — sits bare on the dark bg, no box */
.center-tile{
  grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8px;gap:4px;
}
.center-tile .ct-name{font-family:"Caveat",cursive;font-size:25px;color:var(--paper);line-height:.95;}
.center-tile .ct-total{font-family:"Caveat",cursive;font-size:46px;font-weight:700;color:var(--warm);line-height:.9;}
.center-tile .ct-of{font-size:11px;opacity:.5;letter-spacing:1px;}
.center-tile .again-btn{background:var(--paper);color:var(--ink);font-style:italic;font-size:15px;
  padding:9px 22px;border-radius:30px;box-shadow:0 8px 24px rgba(0,0,0,.4);margin-top:8px;}
.center-tile .make-own-btn{background:transparent;color:var(--warm);font-style:italic;font-size:14px;
  padding:7px 20px;border-radius:30px;border:1px solid #3a3023;margin-top:6px;}
.center-tile .make-own-btn:hover{color:var(--paper);border-color:var(--line);}
.center-tile .ct-high{font-size:11px;opacity:.45;letter-spacing:.5px;margin-top:9px;}
.center-tile .ct-high.is-new{opacity:.7;color:var(--warm);}
.center-tile .ct-share{margin-top:11px;font-size:13px;}

@media (max-width:520px){
  .contact-grid{gap:9px;}
  .mini .cap{font-size:13px;}
  .center-tile .ct-name{font-size:18px;}
  .center-tile .ct-total{font-size:34px;}
  .center-tile .again-btn{font-size:13px;padding:7px 16px;margin-top:5px;}
  .center-tile .ct-high{margin-top:7px;}
}