*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;line-height:1.4;color:#222;background:#fafafa}
.topbar{display:flex;align-items:center;justify-content:center;padding:12px 16px;border-bottom:1px solid #eaeaea;background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;gap:8px;align-items:center}
.brand h1{font-size:20px;margin:0}
.controls{display:flex;gap:16px;align-items:center}
.switch{display:flex;gap:6px;align-items:center;cursor:pointer}
.admin-link{font-size:14px;text-decoration:none;color:#444;border:1px solid #ddd;padding:6px 10px;border-radius:10px;background:#fff}
.view{max-width:960px;margin:0 auto;padding:16px}
#searchInput{width:100%;font-size:18px;padding:12px;border:1px solid #ccc;border-radius:12px;outline:none}
#results{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.result{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;border:1px solid #e5e5e5;background:#fff;cursor:pointer}
.result:hover{border-color:#ccc}
.meta{font-size:14px;color:#666}
.card{background:#fff;border:1px solid #eaeaea;border-radius:14px;padding:12px;margin:8px 0}
.map-wrap{position:relative;border:1px solid #eaeaea;background:#fff;border-radius:14px;overflow:hidden}
.map-wrap object{width:100%;height:auto;display:block}
.marker{position:absolute;width:28px;height:28px;border-radius:50%;border:4px solid #ffd60a;background:rgba(255, 214, 10, 0.25);transform:translate(-50%,-50%);animation:pulse 1.4s ease-in-out infinite}
.marker-note{position:absolute;left:10px;bottom:10px;background:#000;color:#fff;padding:6px 8px;border-radius:8px;opacity:0.85}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,214,10,0.6)}70%{box-shadow:0 0 0 16px rgba(255,214,10,0)}100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}}
.warn{background:#fff3cd;border:1px solid #ffe69c;color:#7a5e00;padding:10px;border-radius:12px;margin-top:10px}
.back{background:#fff;border:1px solid #ddd;padding:8px 10px;border-radius:10px;cursor:pointer}
.footer{padding:16px;text-align:center;color:#666}
.large *{font-size:larger}

#searchTitle{font-size:18px}

#searchView{text-align:center}

#welcomePhoto{
  display:block;
  width:50vw;
  max-width:600px;
  height:auto;
  margin:12px auto 0 auto;
  border-radius:14px;
}

#seatView .card{
  width:min(720px,96%);
  max-width:720px;
  padding:10px 14px;
  margin:8px auto;
  display:block;
}
#seatView .card h2{margin:0}
#seatView .card p{margin:4px 0}
.back{margin-bottom:8px}

#welcomeLine{font-weight:400}

#seatTitleWrap{font-size:16px;line-height:1.3}

html, body, main, .view { background: #F0E8FF }


/* Overlay */
.overlay[hidden]{ display:none }
.overlay{ position:fixed; inset:0; background:#F0E8FF; z-index:9999; overflow:auto; -webkit-overflow-scrolling:touch }
.overlay-inner{ max-width:960px; margin:0 auto; padding:12px 16px }

.overlay-close{ background:#fff; border:1px solid #ddd; border-radius:10px; padding:6px 10px; cursor:pointer }
.overlay-instructions{ font-size:14px; line-height:1.4; margin:8px 0 4px; color:#333 }
#overlaySearch{ width:100%; font-size:16px; padding:10px 12px; border:1px solid #ddd; border-radius:10px; }
.overlay-results{ list-style:none; margin:12px 0 24px; padding:0; display:grid; gap:8px }
.overlay-results .result{ background:#fff; border-radius:12px; padding:12px; border:1px solid #eee }
.overlay-results .result .name{ font-weight:600 }
.overlay-results .result .meta{ font-size:12px; opacity:.8 }


/* Banner with background image */
.banner{
  
  
  
  

  position: relative;
  background-image: url('1000010630.jpg');
  
  background-position: center;
  background-repeat: no-repeat;
   /* increased vertical height for proportional look */
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  
  background-position: center;
  

}
.banner .title{
  background: rgba(255,255,255,0.15);
  padding: 10px 16px;
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

.overlay-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:44px; margin-top:4px;
}
.overlay-close{ order: 2; }
.overlay-instructions{ order: 1; flex: 1 1 auto; white-space: normal; }

/* Cropped, centered banner that fills mobile width without horizontal scrolling */
.banner{
  width: 100vw;
  max-width: 100%;
  height: calc(100vw * 0.7998046875); /* 1638 / 2048 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: calc(50% - 50vw); /* ensure full-bleed on devices with page padding */
}
@media (min-width: 768px){
  /* cap height on tablets/desktops so it doesn't become too tall */
  .banner{ height: min(520px, calc(100vw * 0.5)); }
}
/* Prevent accidental horizontal scrolling */
html, body{ overflow-x: hidden; }