*{box-sizing:border-box}
html,body{height:100%;margin:0}
body.framed{
  background:#000;
  color:#eef3f7;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;
}

.frame{
  display:grid;
  height:100%;
  width:100%;
  grid-template-columns: clamp(40px, 5vw, 60px) 1fr clamp(40px, 5vw, 60px);
  grid-template-rows: clamp(80px, 12vw, 110px) 1fr clamp(40px, 6vw, 56px);
  grid-template-areas:
    "top top top"
    "left map right"
    "bot bot bot";
}

.frame-top{
  grid-area:top;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  background:#000;
  z-index:2;
}
.frame-title{
  margin:0;
  text-align:center;
  font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:clamp(0.95rem, 2.6vw, 1.85rem);
  line-height:1.25;
  color:#e0a050;
  text-shadow:0 1px 0 #5c3a1e, 0 0 18px rgba(180,100,40,.35);
  letter-spacing:.01em;
  max-width:92vw;
}

.frame-left{grid-area:left}
.frame-right{grid-area:right}
.frame-side{
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  padding:6px 0;
  pointer-events:none;
}
.frame-bottom{
  grid-area:bot;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  gap:12px;
  padding:4px 12px;
  pointer-events:none;
}
.deco-svg{width:clamp(22px, 3.5vw, 42px); height:auto; opacity:.85; flex-shrink:0}
.deco-svg.small{width:clamp(18px, 3vw, 32px)}
.deco-svg.barrel{width:clamp(28px, 4.5vw, 52px)}

.map-window{
  grid-area:map;
  position:relative;
  min-height:0;
  min-width:0;
  border-radius:10px;
  overflow:hidden;
  border:2px solid #c4893a;
  box-shadow:0 0 0 1px rgba(224,160,80,.25), inset 0 0 0 1px rgba(0,0,0,.4);
  background:#1a1208;
}
#map{position:absolute;inset:0;z-index:0}

.map-hud{
  position:absolute;
  top:10px; right:10px;
  z-index:500;
  pointer-events:none;
}
.hud-pill{
  display:inline-block;
  background:rgba(0,0,0,.72);
  color:#e0c9a0;
  padding:5px 10px;
  border-radius:999px;
  font-size:.75rem;
  border:1px solid rgba(196,122,58,.35);
}

.fab{
  position:absolute;
  right:12px; bottom:12px;
  z-index:500;
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(145deg,#d4923a,#a86428);
  color:#fff; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  border:1px solid rgba(232,192,120,.35);
}
.fab:active{transform:scale(.96)}

.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:600;
  max-height:50%; overflow:auto;
  background:#2a1c0e;
  border-radius:14px 14px 0 0;
  padding:14px 14px 20px;
  box-shadow:0 -8px 24px rgba(0,0,0,.45);
  border-top:1px solid rgba(196,122,58,.4);
}
.sheet[hidden]{display:none}
.sheet-close{position:absolute;top:6px;right:10px;border:0;background:transparent;color:#c49a6c;font-size:1.4rem;cursor:pointer}
.sheet img,.popup img{max-width:100%;border-radius:8px;margin-top:8px;display:block}
.popup img{max-width:200px}

.bourbon-pin{background:transparent;border:0}
.bourbon-pin-inner{
  width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(145deg,#e0a050,#b87333);border:2px solid #f0d090;
  box-shadow:0 2px 6px rgba(0,0,0,.4)
}

/* Upload page */
body:not(.framed){background:#1a1208;color:#eef3f7;overflow:auto}
.wrap{max-width:560px;margin:0 auto;padding:32px 20px}
h1{font-size:1.6rem;margin:.2em 0;color:#e8c078;font-family:"Libre Baskerville",Georgia,serif}
.lead{font-size:1.1rem;color:#c49a6c}.small{font-size:.9rem;color:#a88860}
.btn{display:inline-block;background:linear-gradient(145deg,#d4923a,#a86428);color:#fff;border:0;border-radius:10px;padding:12px 18px;font-size:1rem;text-decoration:none;margin:6px 0;width:100%;text-align:center}
.btn.secondary{background:#3d2a18}label{display:block;margin:10px 0;font-size:.9rem;color:#c49a6c}
input,textarea{display:block;width:100%;margin-top:4px;padding:10px;border-radius:8px;border:1px solid #5c3a1e;background:#0a0806;color:#fff;font-size:1rem}
.row{display:flex;gap:10px}.row label{flex:1}

@media (max-width:480px){
  .frame{
    grid-template-columns: 36px 1fr 36px;
    grid-template-rows: 72px 1fr 44px;
  }
  .frame-title{font-size:clamp(0.82rem, 4.2vw, 1.05rem); padding:0 4px}
  .deco-svg{width:20px}
  .deco-svg.barrel{width:26px}
  .fab{width:48px;height:48px;right:8px;bottom:8px}
}

.pin-badge{position:absolute;top:-6px;right:-8px;width:16px;height:16px;border-radius:50%;
  background:#e0a050;border:1.5px solid #fff;font-size:9px;line-height:13px;text-align:center;
  color:#1a1208;transform:none;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.bourbon-pin-wrap{position:relative;width:22px;height:22px}

/* Stacked photo marker above pin */
.photo-stack-icon{background:transparent!important;border:0}
.photo-stack{
  position:relative;width:64px;height:56px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.photo-stack .stack-thumb{
  position:absolute;width:44px;height:44px;object-fit:cover;
  border-radius:6px;border:2px solid #f0d090;background:#2a1c0e;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  left:10px;top:6px;
}
.photo-stack .stack-thumb:nth-child(1){transform:rotate(-8deg) translate(-6px,-2px);z-index:1}
.photo-stack .stack-thumb:nth-child(2){transform:rotate(4deg) translate(4px,-4px);z-index:2}
.photo-stack .stack-thumb:nth-child(3){transform:rotate(-2deg) translate(0,0);z-index:3}
.photo-stack .stack-count{
  position:absolute;right:0;bottom:0;z-index:5;
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#c4893a;color:#1a1208;font-size:11px;font-weight:700;
  line-height:20px;text-align:center;border:1.5px solid #fff;
}

/* Gallery modal */
.modal{position:absolute;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden]{display:none!important}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.modal-panel{
  position:relative;z-index:1;width:min(920px,96%);max-height:86%;
  overflow:auto;background:#1a1208;border:1px solid rgba(196,122,58,.5);
  border-radius:14px;padding:16px 14px 18px;box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.modal-title{margin:0 36px 12px 0;font-family:"Libre Baskerville",Georgia,serif;color:#e8c078;font-size:1.15rem}
.modal-close,.lightbox-close{
  position:absolute;top:6px;right:10px;border:0;background:transparent;
  color:#e0c9a0;font-size:1.8rem;line-height:1;cursor:pointer;z-index:2;
}
.gallery-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
@media(min-width:700px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1000px){
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
}
.gallery-grid button{
  display:block;padding:0;border:2px solid #c4893a;border-radius:8px;
  overflow:hidden;background:#2a1c0e;cursor:pointer;aspect-ratio:1;
}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block}

/* Full lightbox */
.lightbox{position:absolute;inset:0;z-index:800;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none!important}
.lightbox img{max-width:92%;max-height:86%;object-fit:contain;border-radius:6px;
  border:1px solid rgba(224,160,80,.35);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  border:0;background:rgba(42,28,14,.85);color:#e8c078;
  width:44px;height:44px;border-radius:50%;font-size:1.6rem;cursor:pointer;
  border:1px solid rgba(196,122,58,.45);
}
.lightbox-nav.prev{left:8px}
.lightbox-nav.next{right:8px}

.stop-marker-icon{background:transparent!important;border:0}
.stop-marker{
  position:relative;width:70px;height:86px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.stop-marker .photo-stack{margin-bottom:2px;cursor:pointer}
.stop-marker .pin-under-stack{margin-top:-2px}


/* Border traveler names */
.frame{position:relative}
#borderNames{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.border-name{
  position:absolute;
  font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:700;
  color:#d4a056;
  text-shadow:0 1px 0 #3d2412, 0 0 10px rgba(180,100,40,.25);
  opacity:.88;
  line-height:1;
  white-space:nowrap;
  user-select:none;
}
/* Desktop scatter: left / right / bottom / top corners — avoid map & title center */
.bn-1{top:18px; left:2.2%; font-size:clamp(0.7rem,1.5vw,1.05rem); transform:rotate(-12deg)}
.bn-2{top:42%; left:0.6%; font-size:clamp(0.65rem,1.35vw,0.95rem); transform:rotate(9deg); writing-mode:vertical-rl; text-orientation:mixed}
.bn-3{top:38%; right:0.5%; font-size:clamp(0.65rem,1.35vw,0.95rem); transform:rotate(-8deg); writing-mode:vertical-rl; text-orientation:mixed}
.bn-4{bottom:10px; left:38%; font-size:clamp(0.7rem,1.45vw,1rem); transform:rotate(6deg)}
@media (max-width:480px){
  .border-name{opacity:.82}
  .bn-1{top:10px; left:2%; font-size:0.62rem; transform:rotate(-6deg)}
  .bn-2{top:48%; left:1px; font-size:0.58rem; transform:rotate(4deg)}
  .bn-3{top:40%; right:1px; font-size:0.58rem; transform:rotate(-4deg)}
  .bn-4{bottom:6px; left:42%; font-size:0.62rem; transform:rotate(3deg)}
}
/* end border names */